您的位置：首页 > Web前端

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

2017-10-30 16:45 651 查看

标准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前端开发最佳实践一书

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航