HTML specification for front-end coding style specification_html/css

HTML Specification

Document Type

It is recommended to use the HTML5 document type declaration: .

(it is recommended to use text/html format HTML. Avoid using XHTML. XHTML and its attributes, such as application/xhtml xml, have very limited application support and optimization space).

It is best not to close tags of contentless elements [1] in HTML, for example: use
instead of
.

HTML Validation

In general, it is recommended to use HTML code that can pass standard specification verification, unless you have to make compromises on performance optimization and file size control.

Use a tool like W3C HTML validator for detection.

Normalized HTML is a significant quality baseline that demonstrates technical requirements and limitations, and promotes better use of HTML.

Not recommended

<title>Test</title> <article>This is only a test.

Copy after login

Recommended

<!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>

Copy after login

Omit optional tags

HTML5 The specification stipulates that HTML tags can be omitted. But from a readability point of view, it is best not to do this in development source files, because omitting tags may cause some problems.

Omitting some optional tags does reduce page size, which is useful, especially for larger sites. In order to achieve this goal, we can compress the page in the later stage of development, and these optional tags can be completely omitted in this step.

Script loading

For performance reasons, asynchronous loading of scripts is critical. If a script is placed within , such as , its loading will block DOM parsing until it is completely loaded and executed. This will cause a delay in page display. Especially some heavyweight scripts have a huge impact on the user experience.

Loading scripts asynchronously mitigates this performance impact. If you only need to be compatible with IE10, you can add the HTML5 async attribute to the script, which can prevent blocking DOM parsing. Even you can write the script reference in and it will have no effect.

If you need to be compatible with older browsers, practice has shown that you can use a script loader for dynamically injecting scripts. You can consider yepnope or labjs. One problem with injecting scripts is that they have to wait until the CSS object documents are ready before they start loading (briefly after the CSS is loaded), which causes a certain delay in the JS that needs to be triggered in time, which has more or less impact. It’s about user experience.

In conclusion, when compatibility with older browsers (IE9-), the following best practices should be followed.

The script reference is written before the body closing tag and carries the async attribute. Although this will not load scripts asynchronously in older browsers, it only blocks DOM parsing before the body closing tag, which greatly reduces its blocking impact. In modern browsers, the script will be loaded only after the DOM parser finds the script tag at the end of the body. At this time, the loading is asynchronous and will not block the CSSOM (but its execution still occurs after the CSSOM).

Recommended in all browsers

<html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <!-- body goes here --> <script src="main.js" async></script> </body> </html>

Copy after login

Only recommended in modern browsers

<html> <head> <link rel="stylesheet" href="main.css"> <script src="main.js" async></script> </head> <body> <!-- body goes here --> </body> </html>

Copy after login

Semantic

Use an element (sometimes incorrectly called a "tag") according to its original meaning when it was created. For example, use heading elements to define header titles, p elements to define text paragraphs, a elements to define link anchors, and so on.

Using HTML elements with reason and purpose is huge for accessibility, code reuse, and code efficiency.

The following example lists some of the main cases of semantic HTML:

Not recommended

<b>My page title</b> <div class="top-navigation"> <div class="nav-item"><a href="#home">Home</a></div> <div class="nav-item"><a href="#news">News</a></div> <div class="nav-item"><a href="#about">About</a></div> </div> <div class="news-page"> <div class="page-section news"> <div class="title">All news articles</div> <div class="news-article"> <h2>Bad article</h2> <div class="intro">Introduction sub-title</div> <div class="content">This is a very bad example for HTML semantics</div> <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div> <div class="article-foot-notes"> This article was created by David <div class="time">2014-01-01 00:00</div> </div> </div> <div class="section-footer"> Related sections: Events, Public holidays </div> </div> </div> <div class="page-footer"> Copyright 2014 </div>

Copy after login

Recommended

<!-- The page header should go into a header element --> <header> <!-- As this title belongs to the page structure it's a heading and h1 should be used --> <h1>My page title</h1> </header> <!-- All navigation should go into a nav element --> <nav class="top-navigation"> <!-- A listing of elements should always go to UL (OL for ordered listings) --> <ul> <li class="nav-item"><a href="#home">Home</a></li> <li class="nav-item"><a href="#news">News</a></li> <li class="nav-item"><a href="#about">About</a></li> </ul> </nav> <!-- The main part of the page should go into a main element (also use role="main" for accessibility) --> <main class="news-page" role="main"> <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. --> <section class="page-section news"> <!-- A section header should go into a section element --> <header> <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) --> <h2 class="title">All news articles</h2> </header> <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other  re-usable module / section that can occur multiple times on a page) a article element should be used --> <article class="news-article"> <!-- An article can contain a header that contains the summary / introduction information of the article --> <header> <!-- As a article title does not belong to the overall page structure there should not be any heading tag! --> <div class="article-title">Good article</div> <!-- Small can optionally be used to reduce importance --> <small class="intro">Introduction sub-title</small> </header> <!-- For the main content in a section or article there is no semantic element --> <div class="content"> <p>This is a good example for HTML semantics</p> </div> <!-- For content that is represented as side note or less important information in a given context use aside --> <aside class="article-side-notes"> <p>I think I'm more on the side and should not receive the main credits</p> </aside> <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element --> <footer class="article-foot-notes"> <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time  while the actual text in the time element can also be more human readable / relative --> <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p> </footer> </article> <!-- In a section, footnotes or similar information can also go into a footer element --> <footer class="section-footer"> <p>Related sections: Events, Public holidays</p> </footer> </section> </main> <!-- Your page footer should go into a global footer element --> <footer class="page-footer"> Copyright 2014 </footer>

Copy after login

Multimedia traceback

For media on the page, such as pictures, videos, canvas animations, etc., make sure they have alternative access interfaces. We can use meaningful alternative text (alt) for image files, and we can add captions or subtitles for video and audio files.

Providing alternative content is important for usability. Just imagine how a blind user would know what an image is without @alt.

(The alt attribute of the image does not need to be filled in. This can be used for purely decorative images: alt="").

Not recommended

<img src="luke-skywalker.jpg">

Copy after login

Recommended

<img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">

Copy after login

Try to use alt tags to describe pictures, imagine you need For those users who can only express what the picture is through voice or cannot see the picture.

Not recommended

<img src="huge-spaceship-approaching-earth.jpg" alt="Header image">

Copy after login

Recommended

<img src="huge-spaceship-approaching-earth.jpg" alt="A huge spaceship that is approaching the earth">

Copy after login

Separation of concerns

Understanding the web It is important to understand how and why different concerns are distinguished. The focus here mainly refers to: information (HTML structure), appearance (CSS) and behavior (JavaScript). In order to make them clean and maintainable code, we should separate them as much as possible.

严格地保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。

就是说，尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。

在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。

清晰的分层意味着：

不使用超过一到两张样式表（i.e. main.css, vendor.css）

不使用超过一到两个脚本（学会用合并脚本）

不使用行内样式（）

不在元素上使用 style 属性（

）

不使用行内脚本（<script>alert('no good')</script>）

不使用表象元素（i.e. , , , , ）

不使用表象 class 名（i.e. red, left, center）

不推荐

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="grid.css"> <link rel="stylesheet" href="type.css"> <link rel="stylesheet" href="modules/teaser.css"> </head> <body> <h1 style="font-size: 3rem"></h1> <b>I'm a subtitle and I'm bold!</b> <center>Dare you center me!</center> <script> alert('Just dont...'); </script> <div class="red">I'm important!</div> </body> </html>
Copy after login

推荐

<!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="main.css"> </head> <body>  <h1 class="title"></h1>  <div class="sub-title">I'm a subtitle and I'm bold!</div>  <span class="comment">Dare you center me!</span>  <div class="important">I'm important!</div>  <script async src="main.js"></script> </body> </html>
Copy after login

HTML 内容至上

不要让非内容信息污染了你的 HTML。现在貌似有一种倾向：通过 HTML 来解决设计问题，这是显然是不对的。HTML 就应该只关注内容。

HTML 标签的目的，就是为了不断地展示内容信息。

不要引入一些特定的 HTML 结构来解决一些视觉设计问题

不要将 img 元素当做专门用来做视觉设计的元素

以下例子展示了误将 HTML 用来解决设计问题的这两种情况：

不推荐

 <span class="text-box"> <span class="square"></span> See the square next to me? </span>
Copy after login

.text-box > .square { display: inline-block; width: 1rem; height: 1rem; background-color: red; }
Copy after login

推荐

 <span class="text-box"> See the square next to me? </span>
Copy after login
Copy after login

/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */ .text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background-color: red; }
Copy after login

图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息。

不推荐

 <span class="text-box"> <img src="square.svg" alt="Square" /> See the square next to me? </span>
Copy after login

推荐

 <span class="text-box"> See the square next to me? </span>
Copy after login
Copy after login

/* We use a :before pseudo element with a background image to solve the problem */ .text-box:before { content: ""; display: inline-block; width: 1rem; height: 1rem; background: url(square.svg) no-repeat; background-size: 100%; }
Copy after login

Type 属性

省略样式表与脚本上的 type 属性。鉴于 HTML5 中以上两者默认的 type 值就是 text/css 和 text/javascript，所以 type 属性一般是可以忽略掉的。甚至在老旧版本的浏览器中这么做也是安全可靠的。

不推荐

<link rel="stylesheet" href="main.css" type="text/css"> <script src="main.js" type="text/javascript"></script>
Copy after login

推荐

<link rel="stylesheet" href="main.css"> <script src="main.js"></script>
Copy after login

可用性

如果 HTML5 语义化标签使用得当，许多可用性问题已经引刃而解。ARIA 规则在一些语义化的元素上可为其添上默认的可用性角色属性，使用得当的话已使网站的可用性大部分成立。假如你使用 nav, aside, main,footer 等元素，ARIA 规则会在其上应用一些关联的默认值。更多细节可参考 ARIA specification

另外一些角色属性则能够用来呈现更多可用性情景（i.e.role="tab"）。

Tab Index 在可用性上的运用

检查文档中的 tab 切换顺序并传值给元素上的 tabindex，这可以依据元素的重要性来重新排列其 tab 切换顺序。你可以设置 tabindex="-1" 在任何元素上来禁用其 tab 切换。

当你在一个默认不可聚焦的元素上增加了功能，你应该总是为其加上tabindex 属性使其变为可聚焦状态，而且这也会激活其 CSS 的伪类:focus。选择合适的 tabindex 值，或是直接使用 tabindex="0" 将元素们组织成同一 tab 顺序水平，并强制干预其自然阅读顺序。

微格式在 SEO 和可用性上的运用

如果 SEO 和可用性环境条件允许的话，建议考虑采用微格式。微格式是通过在元素标签上申明一系列特定数据来达成特定语义的方法。

谷歌、微软和雅虎对如何使用这些额外的数据一定程度上的达成一致，如果正确的使用，这将给搜索引擎优化带来巨大的好处。

你可以访问 schema.org 获得更多内容细节。

看一个电影网站的简单例子：

不带微格式

<div> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div>
Copy after login

带有微格式

<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span> </div> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div>
Copy after login

ID 和锚点

通常一个比较好的做法是将页面内所有的头部标题元素都加上 ID. 这样做，页面 URL 的 hash 中带上对应的 ID 名称，即形成描点，方便跳转至对应元素所处位置。

打个比方，当你在浏览器中输入 URL http://your-site.com/about#best-practices，浏览器将定位至以下 H3 上。

<h3 id="best-practices">Best practices</h3>
Copy after login

格式化规则

在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。

（如果由于换行的空格引发了不可预计的问题，那将所有元素并入一行也是可以接受的，格式警告总好过错误警告）。

推荐

<blockquote> <p><em>Space</em>, the final frontier.</p> </blockquote> <ul> <li>Moe</li> <li>Larry</li> <li>Curly</li> </ul> <table> <thead> <tr> <th scope="col">Income</th> <th scope="col">Taxes</th> </tr> </thead> <tbody> <tr> <td>$ 5.00</td> <td>$ 4.50</td> </tr> </tbody> </table>
Copy after login

HTML 引号

使用双引号(“”) 而不是单引号(“) 。

不推荐

<div class='news-article'></div>
Copy after login

推荐

<div class="news-article"></div>
Copy after login

[1]: 此处的空白元素指的是以下元素：area, base, br, col,command, embed, hr, img, input, keygen, link, meta, param,source, track, wbr

<p><strong>其他精彩文章</strong></p><h2>jQuery教程(19)-jquery ajax操作之序列化表单</h2><h2>jQuery教程(18)-ajax操作之执行POST请求</h2><h2>jQuery教程(20)-jquery ajax + php 操作之为Ajax请求提供不同...</h2><h2>jQuery教程(21)-jquery ajax 回调函数</h2> <p class="sycode"> </p><h2>jQuery教程(22)-ajax操作之错误处理</h2> <p class="sycode"> </p><h2>jQuery教程(24)-ajax操作之Ajax和事件</h2> <p></p><p>更多关于android开发文章</p>
Copy after login