样式和结构分离
- 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命令
- charset设置编码
HTML语义化
- 语义化使搜索引擎和第三方抓取工具更容易读懂代码
- 去掉CSS也可以保持良好的外观
- div，span尽量少使用
- 把无关的元素重HTML中删除
- 添加一些隐藏文字
- 构建页面标题的最佳实践：
- 使用h1~h6标签
- 页面只是使用一个h1
- 使用过程中不要跳级
- 不要使用h1~h6设置样式
- 设计表单：
- 使用label标签，并设置label标签的for属性
- 给输入控件设置合适的水印提示
- 输入控件设置tab顺序
- 使用HTML5中引入的表单控件
精简HTML代码
- 删除多余的div，span容器
- 装饰性的元素使用CSS样式来实现
- 避免使用table布局
- HTML4.01中Transitional和Strict两种模式下规则不同（eg：行内元素是不能够包含块级元素），在HTML5可以相互包含
HTML5新特性使用
- 使用HTML5中简化的定义方式
- 定义文档类型声明 (标准模式)
- 定义页面编码
- 样式和脚本文件的引用
- async和defer属性
- 不使用在内联里面
- defer：以并行的方式下载脚本，而不是阻塞的方式下载，在脚本加载完成后，浏览器会在DOM触发之前按照引用顺序运行JS，当脚本不需要立即运行时，在标签中设置“defer”属性。 (立即脚本没有被包含在一个function块中,因此会在加载过程中执行。) 设置“defer”属性后，IE就不必等待该脚本装载和执行完毕。这样页面加载会更快。一般来说，这也表明立即脚本最好放在function块中，并在 document或者body对象的onload 句柄中处理该函数。在有一些脚本需要依赖用户操作而执行时—-例如点击按钮，或者移动鼠标到某个区域—-使用该属性非常有用。但当有一些脚本需要在页面加载过程中或加载完成后执行，使用defer属性得到的好处就不太大。
- async：以异步的方式下载脚本，在下载结束后立即执行代码，而不会等待页面解析结束
- 在设置async时候，推荐同时设置defer属性，提高脚本加载执行的性能
时间： 2024-12-19 05:54:03