欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Web前端高效开发总结二：HTML最佳实践

程序员文章站 2022-04-07 17:30:52
...

标准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>
添加必要的meta标签
具体用法可以参考：http://www.cnblogs.com/qinmengjiao123-123/p/5787424.html


编写高可读性的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样式来实现
所谓装饰性的元素指的是那些只是为了满足外观设计，并没有任何语义的元素，比如button按钮上的箭头，可以使用css设置背景图片并使用background-position进行移动实现，而不必在button内加入一个span或者img
避免使用table布局
从代码的简洁角度来说，使用table布局需要使用更多的标签，而使用html基本标签价css样式会让代码更清晰简洁。
从性能角度来说， 使用table布局存在性能问题，table中的任何动态改动都会导致整个表格布局的重绘或重排


参考文献

Web前端开发最佳实践一书
相关标签： html w3c web前端 搜索引擎 浏览器

上一篇： 用C++和EasyX图形库编写一个简单的打砖块游戏（上）

下一篇： 如何系统的学习web开发？（已有网站开发经验但不精） ?

推荐阅读