html

html

关注
发信
关注(28)粉丝(399)

前端编码风格规范之 HTML 规范

英文原文：Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / SASS coding style

HTML 规范

文档类型

推荐使用 HTML5 的文档类型申明： .

（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。

HTML 中最好不要将无内容元素[1] 的标签闭合，例如：使用
而非
.

HTML 验证

一般情况下，建议使用能通过标准规范验证的 HTML 代码，除非在性能优化和控制文件大小上不得不做出让步。

使用诸如 W3C HTML validator 这样的工具来进行检测。

规范化的 HTML 是显现技术要求与局限的显著质量基线，它促进了 HTML 被更好地运用。

不推荐


复制代码

省略可选标签

HTML5 规范中规定了 HTML 标签是可以省略的。但从可读性来说，在开发的源文件中最好不要这样做，因为省略标签可能会导致一些问题。

省略一些可选的标签确实使得页面大小减少，这很有用，尤其是对于一些大型网站来说。为了达到这一目的，我们可以在开发后期对页面进行压缩处理，在这个环节中这些可选的标签完全就可以省略掉了。

脚本加载

出于性能考虑，脚本异步加载很关键。一段脚本放置在

  • 复制代码

    只在现代浏览器中，推荐

    复制代码

    语义化

    根据元素（有时被错误地称作“标签”）其被创造出来时的初始意义来使用它。打个比方，用 heading 元素来定义头部标题，p 元素来定义文字段落，用 a 元素来定义链接锚点，等等。

    有根据有目的地使用 HTML 元素，对于可访问性、代码重用、代码效率来说意义重大。

    以下示例列出了一些的语义化 HTML 主要情况：

    不推荐

    1. My page title








  • All news articles


  • Bad article


  • Introduction sub-title

  • This is a very bad example for HTML semantics

  • I think I'm more on the side and should not receive the main credits


  • This article was created by David
    2014-01-01 00:00





  • Related sections: Events, Public holidays





  • Copyright 2014
  • 复制代码
    推荐




    复制代码

    推荐


    复制代码

    HTML 内容至上

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

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


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

    不推荐




    4. See the square next to me?
    复制代码
    1. .text-box > .square {
    2. display: inline-block;
    3. width: 1rem;
    4. height: 1rem;
    5. background-color: red;
    6. }
    复制代码

    推荐



    3. See the square next to me?
    复制代码

    1. /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
    2. .text-box:before {
    3. content: "";
    4. display: inline-block;
    5. width: 1rem;
    6. height: 1rem;
    7. background-color: red;
    8. }
    复制代码

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

    不推荐



    3. 前端编码风格规范之 HTML 规范-LMLPHP
    4. See the square next to me?
    复制代码

    推荐



    3. See the square next to me?
    复制代码
    1. /* We use a :before pseudo element with a background image to solve the problem */
    2. .text-box:before {
    3. content: "";
    4. display: inline-block;
    5. width: 1rem;
    6. height: 1rem;
    7. background: url(square.svg) no-repeat;
    8. background-size: 100%;
    9. }
    复制代码

    Type 属性

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

    不推荐


    复制代码

    推荐


    复制代码

    可用性

    如果 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 获得更多内容细节。

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

    不带微格式


    2. Avatar


    3. Director: James Cameron (born August 16, 1954)
    4. Science fiction
    5. Trailer
    复制代码

    带有微格式


    2. Avatar



    4. Director: James Cameron (born August 16, 1954)

  • Science fiction
  • Trailer
  • 复制代码
    ID 和锚点

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

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

    1. Best practices

    复制代码

    格式化规则

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

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

    推荐




      • Moe

      • Larry

      • Curly











    13. $ 5.00$ 4.50
    复制代码

    HTML 引号

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

    不推荐

    复制代码

    推荐

    复制代码

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

    via:http://roshanca.com/2014/web-develop-styleguide-html/
    09-15 10:06
    Powered by LMLPHP ©2024 html 0.005442