前端开发规范：HTML规范

2017-12-05 本文已影响162人辣瓜瓜

一个项目应该永远遵循同一套编码规范
不管有多少人共同参与同一项目，确保每一行代码都像是同一个人编写的

前端开发规范：HTML规范

整体结构

HTML基础设施

文件应以“<!DOCTYPE ......>”首行顶格开始，推荐使用“<!DOCTYPE html>”。
如果想跟其他标签一样使用小写，可以使用：<!doctype html>
DOCTYPE标签是一种标准通用标记语言的文档类型声明，目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
如果页面添加了<!DOCTYP>就等同于开启了标准模式，浏览器会按照W3C标准解析渲染页面。
没有DOCTYPE文档类型声明会开启浏览器的怪异模式，浏览器会按照自己的解析方式渲染页面，在不同的浏览器下面会有不同的样式。
必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码<meta charset="utf-8"/>。
根据页面内容和需求填写适当的keywords和description。
（不过淘宝、Tmall、京东只有京东写了keywords和description）
页面title不可缺少。
HTML只关注内容：其只做内容信息展示，不要引入一些特定的 HTML 结构来解决一些视觉设计问题，不要将img元素当做专门用来做视觉设计的元素，样式效果尽可能应用css解决。
适当使用mate标签。附上淘宝、Tmall、京东mate标签参考（文末）

结构顺序和视觉顺序基本保持一致

按照从上至下、从左到右的视觉顺序书写HTML结构。
有时候为了便于搜索引擎抓取，我们也会将重要内容在HTML结构顺序上提前。
用div代替table布局，但表现具有明显表格形式的数据，首选table。

结构、表现、行为三者分离，避免内联

使用link将css文件引入，并置于head中。
使用script将js文件引入，并置于body底部。
如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性async，将脚本文件放在<head>内。

<!-- 通用 -->
<html>
  <head>
    <link rel="stylesheet" href="xxx.css">
  </head>
  <body>
    <!-- 内容 -->
    <script src="xxx.js" async></script>
  </body>
</html>

<!-- 只兼容现代浏览器推荐 -->
<html>
  <head>
    <link rel="stylesheet" href="xxx.css">
<script src="xxx.js" async></script>
  </head>
  <body>
    <!-- 内容 -->
  </body>
</html>

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

不使用超过一到两张样式表
不使用超过一到两个脚本（学会用合并脚本）
不使用行内样式（<style>.no-good {}</style>）
不在元素上使用 style 属性（<hr style="border-top: 5px solid black">）
不使用行内脚本（<script>alert('no good')</script>）
不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）
不使用表象 class 名（i.e. red, left, center）

保持良好的简洁的树形结构

每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。
使用4个空格代替1个Tab。
你也可以在大的模块之间用空行隔开并添加适当注释，使模块更清晰。
推荐使用小写字母，小写风格看起来更加清爽，容易识别和编写
不推荐省略 <html> 、 <body>、<head> 标签

代码格式

说明文案的注释方法

采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格，与CSS注释统一格式。

开始注释：（文案两头空格）。
结束注释：（文案前加“/”符号，类似标签的闭合）。
允许只有开始注释

<body>
<!-- 侧栏内容区 -->
<div class="m-side">
    <div class="side">
        <div class="sidein">
            <!-- 热门标签 -->
            <div class="sideblk">
                <div class="m-hd3"><h3 class="tit">热门标签</h3> </div>
                ...
            </div>
            <!-- 最热TOP5 -->
            <div class="sideblk">
                <div class="m-hd3">
                    <h3 class="tit">最热TOP5</h3> 
                    <a href="#" class="s-fc02 f-fr">更多»</a>
                </div>
                ...
            </div>
        </div>
    </div>
</div>
<!-- /侧栏内容区 -->
</body>

严格的嵌套

尽可能以最严格的xhtml strict标准来嵌套，比如内联元素不能包含块级元素等等。
正确闭合标签且必须闭合。
结构上如果可以并列书写，就不要嵌套。
如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>
如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。
比如<div><h2></h2></div>已经能满足要求，那么就不要再写成<div><div><h2></h2></div></div>

严格的属性

属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。
没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）。
可以省略style标签和script标签的type属性。
一个标签上引用的className不要过多，越少越好。
比如不要出现这种情况：<div class="class1 class2 class3 class4"></div>
对于一个语义化的内部标签，应尽量避免使用className。
比如在这样一个列表中，li标签中的itm应去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>

内容类型决定使用的语义标签

在网页中某种类型的内容必定需要某种特定的HTML标签来承载，也就是我们常常提到的根据你的内容语义化HTML结构。
如：<time></time> <address></address>

加强“资源型”内容的可访问性和可用性

在资源型的内容上加入描述文案，比如在audio内加入文案和链接，给img添加alt属性等。
因为<img>标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：
    1.网速太慢
    2.src 属性中的错误
    3.浏览器禁用图像
    4.用户使用的是屏幕阅读器
从SEO角度考虑，浏览器的爬虫爬不到图片的内容，所以我们要有文字告诉爬虫图片的内容。
减少JavaScript 生成标签：通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

加强“不可见”内容的可访问性

背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容。

淘宝、Tmall、京东mate标签参考

<!--淘宝网触屏版-->
<meta charset="utf-8">
<meta name="data-spm" content="a215s">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

<!--天猫TMALL-->
<meta charset="utf-8">
<meta name="aplus-terminal" content="1">
<meta name="apple-mobile-web-app-title" content="TMALL">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="spm-id" content="a223j.8443192">
<meta name="format-detection" content="telephone=no, address=no">
<meta name="aplus-waiting" content="MAN">

<!--JD-->
<meta name="author" content="m.jd.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta name="author" content="m.jd.com">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<meta name="description" content="京东JD.COM-专业的综合.....商城购物体验! ">
<meta name="Keywords" content="网上购物,手机,笔记本,电脑.....京东商城">

参考引用：
nec http://nec.netease.com/standard/html-structure.html

前端开发规范：HTML规范

相关链接：

整体结构

HTML基础设施

结构顺序和视觉顺序基本保持一致

结构、表现、行为三者分离，避免内联

保持良好的简洁的树形结构

代码格式

说明文案的注释方法

严格的嵌套

严格的属性

内容类型决定使用的语义标签

加强“资源型”内容的可访问性和可用性

加强“不可见”内容的可访问性

淘宝、Tmall、京东mate标签参考

猜你喜欢

热点阅读