How to write efficient HTML
Personal translation, welcome to reprint!
Original English text: https://samdutton.wordpress.com/2015/04/02/high-performance-html/
This is my first time translating a foreign blog post. Any comments and suggestions are welcome!
When seeing this question, most developers will think of image optimization, JavaScript optimization, server configuration upgrade, file compression and even CSS compression. . However, the core language of web pages, HTML, has been ignored.
Nowadays, the burden of HTML is getting heavier and heavier. Among the top 100 websites in the world, the average HTML code size of each page is about 40k, of which Amazon and Yahoo have an average of several thousand HTML codes per page. OK, Youtube’s homepage even has 3500 HTML elements. Although reducing the complexity of HTML per page and reducing the number of elements will not improve the loading time of the page a lot, good HTML coding habits are an important basis for improving the loading speed of web pages. The reason why I wrote this article is to tell you how to write clean and tidy HTML code, so that your web pages can load and run quickly and normally on many devices. In this process, you can learn how to build websites and apps that are easy to maintain and debug.
There are many ways to write code, especially HTML. This article only makes the relatively best suggestions based on our experience. It does not mean that every suggestion can achieve the effect under any circumstances. It is for reference only.
- Each one performs its own duties: it is enough to control the style with CSS, do not use HTML elements to forcefully obtain the desired style;
- Meticulous: be sure to add code verification tools during the development process to ensure that the code does not have any grammatical and logical errors;
- Clean and tidy: use automatic typesetting tools to maintain the consistency of code structure and format;
- Language proficiency: You should understand the usage of all elements and use more semantic elements in HTML;
- Treat everyone equally: All situations must be considered during the design process, and backup plans are very important. You should even use ARIA (Accessible Rich Internet Application) specifically for special groups to ensure that your website can be displayed through a screen reader or a plain text browser;
- Comprehensive testing: test your website through various tools How the website performs on different devices and different screen sizes.
There shouldn’t be much explanation on the meaning of HTML, please go to Baidu Encyclopedia.
The first thing I want to say is that although the two brothers HTML and CSS are passionate about each other, they cannot make the relationship too complicated. It is enough to control the style with CSS. Do not use HTML elements to forcefully obtain the desired style. , for example, don't use the
tag just to indent it.
Chrome, Firefox, Internet Explorer and Opera all have their own default style sheets, and the default display mode of HTML elements is determined by these default style sheets. For example, the default style ofin Chrome is 32px bold, and the font is Times.
Three principles of friends:HTML is used to establish the structure, and CSS is used For rendering styles, JavaScript is used to control behavior; First complete the design of HTML, then design CSS according to style requirements, and finally design JavaScript when really needed; Combine CSS and Archive the JavaScript files separately from the HTML files (this not only helps with page caching, but also makes later debugging easier). Afterwards, the CSS and JavaScript are linked to the HTML, and the CSS and JavaScript codes can be compressed as needed. encryption. Structure construction
You need to pay attention to these when building the structure of HTML:
When adopting the HTML5 standard, the beginning should be added with , like this:
<!DOCTYPE html><html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body></html>Copy after loginThe CSS file should be introduced in the head tag, so that the browser can get the CSS information before outputting HTML:
<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"></head>Copy after loginIntroduce JavaScript files at the end of the
tag, so that the JavaScript files can be compiled after the page is displayed to speed up page reading, and at the same time help JavaScript operate on elements in the page, like Like this:<body> ... <script src="/js/global.js"> <script src="js/local.js"></body>Copy after loginOperations on elements should be added in JavaScript code, not in HTML. The following example is wrong and will be difficult to maintain later.
- 比如这样写就不太好:
index.html<head> ... <script src="js/local.js"></head><body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ...</body>Copy after login
- 这样写就好多了:
index.html<head> ...</head><body> ... <button id="foo">Foo</button> ... <script src="js/local.js"></body>Copy after login***js/local.js***Copy after loginjavascriptinit(); var fooButton = document.querySelector('#foo');fooButton.onclick = handleFoo();Copy after login代码校验
虽然现在浏览器的容错力越来越高,但这不能成为代码粗制滥造的借口。不管什么时候,正确的HTML代码都更易于debug、体积更小、运行更快、渲染时消耗资源更少,而错误的HTML代码只会使页面的最终设计难以实现想要的效果。特别是在使用模板来开发时,正确有效的HTML就更显得尤为重要,也许一个正常运行的模块会在其他环境中出现可怕的异常。
如何才能提高HTML的正确性呢?可以有这些方式:在项目中加入校验过程:可以在代码编辑器中使用HTMLHint、SublimeLinter这类代码校验插件,也可以在build的时候使用HTMLHint with Grunt这类校验工具,还可以通过W3C HTML validator等网站来在线检测代码; 尽量采用HTML5标准; 确保正确的HTML层级:嵌套元素时确保元素首尾完整,在一个有大量内容的元素的结束标签后应添加注释,这样有助于后期debug,特别是在使用模板的时候,如下所示:
<div id="foobar"> ...</div> <!-- foobar ends -->Copy after login在所有不能自动结束的元素末尾添加结束标签;
- 比如这个例子,这样写也可以可以正常运行:
<p>Pesto is good to eat...<p>...and pesto is easy to make.Copy after login
- 不过还是下面这样比较不容易出错:
<p>Pesto is good to eat...</p><p>...and pesto is easy to make.</p>Copy after login结束标签不是必须的,所以有些人认为可以不写,这可以接受,但是和标签一定要加: <ul> <li>Basil <li>Pine nuts <li>Garlic</ul>Copy after login <!-- 这样写不好 --><video src="foo.webm" /><!-- 还是这样写吧 --><video src="foo.webm"> <p>Video element not supported.</p></video>Copy after login另一方面,要去掉冗余代码:
像和这一类元素可以不加结束标签; 布尔型的属性可以不赋值,只要该属性出现,值就为true;
- 下面这样是可以运行的(没有加autoplay和controls):
<video src="foo.webm">Copy after login
- 这样就不能运行,因为这两个属性值必须是true:
<video src="foo.webm" autoplay="false" controls="false">Copy after login
- 这样改一下就可以运行了:
<video src="foo.webm" autoplay="true" controls="true">Copy after login
- 这样写会更易读:
<video src="foo.webm" autoplay controls>Copy after loginCSS和 JavaScript链接不需要type属性,他们就是他们; 外部链接可以省略协议部分(如http,ftp),这样可以避免内容太长而引起问题。像这样写是可以的:
<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>Copy after login良好的代码排版
保持一致的代码排版可以使HTML代码更易于理解、优化和debug,要做到良好的代码排版应注意以下这几点:
在项目中保持统一的HTML代码风格; 使用代码编辑器来帮助你自动排版,比如在Sublime Text中可以使用自带的Reindent,也可以找一些自动排版插件来帮助你。同样也可以使用一些在线工具比如CSS Beautifier和JS Beautifier; 在HTML中用缩进来分层更易于阅读,如果代码编辑器没有自动缩进功能的话可以自行修改相应的设置。当你发现你的HTML层级过深的时候,那就表示你需要重构一下你的HTML了; 缩进可以通过空格或者Tab来实现,但一定不要两者同时使用; 用更直接易读的方式写HTML代码,比如这句话,就可以很明显的看出这是个标题:
<h2><a href="/contact">Contact</a><h2>Copy after login这样写的话就更像是一个链接:
<a href="/contact"><h2>Contact</h2></a>Copy after login元素要按常规放置,比如footer元素最好是放在HTML页面的底部,虽然理论上把它放在任何地方都可以正常运行; 统一所有引号的使用规则,不要这里用双引号,那里又单引号; 使用小写字母来写标签和属性,大写字母很不易读,像这样:
<A HREF="/">Home</A>Copy after login混合式的写法简直就是反人类:
<H2>Pesto</h2>Copy after login语义化设计
语义化的意思是从名称一眼就能看出其内容和作用是什么,HTML的标签就是通过使用浅显易懂的元素名和属性名来实现语义化的。HTML5又引进了一些新的语义化元素,比如
, 标题使用 (
,
…),列表使用
或者
;
内容中的标题应该从 开始;
在适当的地方使用HTML5的新元素,比如 , 正文中的文本内容要用 标签,内容的结构化可以使用HTML5的新元素(或者
),不要颠倒;修改文字样式时,和要比和更好些,因为前者语义更加明显; 不要把文字和元素混合在一起,这样容易导致布局出错,比如这样:
<div> Name: <input type="text"></div>Copy after login这样写会更好些:
<div> <label>Name:</label> <input type="text"></div>Copy after login布局
首先再次强调一遍:
样式由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规则),像这样:
<!-- 这样看着好累>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>Copy after login易用性
要多为用户考虑,不同的设备条件、使用环境以及输入法等都会给你的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>Copy after loginCSS
h4 { font-variant: small-caps;}Copy after login测试
重中之重,就是一定要做测试!
在工作流程、调试工具和部署过程中都可以加入HTML测试。一定要测试你的页面在不同条件的设备,不同大小的屏幕以及不同网速的环境下的读取情况。还要使用纯文字浏览器(如: Lynx)或者屏幕阅读器(如:ChromeVox)来测试页面在特殊环境下的交互性。可以使用Chrome Dev Tools device mode这种仿真器来监视页面的变化。工作流程中可以加入Page Speed, Web Page Test等工具来做自动化测试。Related labels:source:php.cnPrevious article:QTP easily writes html log_html/css_WEB-ITnose Next article:CSS Design Guide Notes_html/css_WEB-ITnoseStatement of this WebsiteThe content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cnLatest Articles by Author
2024-10-22 09:46:29 2024-10-13 13:53:41 2024-10-12 12:15:51 2024-10-11 22:47:31 2024-10-11 19:36:51 2024-10-11 15:50:41 2024-10-11 15:07:41 2024-10-11 14:21:21 2024-10-11 12:59:11 2024-10-11 12:17:31Latest IssuesI can't center align anything on the screen I'm following a YouTube tutorial on how to make a responsive navigation bar on HTML using ...From 2024-04-01 11:51:4002303Related TopicsMore>Popular RecommendationsPopular TutorialsMore>
JAVA Beginner's Video Tutorial2504493 Latest DownloadsMore>