你的HTML頁(yè)面書(shū)寫(xiě)規(guī)范嗎？必須知道的HTML書(shū)寫(xiě)規(guī)范

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

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

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

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

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

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

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

7.語(yǔ)言屬性

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

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

<html>

</html>

8.IE 兼容模式

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

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

9.字符編碼

通過(guò)明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(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ù)量

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

<span>

</span>

13.

不要使用 @import

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

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

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

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

14.

class 命名

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

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

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

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

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

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

.t { ... }

.red { ... }

.header { ... }

/* Good example */

.tweet { ... }

.important { ... }

.tweet-header { ... }

么是html？

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

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

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

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

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

課程特點(diǎn)

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

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

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

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

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

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

適宜人群

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

2. 前端愛(ài)好者；

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

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

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

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

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

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

head里面的標(biāo)記

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

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

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

<meta>元素的屬性：

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

1、name 屬性

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

2、http-equiv屬性

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

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

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

3、content 屬性

特殊屬性

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

4、charset屬性

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

代碼實(shí)例：

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

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

<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)頁(yè)標(biāo)題(顯示在瀏覽器上)</title>
 6     <meta name="author" content="nyw">
 7     <!--作者， 定義網(wǎng)頁(yè)的作者 -->
 8     <meta name="description" content="meta標(biāo)記學(xué)習(xí)">
 9     <!-- 描述，描述網(wǎng)頁(yè)的實(shí)際內(nèi)容 -->
10     <meta name="keywords" content="HTML,meta">
11     <!-- 關(guān)鍵字，定義網(wǎng)頁(yè)關(guān)鍵字 -->
12     <meta http-equiv="refresh" content="30">
13     <!-- 網(wǎng)頁(yè)30s后自動(dòng)刷新 -->
14     <meta http-equiv="refresh" content="5,url=dom.html">
15     <!-- 網(wǎng)頁(yè)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)記都是寫(xiě)在head標(biāo)簽中

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

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

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

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

base屬性值：

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

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

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

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

terget屬性值：

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

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

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

link屬性：

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

rel：引用文件，引用資源的類(lèi)型定義

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

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

author 網(wǎng)頁(yè)的作者

help 幫助文件的鏈接

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

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

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

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

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

hreflang 鏈接文件的語(yǔ)言種類(lèi)

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

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

代碼示例：

鏈接網(wǎng)頁(yè)圖標(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)注的類(lèi)型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機(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="可選樣式單">

說(shuō)明：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在線(xiàn)咨詢(xún)

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

您的項(xiàng)目需求

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

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