代码符合标准
- 标准的页面会保证正确的渲染
- 页面容易被搜索引擎搜索，提高搜索排名(SEO)
- 提高网站的易用性
- 网页更好维护和扩展（Validator，HTML Validator 属于Firefox插件)
停止使用不标准的标签和属性，简化HTML代码
- 标签没有实际意义，仅设置样式（不推荐使用）
- 不推荐使用blink，marquee
- 让HTML拥有更好的语义
- 移除不常用的HTML标签
样式和结构分离
- HTML页面链接一个CSS（最优），提高加载速度
- HTML内嵌CSS（单一页面最佳，减少加载CSS样式文件的请求数目，加快加载速度
- 内联CSS样式，可以使用JS动态来统一修改，很少使用，JQ中使用其实现动画效果
- 在CSS样式文件中引用CSS文件，避免使用
添加JS禁用提示信息
- 使用noscrpt，HTML4只在body中起作用，HTML5中可以出现在head中，支持HTML，不支持XHTML
- 最好使用noscript，采用渐进增强的模式，平稳降级
添加必要的meta的标签
- meta的属性：name，http-equiv，content，charset
- name和content属性组合，构成名称/值对
- name中keywords，description最常用
- http-equiv和content属性结合，构成http命令
- 其中content-type，default-style，refresh已经确定，content-language，set-cookie 未正式确定
- charset设置编码
常用的meta方法
- 设置IE浏览器的兼容性
- 设置页面在移动设备中的显示
- 设置IE浏览器的固定网站功能
HTML语义化
- 语义化使搜索引擎和第三方抓取工具更容易读懂代码
- 去掉CSS也可以保持良好的外观
- div，span尽量少使用
- 把无关的元素重HTML中删除
- 添加一些隐藏文字
-
要求：
- 熟悉所有规范中的HTML标签，理解各标签的语义
- 熟悉各标签上规范的属性，给HTML标签设置必要的属性
- 样式和结构的分离
-
构建页面标题的最佳实践：
- 使用hx标签
- 页面只是使用一个h1
- hx使用过程中不要跳级
- 不要使用hx设置样式
-
设计表单：
- 使用label标签，并设置label标签的for属性
- 给输入控件设置合适的水印提示
- 输入控件设置tab顺序
- 使用HTML5中引入的表单控件
HTML5新特性使用
-
async和defer属性
- 不使用在内联里面
- defer：以并行的方式下载脚本，而不是阻塞的方式下载，在脚本加载完成后，浏览器会在DOM触发之前按照引用顺序运行JS
- async：以异步的方式下载脚本，在下载结束后立即执行代码，而不会等待页面解析结束
- 在设置async时候，推荐同时设置defer属性，提高脚本加载执行的性能
- 标签上的自定义属性data-*
- script可以编写HTML模板和XML数据
选择器注意
- 尽量不使用ID选择器
- 减少子选择器的层级（less和Sass的滥用）
使用组合CSS类选择器
兼容IE浏览器
- 兼容旧浏览器的代码，被称为hack代码
- 熟悉IE浏览器中常见的兼容样式
-
分离样式兼容代码
.color{ _color:green;} ( IE6 (含 IE6 ) 以下) .color{ *color:gray; } ( IE7 ( 含 IE7 )以下) .color { color:green \0; } ( IE8 + ) .color { color:green \ ; } ( IE8 . IE9 ) :root .color { color:green \0; } ( IE9 + ) .color { color:green \9\0; } ( IE9+ ) .color { color:green \9; } ( IE10 ( 含 IE10 ) 以下 ) *::-ms-backdrop, .color{ color:red; } ( IE11 ) * html .color { color: red; } (IE6 ONLY ) *+html .color { color: red; } ( IE7 ONLY ) @media screen\9 { .color { color: black; } } ( IE6 . IE7 ) @media \0screen { .color { color: black; } } ( IE8 ONLY ) @media \0screen, screen\9 { .color { color: black; } } ( IE6 . IE7 . IE8 ) @media screen\0 { .color { color: black; } } ( IE8 . IE9 . IE10 ) @media screen and (min-width: 0\0) { .color { color: black; } } ( IE9 . IE10 ) @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .color { color: black; } } ( IE10 ONLY ) @media all and (-ms-high-contrast:none){ .color { color:greeny \0; } } ( IE10 + ) @media all and (-ms-high-contrast:none){ *::-ms-backdrop, .color { color:green \0; } } ( IE11 + )
em，px，%
- px：绝对尺寸，em：应用元素上字体大小的两倍，%：相对于父元素的百分比
- 尽量设置相对尺寸
- 只有在可预知元素尺寸的情况下才使用绝对尺寸
- 使用em设置字体的大小