HTML基础设施
（1）文件应以<!DOCTYPE.....>首行顶格开始，这句话告诉浏览器这是一个什么文件，我们推荐使用<!DOCTYPE html>。
（2）必须在head元素内部的meta标签内声明文档的字符编码charset, 如：<meta charset="UTF-8">，这句代码告诉浏览器应该此HTML文件使用的字符集是什么，如果不加此行代码，那么在浏览器中可能显示为乱码。
（3） 页面的title是极为重要的不可缺少的一项。
2.HTML代码结构和视觉顺序基本保持一致
（1）.按照从上之下，从左到右的视觉顺序书写HTML结构。
（2）.有时候为了便于搜索引擎抓取，我们也会将重要内容在HTML结构顺序上提前，以为搜索引擎抓取网页内容是自上而下的，所以将重要内容在HTML结构顺序上提前可便于抓取重要的内容。
（3）.不要使用table布局，现在基本上被淘汰了，而应该代之以div来布局，方便控制。
3.结构、表现、行为三者分类，避免内联。
（1）.使用link引入外部css文件到head中。注意：一般我们不适用@import来引入外部css文件。
（2）.使用script将js文件引入，并置于body底部，这时js文件会最后加载，html会最先加载，用户体验会更好。
4.保持良好的树形结构
- 每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。
- 使用4个空格代替1个Tab（大多数编辑器中可设置）。
- 对于内容较为简单的表格，建议将tr写成单行。
- 你也可以在大的模块之间用空行隔开，使模块更清晰。
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>404</title>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style></style>
</head>
<body>
<div class="box">
<div class="box__img">
<p>******</p>
</div>
<div class="box__desc">
<p>******</p>
<ul>
<li>******</li>
</ul>
</div>
</div>
</body>
</html>
5.其他需要注意的问题
（1）.一个标签上引用的className不要过多，越少越好。
（2）.对于一个语义化的内部标签，应该尽量避免使用className。
6.属性排序
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
1.class 2.id,name 3.data-* 4.src,for,type,href 5.title,alt 6.aria-*,role
例如：
<a class="" id="" data-model="model" href="javascript:void(0);"> example </a> <input class="control" type="text"> <img src="" alt="">
HTML代码格式
1.说明文案的注释方法
（1）开始注释：<!-- 注释文案 -->
（2）结束注释：<!-- /注释文案 -->
（3）允许只有开始注释。
<!-- 顶部 -->
<div class="box">
<!-- logo -->
<div class="box__img">
<p></p>
</div>
<!-- /logo -->
<!-- 导航 -->
<ul class="box__nav">
<li></li>
<li></li>
<li></li>
<li></li>
<!-- 更多 -->
</ul>
<!-- /导航 -->
</div>
<!-- /顶部 -->
2.严格嵌套
（1）.应当以最严格的xhtml strict标准来嵌套，不如内联元素不能包含块级元素等等。
（2）.正确闭合标签且必须闭合。
3.严格的属性
（1）.属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。
（2）.没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）。
（3）.可以省略style标签和script标签的type属性。