5811前端基础规范-【HTML规范】

HTML约定

1.文档类型

统一使用HTML5的标准文档类型：<!DOCTYPE html>；
HTML5文档类型具备前后兼容的特质，并且易记易书写
在文档doctype申明之前，不允许加上任何非空字符；
任何出现在doctype申明之前的字符都将使得你的HTML文档进入非标准模式
不允许添加 <meta> 标签强制改变文档模式。
避免出现不可控的问题

2.HEAD

语言

<!-- 中文 -->
<html lang="zh-cn">

<!-- English -->
<html lang="en">

编码

  • 以无 BOM 的 utf-8 编码作为文件格式;
  • 指定字符编码的 meta 必须是 head 的第一个直接子元素
<meta charset="utf-8">

IE兼容模式

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO优化头部

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Style Guide</title>
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
</head>

viewport

  • viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
  • width: 浏览器宽度，输出设备中的页面可见区域宽度；
  • device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
  • initial-scale: 初始缩放比例；
  • maximum-scale: 最大缩放比例；

为移动端设备优化，设置可见区域的宽度和初始缩放比例。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

IOS图标

IOS独有的标签，可以添加图标到iphone主屏幕快捷方式

  • apple-touch-icon 图片自动处理成圆角和高光等效果;
  • apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图;
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

<!-- iPad，72x72 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">

<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">

<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

favicon

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：

  • 在 Web Server 根目录放置 favicon.ico 文件；
  • 使用 link 指定 favicon；
<link rel="shortcut icon" href="path/to/favicon.ico">

HEAD 模板

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Style Guide</title>
    <meta name="description" content="不超过150个字符">
    <meta name="keywords" content="">
    <meta name="author" content="name, email@gmail.com">

    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- iOS 图标 -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    <link rel="shortcut icon" href="path/to/favicon.ico">
</head>

在调用CSS和JavaScript时，可以将type属性省略不写

<!-- good -->
<link rel="stylesheet" href="base.css" />
<script src="base.js"></script>

<!-- bad -->
<link type="text/css" rel="stylesheet" href="base.css" />
<script type="text/javascript" src="base.js"></script>

因为HTML5在引入CSS时，默认type值为text/css；在引入JavaScript时，默认type值为text/javascript

3.省略属性值

非必须属性值可以省略

<!-- good -->
<input type="text" readonly />
<input type="text" disabled />

<!-- bad -->
<input type="text" readonly="readonly" />
<input type="text" disabled="disabled" />

这里的 readonly 和 disabled 属性的值是非必须的，可以省略不写，我们知道HTML5表单元素新增了很多类似的属性，如: required

4.用双引号包裹属性值

所有的标签属性值必须要用双引号包裹，同时也不允许有的用双引号，有的用单引号的情况

<!-- good -->
<a href="http://www.5811.com.cn" class="home">5811</a>

<!-- bad -->
<a href=http://www.5811.com.cn class=home>5811</a>

5.嵌套

所有元素必须正确嵌套

不允许交叉

<!-- good -->
<span><em>交叉嵌套</em></span>

<!-- bad -->
<span><em>交叉嵌套</span></em>

不允许非法的子元素嵌套

<!-- good -->
<div>
	<h3>xx列表</h3>
	<ul>
		<li>asdasdsdasd</li>
		<li>asdasdsdasd</li>
	</ul>
</div>

<!-- bad -->
<ul>
	<h3>xx列表</h3>
	<li>asdasdsdasd</li>
	<li>asdasdsdasd</li>
</ul>

不推荐inline元素包含block元素；

<!-- good -->
<div>
	<h1>这是一个块级h1元素</h1>
	<p>这是一个块级p元素</p>
</div>

<!-- bad -->
<span>
	<h1>这是一个块级h1元素</h1>
	<p>这是一个块级p元素</p>
</span>

规则可参考：
HTML4/XHTML1.0 Strict: 嵌套规则。
HTML5: 嵌套规则
举个例子，在HTML5中，a元素同时属于 Flow content, Phrasing content, Interactive content, Palpable content 4个分类，那些子元素是 phrasing 元素的元素可以是 a 的父元素，a 允许的子元素是以它的父元素允许的子元素为准，但不能包含 interactive 元素。

6.标签

[建议] HTML 标签的使用应该遵循标签的语义。

  • 根据HTML元素的本身用途去使用它们；
  • 禁止使用被废弃的用于表现的标签，如 center, font 等；
  • 部分在XHTML1中被废弃的标签，在HTML5中被重新赋予了新的语义，在选用时请先弄清其语义，如:b, i, u等。

解释：

下面是常见标签语义

  • p - 段落
  • h1,h2,h3,h4,h5,h6 - 层级标题
  • strong,em - 强调
  • ins - 插入
  • del - 删除
  • abbr - 缩写
  • code - 代码标识
  • cite - 引述来源作品的标题
  • q - 引用
  • blockquote - 一段或长篇引用
  • ul - 无序列表
  • ol - 有序列表
  • dl,dt,dd - 定义列表

示例：

将你构建的页面当作一本书，将标签的语义对应的其功能和含义；

  • 书的名称：<h1>
  • 书的每个章节标题: <h2>
  • 章节内的文章标题: <h3>
  • 小标题/副标题: <h4> <h5> <h6>
  • 章节的段落: <p>

示例：

<!-- good -->
<p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>

<!-- bad -->
<div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>


<!-- good -->
<h1>标题</h1>

<!-- bad -->
<p>标题</p>

[强制] 对于无需自闭合的标签，不允许自闭合。

解释：

常见无需自闭合标签有input、br、img、hr等。

示例：

<!-- good -->
<input type="text" name="title">

<!-- bad -->
<input type="text" name="title" />

[强制] 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。

解释：

对代码体积要求非常严苛的场景，可以例外。比如：第三方页面使用的投放系统。

示例：

<!-- good -->
<ul>
    <li>first</li>
    <li>second</li>
</ul>

<!-- bad -->
<ul>
    <li>first
    <li>second
</ul>

[强制] 标签使用必须符合标签嵌套规则。

解释：

比如 div 不得置于 p 中，tbody 必须置于 table 中。
详细的标签嵌套规则参见HTML DTD中的 Elements 定义部分。

[建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。

解释：
在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。

[建议] 标签的使用应尽量简洁，减少不必要的标签。

示例：

<!-- good -->
<img class="avatar" src="image.png">

<!-- bad -->
<span class="avatar">
    <img src="image.png">
</span>

7.多媒体替代方案

  • 为img元素加上alt属性；
  • 为视频内容提供音轨替代；
  • 为音频内容提供字母替代等等。
<!-- good -->
<img src="banner.jpg" alt="520即将到来，爱就大声说出来" />

<!-- bad -->
<img src="banner.jpg" />

alt属性的内容为对该图片的简要描述，这对于盲人用户和图像损毁都非常有意义，即无障碍。对于纯粹的装饰性图片，alt属性值可以留空，如 alt=""

8.有效操作

为表单元素label加上for属性

<!-- good -->
<input type="radio" id="blue" name="color" value="0" /><label for="blue">蓝色</label>
<input type="radio" id="pink" name="color" value="1" /><label for="pink">粉色</label>

<!-- bad -->
<input type="radio" name="color" value="0" /><label>蓝色</label>
<input type="radio" name="color" value="1" /><label>粉色</label>

for属性能让点击label标签的时候，同时focus到对应的 input 和 textarea上，增加响应区域

9.按模块添加注释

在每个模块开始和结束的地方添加注释

<!-- 新闻列表模块 -->
<div class="m-news g-mod"
...
<!-- /新闻列表模块 -->

<!-- 排行榜模块 -->
<div class="m-topic g-mod"
...
<!-- /排行榜模块 -->

注释内容左右两边保留和注释符号有1个空格位，在注释内容内不允许再出现中划线“-”，某些浏览器会报错。
注释风格保持与原生HTML的语法相似：成对出现 <!-- comment --><!-- /comment -->

10.格式

  • 将每个块元素、列表元素或表格元素都放在新行；
  • inline元素视情况换行，以长度不超过编辑器一屏为宜；
  • 每个子元素都需要相对其父级缩进
<!-- good -->
<div>
	<h1>asdas</h1>
	<p>dff<em>asd</em>asda<span>sds</span>dasdasd</p>
</div>

<!-- bad -->
<div><h1>asdas</h1><p>dff<em>asd</em>asda<span>sds</span>dasdasd</p></div>

11.属性

属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性

  • id
  • class
  • name
  • data-xxx
  • src, for, type, href
  • title, alt
  • aria-xxx, role

示例：

<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">

[强制] 属性名必须使用小写字母。

示例：

<!-- good -->
<table cellspacing="0">...</table>

<!-- bad -->
<table cellSpacing="0">...</table>

[强制] 属性值必须用双引号包围。

解释：

不允许使用单引号，不允许不使用引号。

示例：

<!-- good -->
<script src="esl.js"></script>

<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>

[建议] 布尔类型的属性，建议不添加属性值。

示例：

<input type="text" disabled>
<input type="checkbox" value="1" checked>

[建议] 自定义属性建议以 xxx- 为前缀，推荐使用 data-。

解释：

使用前缀有助于区分自定义属性和标准定义的属性。

示例：

<ol data-ui-type="Select"></ol>
posted @ 2015-11-24 15:46  5811  阅读(453)  评论(0)  编辑  收藏  举报