WEB前端开发最佳实践（2）

样式和结构分离

• 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属性，提高脚本加载执行的性能