如何写出高效率的HTML
个人翻译，欢迎转载！
英文原文：https://samdutton.wordpress.com/2015/04/02/high-performance-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.
基友三原则： HTML用于建立结构，CSS用于渲染样式，JavaScript用于控制行为； 首先完成HTML的设计，然后根据样式需求来设计CSS，最后在确实需要的情况下才设计JavaScript； 将CSS和JavaScript文件进行归档，与HTML文件分开（这样不仅有助于页面缓存，而且可以使后期Debug更容易），这之后再把CSS和JavaScript链接到HTML中，可以根据需要来对CSS和JavaScript代码进行压缩加密。
结构的搭建
HTML在结构上搭建上需要注意这些：
采用HTML5标准时开头应该加上，像这样：
<!DOCTYPE html><html> <head> <title>Recipes: pesto</title> </head> <body> <h1 id="Pesto">Pesto</h1> <p>Pesto is good!</p> </body></html>
应在head标签中引入CSS文件，这样浏览器就可以在输出HTML之前获取CSS信息：
<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"></head>
在
标签的末尾引入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***
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，特别是在使用模板的时候，如下所示：
<div id="foobar"> ...</div> <!-- foobar ends -->
在所有不能自动结束的元素末尾添加结束标签；
- 比如这个例子，这样写也可以可以正常运行：
<p>Pesto is good to eat...<p>...and pesto is easy to make.
- 不过还是下面这样比较不容易出错：
<p>Pesto is good to eat...</p><p>...and pesto is easy to make.</p>
结束标签不是必须的，所以有些人认为可以不写，这可以接受，但是和标签一定要加： <ul> <li>Basil <li>Pine nuts <li>Garlic</ul>
<video>和
<!-- 这样写不好 --><video src="foo.webm" /><!-- 还是这样写吧 --><video src="foo.webm"> <p>Video element not supported.</p></video>
另一方面，要去掉冗余代码：
像
和这一类元素可以不加结束标签; 布尔型的属性可以不赋值，只要该属性出现，值就为true；
- 下面这样是可以运行的（没有加autoplay和controls）：
<video>
- 这样就不能运行，因为这两个属性值必须是true：
<video src="foo.webm" autoplay="false" controls="false">
- 这样改一下就可以运行了：
<video src="foo.webm" autoplay="true" controls="true">
- 这样写会更易读：
<video src="foo.webm" autoplay controls>
CSS和 JavaScript链接不需要type属性，他们就是他们； 外部链接可以省略协议部分（如http,ftp），这样可以避免内容太长而引起问题。像这样写是可以的：
<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>
良好的代码排版
保持一致的代码排版可以使HTML代码更易于理解、优化和debug，要做到良好的代码排版应注意以下这几点：
在项目中保持统一的HTML代码风格； 使用代码编辑器来帮助你自动排版，比如在Sublime Text中可以使用自带的Reindent，也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如CSS Beautifier和JS Beautifier； 在HTML中用缩进来分层更易于阅读，如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候，那就表示你需要重构一下你的HTML了； 缩进可以通过空格或者Tab来实现，但一定不要两者同时使用； 用更直接易读的方式写HTML代码，比如这句话，就可以很明显的看出这是个标题：
<h2 id="a-href-contact-Contact-a-h-pre-p-这样写的话就更像是一个链接-p-pre-class-brush-php-toolbar-false-a-href-contact-h-Contact"><a href="/contact">Contact</a><h2>
这样写的话就更像是一个链接：
<a href="/contact"><h2>Contact</h2></a>
元素要按常规放置，比如footer元素最好是放在HTML页面的底部，虽然理论上把它放在任何地方都可以正常运行； 统一所有引号的使用规则，不要这里用双引号，那里又单引号； 使用小写字母来写标签和属性，大写字母很不易读，像这样：
<A HREF="/">Home</A>
混合式的写法简直就是反人类：
<h2 id="Pesto">Pesto</h2>
语义化设计
语义化的意思是从名称一眼就能看出其内容和作用是什么，HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素，比如,
标题使用 (, …)，列表使用或者
；
内容中的标题应该从
在适当的地方使用HTML5的新元素，比如,
正文中的文本内容要用标签，内容的结构化可以使用HTML5的新元素（或者
），不要颠倒； 修改文字样式时，和要比和更好些，因为前者语义更加明显；
不要把文字和元素混合在一起，这样容易导致布局出错，比如这样：
<div> Name: <input type="text"></div>
这样写会更好些：
<div> <label>Name:</label> <input type="text"></div>
布局
首先再次强调一遍：
样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式。
布局需要注意的问题有这些：
元素用来放文字，而不是用来布局。在浏览器自身的样式表中默认
有margin和其他样式；
想实现换行可以使用元素或者CSS的display属性，尽量避免使用
来换行。文字内容中的换行可以用
，但通常也很少这样用，有时在诗文中会把
作为标点来使用；
避免使用
，因为这个元素对语义和结构都没有太大帮助，反而
极差的灵活性对布局和显示都有很大的影响； 不要滥用，W3C对的描述是这样的：当没有其他元素可用时才能使用。如果想让和![如何写出高效率的HTML_html/css_WEB-ITnose]()
这类元素能够在结尾换行，可以在样式中添加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规则），像这样：
<!-- 这样看着好累>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带来不同的体验：
尽可能的使用语义化元素； 要准备好备用内容：比如给
链接要加title属性，title必须要有意义，不要只是链接的复述； 在元素中要加入type和placeholder； 设计时要尽量加入ARIA (Accessible Rich Internet Application)。 其他建议
符号的转义，比如HTML & JavaScript； 有些符号不需要转义，比如破折号（如：4-5 weeks）还有货币符号（如：¢,?）； 在代码中作用不明显的地方适当的添加注释（注释在重构时的作用性举足轻重，优秀的HTML代码，无论多么复杂都可以很好的阅读和理解）； 有时全大写的标题会起到吸引注意力的作用，但没必要在HTML中真的输入大写的文字，可以在CSS中通过修改text-transform和font-variant来完成。这样做还有个好处，就是当用户复制这段文字时，他们可能不想要全大写的，像下面的
，当用户复制文字内容时，得到的是大小写混合的文字：
HTML <h4>W3C Web Accessibility Initiative ARIA guidance</h4>
CSS
h4 { font-variant: small-caps;} 测试
重中之重，就是一定要做测试！
在工作流程、调试工具和部署过程中都可以加入HTML测试。一定要测试你的页面在不同条件的设备，不同大小的屏幕以及不同网速的环境下的读取情况。还要使用纯文字浏览器（如： Lynx）或者屏幕阅读器（如：ChromeVox）来测试页面在特殊环境下的交互性。可以使用Chrome Dev Tools device mode这种仿真器来监视页面的变化。工作流程中可以加入Page Speed, Web Page Test等工具来做自动化测试。
这些标题标签，也不要仅仅为了缩进而使用标签。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默认样式表，HTML元素默认的显示方式都是由这些默认样式表来决定的。比如，Chrome中默认的样式是32px bold，字体是Times.
基友三原则： HTML用于建立结构，CSS用于渲染样式，JavaScript用于控制行为； 首先完成HTML的设计，然后根据样式需求来设计CSS，最后在确实需要的情况下才设计JavaScript； 将CSS和JavaScript文件进行归档，与HTML文件分开（这样不仅有助于页面缓存，而且可以使后期Debug更容易），这之后再把CSS和JavaScript链接到HTML中，可以根据需要来对CSS和JavaScript代码进行压缩加密。
结构的搭建
HTML在结构上搭建上需要注意这些：
采用HTML5标准时开头应该加上，像这样：
<!DOCTYPE html><html> <head> <title>Recipes: pesto</title> </head> <body> <h1 id="Pesto">Pesto</h1> <p>Pesto is good!</p> </body></html>
应在head标签中引入CSS文件，这样浏览器就可以在输出HTML之前获取CSS信息：
<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"></head>
在
标签的末尾引入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***
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，特别是在使用模板的时候，如下所示：
<div id="foobar"> ...</div> <!-- foobar ends -->
在所有不能自动结束的元素末尾添加结束标签；
- 比如这个例子，这样写也可以可以正常运行：
<p>Pesto is good to eat...<p>...and pesto is easy to make.
- 不过还是下面这样比较不容易出错：
<p>Pesto is good to eat...</p><p>...and pesto is easy to make.</p>
结束标签不是必须的，所以有些人认为可以不写，这可以接受，但是和标签一定要加： <ul> <li>Basil <li>Pine nuts <li>Garlic</ul>
<video>和
<!-- 这样写不好 --><video src="foo.webm" /><!-- 还是这样写吧 --><video src="foo.webm"> <p>Video element not supported.</p></video>
另一方面，要去掉冗余代码：
像和这一类元素可以不加结束标签; 布尔型的属性可以不赋值，只要该属性出现，值就为true；
- 下面这样是可以运行的（没有加autoplay和controls）：
<video>
- 这样就不能运行，因为这两个属性值必须是true：
<video src="foo.webm" autoplay="false" controls="false">
- 这样改一下就可以运行了：
<video src="foo.webm" autoplay="true" controls="true">
- 这样写会更易读：
<video src="foo.webm" autoplay controls>
CSS和 JavaScript链接不需要type属性，他们就是他们； 外部链接可以省略协议部分（如http,ftp），这样可以避免内容太长而引起问题。像这样写是可以的：
<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>
良好的代码排版
保持一致的代码排版可以使HTML代码更易于理解、优化和debug，要做到良好的代码排版应注意以下这几点：
在项目中保持统一的HTML代码风格； 使用代码编辑器来帮助你自动排版，比如在Sublime Text中可以使用自带的Reindent，也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如CSS Beautifier和JS Beautifier； 在HTML中用缩进来分层更易于阅读，如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候，那就表示你需要重构一下你的HTML了； 缩进可以通过空格或者Tab来实现，但一定不要两者同时使用； 用更直接易读的方式写HTML代码，比如这句话，就可以很明显的看出这是个标题：
<h2 id="a-href-contact-Contact-a-h-pre-p-这样写的话就更像是一个链接-p-pre-class-brush-php-toolbar-false-a-href-contact-h-Contact"><a href="/contact">Contact</a><h2>
这样写的话就更像是一个链接：
<a href="/contact"><h2>Contact</h2></a>
元素要按常规放置，比如footer元素最好是放在HTML页面的底部，虽然理论上把它放在任何地方都可以正常运行； 统一所有引号的使用规则，不要这里用双引号，那里又单引号； 使用小写字母来写标签和属性，大写字母很不易读，像这样：
<A HREF="/">Home</A>
混合式的写法简直就是反人类：
<h2 id="Pesto">Pesto</h2>
语义化设计
语义化的意思是从名称一眼就能看出其内容和作用是什么，HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素，比如,
标题使用 (, …)，列表使用或者
；
内容中的标题应该从
在适当的地方使用HTML5的新元素，比如,
正文中的文本内容要用标签，内容的结构化可以使用HTML5的新元素（或者
），不要颠倒； 修改文字样式时，和要比和更好些，因为前者语义更加明显；
不要把文字和元素混合在一起，这样容易导致布局出错，比如这样：
<div> Name: <input type="text"></div>
这样写会更好些：
<div> <label>Name:</label> <input type="text"></div>
布局
首先再次强调一遍：
样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式。
布局需要注意的问题有这些：
元素用来放文字，而不是用来布局。在浏览器自身的样式表中默认
有margin和其他样式；
想实现换行可以使用元素或者CSS的display属性，尽量避免使用
来换行。文字内容中的换行可以用
，但通常也很少这样用，有时在诗文中会把
作为标点来使用；
避免使用
，因为这个元素对语义和结构都没有太大帮助，反而
极差的灵活性对布局和显示都有很大的影响； 不要滥用，W3C对的描述是这样的：当没有其他元素可用时才能使用。如果想让和![如何写出高效率的HTML_html/css_WEB-ITnose]()
这类元素能够在结尾换行，可以在样式中添加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规则），像这样：
<!-- 这样看着好累>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带来不同的体验：
尽可能的使用语义化元素； 要准备好备用内容：比如给
链接要加title属性，title必须要有意义，不要只是链接的复述； 在元素中要加入type和placeholder； 设计时要尽量加入ARIA (Accessible Rich Internet Application)。 其他建议
符号的转义，比如HTML & JavaScript； 有些符号不需要转义，比如破折号（如：4-5 weeks）还有货币符号（如：¢,?）； 在代码中作用不明显的地方适当的添加注释（注释在重构时的作用性举足轻重，优秀的HTML代码，无论多么复杂都可以很好的阅读和理解）； 有时全大写的标题会起到吸引注意力的作用，但没必要在HTML中真的输入大写的文字，可以在CSS中通过修改text-transform和font-variant来完成。这样做还有个好处，就是当用户复制这段文字时，他们可能不想要全大写的，像下面的
，当用户复制文字内容时，得到的是大小写混合的文字：
HTML <h4>W3C Web Accessibility Initiative ARIA guidance</h4>
CSS
h4 { font-variant: small-caps;} 测试
重中之重，就是一定要做测试！
在工作流程、调试工具和部署过程中都可以加入HTML测试。一定要测试你的页面在不同条件的设备，不同大小的屏幕以及不同网速的环境下的读取情况。还要使用纯文字浏览器（如： Lynx）或者屏幕阅读器（如：ChromeVox）来测试页面在特殊环境下的交互性。可以使用Chrome Dev Tools device mode这种仿真器来监视页面的变化。工作流程中可以加入Page Speed, Web Page Test等工具来做自动化测试。
Chrome, Firefox, Internet Explorer 以及 Opera 都有各自的默认样式表，HTML元素默认的显示方式都是由这些默认样式表来决定的。比如，Chrome中
默认的样式是32px bold，字体是Times.
基友三原则： HTML用于建立结构，CSS用于渲染样式，JavaScript用于控制行为； 首先完成HTML的设计，然后根据样式需求来设计CSS，最后在确实需要的情况下才设计JavaScript； 将CSS和JavaScript文件进行归档，与HTML文件分开（这样不仅有助于页面缓存，而且可以使后期Debug更容易），这之后再把CSS和JavaScript链接到HTML中，可以根据需要来对CSS和JavaScript代码进行压缩加密。
结构的搭建
HTML在结构上搭建上需要注意这些：
采用HTML5标准时开头应该加上，像这样：
<!DOCTYPE html><html> <head> <title>Recipes: pesto</title> </head> <body> <h1 id="Pesto">Pesto</h1> <p>Pesto is good!</p> </body></html>
应在head标签中引入CSS文件，这样浏览器就可以在输出HTML之前获取CSS信息：
<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"></head>
在
标签的末尾引入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***
javascriptinit(); var fooButton = document.querySelector('#foo');fooButton.onclick = handleFoo(); 代码校验
虽然现在浏览器的容错力越来越高，但这不能成为代码粗制滥造的借口。不管什么时候，正确的HTML代码都更易于debug、体积更小、运行更快、渲染时消耗资源更少，而错误的HTML代码只会使页面的最终设计难以实现想要的效果。特别是在使用模板来开发时，正确有效的HTML就更显得尤为重要，也许一个正常运行的模块会在其他环境中出现可怕的异常。
如何才能提高HTML的正确性呢？可以有这些方式：
确保正确的HTML层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug，特别是在使用模板的时候，如下所示：
<div id="foobar"> ...</div> <!-- foobar ends -->
在所有不能自动结束的元素末尾添加结束标签；
- 比如这个例子，这样写也可以可以正常运行：
<p>Pesto is good to eat...<p>...and pesto is easy to make.
- 不过还是下面这样比较不容易出错：
<p>Pesto is good to eat...</p><p>...and pesto is easy to make.</p>
<ul> <li>Basil <li>Pine nuts <li>Garlic</ul>
<video>和
<!-- 这样写不好 --><video src="foo.webm" /><!-- 还是这样写吧 --><video src="foo.webm"> <p>Video element not supported.</p></video>
另一方面，要去掉冗余代码：
和这一类元素可以不加结束标签;布尔型的属性可以不赋值，只要该属性出现，值就为true；
- 下面这样是可以运行的（没有加autoplay和controls）：
<video>
- 这样就不能运行，因为这两个属性值必须是true：
<video src="foo.webm" autoplay="false" controls="false">
- 这样改一下就可以运行了：
<video src="foo.webm" autoplay="true" controls="true">
- 这样写会更易读：
<video src="foo.webm" autoplay controls>
外部链接可以省略协议部分（如http,ftp），这样可以避免内容太长而引起问题。像这样写是可以的：
<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>
良好的代码排版
保持一致的代码排版可以使HTML代码更易于理解、优化和debug，要做到良好的代码排版应注意以下这几点：
用更直接易读的方式写HTML代码，比如这句话，就可以很明显的看出这是个标题：
<h2 id="a-href-contact-Contact-a-h-pre-p-这样写的话就更像是一个链接-p-pre-class-brush-php-toolbar-false-a-href-contact-h-Contact"><a href="/contact">Contact</a><h2>
这样写的话就更像是一个链接：
<a href="/contact"><h2>Contact</h2></a>
使用小写字母来写标签和属性，大写字母很不易读，像这样：
<A HREF="/">Home</A>
混合式的写法简直就是反人类：
<h2 id="Pesto">Pesto</h2>
语义化设计
语义化的意思是从名称一眼就能看出其内容和作用是什么，HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素，比如
(, …)，列表使用或者
；
…)，列表使用或者
；
标签，内容的结构化可以使用HTML5的新元素（或者
），不要颠倒； 修改文字样式时，和要比和更好些，因为前者语义更加明显；
想实现换行可以使用元素或者CSS的display属性，尽量避免使用
来换行。文字内容中的换行可以用
，但通常也很少这样用，有时在诗文中会把
作为标点来使用；
避免使用
，因为这个元素对语义和结构都没有太大帮助，反而
极差的灵活性对布局和显示都有很大的影响； 不要滥用
不要把文字和元素混合在一起，这样容易导致布局出错，比如这样：
<div> Name: <input type="text"></div>
这样写会更好些：
<div> <label>Name:</label> <input type="text"></div>
布局
首先再次强调一遍：
样式由CSS来控制就够了，不要用HTML元素来强行获取想要的样式。
布局需要注意的问题有这些：
元素用来放文字，而不是用来布局。在浏览器自身的样式表中默认
有margin和其他样式；
来换行。文字内容中的换行可以用
，但通常也很少这样用，有时在诗文中会把
作为标点来使用；
，因为这个元素对语义和结构都没有太大帮助，反而
极差的灵活性对布局和显示都有很大的影响；
，W3C对
的描述是这样的：当没有其他元素可用时才能使用
。如果想让和![如何写出高效率的HTML_html/css_WEB-ITnose]()
这类元素能够在结尾换行，可以在样式中添加display: block，这样要比把它们放进
或者使用
来换行要好得多;必须知道哪些是块级元素，这样就可以避免把块级元素放到
来换行要好得多;
里面，比如列表就不需要放到div里面； 是用来放表格数据的，不是用来布局的；
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AMWebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AMHTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.
HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)
HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AMHTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PMHTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AMHTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AManexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
메뉴에서 점선 분할 효과의 중심 정렬을 달성하기 위해 CSS의 Flexbox 레이아웃을 사용하는 방법은 무엇입니까?Apr 05, 2025 pm 01:24 PM메뉴에서 점선 분할 효과를 설계하는 방법은 무엇입니까? 메뉴를 설계 할 때는 일반적으로 접시 이름과 가격 사이에 왼쪽과 오른쪽을 정렬하는 것이 어렵지 않지만 점선 또는 중간의 점은 어떻습니까?
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
2 몇 주 전ByDDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
