為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

加油，HTML 雖然很多標(biāo)簽，不過用用就習(xí)慣了。很快就能maste ！

????HTML 是原始內(nèi)容和瀏覽器溝通的方式。把原始內(nèi)容組織成為HTML的格式，瀏覽器能夠認(rèn)識(shí)，并很好的展示出來。

因此，寫一個(gè)網(wǎng)頁最重要的時(shí)我們要準(zhǔn)備什么樣的內(nèi)容。然后，參考HTML的規(guī)則，以HTML的規(guī)則對(duì)這些內(nèi)容進(jìn)行包裝。當(dāng)我們包裝成為HTML格式后，瀏覽器就能夠很好的解讀了。

????HTML的規(guī)則是以HTML的標(biāo)簽來表達(dá)的，對(duì)于HTML規(guī)則來說，標(biāo)簽就是內(nèi)容。也就是我們準(zhǔn)備的內(nèi)容需要包裝在標(biāo)簽內(nèi)部來表示。這也就是當(dāng)我們打開瀏覽器，右鍵查看源代碼的時(shí)候，總是有很多標(biāo)簽的原因。我們看到的網(wǎng)頁就是這份源代碼被瀏覽器解釋后的結(jié)果，這份源代碼就叫做文檔(document)。

????HTML的標(biāo)簽是有限的，而我們要表達(dá)的內(nèi)容如此的豐富多彩，顯而易見，我們寫HTML就是用有限的HTML標(biāo)簽表達(dá)無限的內(nèi)容和思想。很像一個(gè)翻譯是不？呵呵。用有限的字詞，表達(dá)無盡的詩意。好的翻譯呢，我們說優(yōu)雅，說美；差的呢，我們說牽強(qiáng)，說喪盡節(jié)奏，不擇手段。

????不過這個(gè)HTML編寫和翻譯不同的地方在于，每個(gè)人的翻譯看起來都不一樣；而HTML的翻譯在瀏覽器解釋后，是可以看起來一樣的，只是查看源代碼時(shí)才發(fā)現(xiàn)原來源代碼不同。說HTML編寫的好壞呢，如果為了顯示效果，不擇手段，標(biāo)簽亂堆，那盡管在瀏覽器解釋后，頁面看起來是非常漂亮，也是不太好的。這種情況可以前面的八個(gè)字概括，喪盡節(jié)操，不擇手段。

????所以學(xué)習(xí)HTML的第一步，就是看看HTML的標(biāo)簽有哪些，這些標(biāo)簽基本用法是做什么的。

????常用的標(biāo)簽：

????div????這個(gè)是最常用的，他表示一塊內(nèi)容。幾乎所有的標(biāo)簽都可以由他替代，是個(gè)萬金油。因?yàn)?#xff0c;不管怎么樣，展示出來的效果一定可以劃分成一塊一塊的（所以倒著推理，內(nèi)容也一定可以通過包裝成div而現(xiàn)實(shí)成為一塊一塊的）。不過缺點(diǎn)是，div 沒有親戚，也就是，如果兩個(gè)div在一起，那么他們還是兩個(gè)div。不會(huì)因?yàn)樗麄儼ぶ芙驼f他們兩個(gè)是一對(duì)，也不能說他們兩個(gè)很遠(yuǎn)，就不是一對(duì)。div 是孤獨(dú)的。

????span????這個(gè)也比較常用。理由和div的一樣。至于和div的區(qū)別，動(dòng)手實(shí)驗(yàn)一下就知道了。

????p????????這個(gè)表示一個(gè)段落文字。可以用來展示一個(gè)段落的文字。

????h1~h6????這個(gè)是一些列大小的標(biāo)題。

????a????????這個(gè)是超鏈接。是從此處到彼處的橋梁。往往表示通過點(diǎn)擊此處能夠從當(dāng)前的狀態(tài)（頁面）進(jìn)入到另一個(gè)狀態(tài)（頁面）。

????img?????這個(gè)表示一張圖片。可以顯示一副圖片。

????ul li?????這個(gè)是一套標(biāo)簽，表示列表。ul只是個(gè)殼子，代表一個(gè)大類別，重要的是li。li之間是有關(guān)系。他們屬于同一個(gè)父類型，他們互為兄弟。

dl dt/dd?? , ol li 這兩套標(biāo)簽和ul li 是一樣的。至于區(qū)別，自己動(dòng)手實(shí)驗(yàn)。

????form?????學(xué)名表單。用來接受輸入和按鈕點(diǎn)擊，當(dāng)輸入完畢后，form 就是指定這些輸入交給誰，以及如何交付的。form本身不具有輸入和按鈕點(diǎn)擊功能。不過他有一組成員幫組實(shí)現(xiàn)。

????input????比如百度搜索，那個(gè)輸入框。特點(diǎn)是你能夠輸入一行文本。

????textarea?????比如百度貼吧發(fā)表回帖，的那個(gè)輸入框。特點(diǎn)是能夠輸入多行文本。

? ??

? ?

????=================華麗的分割線===================

????在參與實(shí)際的開發(fā)過后，我時(shí)常會(huì)迷惑，HTML到底核心是內(nèi)容還是樣式。如果是內(nèi)容，那么大概90%以上的時(shí)間是在設(shè)計(jì)layout布局和css樣式，如果是樣式為主，那么又如何體現(xiàn)html的內(nèi)容語義化呢？

????今天我想到，無論是內(nèi)容還是樣式，都是在為了更好的表達(dá)。html的語義化，應(yīng)該是一種符合常規(guī)的表達(dá)方式，以至于機(jī)器和程序都能夠很好的理解。這樣看，內(nèi)容和形式，都是一樣的，基于表達(dá)的需要產(chǎn)生的。所以如果是針對(duì)視覺用戶來說，那么邊框，顏色等形式也是內(nèi)容的一部分了。那么再理解通過多層潛逃的div來完成一定的布局或者樣式上，就沒有心理障礙了。

????

????

轉(zhuǎn)載于:https://my.oschina.net/honchy/blog/353291

總結(jié)

以上是生活随笔為你收集整理的HTML 学习 第一步内容的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。