1、<!DOCTYPE HTML> 让浏览器自己选择渲染页面的标准，同时为了拥抱未来
2、<meta charset="utf-8" /> 定义页面字符编码，精简的代码，同样的效果
3、样式文件放头部，且尽量减少引入的文件数量
- <head>
- <!--CSS样式-->
- <link rel="stylesheet" href="xxx.min.css" />
- </head>
4、脚本文件放底部，当发布项目的时候尽量压缩合并
- <body>
- <!--JS代码-->
- <script src="xxx.min.js"></script>
- </body>
5、为页面添加注释
- <!--头部header-->
- <header></header>
- <!--头部header-->
- <div class="content"></content>
- <!--底部Footer-->
- <footer></footer>
6、缩进和换行 使用4个空格作为一个缩进层级，大多数时候，开发工具帮助我们完成了此项内容。
- // 不建议
- <ul><li><a href="#"></a></li><li><a href="#"></a></li></ul>
- // 建议
- <ul>
- <li><a href="#"></a></li>
- <li><a href="#"></a></li>
- </ul>
7、标签闭合
- // 不建议
- <br >
- <p> xxxx
- <p>xxxx
- // 建议
- <br />
- <p>xxx</p>
- <p>xxx</p>
8、标签名小写，标签属性值添加双引号
- // 不建议
- <P data-id=p1></P>
- // 建议
- <p data-id="p1"></p>
9、使用CSS为页面添加图片 当然页面上的动态内容还是必须使用<img src="#" />标签的
10、为图片标签添加alt和title属性，图片的src属性不能为空
- <img title="" src="#" />
11、为页面当中的块结构底部添加空白行
- <header>
- <h1>w3cfuns</h1>
- </header>
- <div class="content">
- // something
- </div>
- <footer>
- <p class="copyRight"></p>
- </footer>
12、去除样式引用和脚本引用当中的type属性
13、标签语义化
- 结构性元素：
p：表示段落，只能包含内联元素，不能包含块级元素
div：本身舞特殊含义，可用于布局，几乎可以包含任何元素
br：表示换行符
hr：表示水平分隔符
h1-h6：表示标题。其中h1用于表示当前页面最重要内容的标题，建议每个页面只有一个H1标签
blockquote：表示引用，可以包含多个段落。请勿纯粹为了缩进而使用blockquote，大部分浏览器默认将blockquote渲染为带有左右缩进
pre：表示一段格式化好的文本
- 头部元素：
title：每个页面必须有且仅有一个title元素
base：可用场景——首页，频道等大部分链接为新窗口打开的页面
link：用于引入CSS资源时，可省去media和type属性
style：type默认为text/css，可以省去
script：type属性可以省去；不赞成使用lang属性；
不要使用古老的<!-//-->这种hack脚本，它用于阻止第一代浏览器将脚本显示成文字；
- 列表元素：
ul：表示无须列表
ol：表示有序列表，可用于排行榜等；
li：表示列表项，必须是ol/ul的子元素
dl：表示关联列表，dd是对dt的解释；dt和dd的对应关系比较随意：一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd,都合法；可用于名称单词解释、日程列表、站点目录；
- 文本元素：
a：存在href属性时表示链接，无href属性但有name属性表示锚点
em,strong,i,b：表示句意强调，加与不加会引起语义变化，可用于表示不同的心情或语调；strong表示重要性强调，可用于局部或全局，strong强调的是重要性，不会改变句意；
abbr：表示缩写
sub,sup：主要用于数学和化学公式，sup还可用于脚注
span：本身无特殊含义
ins,del：分别表示从文档中增加（插入）和删除
- 表单元素：
推荐使用button代替input，但必须声明type属性
推荐使用fieldset,legend组织表单
表单的name不能设定为action，enctype,method,novalidate,target,submit会导致表单提交混乱