Heim > Artikel > Web-Frontend > 前端编码规范--html 规范_html/css_WEB-ITnose
前端编码规范--html 规范_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:46:501159Durchsuche
文档类型
推荐使用 html5 的文档类型申明：
<!DOCTYPE html>
语言属性
根据 html5 规范：
强烈建议为 html根元素指定 lang属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
这里列出了 语言代码表。
<html lang="en"></html>
IE 兼容模式
IE 支持通过特定的 meta标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
省略自闭合元素的斜线
不要在自闭合（self-closing）元素的尾部添加斜线 – html5 规范中明确说明这是可选的。
不推荐
<input type="text"/>
推荐
<input type="text">
不要省略结束标签
不要省略可选的结束标签（closing tag）。
不推荐
<ul> <li></ul>
推荐
<ul> <li></li></ul>
省略 type 属性
省略 css 与 js 的 type属性。鉴于 html5 中以上两者默认的 type值就是 text/css和 text/javascript，所以 type属性一般是可以忽略掉的，甚至在老旧版本的浏览器中这么做也是安全可靠的。
语义化
使用具有语义的标签，比如 h1、 p等等。
<!DOCTYPE html> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">Document 标题
子标题
文本段落
加粗文本
实用为王
尽量遵循 html 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
不推荐
<span class="avatar"> <img src="avatar.jpg" alt="前端编码规范--html 规范_html/css_WEB-ITnose" ></span>
推荐
<img class="avatar" src="avatar.jpg" alt="前端编码规范--html 规范_html/css_WEB-ITnose" >
结构，表现与行为分离
一个完整的页面分为三个部分：结构（html）、表现（css）和行为（js）。为了使它们成为可维护的干净整洁的代码，我们要尽可能的将它们分离开来。
严格地保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。就是说，尽量在文档和模板中只包含结构性的 html；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。
清晰的分层意味着：
- 不使用超过一到两张样式表
- 尽量合并脚本
- 不使用内嵌样式（ ）
- 不使用行内样式（
） - 不使用内嵌脚本（ <script>alert('no good')</script>）
- 不使用表现元素（ ， ，
， ）
小写
html 标签及属性（包括自定义属性）都是小写字母，不要使用大写字母。
绑定数据
如果需要为标签绑定一些数据的话，请使用 html5 的自定义属性 data-*来绑定相关数据。
<h1 data-age="20">张三</h1>
布尔型属性
布尔型属性可以在声明时不赋值。xhtml 规范要求为其赋值，但是 html5 规范不需要。
<input type="text" disabled><input type="checkbox" value="1" checked><select> <option value="1" selected>1</option> <option value="2"></option></select>
html 引号
html 属性的引号请使用双引号而不是单引号。