1、列表

列表ul容器里面裝載著結(jié)構(gòu)，樣式一致的文字或圖表的一種形式，叫列表。

列表最大的特點(diǎn)就是整齊 、整潔、 有序，跟表格類似，但是它可組合自由度會(huì)更高。

1. 無(wú)序列表 ul
 

< ul></ ul>中只能嵌套< li></ li>，直接在< ul></ ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。
 

< li>與</ li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。

<ul>
  <li>列表項(xiàng)1</li>
  <li>列表項(xiàng)2</li>
  <li>列表項(xiàng)3</li>
  ......
</ul>

2. 有序列表 ol

• < ol>標(biāo)簽中的type屬性值為排序的序列號(hào)，不添加type屬性時(shí)，有序列表默認(rèn)從數(shù)字1開(kāi)始排序。
• 常用的type屬性值分別為是1，a，A，i，I
• < ol reversed=“reversed”>中的reversed屬性能夠讓有序列表中的序列倒序排列。
• < ol start=“3”>中的start屬性值為3，有序列表中的第一個(gè)序列號(hào)將從3開(kāi)始排列。

<ol type="A"> 
  <li>列表項(xiàng)1</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>

3. 自定義列表 dl

定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)。

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
  ...
  <dt>名詞2</dt>
  <dd>名詞2解釋1</dd>
  <dd>名詞2解釋2</dd>
  ...
</dl>

2、表單

在HTML中，一個(gè)完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個(gè)部分構(gòu)成。表單目的是為了收集用戶信息。
 

表單控件：
 

包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。
 

提示信息：
 

一個(gè)表單中通常還需要包含一些說(shuō)明性的文字，提示用戶進(jìn)行填寫(xiě)和操作。
 

表單域：
 

它相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息，可以通過(guò)他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。

1. input 控件

<input type="屬性值" value="你好">

• input 輸入的意思
• < input />標(biāo)簽為單標(biāo)簽
• type屬性設(shè)置不同的屬性值用來(lái)指定不同的控件類型
• 除了type屬性還有別的屬性
   

用戶名: <input type="text" /> 
密  碼：<input type="password" />

value屬性

value 默認(rèn)的文本值。有些表單想剛打開(kāi)頁(yè)面就默認(rèn)顯示幾個(gè)文字，就可以通過(guò)這個(gè)value 來(lái)設(shè)置。

用戶名:<input type="text"  name="username" value="請(qǐng)輸入用戶名"> 

name屬性

• name表單的名字， 這樣，后臺(tái)可以通過(guò)這個(gè)name屬性找到這個(gè)表單。 頁(yè)面中的表單很多，name主要作用就是用于區(qū)別不同的表單。
• name屬性后面的值，是我們自己定義的。
• radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個(gè)選其中的一個(gè)啦
• name屬性，我們現(xiàn)在用的較少，但是，當(dāng)我們學(xué)ajax 和后臺(tái)的時(shí)候，是必須的。

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

checked屬性
 

表示默認(rèn)選中狀態(tài)。 較常見(jiàn)于 單選按鈕和復(fù)選按鈕。

性    別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女 

input 屬性小結(jié)

2. label標(biāo)簽

• label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)簽）。
• label標(biāo)簽主要目的是為了提高用戶體驗(yàn)。為用戶提高最優(yōu)秀的服務(wù)。
   

作用：用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)。

如何綁定元素呢

• 第一種用法就是用label標(biāo)簽直接包含input表單， 適合單個(gè)表單選擇
• 第二種用法 for 屬性規(guī)定 label 與哪個(gè)表單元素綁定(通過(guò)id)。

  第一種
  <label> 用戶名： 
    <input type="radio" name="usename" value="請(qǐng)輸入用戶名">   
  </label>
  第二種
  <label for="sex">男</label>
  <input type="radio" name="sex"  id="sex">

3. textarea控件(文本域)

• 通過(guò)textarea控件可以輕松地創(chuàng)建多行文本輸入框
• .cols=“每行中的字符數(shù)” rows=“顯示的行數(shù)” 我們實(shí)際開(kāi)發(fā)不用
   

 <textarea >
    文本內(nèi)容
  </textarea>

文本框和文本域區(qū)別

4. select下拉列表

• 如果有多個(gè)選項(xiàng)讓用戶選擇，為了節(jié)約空間，我們可以使用select控件定義下拉列表。
• 在option 中定義 selected =" selected " 時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。
• 我們實(shí)際開(kāi)發(fā)會(huì)用的比較少
   

<select>
  <option>選項(xiàng)1</option>
  <option>選項(xiàng)2</option>
  <option>選項(xiàng)3</option>
  ...
</select>

3、form表單域

收集的用戶信息怎么傳遞給服務(wù)器？

• 通過(guò) form表單域

目的：

• 在HTML中，form標(biāo)簽被用于定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。

<form action="url地址" method="提交方式" name="表單名稱">
  各種表單控件
</form>

常用屬性：
 

每個(gè)表單都應(yīng)該有自己表單域。后面學(xué) ajax 后臺(tái)交互的時(shí)候，必須需要form表單域。

GET 和 POST 的區(qū)別

GET在瀏覽器回退時(shí)是無(wú)害的，而POST會(huì)再次提交請(qǐng)求。
GET請(qǐng)求會(huì)被瀏覽器主動(dòng)cache，而POST不會(huì)，除非手動(dòng)設(shè)置。
GET請(qǐng)求只能進(jìn)行url編碼，而POST支持多種編碼方式。
GET請(qǐng)求參數(shù)會(huì)被完整保留在瀏覽器歷史記錄里，而POST中的參數(shù)不會(huì)被保留。
GET請(qǐng)求大小一般是(1024字節(jié))，http協(xié)議并沒(méi)有限制，而與服務(wù)器，操作系統(tǒng)有關(guān)，POST理論上來(lái)說(shuō)沒(méi)有大小限制，http協(xié)議規(guī)范也沒(méi)有進(jìn)行大小限制，但實(shí)際上post所能傳遞的數(shù)據(jù)量根據(jù)取決于服務(wù)器的設(shè)置和內(nèi)存大小。
對(duì)參數(shù)的數(shù)據(jù)類型，GET只接受ASCII字符，而POST沒(méi)有限制。
GET比POST更不安全，因?yàn)閰?shù)直接暴露在URL上，所以不能用來(lái)傳遞敏感信息。

團(tuán)隊(duì)約定：
 

元素屬性值使用雙引號(hào)語(yǔ)法
 

元素屬性值可以寫(xiě)上的都寫(xiě)上

推薦
<input type="text" /> 
<input type="radio" name="name" checked="checked" />

從輸入url到頁(yè)面展示發(fā)生了什么(面試)

作者：Twinkle_
鏈接：https://juejin.im/post/6869279683230629896
來(lái)源：掘金

瀏覽器的多進(jìn)程架構(gòu)

• 從瀏覽器輸入 URL 到頁(yè)面渲染的整個(gè)過(guò)程都是由 瀏覽器架構(gòu)中的各個(gè)進(jìn)程之間的配合完成。
• 瀏覽器主進(jìn)程: 管理子進(jìn)程、提供服務(wù)功能
• 渲染進(jìn)程：將HTML、CSS、JS渲染成界面，js引擎v8和排版引擎Blink就在上面，他會(huì)為每一個(gè)tab頁(yè)面創(chuàng)建一個(gè)渲染進(jìn)程
• GPU進(jìn)程：本來(lái)是負(fù)責(zé)處理3Dcss的，后來(lái)慢慢的UI界面也交給GPU來(lái)繪制
• 網(wǎng)絡(luò)進(jìn)程：就是負(fù)責(zé)網(wǎng)絡(luò)請(qǐng)求，網(wǎng)絡(luò)資源加載的進(jìn)程
• 插件進(jìn)程：負(fù)責(zé)插件的運(yùn)行的，因?yàn)椴寮苋菀妆罎ⅲ阉诺姜?dú)立的進(jìn)程里不要讓它影響別人

從用戶輸入信息到頁(yè)面展示的不同階段，是不同的進(jìn)程在發(fā)揮作用，示意圖如下：
 

從圖中可以看出，整個(gè)過(guò)程是需要各個(gè)進(jìn)程之間相互配合完成的，過(guò)程大致可以描述為：

• 用戶輸入url,處理輸入信息，主進(jìn)程開(kāi)始導(dǎo)航，交給網(wǎng)絡(luò)進(jìn)程干活
• 網(wǎng)絡(luò)進(jìn)程發(fā)起網(wǎng)絡(luò)請(qǐng)求，其中有可能會(huì)發(fā)生重定向
• 服務(wù)器響應(yīng)URL之后，主進(jìn)程就要通知渲染進(jìn)程，你要開(kāi)始干活了
• 渲染進(jìn)程準(zhǔn)備好了，要想渲染進(jìn)程提交數(shù)據(jù)，這個(gè)時(shí)間叫做提交文檔
• 渲染進(jìn)程接受到數(shù)據(jù)，完成頁(yè)面渲染。

具體過(guò)程

1.輸入url
 

用戶輸入url，處理輸入信息：

• 如果為非url結(jié)構(gòu)的字符串，交給瀏覽器默認(rèn)引擎去搜索改字符串；
• 若為url結(jié)構(gòu)的字符串，瀏覽器主進(jìn)程會(huì)交給 網(wǎng)絡(luò)進(jìn)程 ,開(kāi)始干活。

2.1 查找瀏覽器緩存

• 網(wǎng)絡(luò)進(jìn)程會(huì)先看看是否存在本地緩存，如果有就直接返回資源給瀏覽器進(jìn)程，無(wú)則下一步 DNS-> IP -> TCP

2.2 DNS解析

• 網(wǎng)絡(luò)進(jìn)程拿到url后，先會(huì)進(jìn)行DNS域名解析得到IP地址。如果請(qǐng)求協(xié)議是HTTPS，那么還需要建立TLS連接。

2.2 建立TCP連接，三次握手

• 接下來(lái)就是利用IP地址和服務(wù)器建立TCP連接。連接建立之后，向服務(wù)器發(fā)送請(qǐng)求。

3. 服務(wù)器響應(yīng)

• 服務(wù)器收到請(qǐng)求信息后，會(huì)根據(jù)請(qǐng)求信息生成響應(yīng)行、響應(yīng)頭、響應(yīng)體，并發(fā)給網(wǎng)絡(luò)進(jìn)程。網(wǎng)絡(luò)進(jìn)程接受了響應(yīng)信息之后，就開(kāi)始解析響應(yīng)頭的內(nèi)容。

網(wǎng)絡(luò)進(jìn)程解析響應(yīng)行和響應(yīng)頭信息的過(guò)程：
 

3.1 重定向

• 如果響應(yīng)行狀態(tài)碼為301（永久重定向）和302（臨時(shí)），那么說(shuō)明需要重定向到其他url。這時(shí)候網(wǎng)絡(luò)進(jìn)程會(huì)從響應(yīng)頭中的Location字段里讀取重定向的地址，并重新發(fā)起網(wǎng)絡(luò)請(qǐng)求。

3.2 響應(yīng)數(shù)據(jù)處理

• 導(dǎo)航會(huì)通過(guò)請(qǐng)求頭的**Content-type**字段判斷響應(yīng)體數(shù)據(jù)的類型。瀏覽器通過(guò)這個(gè)來(lái)決定如何顯示響應(yīng)體的內(nèi)容。比如：若為application/octet-stream，則會(huì)按照下載類型來(lái)處理這個(gè)請(qǐng)求，導(dǎo)航結(jié)束。若為text/html，這就告訴瀏覽器服務(wù)器返回的是html格式，瀏覽器會(huì)通知渲染進(jìn)程，你要干活了。

4.準(zhǔn)備渲染進(jìn)程

默認(rèn)情況，每個(gè)頁(yè)面一個(gè)渲染進(jìn)程。但若處于同一站點(diǎn)（同根域名+協(xié)議），那么渲染進(jìn)程就會(huì)復(fù)用。

5.提交文檔

• 渲染進(jìn)程準(zhǔn)備好后，瀏覽器進(jìn)程發(fā)出“提交文檔的消息”，渲染進(jìn)程接受了消息之后，會(huì)跟網(wǎng)絡(luò)進(jìn)程簡(jiǎn)歷傳輸數(shù)據(jù)的管道。
• 等數(shù)據(jù)傳輸完成了，渲染進(jìn)程會(huì)告訴瀏覽器進(jìn)程，確認(rèn)文檔提交，這時(shí)候?yàn)g覽器會(huì)更新頁(yè)面，安全狀態(tài)，url，前進(jìn)后退的歷史。
• 到這里導(dǎo)航結(jié)束，進(jìn)入渲染階段。

注：當(dāng)瀏覽器剛開(kāi)始加載一個(gè)地址之后，標(biāo)簽頁(yè)上的圖標(biāo)便進(jìn)入了加載狀態(tài)。但此時(shí)圖中頁(yè)面顯示的依然是之前打開(kāi)的頁(yè)面內(nèi)容，并沒(méi)立即替換為百度首頁(yè)的頁(yè)面。因?yàn)樾枰却峤晃臋n階段，頁(yè)面內(nèi)容才會(huì)被替換。

4、前端HTML基礎(chǔ)面試題

iframe有哪些缺點(diǎn)？

iframe的優(yōu)點(diǎn)

• iframe能夠原封不動(dòng)的把嵌入的網(wǎng)頁(yè)展現(xiàn)出來(lái)。
• 如果有多個(gè)網(wǎng)頁(yè)引用iframe，那么你只需要修改iframe的內(nèi)容，就可以實(shí)現(xiàn)調(diào)用的每一個(gè)頁(yè)面內(nèi)容的更改，方便快捷。
• 網(wǎng)頁(yè)如果為了統(tǒng)一風(fēng)格，頭部和版本都是一樣的，就可以寫(xiě)成一個(gè)頁(yè)面，用iframe來(lái)嵌套，可以增加代碼的可重用。
• 如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告，這些問(wèn)題可以由iframe來(lái)解決。

iframe的缺點(diǎn)

• 會(huì)產(chǎn)生很多頁(yè)面，不容易管理。
• iframe框架結(jié)構(gòu)有時(shí)會(huì)讓人感到迷惑，如果框架個(gè)數(shù)多的話，可能會(huì)出現(xiàn)上下、左右滾動(dòng)條，會(huì)分散訪問(wèn)者的注意力，用戶體驗(yàn)度差。代
• 碼復(fù)雜，無(wú)法被一些搜索引擎索引到，這一點(diǎn)很關(guān)鍵，現(xiàn)在的搜索引擎爬蟲(chóng)還不能很好的處理iframe中的內(nèi)容，所以使用iframe會(huì)不利于搜索引擎優(yōu)化。
• 很多的移動(dòng)設(shè)備（PDA 手機(jī)）無(wú)法完全顯示框架，設(shè)備兼容性差。
• iframe框架頁(yè)面會(huì)增加服務(wù)器的http請(qǐng)求，對(duì)于大型網(wǎng)站是不可取的。
• 現(xiàn)在基本上都是用Ajax來(lái)代替iframe，所以iframe已經(jīng)漸漸的退出了前端開(kāi)發(fā)。

label的作用是什么？是怎么用的？

例子1: 點(diǎn)擊" 用戶名:" 就可以定位光標(biāo)到輸入框

<form><label for="myid "> 用戶名:</label>
<input type="text" id="myid" /></form>  

例子2: 點(diǎn)擊" 用戶名:" 或按鍵alt+1, 都可以定位光標(biāo)到輸入框

<form>
    <label for="myid" accesskey="1"> 用戶名:</label>
    <input type="text" id="myid" tabindex="1" />
</form>  

for 屬性功能：表示Label 標(biāo)簽要綁定的HTML 元素，你點(diǎn)擊這個(gè)標(biāo)簽的時(shí)候，所綁定的元素將獲取焦點(diǎn)。

acesskey 屬性
 

功能：表示訪問(wèn)Label 標(biāo)簽所綁定的元素的熱鍵，當(dāng)您按下熱鍵，所綁定的元素將獲取焦點(diǎn)。
 

局限性：accessKey 屬性所設(shè)置的快捷鍵不能與瀏覽器的快捷鍵沖突，否則將優(yōu)先激活瀏覽器的快捷鍵。

HTML5的form如何關(guān)閉自動(dòng)完成功能？

HTML的輸入框可以擁有自動(dòng)完成的功能，當(dāng)你往輸入框輸入內(nèi)容的時(shí)候，瀏覽器會(huì)從你以前的同名輸入框的歷史記錄中查找出類似的內(nèi)容并列在輸入框下面，這樣就不用全部輸入進(jìn)去了，直接選擇列表中的項(xiàng)目就可以了。
 

但有時(shí)候我們希望關(guān)閉輸入框的自動(dòng)完成功能，例如當(dāng)用戶輸入內(nèi)容的時(shí)候，我們希望使用AJAX技術(shù)從數(shù)據(jù)庫(kù)搜索并列舉而不是在用戶的歷史記錄中搜索。

關(guān)閉輸入框的自動(dòng)完成功能有3種方法：

1.在IE的Internet選項(xiàng)菜單里的內(nèi)容–自動(dòng)完成里面設(shè)置

2.設(shè)置form的autocomplete為"on"或者"off"來(lái)開(kāi)啟或者關(guān)閉自動(dòng)完成功能

3.設(shè)置輸入框的autocomplete為"on"或者"off"來(lái)開(kāi)啟或者關(guān)閉該輸入框的自動(dòng)完成功能

將 HTML5 看作成開(kāi)放的網(wǎng)絡(luò)平臺(tái)

什么是 HTML5 的基本構(gòu)件（building block）?

• 語(yǔ)義 - 提供更準(zhǔn)確地描述內(nèi)容。
• 連接 - 提供新的方式與服務(wù)器通信。
• 離線和存儲(chǔ) - 允許網(wǎng)頁(yè)在本地存儲(chǔ)數(shù)據(jù)并有效地離線運(yùn)行。
• 多媒體 - 在 Open Web 中，視頻和音頻被視為一等公民（first-class citizens）。
• 2D/3D 圖形和特效 - 提供更多種演示選項(xiàng)。
• 性能和集成 - 提供更快的訪問(wèn)速度和性能更好的計(jì)算機(jī)硬件。
• 設(shè)備訪問(wèn) - 允許使用各種輸入、輸出設(shè)備。
• 外觀 - 可以開(kāi)發(fā)豐富的主題。

瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢？

在瀏覽器的html頭部加上 manifest 屬性，如果是第一次訪問(wèn)瀏覽器會(huì)根據(jù)manifest的內(nèi)容進(jìn)行下載存儲(chǔ)離線內(nèi)容，如果已經(jīng)訪問(wèn)過(guò)則從離線存儲(chǔ)中進(jìn)行加載，然后在比對(duì)服務(wù)器如果有新內(nèi)容在更新離線存儲(chǔ)
 

離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源。

瀏覽器的渲染過(guò)程？

1、將獲取的html解析成dom樹(shù)
2、處理css，構(gòu)成層疊樣式表模型CSSOM
3、將dom樹(shù)和CSSOM合并為渲染樹(shù)
4、根據(jù)CSSOM將渲染樹(shù)的節(jié)點(diǎn)布局計(jì)算
5、將渲染樹(shù)節(jié)點(diǎn)樣式繪制到頁(yè)面上
// 注意
在渲染的過(guò)程中是自上而下渲染，
js會(huì)阻塞頁(yè)面的渲染，優(yōu)先等js執(zhí)行完成
如果在渲染的過(guò)程中改變了樣式，會(huì)造成回流需要重新渲染

link和@import的區(qū)別？

1、從屬關(guān)系區(qū)別：
link屬于html標(biāo)簽，而@import是css提供的。
2、加載順序區(qū)別：
頁(yè)面被加載時(shí)，link會(huì)同時(shí)被加載，而@import引用的css會(huì)等到頁(yè)面被加載完再加載。
3、兼容性區(qū)別：
import只在IE5以上才能識(shí)別，而link是html標(biāo)簽，無(wú)兼容問(wèn)題。
4、dom可操作性區(qū)別：
可以通過(guò)JS 操作 DOM ，插入link標(biāo)簽來(lái)改變樣式；由于 DOM 方法是基于文檔的，無(wú)法使用@import的方式插入樣式
5、權(quán)重區(qū)別：
如果已經(jīng)存在相同樣式，@import引入的這個(gè)樣式將被該 CSS 文件本身的樣式層疊掉，表現(xiàn)出link方式的樣式權(quán)重高于@import的權(quán)重這樣的直觀效果。
（簡(jiǎn)而言之，link和@import，誰(shuí)寫(xiě)在后面，誰(shuí)的樣式就被應(yīng)用，后面的樣式覆蓋前面的樣式。）

src與href的區(qū)別？

1.href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，用于超鏈接。

2.src是指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！