例行開篇，思辨學院的 大前端課-基礎部分 的課程是一個系統性的前端基礎入門課，課程將從前端知識體系建設、學習方法論、知識難點要點等多個維度帶你走過前端入門的過程。你可以關注微信公眾號 思辨學院 在第一時間獲取最新的課程。
這節我們主要學HTML4.01中與文本、布局、表單相關的重要標簽和概念。
塊級元素和行內元素
在學習這部分內容之前，我們先學習一個塊級元素和行內元素的概念，在HTML里，body標簽里大多數能顯示在頁面上的標簽都是塊級元素或行內元素。那為什么要區別行內元素和塊級元素呢？我們在還沒有學CSS的時候只需要知道以下幾點就好了：
在這部分的學習里，一定要有快級元素和行內元素的概念，在學習一個新標簽的時候，要搞清楚它是行內元素還是塊級元素。
文本和布局標簽
div標簽
div標簽是一個非常重要和常用的布局標簽，它是一個塊級元素。
div標簽常見的作用是作為容器標簽來組織頁面上的其它標簽和內容，起到劃分頁面結構，對內容分組的作用，習慣里也把一個div叫做一個層，div是 的簡寫。
合理對頁面上的內容分組是一個看似簡單，實際操作的時候又有很大靈活性的事情，好的／合理的分組往往使得頁面層次結構清晰，CSS復用率高，用js操作DOM時也更輕松，這個能力需要多看多想多練，在積累中提高。
需要注意的是，其它塊級元素本身就是一個區塊。在語意明確的情況下，如果有合適的其它塊級元素標簽，比如文章的段落用p，列表用ul、ol，都優先選用這些語意／含義更強更明確的標簽。只有在這些標簽滿足不了要求的時候，才使用div，一來避免div的濫用，另一方面也讓頁面的語意更明確。
在避免div濫用方面，我們還要注意，網頁的層級和區塊并不是越多越好。在滿足需要的情況下，我們應當盡量減少頁面的標簽嵌套層級和區塊數量。在寫html的時候，每增加一個層級的標簽嵌套和區塊的時候就要問自己兩個問題：我增加這層嵌套／這個區塊的目的是什么？如果不加能不能實現同樣的效果？
來看一個手淘的簡化版的區塊劃分的例子：
在手機頁面上頁面結構往往比較簡單，PC頁面的復雜程度會高很多，應對各種復雜頁面的方法只有一個，就是多看多想多練。
h1、h2、h3、h4、h5、h6……標簽
標題標簽比較簡單，h1 到 h6 分別代表 一級標題 到 六級標題，標題標簽是塊級元素。
使用標題標簽的時候有一個點需要注意，就是在一個頁面里標題層級要是連續的，不能沒有用h1標簽就直接去用h2標簽，一定要是h1 h2 h3 h4這樣按照層級用下來，否則不管是語意上還是規范上都有問題。
dl、dt、dd標簽
這是一組描述列表標簽，初學前端的時候往往會忽略這組標簽，因為有有序列表ol和無序列表ul標簽，那這個描述列表又是在什么場景下用的呢？
所謂描述列表，就是說列表的每一項，都會有一個描述，比如字典條目，每個條目都會有一個解釋，比如問答列表，問題可以作為條目，答案可以作為描述。
dl list 描述列表，dt term 列表條目，dd 條目描述，它們都是塊級元素。
用法舉例：
計算機
用來計算的儀器 ... ...
顯示器
以視覺方式顯示信息的裝置 ... ...
表單標簽
表單標簽是這節課里面重點中的重點，表單在網頁里負責收集用戶的輸入，和后端打交道離不開表單。
雖然隨著ajax的廣泛使用，直接用form標簽提交表單的用法越來越少，但很多基礎的知識點還是相同的。
form標簽
form標簽用于創建一個表單，是表單的容器，內部可以嵌套相應的輸入標簽，一個頁面里可以有多個form。
表單標簽有幾個比較重要的屬性，列舉如下：
其中的取值有以下幾種：
屬性的取值和a標簽的屬性取值類似，可以指定表單提交時是打開一個新窗口提交（）還是讓當前頁面跳轉到指定的地址來提交數據（_self），更多屬性可以查看文檔。
在上面的屬性里，也是一個比較重要的屬性，屬性指定了表單提交的方法，常用的有get和post，通俗的講，就好比你要去一個地方，form標簽的屬性用來指定你要去的目的地，而用來指定你去的方式，是打車去還是走路去。
關于里面常用的get和post方式，get較為簡單，會把表單內容直接附加在指定的地址上，兩者之間用 ？連接，通過網址來傳送信息。
比如你打開淘寶搜索 充電寶 點擊搜索按鈕后，瀏覽器地址欄的網址變成了大概這樣的形式：
/?q=充電寶&=&js=1……
這就是典型的get提交表單后地址欄的樣子，由上面說的我們可以知道，這個表單的是 / 問號后面的都是表單的信息。
上面說了get方法，如果是post呢？post方法提交表單時瀏覽器地址上不會出現表單的信息，如果上面的例子我們把get改成post，提交后瀏覽器的地址應該是這樣的 /使用a標簽提交表單，也就是不會有問好和問號之后的部分。
get和post除了上面說的之外，還有以下幾點需要注意：
input標簽
input標簽是表單里最重要的標簽之一，文本框，密碼框，單選框，復選框等等這些東西都是通過input來實現的。
在HTML5里，input增加了很多好用的屬性和類型，我們會在HTML5的課程里去了解，就HTML4.01而言，我們需要重點關注的屬性有下面這些：
不同類型的input大家下來之后都要去試一試，看看它長什么樣，有什么用。同時也要去試試不同的屬性用在什么情況下，在哪些type的input上可以用。
在上面的屬性里，name是一個有必要拿出來說一下的屬性，一個input所產生的輸入是以鍵值對的形式向后端提交的，例如我們常見的登陸表單：
在上面的例子里，用戶名這個input生成的數據的鍵就是name屬性指定的使用a標簽提交表單，密碼這個input的鍵是passw，而鍵對應的值就是用戶輸入的東西。
比如用戶輸入的用戶名是 張三 ，密碼是 666 那上面這個表單最后生成的向服務器提交的數據就是：=張三&passw=666 在類型為get的請求里，鍵和值通過 = 連接，不同的鍵值對通過 & 連接。
關于name還有一點需要注意，在使用多選框和復選框的時候，name還用來對多選框和復選框分組，name相同的單選框或復選框會自動關聯到一組。比如我們常見的選擇性別的單選框：
label標簽
大家可能注意到上面的例子里用到了label標簽，這也是label標簽一個常用的用法，就是用來關聯input。label標簽有一個fro屬性，用來指定label要關聯input的id。在一個頁面上，id屬性的值是不允許重復的。
當label標簽和input建立好聯系以后，點擊label就會激活關聯的input，效果相當于點擊了label關聯的input。
其它標簽
p、ul、ol、li、span、、img，a、table這些都是相對常用的標簽，但是比較簡單，大家下來去查閱下文檔，了解以下它們的用法。
至于已經廢棄和不推薦的標簽，我們都沒有拿出來講，也不推薦大家去專門學習，有個大概的印象就可以。
下節課是HTML部分的最后一篇，會講講HTML5規范里新增的標簽屬性還有一些變化，大家可以預習起來了。
作業
課程進行到這里，大家已經可以做一些基本的頁面了，雖然做出來看著很丑，但是別著急，等我們開始css的學習之后，頁面會漂亮起來的。
今天的作業是用你已經學到的html知識來為自己寫一份網頁版的簡歷，并在簡歷上加上留言的表單，動起來把。