作者: 她不美卻常駐我心
博客地址: http://www.reibang.com/u/6bed35ff9fe7
微信公眾號：老王的前端分享
每篇文章純屬個(gè)人經(jīng)驗(yàn)觀點(diǎn)疗锐，如有錯(cuò)誤疏漏歡迎指正坐榆。轉(zhuǎn)載請附帶作者信息及出處勺爱。

一、HTML 發(fā)展歷史

???????點(diǎn)這里查看發(fā)展歷史
???????互聯(lián)網(wǎng)及HTML的發(fā)展歷史，在閑暇之余當(dāng)成歷史故事讀一讀就好壮莹，沒必要強(qiáng)迫自己背下來绕德，但一些關(guān)鍵內(nèi)容還是需要記住殃姓，不然將來與別人談起翔冀，怎么好意思說自己是從事互聯(lián)網(wǎng)相關(guān)工作的导街。

二、HTML 基本骨架

???????如圖所示橘蜜，我們可以發(fā)現(xiàn)：一個(gè)HTML頁面主要是由四個(gè)部分組成的菊匿。

[圖片上傳失敗...(image-f050e9-1590224081500)]

1. 文檔聲明

???????<!DOCTYPE html>是一個(gè)文檔聲明，它并不是 HTML標(biāo)簽计福。它為瀏覽器提供一個(gè)聲明，告知瀏覽器這是一個(gè) HTML 頁面以及 HTML 的版本徽职，避免每個(gè)瀏覽器以各自不同的標(biāo)準(zhǔn)來解析象颖。
???????假設(shè)一個(gè)頁面并未設(shè)置該聲明，那么瀏覽器將按照 “怪異模式” 進(jìn)行解析姆钉，只有設(shè)置了該聲明之后说订，瀏覽器才會按照 “標(biāo)準(zhǔn)模式” 解析網(wǎng)頁。

注：a) 怪異模式：BackCompat 潮瓶，瀏覽器按照自己的標(biāo)準(zhǔn)來解析渲染頁面陶冷。
???????b) 標(biāo)準(zhǔn)模式：CSS1Compat，瀏覽器按照W3C的標(biāo)準(zhǔn)來解析渲染頁面毯辅。

2. html 標(biāo)簽

???????<html></html> 標(biāo)簽限定了文檔的開始點(diǎn)（<html>）和結(jié)束點(diǎn)（</html>）埂伦，在它們之間是文檔的頭部和主體。在實(shí)際開發(fā)中思恐，我們會常痴疵眨看到以下幾行代碼：

    <html lang="en">

???????這行代碼向?yàn)g覽器表示該頁面是 HTML ，并且語言為英文的網(wǎng)站胀莹，其 "lang" 是 “l(fā)anguage”的縮寫基跑，語言的意思。 “en” 表示 english 描焰，如果你的頁面如果是中文頁面媳否，可將其改為 <html lang="zh">，zh 即表示中文荆秦。

    <html xmlns="http://www.w3.org/1999/xhtml">

??????? xmlns 屬性在 XHTML 中是必需的篱竭，但在 HTML 中不是。它的作用是告訴瀏覽器萄凤，當(dāng)前頁面按照 W3C 的 XHTML 標(biāo)準(zhǔn)室抽。

3. head 標(biāo)簽

???????head 標(biāo)簽是網(wǎng)頁的頭部，以 <head> 開始靡努，以 </head> 結(jié)束坪圾。它是所有頭部元素的容器晓折，通過其中元素來描述了文檔的各種屬性和信息，包括文檔的標(biāo)題兽泄、在 Web 中的位置以及和其他文檔的關(guān)系等漓概。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。一般來說病梢，只有六個(gè)標(biāo)簽?zāi)芊旁?head 標(biāo)簽內(nèi)：

3.1 title 標(biāo)簽

???????title 標(biāo)簽的作用就是定義頁面的標(biāo)題胃珍。

3.2 meta 標(biāo)簽

???????meta 標(biāo)簽一般用于定義頁面的特殊信息，并不提供給用戶觀看蜓陌。例如說頁面的編碼格式觅彰，目的是為了告訴瀏覽器解析時(shí)應(yīng)該使用的編碼格式，頁面的關(guān)鍵字和描述信息钮热，其目的是為了便于搜索引擎抓取相關(guān)信息填抬；

???????meta 標(biāo)簽擁有很多的屬性，但在實(shí)際開發(fā)PC端網(wǎng)頁時(shí)隧期，我們最常用到如下所示飒责，也就是說，我們目前只需要記住以下幾個(gè)屬性即可仆潮，其他的屬性暫時(shí)不用費(fèi)心宏蛉。

    <meta charset="UTF-8">  
    <!-- 定義頁面的編碼格式為 UTF-8 -->
    <meta name="keywords" content="該頁面的關(guān)鍵字">
    <!-- 定義頁面的關(guān)鍵字 -->
    <meta name="description" content="該頁面的描述信息">
    <!-- 定義頁面的描述信息 -->

注： UTF-8 包含全世界所有國家需要用到的字符， GBK 和 GB2312 主要用于漢字的編碼性置。一般如果我們制作的網(wǎng)頁的時(shí)候都會采用 UTF-8 的編碼格式拾并，如果打開網(wǎng)頁出現(xiàn)亂碼情況，基本都是因?yàn)槲丛O(shè)定或者編碼格式設(shè)置錯(cuò)誤的問題蚌讼。

3.3 style 標(biāo)簽

???????style 標(biāo)簽用于定義 HTML 元素的 CSS 樣式辟灰，在實(shí)際工作中，我們經(jīng)常使用 link 標(biāo)簽引入外部的 CSS 文件篡石，所以對該標(biāo)簽不需要深入研究芥喇。

3.4 link 標(biāo)簽

???????link 標(biāo)簽用于引入外部 CSS 文件。

3.5 script 標(biāo)簽

???????script 標(biāo)簽內(nèi)填寫的是 JavaScript 代碼凰萨，既可以在標(biāo)簽內(nèi)直接填寫继控，也可以引入外部的 JavaScript 文件。

3.6 title 標(biāo)簽

???????base 標(biāo)簽為頁面上的所有的相對鏈接規(guī)定默認(rèn) URL 或默認(rèn)目標(biāo)胖眷。
???????通常情況下武通，瀏覽器會從當(dāng)前文檔的 URL 中提取相應(yīng)的元素來填寫相對 URL 中的空白。使用 <base> 標(biāo)簽可以改變這一點(diǎn)珊搀。瀏覽器隨后將不再使用當(dāng)前文檔的 URL冶忱，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a> <img> <link> <form> 等標(biāo)簽中的 URL境析。
???????在一個(gè)頁面內(nèi)囚枪，最多使用一個(gè)該標(biāo)簽派诬。

4. body 標(biāo)簽

???????在一個(gè)頁面中，head 標(biāo)簽表示的是頁面的“頭部”链沼，其中的內(nèi)容大部分是不可見的默赂。而body 標(biāo)簽表示的是頁面的身體，其中的內(nèi)容則是用戶可以直接看到的內(nèi)容括勺。接下來我們要學(xué)習(xí)的其他標(biāo)簽缆八，都是位于 body 標(biāo)簽內(nèi)部的。
???????例如我們創(chuàng)建一個(gè) html 文檔疾捍，輸入以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>少年中國說</title>
</head>
<body>
    <h1>少年中國說</h1>
    <p>紅日初升奈辰，其道大光。河出伏流拾氓，一瀉汪洋冯挎。</p>
    <p>潛龍騰淵，鱗爪飛揚(yáng)咙鞍。乳虎嘯谷，百獸震惶趾徽。</p>
    <p>鷹隼試翼续滋，風(fēng)塵翕張。奇花初胎孵奶，矞矞皇皇疲酌。</p>
    <p>干將發(fā)硎，有作其芒了袁。天戴其蒼朗恳，地履其黃。</p>
    <p>縱有千古载绿，橫有八荒粥诫。前途似海，來日方長崭庸。</p>
    <p>美哉我少年中國怀浆，與天不老！</p>
    <p>壯哉我中國少年怕享，與國無疆执赡！</p>
</body>
</html>

???????瀏覽器預(yù)覽效果如下所示：

在這里插入圖片描述

三、HTML 注釋

???????被稱為 HTML 注釋函筋，以 "

四沙合、HTML 基本語法

1.空格、換行跌帐、縮進(jìn)首懈。

???????HTML 只在乎標(biāo)簽的嵌套結(jié)構(gòu)和關(guān)系绊率。誰嵌套了誰，誰被誰嵌套了猜拾。瀏覽器解析 HTML 文件時(shí)即舌，會忽略掉換換行和縮進(jìn)，并不影響頁面的結(jié)構(gòu)挎袜。也就是說顽聂，HTML 不是依靠縮進(jìn)來表示嵌套的，而是看標(biāo)簽的包裹關(guān)系盯仪。但是紊搪，我們發(fā)現(xiàn)如果有良好的縮進(jìn)，代碼的可讀性會更強(qiáng)全景，所以要求大家在開發(fā)時(shí)要有良好的書寫習(xí)慣耀石，正確縮進(jìn)代碼。
???????但在項(xiàng)目上線爸黄，發(fā)布到服務(wù)器時(shí)滞伟，考慮節(jié)約服務(wù)器的存儲空間和帶寬，一般都會使用代碼打包工具對完成的代碼進(jìn)行打包炕贵，對瀏覽器而言標(biāo)簽的層次依然清晰梆奈，只不過程序員不可讀了。例如說百度首頁的代碼：

百度首頁html部分

2. 標(biāo)簽閉合原則

???????所有標(biāo)簽都是放在 <> 尖括號里的称开，成對出現(xiàn)亩钟，且必須閉(開始&結(jié)束標(biāo)簽)。
例：<html></html>

3. 單標(biāo)簽

???????有些特殊標(biāo)簽沒有相對應(yīng)的標(biāo)簽鳖轰，我們一般稱為單標(biāo)簽清酥、自閉合標(biāo)簽等。
例： <br/>

4. 屬性

???????所有標(biāo)簽本身都具有一個(gè)或多個(gè)屬性蕴侣，寫法：屬性名=”屬性值” 多個(gè)屬性用空格隔開焰轻。
例：<meta charset="UTF-8"> charset 是屬性名，UTF-8 是屬性值睛蛛。

5. 標(biāo)簽嵌套原則

???????在 HTML 中所有的標(biāo)簽都可以相互嵌套的鹦马，但嵌套要合理，且閉合時(shí)要嚴(yán)格按照嵌套順序進(jìn)行閉合忆肾。

6. 注釋標(biāo)簽不可相互嵌套荸频。

7. 書寫規(guī)范

???????寫標(biāo)簽時(shí)應(yīng)該小寫、屬性值雙引號客冈、嵌套縮進(jìn)旭从。遵循代碼清晰的原則，便于維護(hù)。

8.語義化原則

???????語義化和悦，顧名思義退疫，就是用相對應(yīng)的、有一定語義的標(biāo)簽來表示 HTML 的結(jié)構(gòu)鸽素，且 HTML本身就是標(biāo)記語言褒繁。
注：語義化的優(yōu)點(diǎn)：
??????? a) 增強(qiáng)可讀性，對開發(fā)者更友好馍忽，在沒有 CSS 的情況下也能較好地呈現(xiàn)網(wǎng)頁的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)棒坏，便于團(tuán)隊(duì)的開發(fā)和維護(hù)。
??????? b) 有利于 SEO 遭笋，可以讓搜索引擎爬蟲更好地獲取到更多有效信息坝冕，搜索引擎的爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，有效提升網(wǎng)頁的搜索量瓦呼。
??????? c) 支持讀屏軟件喂窟，方便其他設(shè)備的解析（如屏幕閱讀器、盲人閱讀器等）央串，利于無障礙閱讀磨澡，提高可訪問性。

五质和、常見瀏覽器及內(nèi)核

圖標(biāo)	名稱	內(nèi)核
	谷歌瀏覽器 Chrome	以前是Webkit內(nèi)核钱贯，現(xiàn)在是Blink內(nèi)核
	火狐瀏覽器 Firefox	Gecko內(nèi)核，俗稱Firefox內(nèi)核
	蘋果瀏覽器 Safari	Webkit內(nèi)核
	IE瀏覽器 IE	Trident內(nèi)核侦另，也是俗稱的IE內(nèi)核
	歐朋瀏覽器 Opera	最初是自己的Presto內(nèi)核，后來是Webkit尉共，現(xiàn)在是Blink內(nèi)核
	edge瀏覽器	最初是 EdgeHtml 內(nèi)核褒傅，現(xiàn)在換成了 chrome 內(nèi)核

??????? 目前國內(nèi)大部分瀏覽器均采用 IE + Chrome 雙內(nèi)核模式，在其基礎(chǔ)上進(jìn)行了相應(yīng)的二次開發(fā)袄友。例如說 360 瀏覽器殿托，QQ 瀏覽器等。普通兼容模式使用 Trident 內(nèi)核剧蚣，急速模式使用 Chrome 內(nèi)核支竹。

在這里插入圖片描述

六、開發(fā)工具

1. Visual Studio Code

??微軟出廠的跨平臺編輯器鸠按，完全免費(fèi)礼搁。加載大文件幾乎秒開，運(yùn)行速度很快目尖，擁有很多插件馒吴，且查找安裝方便，如果只是編寫前端代碼的話，其對插件依賴較小饮戳，集成的功能基本上夠用豪治。debug 功能強(qiáng)大，在Nodejs調(diào)試中十分方便扯罐，也是作者一直使用的前端 IDE负拟。

2. Sublime Text

??作者本人從來沒有使用過 Sublime ，所以不多加介紹歹河。聽同事的簡單介紹它是一款輕量掩浙、簡潔的跨平臺的編輯器。支持N多種語言启泣，很多人都偏愛它涣脚。作為web學(xué)習(xí)者，我覺得不用在編輯器的選擇上太費(fèi)周章寥茫，選一款你中意的就行遣蚀，一般不會有團(tuán)隊(duì)強(qiáng)求所有人使用一樣的 IDE。

3. HBuilder

??國人自主開發(fā)的一塊編輯器纱耻，中文界面芭梯，免費(fèi)且提示功能強(qiáng)大，支持H5項(xiàng)目云打包弄喘，內(nèi)置 mui 的項(xiàng)目模板玖喘，十分適合新手使用∧⒅荆可惜早年使用的時(shí)候運(yùn)行較大項(xiàng)目時(shí)卡頓嚴(yán)重累奈，不知道目前的優(yōu)化程度如何，后續(xù)推出的 HBuilder X 也沒有使用過急但。

4. WebStorm

??與 Java 開發(fā)神器 IntelliJ IDEA 師出同門也被成為 Web 前端的開發(fā)神器澎媒，集成了許多強(qiáng)大的功能，非常豐富波桩，基本無須安裝插件戒努，可以自動保存代碼，而且可以在整個(gè)項(xiàng)目中搜索代碼镐躲，更改文件名時(shí)储玫，也會友好的對你提示會對那些地方造成影響。
??但是因?yàn)榧傻墓δ苓^于豐富萤皂，對電腦的要求也高撒穷。配置比較低的話，打開速度慢敌蚜，打開大文件的速度也不盡人意桥滨。打開多個(gè)項(xiàng)目的話窝爪，內(nèi)存占用會大幅上升。盡管如此齐媒，也從來沒有造成過什么損失蒲每，最多只是重啟一下。
??所以一般電腦上安裝這個(gè)編輯器（開發(fā)使用）喻括，一般還要安裝一個(gè)輕量級的編輯器（打開單個(gè)文件使用）作為輔助使用邀杏。
??最重要的一點(diǎn)是該編輯器收費(fèi)，但是網(wǎng)上也有很多激活碼和破解版唬血。

5. Notepad++

??超輕量級的編輯器望蜡，每個(gè)程序員的電腦里都會裝的編輯器，小巧高效拷恨。

種一棵樹脖律，最好的時(shí)間是十年前，其次是現(xiàn)在腕侄。人的一生小泉，總的來時(shí)就是不斷學(xué)習(xí)的一生。
蠶吐絲冕杠，蜂釀蜜微姊。人不學(xué)，不如物分预。與其糾結(jié)學(xué)不學(xué)兢交，學(xué)了有沒有用，不如學(xué)了再說笼痹。
等你學(xué)會了之后配喳，你才擁有資格說“啊，這個(gè)東西學(xué)了沒用凳干〗绻洌”

每篇文章純屬個(gè)人經(jīng)驗(yàn)觀點(diǎn)，如有錯(cuò)誤疏漏歡迎指正纺座。轉(zhuǎn)載請附帶作者信息及出處。您的評論和關(guān)注是我更新的動力!
[圖片上傳失敗...(image-ef4ca3-1590224081500)]
請大家關(guān)注我的微信公眾號溉潭，我會定期更新前端的相關(guān)技術(shù)文章净响，歡迎大家前來討論學(xué)習(xí)。

從零開始學(xué)前端 - 1. HTML基礎(chǔ)知識