html语言书写注意事项,如何写出高效率的HTML

我们该如何提升网页的性能?

看到这个问题时，大多数开发者会想到图片优化、JavaScript优化、服务器配置升级、文件压缩甚至是CSS压缩这些方式。然而，网页的核心语言HTML却被忽视了。

如今，HTML的负担越来越重，在全球排名前100的网站中，平均每个页面的HTML代码大小有40k左右，其中Amazon和Yahoo平均每页的HTML代码有几千行，Youtube的首页甚至有3500个HTML元素。虽然降低每页HTML的复杂性、减少元素数量并不能使页面的加载时间提升很多，但是良好的HTML编码习惯是提升网页加载速度的一个重要基础。之所以写这篇文章，就是为了告诉你如何写出干净整洁的HTML代码，能够让你的网页在许多设备上都能快速正常的加载运行。在这个过程中，你能够学会如何搭建易于维护和Debug的网站以及app。

写代码的方式可以有很多种，特别是HTML。本文只是根据我们的经验来做出相对最好的建议，并不代表每条建议在任何情况下都能达到效果，仅供参考。

内容简介

各司其职：样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式；

一丝不苟：开发过程中一定要加入代码校验工具，以确保代码没有任何语法以及逻辑上的错误；

干净整洁：使用自动排版工具来保持代码结构和格式的一致性；

熟练语言：应了解所有的元素用法，并在HTML多使用语义化的元素；

一视同仁：设计过程中一定要考虑到所有的情况，备用方案很重要，甚至要专门为特殊人群使用ARIA (Accessible Rich Internet Application)，以保证你的网站可以通过屏幕阅读器或者纯文本浏览器来展示；

全面测试：通过各种工具来测试你的网站在不同设备和不同尺寸屏幕上的表现。

Web三基友

HTML的含义应该不多解释了，请自行百度百科。

首先要说的是，HTML和CSS两兄弟虽然彼此充满基情，但是也不能把关系搞得太复杂，样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式，比如不要仅仅为了使文字变大而使用

、

、

这些标题标签，也不要仅仅为了缩进而使用

标签。

Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默认样式表，HTML元素默认的显示方式都是由这些默认样式表来决定的。比如，Chrome中

默认的样式是32px bold，字体是Times.

基友三原则：

1. HTML用于建立结构，CSS用于渲染样式，JavaScript用于控制行为；

2. 首先完成HTML的设计，然后根据样式需求来设计CSS，最后在确实需要的情况下才设计JavaScript；

3. 将CSS和JavaScript文件进行归档，与HTML文件分开(这样不仅有助于页面缓存，而且可以使后期Debug更容易)，这之后再把CSS和JavaScript链接到HTML中，可以根据需要来对CSS和JavaScript代码进行压缩加密。

结构的搭建

HTML在结构上搭建上需要注意这些：

采用HTML5标准时开头应该加上，像这样：

html

Recipes: pesto

Pesto

Pesto is good!

应在head标签中引入CSS文件，这样浏览器就可以在输出HTML之前获取CSS信息：

html

My pesto recipe

在

标签的末尾引入JavaScript文件，这样可以在页面显示之后再编译JavaScript文件，以加快页面读取速度，同时有助于JavaScript对页面中的元素进行操作，像这样：

html

...

对元素的操作应添加在JavaScript代码中，而不要在HTML中添加，下面这个例子就是错误的，这样后期难以维护。

比如这样写就不太好：

index.html

html

...

...

Foo

...

这样写就好多了

index.html

html

...

...

Foo

...

js/local.js

javascriptinit();

var fooButton = document.querySelector('#foo');

fooButton.onclick = handleFoo();

代码校验

虽然现在浏览器的容错力越来越高，但这不能成为代码粗制滥造的借口。不管什么时候，正确的HTML代码都更易于debug、体积更小、运行更快、渲染时消耗资源更少，而错误的HTML代码只会使页面的最终设计难以实现想要的效果。特别是在使用模板来开发时，正确有效的HTML就更显得尤为重要，也许一个正常运行的模块会在其他环境中出现可怕的异常。

如何才能提高HTML的正确性呢？可以有这些方式：

在项目中加入校验过程：可以在代码编辑器中使用HTMLHint、SublimeLinter这类代码校验插件，也可以在build的时候使用HTMLHint with Grunt这类校验工具，还可以通过W3C HTML validator等网站来在线检测代码；

尽量采用HTML5标准；

确保正确的HTML层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug，特别是在使用模板的时候，如下所示：

html

...

在所有不能自动结束的元素末尾添加结束标签；

比如这个例子，这样写也可以可以正常运行：

html

Pesto is good to eat...

...and pesto is easy to make.

不过还是下面这样比较不容易出错：

html

Pesto is good to eat...

...and pesto is easy to make.

结束标签不是必须的，所以有些人认为可以不写，这可以接受，但是和标签一定要加：

html

• Basil
• Pine nuts
• Garlic

和元素必须要有结束标签：

html

Video element not supported.

另一方面，要去掉冗余代码：

像和这一类元素可以不加结束标签；

布尔型的属性可以不赋值，只要该属性出现，值就为true；

下面这样是可以运行的(没有加autoplay和controls)：

html

这样就不能运行，因为这两个属性值必须是true：

html

这样改一下就可以运行了：

html

这样写会更易读：

html

CSS和 JavaScript链接不需要type属性，他们就是他们。

良好的代码排版

保持一致的代码排版可以使HTML代码更易于理解、优化和debug，要做到良好的代码排版应注意以下这几点：

在项目中保持统一的HTML代码风格；

使用代码编辑器来帮助你自动排版，比如在Sublime Text中可以使用自带的Reindent，也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如CSS Beautifier和JS Beautifier；

在HTML中用缩进来分层更易于阅读，如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候，那就表示你需要重构一下你的HTML了；

缩进可以通过空格或者Tab来实现，但一定不要两者同时使用；

用更直接易读的方式写HTML代码，比如这句话，就可以很明显的看出这是个标题：

html

Contact

这样写的话就更像是一个链接：

html

Contact

元素要按常规放置，比如footer元素最好是放在HTML页面的底部，虽然理论上把它放在任何地方都可以正常运行；

统一所有引号的使用规则，不要这里用双引号，那里又单引号；

使用小写字母来写标签和属性，大写字母很不易读，像这样：

htmlHome

混合式的写法简直就是反人类：

html

Pesto

语义化设计

语义化的意思是从名称一眼就能看出其内容和作用是什么，HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素，比如, 和。

为了是你的代码更易理解，一定要针对内容使用相应的语义化元素：

标题使用

(

,

…)，列表使用

• 或者

1. ；

内容中的标题应该从

开始；

在适当的地方使用HTML5的新元素，比如, , 和；

正文中的文本内容要用

标签，内容的结构化可以使用HTML5的新元素(或者

)，不要颠倒；

修改文字样式时，和要比和更好些，因为前者语义更加明显；

中要包含元素，input元素要有type、placeholder以及其他必要的属性，即使值为空都可以；

不要把文字和元素混合在一起，这样容易导致布局出错，比如这样：

html

Name:

这样写会更好些：

html

Name:

布局

首先再次强调一遍：

样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式。

布局需要注意的问题有这些：

元素用来放文字，而不是用来布局。在浏览器自身的样式表中默认

有margin和其他样式；

想实现换行可以使用元素或者CSS的display属性，尽量避免使用
来换行。文字内容中的换行可以用
，但通常也很少这样用，有时在诗文中会把
作为标点来使用；

避免使用

---

，因为这个元素对语义和结构都没有太大帮助，反而

---

极差的灵活性对布局和显示都有很大的影响；

不要滥用

，W3C对

的描述是这样的：当没有其他元素可用时才能使用

。如果想让和这类元素能够在结尾换行，可以在样式中添加display: block，这样要比把它们放进

或者使用
来换行要好得多;

必须知道哪些是块级元素，这样就可以避免把块级元素放到

里面，比如列表就不需要放到div里面；

Flex box现在越来越流行，学一学没有坏处；

盒模型一定要掌握，必须知道什么时候该用padding，什么时候该用margin；

使用margin的规则：通常情况下，margin都是添加在元素的bottom和right，有时也可以是top或者left。无论如何，尽量避免同时在bottom和top，或者right和left添加margin。可以用last-of-type选择器来去掉最后一个子元素的margin。

CSS方面

这篇文章虽然是讲HTML的，但也有些CSS的注意事项想说一说：

不要将多句CSS写在同一行；

不要重复使用同一个id；

有时候给父元素添加class要比给子元素添加更简洁易维护(class的命名方式可以采用BEM规则)，像这样：

html

• Basil
• Pine nuts
• Garlic

• Basil
• Pine nuts
• Garlic

易访问性

要多为用户考虑，不同的设备条件、使用环境以及输入法等都会给你的HTML带来不同的体验：

尽可能的使用语义化元素；

要准备好备用内容：比如给元素添加说明和副标题，给和元素添加备用的文字或者图片，视频内容配上相应的截图或海报，每张图片都要加alt属性(如果图片只是用来装饰页面的话可以给alt赋空值);

链接要加title属性，title必须要有意义，不要只是链接的复述；

在元素中要加入type和placeholder；

其他建议

符号的转义，比如HTML & JavaScript；

有些符号不需要转义，比如破折号(如：4-5 weeks)还有货币符号(如：¢,€)；

在代码中作用不明显的地方适当的添加注释(注释在重构时的作用性举足轻重，优秀的HTML代码，无论多么复杂都可以很好的阅读和理解)；

有时全大写的标题会起到吸引注意力的作用，但没必要在HTML中真的输入大写的文字，可以在CSS中通过修改text-transform和font-variant来完成。这样做还有个好处，就是当用户复制这段文字时，他们可能不想要全大写的，像下面的

，当用户复制文字内容时，得到的是大小写混合的文字：

HTML

html

W3C Web Accessibility Initiative ARIA guidance

CSS

cssh4 {

font-variant: small-caps;

}

测试

重中之重，就是一定要做测试！

在工作流程、调试工具和部署过程中都可以加入HTML测试。一定要测试你的页面在不同条件的设备，不同大小的屏幕以及不同网速的环境下的读取情况。还要使用纯文字浏览器(如： Lynx)或者屏幕阅读器(如：ChromeVox)来测试页面在特殊环境下的交互性。可以使用Chrome Dev Tools device mode这种仿真器来监视页面的变化。工作流程中可以加入Page Speed, Web Page Test等工具来做自动化测试。