HTML程式碼書寫規範指南
- 高洛峰原創
- 2017-02-24 10:12:311133瀏覽
通用約定
標籤
#自閉合（self-closing）標籤，無需閉合( 例如： img input br hr 等);
可選的閉合標籤（closing tag），需閉合( 例如：bed06894275b65c1ab86501b08a632eb 或36cc49f0c466276486e50c850b7e4956)；
盡量減少標籤數量；
<img src="images/google.png" alt="Google"> <input type="text" name="title"> <ul> <li>Style</li> <li>Guide</li> </ul> <!-- Not recommended --> <span class="avatar"> <img src="..."> </span> <!-- Recommended --> <img class="avatar" src="...">
Class 與ID
class 應以功能或內容命名，不以表現形式命名；
class 與id 單字字母小寫，多個單字組成時，採用中劃線-分隔；
使用唯一的id 作為Javascript hook，同時避免建立無樣式資訊的class；
<!-- Not recommended --> <p class="j-hook left contentWrapper"></p> <!-- Recommended --> <p id="j-hook" class="sidebar content-wrapper"></p>
屬性順序
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="...">
引號
屬性的定義，並統一使用雙引號。
<!-- Not recommended --> <span id='j-hook' class=text>Google</span> <!-- Recommended --> <span id="j-hook" class="text">Google</span>
b巢狀
a 不允許巢狀p 此約束屬於語意巢狀約束，與之區別的限制還有嚴格嵌套約束，例如a 不允許嵌套a。
嚴格巢狀約束在所有的瀏覽器下都不被允許；而語意嵌套約束，瀏覽器大多會容錯處理，產生的文件樹可能相互不太一樣。
語意嵌套約束
25edfb22a4f469ecb59f1190150159c6 用於ff6d136ddc5fdfeffaf53ff6ee95f185 或c34106e0b4e09414b63b2ea253ff83d6 下;
152436f649dfcc2350c70c7083a3231e，73de882deff7a050a357292d0a1fca94 用於5c69336ffbc20d23018e48b396cdd57a 下;
ae20bdd317918ca68efdc799512a9b39，92cee25da80fac49f6fb6eec5fd2c22a，06669983c3badb677f993a8c29d18845，a34de1251f0d9fe1e645927f19a896e8，b6c5a531a458a2e790c1fd6421739d1c 用於f5d188ed2c074f8b944552db028f98a1下；
嚴格嵌套約束
inline-Level 元素，只可以包含文字或其它inline-Level 元素； 布林值屬性 HTML5 規格中 disabled、checked、selected 等屬性不用設定值。 語意化 通常情況下，每個標籤都是有語義的，所謂語意就是你的衣服分為外套， 褲子，裙子，內褲等，各自有對應的功能和意義。所以你總不能把內褲套在脖子上吧。 -- 一絲 此外語意化的 HTML 結構，有助於機器（搜尋引擎）理解，另一方面多人協作時，能迅速了解開發者意圖。 常見標籤語意 将你构建的页面当作一本书，将标签的语义对应的其功能和含义； 书的名称：4a249f0d628e2318394fd9b75b4636b1 HEAD 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。 字符编码 以无 BOM 的 utf-8 编码作为文件格式； IE 兼容模式 优先使用最新版本的 IE 和 Chrome 内核。 SEO 优化 viewport viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容； iOS 图标 apple-touch-icon 图片自动处理成圆角和高光等效果； favicon 在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico。为了保证 favicon 可访问，避免 404，必须遵循以下两种方法之一： 在 Web Server 根目录放置 favicon.ico 文件； HEAD 模板 HTML 注释 模块注释 更多HTML代码书写规范指南相关文章请关注PHP中文网！
3499910bf9dac5ae3c52d5ede7383485 裡不可以嵌套互動元素3499910bf9dac5ae3c52d5ede7383485、bb9345e55eb71822850ff156dfde57c8、221f08282418e2996498697df914ce4e等;
e388a4556c0f65e1904146cc1a846bee裡面不可以嵌套區塊級元素e388a4556c0f65e1904146cc1a846bee、4a249f0d628e2318394fd9b75b4636b1~<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
沒有 CSS 的 HTML 是一個語意系統而不是 UI 系統。
########################################## ###abbr######縮寫#############
#f
語義
e388a4556c0f65e1904146cc1a846bee
段落
4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355 ...
標題
ff6d136ddc5fdfeffaf53ff6ee95f185
#無序列表
d7fbb0a344d5265c44c4f4fc1a340279
大段引用
##37bd663a69cd90a150d8c4bf1d3caf6e
為樣式加粗而加粗
beafbc2b8a3a352ee5f41c5a0c884975
為強調內容而加粗
#5a8028ccc7a7e27417bff9f05adf5932
為樣式傾斜而傾斜
為強調內容而傾斜
907fae80ddef53131f3292ee4f81644b
程式碼標識
#code
示例
书的每个章节标题: c1a436a314ed609750bd7c7d319db4da
章节内的文章标题: 684271ed9684bde649abda8831d4d355
小标题 / 副标题: 3f7b3decd2dcafb07b84d2d3985d9f40 39318b6f72ed39310530dfd69d0078e1 4e9ee319e0fa4abc21ff286eeb145ecc
章节的段落: e388a4556c0f65e1904146cc1a846bee
文档类型<!DOCTYPE html>
语言属性
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">
指定字符编码的 meta 必须是 head 的第一个直接子元素<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
width: 浏览器宽度，输出设备中的页面可见区域宽度；
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale: 初始缩放比例；
maximum-scale: 最大缩放比例；
为移动端设备优化，设置可见区域的宽度和初始缩放比例。<meta name="viewport" content="width=device-width, initial-scale=1.0">
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">
使用 link 指定 favicon；<link rel="shortcut icon" href="path/to/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 文章列表列表模块 -->
<p class="article-list">
...
</p>
区块注释
<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->