你的HTML頁面書寫規(guī)范嗎？必須知道的HTML書寫規(guī)范

言：每一個(gè)行業(yè)都有自己的規(guī)范，不已規(guī)矩，不成方圓。尤其是代碼，代碼規(guī)范便于閱讀，便于維護(hù)。

1.用兩個(gè)空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。

2.嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）。

3.對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)。

4.不要在自閉合（self-closing）元素的尾部添加斜線

5.不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如，</li> 或</body>）。

6.為每個(gè) HTML 頁面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。<!DOCTYPE html>

7.語言屬性

根據(jù) HTML5 規(guī)范：

強(qiáng)烈建議為 html 根元素指定 lang 屬性，從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等.

<html>

</html>

8.IE 兼容模式

IE 支持通過特定的 <meta> 標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

<metahttp-equiv="X-UA-Compatible"content="IE=Edge">

9.字符編碼

通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

<head>

</head>

10.引入 CSS 和 JavaScript 文件

根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性，因?yàn)?text/css 和 text/javascript 分別是它們的默認(rèn)值。

<style>

/* ... */

</style>

11.

布爾（boolean）型屬性

布爾型屬性可以在聲明時(shí)不賦值。XHTML 規(guī)范要求為其賦值，但是 HTML5 規(guī)范不需要。

12.

減少標(biāo)簽的數(shù)量

編寫 HTML 代碼時(shí)，盡量避免多余的父元素。很多時(shí)候，這需要迭代和重構(gòu)來實(shí)現(xiàn)。請(qǐng)看下面的案例：

<span>

</span>

13.

不要使用 @import

與 <link> 標(biāo)簽相比，@import 指令要慢很多，不光增加了額外的請(qǐng)求次數(shù)，還會(huì)導(dǎo)致不可預(yù)料的問題。替代辦法有以下幾種：

使用多個(gè) <link> 元素

通過 Sass 或 Less 類似的 CSS 預(yù)處理器將多個(gè) CSS 文件編譯為一個(gè)文件

通過 Rails、Jekyll 或其他系統(tǒng)中提供過 CSS 文件合并功能

14.

class 命名

class 名稱中只能出現(xiàn)小寫字符和破折號(hào)（dashe）（不是下劃線，也不是駝峰命名法）。破折號(hào)應(yīng)當(dāng)用于相關(guān) class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。

避免過度任意的簡(jiǎn)寫。.btn 代表 button，但是 .s 不能表達(dá)任何意思。

class 名稱應(yīng)當(dāng)盡可能短，并且意義明確。

使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。

基于最近的父 class 或基本（base） class 作為新 class 的前綴。

使用 .js-* class 來標(biāo)識(shí)行為（與樣式相對(duì)），并且不要將這些 class 包含到 CSS 文件中。

.t { ... }

.red { ... }

.header { ... }

/* Good example */

.tweet { ... }

.important { ... }

.tweet-header { ... }

么是html？

html是一種簡(jiǎn)單易記，功能強(qiáng)大的標(biāo)記語言，它是學(xué)習(xí)前端知識(shí)的第一站，也是所有WEB開發(fā)者、乃至產(chǎn)品經(jīng)理、運(yùn)營(yíng)人員必須學(xué)習(xí)的一項(xiàng)基礎(chǔ)內(nèi)容。

為什么學(xué)習(xí)html5？

1. html5是WEB開發(fā)者，必須掌握的基礎(chǔ)知識(shí)；

2. html5應(yīng)用廣泛，它可以用來開發(fā)網(wǎng)站、WEB應(yīng)用、WEB游戲等等，如微信小程序、移動(dòng)端小游戲等都跟html5有關(guān)；

3. html5很容易掌握，花幾個(gè)小時(shí)就可以掌握它；

課程特點(diǎn)

1. 講師講課風(fēng)格幽默，整個(gè)學(xué)習(xí)過程輕松有趣，不枯燥、不乏味；

2. 以就業(yè)為導(dǎo)向，與實(shí)戰(zhàn)相結(jié)合，滿足大部分學(xué)員的學(xué)習(xí)需求；

學(xué)習(xí)建議

1. 學(xué)完每一節(jié)課程，動(dòng)手將代碼打一遍；

2. 舉一反三，學(xué)完每節(jié)課程，思考一下它的應(yīng)用場(chǎng)景；

3. 完成本門課程，試著自己寫一個(gè)純html5的網(wǎng)頁；

適宜人群

1. 零基礎(chǔ)學(xué)員；

2. 前端愛好者；

1、DOCTYPE 描述文檔的類型，規(guī)定web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。

網(wǎng)頁可以使用的具體版本，網(wǎng)頁中可以使用那些標(biāo)記，每個(gè)版本的DTD版本均有不同

2、<html></html> 網(wǎng)頁文檔中的根標(biāo)記

html 標(biāo)簽有三個(gè)特殊的屬性　　

manifest 指定網(wǎng)頁緩存文件，可以讓用戶離線的時(shí)候也可以訪問文件。
xmlns 設(shè)置html名空間，比如把網(wǎng)頁設(shè)置成xhml的時(shí)候可以使用這個(gè)值。
lang 設(shè)置網(wǎng)頁的描述語言，比如中文是zh；英文是en。

3、<head></head>頭部標(biāo)簽在網(wǎng)頁中只能有一個(gè)，設(shè)置HTML文檔的頭部信息，里面內(nèi)容不會(huì)在頁面中顯示出來·。

head里面的標(biāo)記

<meta> 標(biāo)記
<title>定義網(wǎng)頁的標(biāo)題
<link> 鏈接
<script> 標(biāo)記JavaScript腳本的內(nèi)容
<style> 標(biāo)記css樣式
meta 標(biāo)記

4、<body></body>只能有一個(gè)，顯示網(wǎng)頁的主體內(nèi)容。

（一）、<meta>標(biāo)簽

<meta>元素的屬性：

name 描述信息的名稱，來標(biāo)記這是一個(gè)什么樣的信息
http-equiv 描述行為
content 描述的內(nèi)容
charset 指定網(wǎng)頁的編碼

1、name 屬性

1 <meta name="author" content="nyw">
2     <!--作者， 定義網(wǎng)頁的作者 -->
3 <meta name="description" content="meta標(biāo)記學(xué)習(xí)">
4     <!-- 描述，描述網(wǎng)頁的實(shí)際內(nèi)容 -->
5 <meta name="keywords" content="HTML,meta">
6     <!-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 -->

2、http-equiv屬性

1 <meta http-equiv="refresh" content="30">
2     <!-- 網(wǎng)頁30s后自動(dòng)刷新 -->
3 <meta http-equiv="refresh" content="5,url=dom.html">
4     <!-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 -->

<meta http-equiv="refresh" content="5,url=dom.html">

http-equiv描述網(wǎng)頁的行為，行為 refresh刷新，內(nèi)容為5，表示5秒后跳轉(zhuǎn)到 dom.html這個(gè)文檔。

3、content 屬性

特殊屬性

content-type 指定http頭部信息的文字編碼（最為常用）
default-style 指定優(yōu)先使用的樣式單（stylesheet）
refresh 用于網(wǎng)頁的自動(dòng)刷新或是頁面跳轉(zhuǎn)
set-cookie 設(shè)置頁面的cookie（現(xiàn)在已經(jīng)不再推薦使用）

4、charset屬性

指定網(wǎng)頁的編碼，推薦使用UTF-8來增加網(wǎng)頁的兼容性。

代碼實(shí)例：

為搜索引擎抓取機(jī)器人準(zhǔn)備一些信息

這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。

<meta name="robots" content="noindex,nofollow">
    <!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->

代碼實(shí)例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>網(wǎng)頁標(biāo)題(顯示在瀏覽器上)</title>
 6     <meta name="author" content="nyw">
 7     <!--作者， 定義網(wǎng)頁的作者 -->
 8     <meta name="description" content="meta標(biāo)記學(xué)習(xí)">
 9     <!-- 描述，描述網(wǎng)頁的實(shí)際內(nèi)容 -->
10     <meta name="keywords" content="HTML,meta">
11     <!-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 -->
12     <meta http-equiv="refresh" content="30">
13     <!-- 網(wǎng)頁30s后自動(dòng)刷新 -->
14     <meta http-equiv="refresh" content="5,url=dom.html">
15     <!-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 -->
16     <meta name="robots" content="noindex,nofollow">
17     <!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->
18 </head>
19 <body>
20 </body>
21 </html>

（二）、title、base標(biāo)記

title和base標(biāo)記都是寫在head標(biāo)簽中

title：設(shè)置網(wǎng)頁的標(biāo)題

寫法：<title>內(nèi)容</title>。

base：指定網(wǎng)頁跳轉(zhuǎn)基準(zhǔn)URL，如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

寫法：<base href="http://www.aaa.zzz/">

base屬性值：

href 指定網(wǎng)頁跳轉(zhuǎn)到基準(zhǔn)URL，如果不指定的話則默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

<base href="http://baidu.com/"> 這是將頁面跳轉(zhuǎn)到百度的網(wǎng)站打開。

target 指定鏈接的跳轉(zhuǎn)幀如果不指定的話，則是在當(dāng)前頁面中跳轉(zhuǎn)。

<base target="_blank"> 網(wǎng)頁中的鏈接都應(yīng)該在新的窗口中打開。

terget屬性值：

_blank 在新窗口中打開被鏈接的文檔
_self 默認(rèn)值，在相同框架中打開被鏈接的文檔
_parent 在父框架集中
_top 在整個(gè)窗口中打開被鏈接文檔·
framename 在指定框架中打開被鏈接文檔

（三）、link標(biāo)記

link標(biāo)記：鏈接外部文件時(shí)使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來，使當(dāng)前網(wǎng)頁實(shí)現(xiàn)更多的功能。

link屬性：

href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/span>

rel：引用文件，引用資源的類型定義

我們?cè)谑褂胠ink標(biāo)簽引用外部文件的時(shí)候，外部文件的類型是多種多樣的。

alternate 代替文檔（種子，其他語言版本，其他格式等等）

author 網(wǎng)頁的作者

help 幫助文件的鏈接

icon 網(wǎng)頁的圖標(biāo)

next 如果是連續(xù)網(wǎng)頁的時(shí)候，指定下一個(gè)網(wǎng)頁

prefetch 把鏈接外部資源時(shí)提前緩存起來。

prev 如果是連續(xù)網(wǎng)頁

media 鏈接文件或是資源屬于哪一種資源。

hreflang 鏈接文件的語言種類

type 鏈接文件的mi/me類型（比如說，圖片圖標(biāo)文本）

sizes 根據(jù)link鏈接文件的類型，來指定文件的大小

代碼示例：

鏈接網(wǎng)頁圖標(biāo)：

網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾

1 <!-- 網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾 -->
2     <link rel="icon">
3     <!-- 示例 -->
4     <link rel="icon" href="img/favicon.png" type="image/png">
5     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
6     <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">

注意：后面的href和前面type標(biāo)注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機(jī)上

鏈接外部樣式單

1 <link rel="stylesheet">
2     <link rel="stylesheet" href="style1.css" media="screen">
3     <link rel="stylesheet" href="style2.css" title="主題樣式文件">
4     <link rel=" alternate stylesheet" href="style3.css" title="可選樣式單">

說明：

alternate 會(huì)在瀏覽器中會(huì)彈出一個(gè)對(duì)話框，供用戶可以進(jìn)行選擇

media 表示媒體類型為屏幕，可以是手機(jī)，但不包括打印機(jī)和投影儀

title 對(duì)這個(gè)link進(jìn)行簡(jiǎn)單的說明

網(wǎng)站RSS種子指定

<!-- 網(wǎng)站RSS種子指定 -->
    <link rel="alternate" type="application/rss+xml">

為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL

<!-- 為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL -->
    <link rel="canonical">
    <link rel="canonical" href="http://www.aaa.zzz/help.html">

告訴搜索引擎代替URL是哪里。

天我們來學(xué)習(xí)HTML基本格式。

H1 標(biāo)簽定義了一個(gè)文檔的標(biāo)題，雖然在瀏覽器里顯示了預(yù)期的效果，但它并不是一個(gè)符合規(guī)范的 html 文檔，今天我們就來定義一個(gè)標(biāo)準(zhǔn)的 html 文檔。

這是一個(gè) html 文檔的基本格式，來深入的剖析一下

<!DOCTYPE html> 這個(gè)標(biāo)簽會(huì)告訴瀏覽器，后面書寫的是HTML5規(guī)范的語法，瀏覽器會(huì)按照 HTML5 的語法規(guī)范進(jìn)行解析

<html lang='en'> 包裹了整個(gè)頁面的所有內(nèi)容，有時(shí)被稱為根元素。

<head> 是所有頭部元素的容器，描述了文檔的各種屬性和信息，比如文檔的標(biāo)題，文檔引用的樣式表和JS腳本文件，頁面元信息等等，絕大多數(shù)文檔頭部包含的數(shù)據(jù)，都不會(huì)真正作為內(nèi)容顯示給瀏覽者。

<title> 設(shè)置頁面的標(biāo)題，也就是出現(xiàn)在瀏覽器標(biāo)簽中的內(nèi)容，它描述頁面被加入入書簽或收藏時(shí)的標(biāo)題

<body> 它包含了頁面展示的所有內(nèi)容，比如文字，圖片，視頻，游戲，可播放的音樂等等

一般情況下一個(gè)符合規(guī)范的 html 文檔都應(yīng)該使用這個(gè)基本格式

回到編輯器我們創(chuàng)建一個(gè)文件名字叫 base.html 我們快速的編寫好 html 基本格式，在 <body> 標(biāo)簽里寫一個(gè) h1 在里面寫一些內(nèi)容，瀏覽器中打開頁面正常的顯示了，每個(gè)頁面都寫這么多東西很麻煩我們有 vscode。

刪除所有內(nèi)容在頁面里只需一個(gè)感嘆號(hào) ，再按一下 tab 鍵，html 基本格式自動(dòng)生成了，這時(shí)就可以直接在 body 內(nèi)編寫網(wǎng)頁內(nèi)容了。

通過觀察基本結(jié)構(gòu)發(fā)現(xiàn) 標(biāo)簽前面有的有空格有的沒有空格這是為什么呢實(shí)際上當(dāng)出現(xiàn)標(biāo)簽嵌套的時(shí)候需要保持一個(gè)固定的縮進(jìn) ，一般采用兩個(gè)或者四個(gè)空格具體看個(gè)人習(xí)慣和開發(fā)團(tuán)隊(duì)的規(guī)范，為了方便閱讀不推薦混用。有些標(biāo)簽嵌套在一起，這就是標(biāo)簽結(jié)構(gòu)嵌套

在一個(gè)標(biāo)簽內(nèi)再次書寫一個(gè)標(biāo)簽他們之間形成了這樣的包裹關(guān)系，別包裹的叫做子標(biāo)簽，包裹的就是父標(biāo)簽。

在父子標(biāo)簽嵌套的時(shí)候子標(biāo)簽整體相對(duì)于父標(biāo)簽多一套縮進(jìn)，更加方便閱讀。

在線咨詢

上一篇：HTML大整合（上）
下一篇：html亂碼-解決gb2312編碼導(dǎo)致亂碼問題

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商