為什么80%的碼農都做不了架構師？>>> ??

加油，HTML 雖然很多標簽，不過用用就習慣了。很快就能maste ！

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

因此，寫一個網頁最重要的時我們要準備什么樣的內容。然后，參考HTML的規則，以HTML的規則對這些內容進行包裝。當我們包裝成為HTML格式后，瀏覽器就能夠很好的解讀了。

????HTML的規則是以HTML的標簽來表達的，對于HTML規則來說，標簽就是內容。也就是我們準備的內容需要包裝在標簽內部來表示。這也就是當我們打開瀏覽器，右鍵查看源代碼的時候，總是有很多標簽的原因。我們看到的網頁就是這份源代碼被瀏覽器解釋后的結果，這份源代碼就叫做文檔(document)。

????HTML的標簽是有限的，而我們要表達的內容如此的豐富多彩，顯而易見，我們寫HTML就是用有限的HTML標簽表達無限的內容和思想。很像一個翻譯是不？呵呵。用有限的字詞，表達無盡的詩意。好的翻譯呢，我們說優雅，說美；差的呢，我們說牽強，說喪盡節奏，不擇手段。

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

????所以學習HTML的第一步，就是看看HTML的標簽有哪些，這些標簽基本用法是做什么的。

????常用的標簽：

????div????這個是最常用的，他表示一塊內容。幾乎所有的標簽都可以由他替代，是個萬金油。因為，不管怎么樣，展示出來的效果一定可以劃分成一塊一塊的（所以倒著推理，內容也一定可以通過包裝成div而現實成為一塊一塊的）。不過缺點是，div 沒有親戚，也就是，如果兩個div在一起，那么他們還是兩個div。不會因為他們挨著很近就說他們兩個是一對，也不能說他們兩個很遠，就不是一對。div 是孤獨的。

????span????這個也比較常用。理由和div的一樣。至于和div的區別，動手實驗一下就知道了。

????p????????這個表示一個段落文字?？梢杂脕碚故疽粋€段落的文字。

????h1~h6????這個是一些列大小的標題。

????a????????這個是超鏈接。是從此處到彼處的橋梁。往往表示通過點擊此處能夠從當前的狀態（頁面）進入到另一個狀態（頁面）。

????img?????這個表示一張圖片?？梢燥@示一副圖片。

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

dl dt/dd?? , ol li 這兩套標簽和ul li 是一樣的。至于區別，自己動手實驗。

????form?????學名表單。用來接受輸入和按鈕點擊，當輸入完畢后，form 就是指定這些輸入交給誰，以及如何交付的。form本身不具有輸入和按鈕點擊功能。不過他有一組成員幫組實現。

????input????比如百度搜索，那個輸入框。特點是你能夠輸入一行文本。

????textarea?????比如百度貼吧發表回帖，的那個輸入框。特點是能夠輸入多行文本。

? ??

? ?

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

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

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

????

????

轉載于:https://my.oschina.net/honchy/blog/353291

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。