如何写出高效率的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元素来强行获取想要的样式，比如不要仅仅为了使文字变大而使用<h1>、<h2>、<h3>这些标题标签，也不要仅仅为了缩进而使用<blockquote>标签。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默认样式表，HTML元素默认的显示方式都是由这些默认样式表来决定的。比如，Chrome中<h1>默认的样式是32px bold，字体是Times.

基友三原则：

HTML用于建立结构，CSS用于渲染样式，JavaScript用于控制行为；
首先完成HTML的设计，然后根据样式需求来设计CSS，最后在确实需要的情况下才设计JavaScript；
将CSS和JavaScript文件进行归档，与HTML文件分开（这样不仅有助于页面缓存，而且可以使后期Debug更容易），这之后再把CSS和JavaScript链接到HTML中，可以根据需要来对CSS和JavaScript代码进行压缩加密。

结构的搭建

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

采用HTML5标准时开头应该加上<!DOCTYPE html>，像这样：

<!DOCTYPE html>
<html>
    <head> 
        <title>Recipes: pesto</title>
    </head>
    <body>  
        <h1>Pesto</h1>  
    </body>
</html>

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

<head>
    <title>My pesto recipe</title>
    <link rel="/css/global.css">
    <link rel="css/local.css">
</head>

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

<body>  
    ...  
    <script src="/js/global.js">  
    <script src="js/local.js">
</body>

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

比如这样写就不太好：

index.html

<head>
    ... 
    <script src="js/local.js">
</head>
<body onload="init()">
    ... 
    <button onclick="handleFoo()">Foo</button>
    ...
</body>

这样写就好多了：

index.html

<head>
    ...
</head>
<body> 
    ...
    <button id="foo">Foo</button>
    ... 
    <script src="js/local.js">
</body>

js/local.js

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

代码校验

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

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

在项目中加入校验过程：可以在代码编辑器中使用HTMLHint、Sublime Linter这类代码校验插件，也可以在build的时候使用HTMLHint with Grunt这类校验工具，还可以通过W3C HTML validator等网站来在线检测代码；
尽量采用HTML5标准；
确保正确的HTML层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug，特别是在使用模板的时候；
在所有不能自动结束的元素末尾添加结束标签；
</li>结束标签不是必须的，所以有些人认为可以不写</li>，这可以接受，但是</ul>和</ol>标签一定要加；
<video>和<audio>元素必须要有结束标签。

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

像<img>和<link>这一类元素可以不加结束标签；
布尔型的属性可以不赋值，只要该属性出现，值就为true；
CSS和 JavaScript链接不需要type属性，他们就是他们。

良好的代码排版

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

在项目中保持统一的HTML代码风格；
使用代码编辑器来帮助你自动排版，比如在Sublime Text中可以使用自带的Reindent，也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如CSS Beautifier和JS Beautifier；
在HTML中用缩进来分层更易于阅读，如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候，那就表示你需要重构一下你的HTML了；
缩进可以通过空格或者Tab来实现，但一定不要两者同时使用；
用更直接易读的方式写HTML代码，比如这句话，就可以很明显的看出这是个标题：
```
<h2 ><a href="/contact">Contact </a ><h2 >
```
这样写的话就更像是一个链接：
```
<a href="/contact"><h2 >Contact </h2 ></a > 
```
元素要按常规放置，比如footer元素最好是放在HTML页面的底部，虽然理论上把它放在任何地方都可以正常运行；
统一所有引号的使用规则，不要这里用双引号，那里又单引号；
使用小写字母来写标签和属性，大写字母很不易读，像这样：
```
<A HREF="/">Home </A >
```
混合式的写法简直就是反人类：
```
<H2 >Pesto </h2 > 
```

语义化设计

语义化的意思是从名称一眼就能看出其内容和作用是什么，HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素，比如<header > <footer >和<nav >。
为了是你的代码更易理解，一定要针对内容使用相应的语义化元素：

标题使用<h1 > (<h2 > , <h3 > …)，列表使用<ul > 或者<ol >；
<article > 内容中的标题应该从<h1 >开始；
在适当的地方使用HTML5的新元素，比如<header >, <footer > , <nav >和<aside >；
正文中的文本内容要用<p >标签，内容的结构化可以使用HTML5的新元素（或者<div >），不要颠倒；
修改文字样式时，<em >和<strong > 要比<i >和<b >更好些，因为前者语义更加明显；
<form > 中要包含<label >元素，input 元素要有type 、placeholder 以及其他必要的属性，即使值为空都可以；
不要把文字和元素混合在一起，这样容易导致布局出错，比如这样：
```
<div >Name: <input type="text"></div >
```
这样写会更好些：
```
<div ><label >Name:</label ><inputtype="text"></div > 
```

布局

首先再次强调一遍：

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

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

<p > 元素用来放文字，而不是用来布局。在浏览器自身的样式表中默认<p > 有margin 和其他样式；
想实现换行可以使用<block > 元素或者CSS的display 属性，尽量避免使用<br > 来换行。文字内容中的换行可以用<br > ，但通常也很少这样用，有时在诗文中会把<br > 作为标点来使用；
避免使用<hr > ，因为这个元素对语义和结构都没有太大帮助，反而<hr > 极差的灵活性对布局和显示都有很大的影响；
不要滥用<div > ，W3C对<div > 的描述是这样的：当没有其他元素可用时才能使用<div > 。如果想让<link > 和<img > 这类元素能够在结尾换行，可以在样式中添加display: block ，这样要比把它们放进<div > 或者使用<br > 来换行要好得多;
必须知道哪些是块级元素，这样就可以避免把块级元素放到<div > 里面，比如列表就不需要放到div里面；
<table > 是用来放表格数据的，不是用来布局的；
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规则），像这样：

<!-- 这样看着好累>o <--><ul ><li class="ingredient">Basil </li ><li class="ingredient">Pine nuts </li ><li class="ingredient">Garlic </li ></ul ><!-- 看起来舒服多了^v^ --><ul class="ingredients"><li >Basil </li ><li >Pine nuts </li ><li >Garlic </li ></ul >

易访问性

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

尽可能的使用语义化元素；
要准备好备用内容：比如给<track >元素添加说明和副标题，给<video > 和<audio >元素添加备用的文字或者图片，视频内容配上相应的截图或海报，每张图片都要加alt属性（如果图片只是用来装饰页面的话可以给alt 赋空值）;
链接要加title 属性，title必须要有意义，不要只是链接的复述；
在<input >元素中要加入type和placeholder；
设计时要尽量加入ARIA (Accessible Rich Internet Application)。

其他建议

符号的转义，比如< 和& 符号，像这样：<title >HTML & JavaScript </title >；
有些符号不需要转义，比如破折号（如：4-5 weeks）还有货币符号（如：¢ ,€）；
在代码中作用不明显的地方适当的添加注释（注释在重构时的作用性举足轻重，优秀的HTML代码，无论多么复杂都可以很好的阅读和理解）；
有时全大写的标题会起到吸引注意力的作用，但没必要在HTML中真的输入大写的文字，可以在CSS中通过修改text-transform和font-variant来完成。这样做还有个好处，就是当用户复制这段文字时，他们可能不想要全大写的，像下面的<h4 >，当用户复制文字内容时，得到的是大小写混合的文字：
HTML
```
html<h4 >W3C Web Accessibility Initiative ARIA guidance </h4 >
```
CSS
```
 cssh4 {font-variant: small-caps;}
```

测试

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