前端技術(shù)近年來(lái)迅猛發(fā)展，各種框架、語(yǔ)言、工具層出不窮，讓我等剛剛接觸前端的小白深深的感覺到以自身有限的精力能否追趕上技術(shù)的發(fā)展。
使用C++好幾年了，所使用的庫(kù)無(wú)非是Qt庫(kù)、STL等，編程IDE也不過(guò)是QtCreator、Visual Studio之類的，而語(yǔ)言更是只有C++一種；而Web開發(fā)則完全不同，需要學(xué)習(xí)的語(yǔ)言有html、css、javascript，庫(kù)、框架則多了去了，可以說(shuō)和C++相比差了一個(gè)數(shù)量級(jí)，更別說(shuō)有各種自動(dòng)化工具了；
面對(duì)如此大體量的技能庫(kù)，我不止一次地感到迷茫；但我相信，技術(shù)的初衷是簡(jiǎn)單的，所以，技術(shù)的核心也應(yīng)該不會(huì)復(fù)雜，所以，記錄下那些真正關(guān)鍵的、核心的內(nèi)容，才能達(dá)到事半功倍的效果，如果剛開始，就被各種細(xì)節(jié)特性所牽絆，不僅學(xué)的痛苦，也許會(huì)學(xué)到懷疑人生。
比如剛剛看makedown新手指南,比我以前看的教程簡(jiǎn)單很多，總結(jié)來(lái)說(shuō)就是以下幾點(diǎn)：
- # 用于標(biāo)記標(biāo)題
- - 用于標(biāo)記無(wú)序列表；
n. 用于標(biāo)記有序列表，n為1、2、... 的數(shù)字；
[文字說(shuō)明](超鏈接)用于表示普通鏈接;
用于鏈接圖片；
- >用于表示引用；
- *XXX* 使XXX斜體顯示
**XXX** 使XXX粗體顯示；
- ```代碼引用```
- 所有以上所用到的符號(hào)如果希望原碼顯示，直接在其前面添加反斜杠 \ ;
其實(shí)，掌握了上述語(yǔ)法，能夠編寫大多數(shù)的文檔，根據(jù)二八法則，大概前端中80%的技能應(yīng)該是不常用的，對(duì)我們構(gòu)建整個(gè)Web開發(fā)技能樹影響不大的，那為何要讓自己糾結(jié)于80%的“雞肋”功能之上呢，我們完全可以在完成技能樹的構(gòu)建之后，慢慢去消化那80%的知識(shí)體系；
html的作用
在學(xué)一個(gè)技能之前，我們要明白為什么需要這個(gè)技能，它與其上下游技能之間的關(guān)系是什么，沒有這個(gè)技能我們?cè)撌褂眠@樣的手段來(lái)替代該技能，該技能與其相似技能的關(guān)系等問(wèn)題；
html用于頁(yè)面界面的設(shè)計(jì)；
html結(jié)合css、javascript用造房子進(jìn)行比喻，相當(dāng)于html是最基礎(chǔ)的一個(gè)個(gè)房間，以及房間內(nèi)的物品；css相當(dāng)于這些房間和物品的裝飾，通過(guò)涂上顏色、修改尺寸，讓它們變得更加美觀；javascript相當(dāng)于為這些物品實(shí)現(xiàn)智能化，你通過(guò)按一個(gè)按鈕，就能實(shí)現(xiàn)讓房間的顏色改變，或者為您拉開窗簾等智能功能；
html文件的組成
html文件主要由兩大塊，head和body，head用于引入css、js文件，定義編碼方式、語(yǔ)言、網(wǎng)頁(yè)過(guò)期時(shí)間、刷新頻率等等。
東西夠多吧，其實(shí)對(duì)于初學(xué)者來(lái)說(shuō)，很多都是現(xiàn)階段不需要掌握的，其實(shí)需要記住的就兩個(gè)。一個(gè)是<i><item> title<item></i>，用于設(shè)置網(wǎng)頁(yè)名稱，一個(gè)是<i><meta charset='utf-8'></i>，用于保證你的頁(yè)面不顯示亂碼，其他的內(nèi)容，等以后真正用到再學(xué)也不遲；
鄙人認(rèn)為，學(xué)習(xí)的知識(shí)是拿來(lái)用的，只用經(jīng)常用的知識(shí)，才能深深地嵌入腦海中，也才是對(duì)你來(lái)說(shuō)有用的知識(shí)，而有的知識(shí)，比如github的使用、linux命令行的各種命令等，如果你不用，或者一個(gè)月用個(gè)一次，感覺學(xué)習(xí)效果將大大大地打折扣；
html標(biāo)簽的分類
1. HTML文檔標(biāo)簽
-
<!DOCTYPE> :定義文檔類型；
-
html :定義HTML文檔；
-
head :定義文檔頭部；主要包括以下內(nèi)容：
1). meta：定義頁(yè)面的元信息，如關(guān)鍵字、描述、刷新頻率、過(guò)期時(shí)間；
2). base：定義基url，eg. <base >則網(wǎng)頁(yè)中所有的相對(duì)url都以該base url為起始位置，#即表示該url；
3). title：文檔標(biāo)題；
4). link：外部資源鏈接；
5). style：內(nèi)部樣式；
-
body :定義文檔主體
1). script ： 定義客戶端腳本；如Javascript；
2). noscript : noscript標(biāo)簽內(nèi)填寫的是普通文本，當(dāng)script中的代碼不起作用時(shí)，則noscript中的文本將被顯示；
其實(shí)script并不一定放置在body中，例如對(duì)外部js文件的引用就通常放在head中；
2.布局標(biāo)簽&語(yǔ)義化
-
div :塊級(jí)元素，作為容器，可通過(guò)css為其修飾； -
span :行內(nèi)元素，可作為容器； -
header :頁(yè)眉，語(yǔ)義化的div； -
hgroup :定義標(biāo)題組； -
nav :定義導(dǎo)航，語(yǔ)義化的div； -
article :文章，語(yǔ)義化的div； -
section :區(qū)段，語(yǔ)義化的div； -
aside :與article相關(guān)，但不屬于article的內(nèi)容，語(yǔ)義化的div； -
footer :頁(yè)腳，語(yǔ)義化的div； -
details :其中包含summary，表示可見部分；其他元素在details中不可見；目前僅chrome、safari支持； -
summary :作為details的可見子元素； -
dialog :定義對(duì)話框或窗口；
語(yǔ)義化的div是指，在html5中，為了使整個(gè)頁(yè)面的邏輯更加清晰，而將div定義為多個(gè)類型，但對(duì)頁(yè)面的表現(xiàn)形式?jīng)]有影響；
3. 表格標(biāo)簽
-
table :定義表格； -
caption :定義表格名，顯示在表格上方正中間； -
thead :定義表格頭，在該標(biāo)簽內(nèi)的元素將被放在表格首行； -
tr :定義一行； -
th :定義表頭，字體將被加粗； -
tbody :定義主體； -
td :定義單元格數(shù)據(jù)； -
tfoot :定義頁(yè)腳，在該標(biāo)簽內(nèi)的元素將被放在表格最底行；
4.表單標(biāo)簽
-
form :表單定義;
<p>對(duì)表單進(jìn)行提交時(shí)，瀏覽器將收集對(duì)應(yīng)表單中存在name的輸入型表單控件，name和value值形成name/value鍵值對(duì)提交給后端，其中沒有name的控件將不被提交；若存在多個(gè)submit按鈕，只有被點(diǎn)擊按鈕的name/value對(duì)會(huì)被提交；</p><p>如果是以GET方式提交，鍵值對(duì)將被放在URL中，如果以POST方式提交，鍵值對(duì)將被放在http數(shù)據(jù)包中；例如“中國(guó)科學(xué)”4個(gè)字對(duì)應(yīng)的url為:
“%E4%B8%AD%E5%9B%BD%E7%A7%91%E5%AD%A6”
則其無(wú)論通過(guò)get或post傳送，都需要傳送的字節(jié)數(shù)為36byte，故通過(guò)表單提交漢字的效率非常低；
</p> -
input :定義輸入域；其type有以下幾種：
1). text: 普通的單行文本框；
2). password: 密碼域；
3). button: 普通按鈕；
4). checkbox: 多選框；
5). radio: 單選框；多個(gè)相同name的單元框?yàn)橐唤M，一組中只有一個(gè)被選中； -
textarea :多行文本框； -
label :標(biāo)簽，其for屬性指定label所綁定的控件id號(hào)，當(dāng)點(diǎn)擊該label時(shí)，相當(dāng)于點(diǎn)擊了指定id的控件； -
fieldset :將多個(gè)元素組合在一個(gè)框中，框的名稱通過(guò)legend標(biāo)簽指定，屬于裝飾類控件； -
select :下拉列表框，其中的option標(biāo)簽用于指定下拉列表的項(xiàng)； -
option :下拉列表的項(xiàng)； -
optgroup :用于對(duì)下拉列表框的選項(xiàng)進(jìn)行歸類，屬于裝飾類控件； -
button :按鈕； -
keygen :定義表單的密鑰對(duì)生成器字段； -
output :定義不同類型的輸出；
注：<input type='button'>與<button>的區(qū)別：
- input是個(gè)自閉合標(biāo)簽，而button是個(gè)閉合標(biāo)簽；閉合標(biāo)簽可以作為容器放置其他頁(yè)面元素，而自閉合標(biāo)簽不可以；
- input類型的button，其value屬性就是要顯示的內(nèi)容，而button實(shí)現(xiàn)了value屬性和顯示內(nèi)容的分離；
- input的按鈕可以有button和submit兩種type，而button可以有的reset和submit兩種type；
- <input type="submit" value="Key1" name="submit1" >和<button type="submit" value="Key1" name="submit1" > Key1 </button>是等效的；
注：元素的id屬性和name屬性的區(qū)別
- 通常來(lái)說(shuō)name屬性與后臺(tái)相關(guān)，http協(xié)議封裝的鍵值對(duì)信息中，鍵通常就是對(duì)應(yīng)表單元素的name；id屬性與前端相關(guān)，css通過(guò)id進(jìn)行精確定位,javascript代碼也可以通過(guò)id操作控件；
- 多個(gè)控件的name屬性可以相同，而id號(hào)不允許相同，經(jīng)過(guò)測(cè)試，在chrome瀏覽器上，多個(gè)相同id的元素對(duì)css的渲染沒有影響,對(duì)于javascript代碼不會(huì)報(bào)錯(cuò)，但只對(duì)第一個(gè)該id的控件進(jìn)行操作；
5. 列表標(biāo)簽
-
ul :無(wú)序列表，Unordered List； -
ol :有序列表，Ordered List； -
li :列表項(xiàng)，List Item； -
dl :定義列表，Define List，其中每一條定義都由dt和dd組成； -
dt :定義項(xiàng)名稱，Define iTem； -
dd :定義解釋，Define Description；
6. 圖像標(biāo)簽&連接標(biāo)簽
-
img :定義圖片，alt屬性為圖片資源不存在時(shí)顯示的文字內(nèi)容； -
a :定義超鏈接,取anchor(錨)的首字母； -
map :定義一幅圖片的熱區(qū)，使該熱區(qū)變得可點(diǎn)擊，鼠標(biāo)放在圖片熱區(qū)時(shí)，將變?yōu)槭中?；img與map的綁定通過(guò)img的usemap屬性完成，熱區(qū)通過(guò)map中的area指定； -
area :指定img中的熱區(qū)及對(duì)應(yīng)的點(diǎn)擊動(dòng)作； -
figure :定義媒介內(nèi)容的分組； -
figcaption :定義figure元素的標(biāo)題；
7. 音頻&視頻
-
audio :引入音頻內(nèi)容； -
video :引入視頻內(nèi)容； -
source :用于audio或video中，為音頻/視頻提供多種格式的源，瀏覽器工具source提供的type屬性自動(dòng)選擇一個(gè)可以解析的源； -
track :定義用在媒體播放器中的文本軌道；
8. 框架標(biāo)簽
-
iframe :內(nèi)聯(lián)框架；被稱為“瀏覽器中的瀏覽器”，用于在頁(yè)面中顯示另外一個(gè)頁(yè)面；
9. 格式標(biāo)簽
1. 文章標(biāo)簽
-
h1-h6 :定義HTML標(biāo)題(headline)； -
p :定義HTML段落(paragraph)； -
br :換行，即打斷一行(break row)； -
hr :水平分隔線(horizontal rule)； -
bdo :指定該標(biāo)簽內(nèi)文字顯示的順序，通過(guò)dir屬性進(jìn)行指定，默認(rèn)"ltr"表示從左往右顯示，“rtl”表示從右往左顯示，bdo是(Bi-Direction Override)雙向覆蓋； -
pre :定義預(yù)格式文本(previous)，其中的空格和換行將被保留； -
abbr :縮寫(abbreviation)，指定title屬性將會(huì)出現(xiàn)下劃線效果； -
address :定義地址信息，標(biāo)簽內(nèi)的文本將被斜體化、加粗； -
ins :表示新插入的內(nèi)容(insert)，在內(nèi)容下有下劃線； -
del :表示刪除的內(nèi)容(delete)，文本上出現(xiàn)刪除線； -
time :表示時(shí)間，沒有具體的顯示效果，而是為了實(shí)現(xiàn)內(nèi)容的語(yǔ)義化；
2. 短語(yǔ)元素標(biāo)簽
-
em :強(qiáng)調(diào)(emphasize)，以斜體方式顯示文本，但比i標(biāo)簽多了”強(qiáng)調(diào)“的語(yǔ)義； -
strong :標(biāo)識(shí)重要的文本，以粗體方式顯示，但比b標(biāo)簽多了”重要”的語(yǔ)義； -
dfn :define instance，可標(biāo)記對(duì)特殊術(shù)語(yǔ)或短語(yǔ)的定義，斜體形式顯示； -
code :說(shuō)明標(biāo)簽內(nèi)的文字為代碼，通常放在pre標(biāo)簽中以保持代碼的格式； -
samp :sample樣本，表示一小段代碼樣本； -
var :variant變量； -
sup :supscript，上標(biāo)(寫在上面的)， -
sub :subscript，腳注(寫在下面的)； -
cite :表示標(biāo)簽內(nèi)是引用的內(nèi)容，通常為文章、書籍、論文的標(biāo)題； -
blockquote :塊引用，從其他地方引入一段話； -
q :quote，引用，從其他地方引入一句話；
3. 字體樣式標(biāo)簽
-
i :italic斜體，無(wú)語(yǔ)義化； -
b :bold醒目的，對(duì)文本加粗，無(wú)語(yǔ)義化； -
big :放大字體,可嵌套使用，對(duì)文本多次放大，直到達(dá)到上限； -
small :縮小字體，可嵌套使用，對(duì)文本多次縮小，直到達(dá)到下限； -
mark :需要突出顯示的文本，會(huì)添加背景色，像是用標(biāo)記筆涂過(guò)一樣；
10. 其他
-
canvas :圖形容器，可通過(guò)javascript進(jìn)行圖形繪制； -
meter :計(jì)量條，可以設(shè)置min屬性，圖形化顯示某范圍內(nèi)的某一個(gè)值； -
progress :進(jìn)度條，無(wú)min屬性，從0開始，表示某個(gè)處理過(guò)程的進(jìn)度，比如文件下載進(jìn)度；
總結(jié)
html的語(yǔ)法非常簡(jiǎn)單，元素標(biāo)簽也不是很多，所以，把所有的標(biāo)簽都羅列了一遍，其實(shí)真正經(jīng)常用的也就一小部分；可以先把所有標(biāo)簽自己試一遍，觀察出現(xiàn)的效果，以后真正用到再去查即可；
