前端编码规范--HTML规范

程序笔记 前端之家
前端之家收集整理的这篇文章主要介绍了前端编码规范--HTML规范，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_502_0@文档类型

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

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

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

HTML 验证

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

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

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

不推荐

Test

This is only a test.

推荐


Test

This is only a test.

省略可选标签

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

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

脚本加载

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

语义化

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

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

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

不推荐

My page title

<div class="news-page">
<div class="page-section news">
<div class="title">All news articles


<div class="news-article">
@H_502_0@Bad article
<div class="intro">Introduction sub-title

<div class="content">This is a very bad example for HTML semantics

<div class="article-side-notes">I think I'm more on the side and should not receive the main credits

<div class="article-foot-notes">
This article was created by David <div class="time">2014-01-01 00:00

 <div class="section-footer"&gt;
        Related sections: Events,Public holidays
</div>

<div class="page-footer">
Copyright 2014

推荐




  
  
My page title





<nav class="top-navigation">

  




<main class="news-page" role="main">

  

<section class="page-section news">

    

<header>
  <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
  <h2 class="title"&gt;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"&gt;
  <!-- 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"&gt;Good article</div>
    <!-- Small can optionally be used to reduce importance -->
    <small class="intro"&gt;Introduction sub-title</small>
  </header>

  <!-- For the main content in a section or article there is no semantic element -->
  <div class="content"&gt;
    <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"&gt;
    <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"&gt;
    <!-- 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"&gt;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"&gt;
  <p>Related sections: Events,Public holidays</p>
</footer>





<footer class="page-footer">

Copyright 2014

多媒体回溯

对页面上的媒体而言，像图片、视频、canvas 动画等，要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本（alt），视频和音频文件我们可以为其加上说明文字或字幕。

提供可替代内容对可用性来说十分重要。试想，一位盲人用户如何能知晓一张图片是什么，要是没有 @alt 的话。

（图片的 alt 属性是可不填写内容的，纯装饰性的图片就可用这么做：alt=""）。

不推荐

推荐

Luke skywalker riding an alien horse

尽量用 alt 标签去描述图片，设想你需要对于那些只能通过语音或者看不见图片的用户表达图片到底是什么。

不推荐

Header image

推荐

A huge spaceship that is approaching the earth

关注点分离

理解 web 中如何和为何区分不同的关注点，这很重要。这里的关注点主要指的是：信息（HTML 结构）、外观（CSS）和行为（JavaScript）。为了使它们成为可维护的干净整洁的代码，我们要尽可能的将它们分离开来。

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

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

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

清晰的分层意味着：

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

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

  • 用行内样式（）

  • 元素上使用 style 属性（

    ）

  • 用行内脚本（）

  • 用表象元素（i.e. ,,

    ,,）

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

不推荐




  

  

  I'm a subtitle and I'm bold!
  
Dare you center me!

推荐




  
  

  
  

  
  

  
  
  
  

  

<script async src="main.js">

HTML内容至上

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

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

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

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

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

不推荐



    See the square next to me?


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

推荐




/ 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;

}

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

不推荐



  See the square next to me?

推荐




/ 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%;

}

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

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

不带微格式


 
Avatar

 Director: James Cameron (born August 16,1954)
 Science fiction

带有微格式

ID 和锚点

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

打个比方，当你在浏览器中输入 URL ，浏览器将定位至以下 H3 上。
@H_502_0@格式化规则

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

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

推荐


  
Space,the final frontier.




    
  
  • Moe
    • 
  
  • Larry
    • 
  
  • Curly
    • 



<table>
@H_502_0@HTML 引号

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

不推荐

推荐
  1. 此处的空白元素指的是以下元素：area,base,br,col,command,embed,hr,img,input,keygen,link,Meta,param,source,track,wbr
原文链接：https://www.f2er.com/note/421841.html
前端编码规范--HTML规范

猜你在找的程序笔记相关文章

解决Connection to `ssl://pecl.php.net:443' failed
这个问题和curl无法访问https资源是类似的,现在curl可以访问https资源,但是使用pecl安装扩...
Chrome无法显示全网址怎么处理？Chrome系浏览器显示完整地址
在浏览器输入chrome://flags/回车，找到Omnibox UI Hide Steady-State URL Scheme and Tri...
Ubuntu 18.04安装arm-linux-gcc交叉编译器的两种方法(附下载地址)
方法一： 我们都知道Ubuntu有一个专门用来安装软件的工具apt，我们可以用它来全自动安装ar...
VCODE修改控制台编码格式解决输出乱码问题
中文的windows下的cmd默认使用GBK的编码，敲代码时，页面使用的是UTF-8(65001),而powershe...
编译busybox错误汇总
提示错误: arm-linux-gcc:Command not found PATH里有/usr/oca/arm/bin，但是make的时候，...
Bundle SPFX 文件时报错 “The build failed because a task wrote output to stderr.”的解决办法
在使用gulp bundle --ship对spfx项目进行编译的时候，出现“The build failed because a t...
处理Graph API .NET SDK 的分页请求
当使用Graph API进行查询的时候，如果结果过多，Graph API会对返回结果进行分页。 例如，下...
自动化部署SharePoint Online modern site的注意事项
整个流程是用户在SharePoint site里发起创建新team site的请求，管理员审核通过后，Power ...
安装Office套件和Visio可能遇到的问题
相关描述 安装可能出现的问题： 电脑系统： win10 教育版 本次安装版本为： Office 2016 c...
打印机相关整理
佳能打印机清零 版本号：佳能 ip2788 出现问题：错误代码：5B00 原因：打印机计数满，需要...
程序笔记SEO
完整地址全网址.get_attribuGraph Explor网站seo命令报错替换php7采撷记（一）WTF?HOMEBREW_GITFormData对象数据模型的关依赖关系查询iOS开发常用宏util.js----常UILabel 设置reverseadminphp匹配中文ngconf当前前提是字mongo执行比较mongo实现子文--换用Sublimjs moduleUse Laravel throttle 实现YII2 程序内获YII2 MongoDBjs根据偏移计--Linux下重要