标准HTML代码的重要性
标准的HTML代码指的是HTML代码符合W3C的最新标准，对于一个标准的页面来说，具有的优点有：
1.标准的页面能保证浏览器正确的渲染
2.网页能更容易被搜索引擎搜寻，提高网站的搜索排名，爬虫的目的是读懂网站的内容，并找出网站中的关键字
3.提高网站的易用性，让网站能被更多的用户访问，尤其是那些视力或者肢体障碍者
4.网站能更好的被维护和扩展
在W3C上提供了一项免费的代码验证服务W3C Validator。它提供了三种验证方式：URL、本地文件上传和直接输入代码。访问网址为：http://validator.w3.org
标准的HTML页面结构
标准的HTML页面结构包含两部分，head和body，它的结构如下：
<html>
<head></head>
<body></body>
</html>
为了使得html文档能兼容标准格式，还需要给文档添加一个文档类型声明DTD，当浏览器解析HTML文档时会遵循指定的类型声明标准。HTML4的规范中定义了多个规范的文档声明，而HTML的规范中简化了文档类型声明。实例代码如下：
//html4
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN">
//html5
<!DOCTYPE HTML>
高效的进行html开发
正确的闭合HTML标签
对于自闭合标签，在XHTML规范中要求必须添加”/”表明标签的结束；在HTML4.01的规范中，不推荐添加”/”；在HTML5的规范中是可选的
对于非自闭合标签，一定要添加对应的闭合标签
停止使用不标准的标签和属性，对于过时的等标签使用加CSS类样式代替
将样式与结构分离
对于css样式，使用单独的css文件，并在html中使用标签引入。（这里需要注意的是，引入的方式有两种，而这里只介绍了link，没有介绍import，因为@import方式引入的css文件不能同时并行下载，这样会延长了整个页面的下载时间，影响了页面的加载性能，在任何场合下都不推荐使用）
在使用js的时候添加js禁用的提示信息
目前大多数浏览器都提供了js的支持，但是还是有少数的浏览器不支持js，并且一般的浏览器都会提供禁用js的选项。在禁用js的情况下，就需要考虑在js失效时如何让对应的功能正常使用。
最常用的方式是使用标签，该标签用于在js被禁用的情况下提供的一种替代方式，此时该标签中的内容会被浏览器解析，实例代码如下：
<script>
...
</script>
<noscript>
<p>当前浏览器不支持或者禁用了js</p>
</noscript>
自己可以测试一下禁用js时代码的运行结果，各浏览器禁用js的方式可以参考如下链接：各浏览器禁用某网站JS脚本的方法
noscript标签也有弊端，他只会在js被禁用时才起作用，在js因为防火墙拦截等情况下导致不可用时，并不会起作用，大多数情况下，我们进行开发都需要考虑到js不可用或者被禁用的情况，目前常用的有两种解决方式，使用服务端来处理js应该处理的事、还有一种就是针对js禁用的情况开发一个新的页面，通常可以结合这两个一起用，其中第二种方式可以结合noscript标签来用，如下：
<noscript>
<meta http-equiv="refresh" content="0;url=..." />
</noscript>
编写高可读性的HTML
使用html5提供/新增的语义化标签，比如header/footer/article等代替<div class=”header”></div>等
使用ul->li…等代替div->p等
网页层级标题设计建议
1.在页面内容的标题部分使用<hn>标签
2.一个html页面中最好只使用一个h1标题，表示页面的最顶级标题
3.使用<hn>标签时最好不要跳级
4.不要单纯的使用hn标签给内容设置样式，对于html来说应该更注重语义，外观交给css
精简HTML代码
删除多余的容器，常用的方式有兄弟组合成父子，层级缩小等
装饰性的元素使用css样式来实现
避免使用table布局
从代码的简洁角度来说，使用table布局需要使用更多的标签，而使用html基本标签价css样式会让代码更清晰简洁。
从性能角度来说， 使用table布局存在性能问题，table中的任何动态改动都会导致整个表格布局的重绘或重排
参考文献
Web前端开发最佳实践一书
扫一扫
1199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
