【规范】前端编码规范——html 规范

时间 2019-11-16

原文原文链接

文档类型推荐使用 html5 的文档类型申明：javascript

<!DOCTYPE html>

语言属性根据 html5 规范：
强烈建议为 php

html

根元素指定 css

lang

属性，从而为文档设置正确的语言。这将有助于语音合成工具肯定其所应该采用的发音，有助于翻译工具肯定其翻译时所应遵照的规则等等。
这里列出了语言代码表。html

<html lang="en"></html>

字符编码经过明确声明字符编码，可以确保浏览器快速并容易的判断页面内容的渲染方式。这样作的好处是，能够避免在 html 中使用字符实体标记（character entity），从而所有与文档编码一致（通常采用 UTF-8 编码）。前端

<meta charset="UTF-8">

IE 兼容模式 IE 支持经过特定的 html5

meta

标签来肯定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，不然最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。java

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

省略自闭合元素的斜线不要在自闭合（self-closing）元素的尾部添加斜线 – html5 规范中明确说明这是可选的。
不推荐web

<input type="text"/>

推荐chrome

<input type="text">

不要省略结束标签不要省略可选的结束标签（closing tag）。
不推荐浏览器

<ul>
    <li>
</ul>

推荐

<ul>
    <li></li>
</ul>

省略 type 属性省略 css 与 js 的

type

属性。鉴于 html5 中以上二者默认的

type

值就是

text/css

和

text/javascript

，因此

type

属性通常是能够忽略掉的，甚至在老旧版本的浏览器中这么作也是安全可靠的。
语义化使用具备语义的标签，好比

h1

、

等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>Document</title>
</head>
<body>
    <h1>标题</h1>
    <h2>子标题</h2>
    <p>文本段落</p>
    <p><strong>加粗文本</strong></p>
</body>
</html>
<script src="main.js"></script>

实用为王尽可能遵循 html 标准和语义，可是不要以牺牲实用性为代价。任什么时候候都要尽可能使用最少的标签并保持最小的复杂度。
不推荐

<span class="avatar">
    <img src="avatar.jpg">
</span>

推荐

<img class="avatar" src="avatar.jpg">

结构，表现与行为分离一个完整的页面分为三个部分：结构（html）、表现（css）和行为（js）。为了使它们成为可维护的干净整洁的代码，咱们要尽量的将它们分离开来。
严格地保证结构、表现、行为三者分离，并尽可能使三者之间没有太多的交互和联系。就是说，尽可能在文档和模板中只包含结构性的 html；而将全部表现代码，移入样式表中；将全部动做行为，移入脚本之中。在此以外，为使得它们之间的联系尽量的小，在文档和模板中也尽可能少地引入样式和脚本文件。
清晰的分层意味着：
不使用超过一到两张样式表
尽可能合并脚本
不使用内嵌样式（

<style>.no-good {}</style>

）
不使用行内样式（

<hr style="border-top: 5px solid black">

）
不使用内嵌脚本（

<script>alert('no good')</script>

）
不使用表现元素（

<b>

，

<u>

，

<center>

，

<font>

）
小写 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 属性的引号请使用双引号而不是单引号。
参考文献 Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / Sass coding style
http://www.css88.com/archives...
转载于猿2048:☞《【规范】前端编码规范——html 规范》