HTML基礎詳解（下）
目錄
- 1、列表
- 2、表單
- 4、前端HTML基礎面試題
- 總結
1、列表
列表ul容器裡面裝載著結構，樣式一致的文字或圖表的一種形式，叫列表。
列表最大的特點就是整齊 、整潔、 有序，跟表格類似，但是它可組合自由度會更高。
1. 無序列表 ul
< ul></ ul>中只能巢狀< li></ li>，直接在< ul></ ul>標籤中輸入其他標籤或者文字的做法是不被允許的。
< li>與</ li>之間相當於一個容器，可以容納所有元素。
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ...... </ul>
2. 有序列表 ol
- < ol>標籤中的type屬性值為排序的序列號，不新增type屬性時，有序列表預設從數字1開始排序。
- 常用的type屬性值分別為是1，a，A，i，I
- < ol reversed=“reversed”>中的reversed屬效能夠讓有序列表中的序列倒序排列。
- < ol start=“3”>中的start屬性值為3，有序列表中的第一個序列號將從3開始排列。
<ol type="A"> <li>列表項1</li> <li>列表二</li> <li>列表三</li> </ol>
3. 自定義列表 dl
定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何專案符號。
<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中，一個完整的表單通常由表單控制元件（也稱為表單元素）、提示資訊和表單域3個部分構成。表單目的是為了收集使用者資訊。
表單控制元件：
包含了具體的表單功能項，如單行文字輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。
提示資訊：
一個表單中通常還需要包含一些說明性的文字，提示使用者進行填寫和操作。
表單域：
它相當於一個容器，用來容納所有的表單控制元件和提示資訊，可以通過他定義處理表單資料所用程式的url地址，以及資料提交到伺服器的方法。如果不定義表單域，表單中的資料就無法傳送到後臺伺服器。
1. input 控制元件
<input type="屬性值" value="你好">
- input 輸入的意思
- < input />標籤為單標籤
- type屬性設定不同的屬性值用來指定不同的控制元件類型
- 除了type屬性還有別的屬性
使用者名稱: <input type="text" /> 密 碼：<input type="password" />
value屬性
value 預設的文字值。有些表單想剛開啟頁面就預設顯示幾個文字，就可以通過這個value 來設定。
使用者名稱:<input type="text" name="username" value="請輸入使用者名稱">
name屬性
- name表單的名字， 這樣，後臺可以通過這個name屬性找到這個表單。 頁面中的表單很多，name主要作用就是用於區別不同的表單。
- name屬性後面的值，是我們自己定義的。
- radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦
- name屬性，我們現在用的較少，但是，當我們學ajax 和後臺的時候，是必須的。
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女
checked屬性
表示預設選中狀態。 較常見於 單選按鈕和複選按鈕。
性 別: <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女
input 屬性小結
| 屬性 | 說明 | 作用 |
|---|---|---|
| type | 表單型別 | 用來指定不同的控制元件型別 |
| value | 表單值 | 表單裡面預設顯示的文字 |
| name | 表單名字 | 頁面中的表單很多，name主要作用就是用於區別不同的表單。 |
| checked | 預設選中 | 表示那個單選或者複選按鈕一開始就被選中了 |
2. labelhttp://www.cppcns.com標籤
- label 標籤為 input 元素定義標註（標籤）。
- label標籤主要目的是為了提高使用者體驗。為使用者提高最優秀的服務。
作用：用於繫結一個表單元素,當點選label標籤的時候,被繫結的表單元素就會獲得輸入焦點。
如何繫結元素呢
- 第一種用法就是用label標籤直接包含input表單， 適合單個表單選擇
- 第二種用法 for 屬性規定 label 與哪個表單元素繫結(通過id)。
第一種
<label> 使用者名稱：
<input type="radio" name="usename" value="請輸入使用者名稱">
</label>
第二種
<label for="sex">男</label>
<input tyniAQYpe="radio" name="sex" id="sex">
3. textarea控制元件(文字域)
- 通過textarea控制元件可以輕鬆地建立多行文字輸入框
- .cols=“每行中的字元數” rows=“顯示的行數” 我們實際開發不用
<textarea >
文字內容
</textarea>
文字框和文字域區別
| 表單 | 名稱 | 區別 | 預設值顯示 | 用於場景 |
|---|---|---|---|---|
| input type=“text” | 文字框 | 只能顯示一行文字 | 單標籤，通過value顯示預設值 | 使用者名稱、暱稱、密碼等 |
| textarea | 文字域 | 可以顯示多行文字 | 雙標籤，預設值寫到標籤中間 | 留言板 |
4. select下拉列表
- 如果有多個選項讓使用者選擇，為了節約空間，我們可以使用select控制元件定義下拉列表。
- 在option 中定義 selected =" selected " 時，當前項即為預設選中項。
- 我們實際開發會用的比較少
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>
3、form表單域
收集的使用者資訊怎麼傳遞給伺服器？
- 通過 form表單域
目的：
- 在HTML中，form標籤被用於定義表單域，以實現使用者資訊的收集和傳遞，form中的所有內容都會被提交給伺服器。
<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控制元件 </form>
常用屬性：
每個表單都應該有自己表單域。後面學 ajax 後臺互動的時候，必須需要form表單域。
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用於指定接收並處理表單資料的伺服器程式的url地址。 |
| method | get/post | 用於設定表單資料的提交方式，其取值為get或post。 |
| name | 名稱 | 用於指定表單的名稱，以區分同一個頁面中的多個表單。 |
GET 和 POST 的區別
GET在瀏覽器回退時是無害的，而POST會再次提交請求。
GET請求會被瀏覽器主動cache，而POST不會，除非手動設定。
GET請求只能進行url編碼，而POST支援多種編碼方式。
GET請求引數會被完整保留在瀏覽器歷史記錄裡，而POST中的引數不會被保留。
GET請求大小一般是(1024位元組)，http協議並沒有限制，而與伺服器，有關，POST理論上來說沒有大小限制，http協議規範也沒有進行大小限制，但實際上post所能傳遞的資料量根據取決於伺服器的設定和記憶體大小。
對引數的資料型別，GET只接受ASCII字元，而POST沒有限制。
GET比POST更不安全，因為引數直接暴露在URL上，所以不能用來傳遞敏感資訊。
團隊約定：
元素屬性值使用雙引號語法
元素屬性值可以寫上的都寫上
推薦 <input type="text" /> <input type="radio" name="name" checked="checked" />
從輸入url到頁面展示發生了什麼(面試)
作者：Twinkle_
連結：https://juejin.im/post/6869279683230629896
來源：掘金
瀏覽器的多程序架構
- 從瀏覽器輸入 URL 到頁面渲染的整個過程都是由 瀏覽器架構中的各個程序之間的配合完成。
- 瀏覽器主程序: 管理子程序、提供服務功能
- 渲染程序：將HTML、、渲染成介面，js引擎v8和排版引擎Blink就在上面，他會為每一個tab頁面建立一個渲染程序
- GPU程序：本來是負責處理3Dcss的，後來慢慢的UI介面也交給GPU來繪製
- 網路程序：就是負責網路請求，網路資源載入的程序
- 外掛程序：負責外掛的執行的，因為外掛很容易崩潰，把它放到獨立的程序裡不要讓它影響別人
從使用者輸入資訊到頁面展示的不同階段，是不同的程序在發揮作用，示意圖如下：
從圖中可以看出，整個過程是需要各個程序之間相互配合完成的，過程大致可以描述為：
- 使用者輸入url,處理輸入資訊，主程序開始導航，交給網路程序幹活
- 網路程序發起網路請求，其中有可能會發生重定向
- 伺服器響應URL之後，主程序就要通知渲染程序，你要開始幹活了
- 渲染程序準備好了，要想渲染程序提交資料，這個時間叫做提交文件
- 渲染程序接受到資料，完成頁面渲染。
具體過程
1.輸入url
使用者輸入url，處理輸入資訊：
- 如果為非url結構的字串，交給瀏覽器預設引擎去搜索改字串；
- 若為url結構的字串，瀏覽器主程序會交給 網路程序,開始幹活。
2.1 查詢瀏覽器快取
- 網路程序會先看看是否存在本地快取，如果有就直接返回資源給瀏覽器程序，無則下一步 DNS-> IP -> TCP
2.2 DNS解析
- 網路程序拿到url後，先會進行DNS域名解析得到IP地址。如果請求協議是HTTPS，那麼還需要建立TLS連線。
2.2 建立TCP連線，三次握手
- 接下來就是利用IP地址和伺服器建立TCP連線。連線建立之後，向伺服器傳送請求。
3. 伺服器響應
- 伺服器收到請求資訊後，會根據請求資訊生成響應行、響應頭、響應體，併發給網路程序。網路程序接受了響應資訊之後，就開始解析響應頭的內容。
網路程序解析響應行和響應頭資訊的過程：
3.1 重定向
- 如果響應行狀態碼為301（永久重定向）和302（臨時），那麼說明需要重定向到其他url。這時候網路程序會從響應頭中的Location欄位裡讀取重定向的地址，並重新發起網路請求。
3.2 響應資料處理
- 導航會通過請求頭的
**Content-type**欄位判斷響應體資料的型別。瀏覽器通過這個來決定如何顯示響應體的內容。比如：若為application/octet-stream，則會按照下載型別來處理這個請求，導航結束。若為text/html，這就告訴瀏覽器伺服器返回的是html格式，瀏覽器會通知渲染程序，你要幹活了。
4.準備渲染程序
預設情況，每個頁面一個渲染程序。但若處於同一站點（同根域名+協議），那麼渲染程序就會複用。
5.提交文件
- 渲染程序準備好後，瀏覽器程序發出“提交文件的訊息”，渲染程序接受了訊息之後，會跟網路程序簡歷傳輸資料的管道。
- 等資料傳輸完成了，渲染程序會告訴瀏覽器程序，確認文件提交，這時候瀏覽器會更新頁面，安全狀態，url，前進後退的歷史。
- 到這裡導航結束，進入渲染階段。
注：當瀏覽器剛開始載入一個地址之後，標籤頁上的圖示便進入了載入狀態。但此時圖中頁面顯示的依然是之前開啟的頁面內容，並沒立即替換為百度首頁的頁面。因為需要等待提交文件階段，頁面內容才會被替換。
4、前端HTML基礎面試題
iframe有哪些缺點？
iframe的優點
- iframe能夠原封不動的把嵌入的展現出來。
- 如果有多個網頁引用iframe，那麼你只需要修改iframe的內容，就可以實現呼叫的每一個頁面內容的更改，方便快捷。
- 網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用ifrahttp://www.cppcns.comme來巢狀，可以增加程式碼的可重用。
- 如果遇到載入緩慢的第三方內容如圖示和廣告，這些問題可以由iframe來解決。客棧
iframe的缺點
- 會產生很多頁面，不容易管理。
- iframe框架結構有時會讓人感到迷惑，如果框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的注意力，使用者體驗度差。代
- 碼複雜，無法被一些搜尋引擎索引到，這一點很關鍵，現在的搜尋引擎爬蟲還不能很好的處理iframe中的內容，所以使用iframe會不利於搜尋引擎優化。
- 很多的移動裝置（PDA 手機）無法完全顯示框架，裝置相容性差。
- iframe框架頁面會增加伺服器的http請求，對於大型是不可取的。
- 現在基本上都是用Ajax來代替iframe，所以iframe已經漸漸的退出了前端開發。
label的作用是什麼？是怎麼用的？
例子1: 點選" 使用者名稱:" 就可以定位游標到輸入框
<form><label for="myid "> 使用者名稱:</label> <input type="text" id="myid" /></form>
例子2: 點選" 使用者名稱:" 或按鍵alt+1,都可以定位游標到輸入框
<form>
<label for="myid" accesskey="1"> 使用者名稱:</label>
<input type="text" id="myid" tabindex="1" />
</form>
for 屬性功能：表示Label 標籤要繫結的HTML 元素，你點選這個標籤的時候，所繫結的元素將獲取焦點。
acesskey 屬性
功能：表示訪問Label 標籤所繫結的元素的熱鍵，當您按下熱鍵，所繫結的元素將獲取焦點。
侷限性：accessKey 屬性所設定的快捷鍵不能與瀏覽器的快捷鍵衝突，否則將優先啟用瀏覽器的快捷鍵。
HTML5的form如何關閉自動完成功能？
HTML的輸入框可以擁有自動完成的功能，當你往輸入框輸入內容的時候，瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內容並列在輸入框下面，這樣就不用全部輸入進去了，直接選擇列表中的專案就可以了。
但有時候我們希望關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，我們希望使用AJAX技術從搜尋並列舉而不是在使用者的歷史記錄中搜索。
關閉輸入框的自動完成功能有3種方法：
1.在IE的Internet選項選單裡的內容–自動完成裡面設定
2.設定form的autocomplete為"on"或者"off"來開啟或者關閉自動完成功能
3.設定輸入框的autocomplete為"on"或者"off"來開啟或者關閉該輸入框的自動完成功能
將 HTML5 看作成開放的網路平臺
什麼是 HTML5 的基本構件（building block）?
- 語義 - 提供更準確地描述內容。
- 連線 - 提供新的方式與伺服器通訊。
- 離線和儲存 - 允許網頁在本地儲存資料並有效地離線執行。
- 多媒體 - 在 Open Web 中，視訊和音訊被視為一等公民（first-class citizens）。
- 2D/3D 圖形和特效 - 提供更多種演示選項。
- 效能和整合 - 提供更快的訪問速度和效能更好的計算機硬體。
- 裝置訪問 - 允許使用各種輸入、輸出裝置。
- 外觀 - 可以開發豐富的主題。
瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
在瀏覽器的html頭部加上 manifest 屬性，如果是第一次訪問瀏覽器會根據manifest的內容進行下載儲存離線內容，如果已經訪問過則從離線儲存中進行載入，然後在比對伺服器如果有新內容在更新離線儲存
離線的情況下，瀏覽器就直接使用離線儲存的資源。
瀏覽器的渲染過程？
1、將獲取的html解析成dom樹 2、處理css，構成層疊樣式表模型CSSOM 3、將dom樹和CSSOM合併為渲染樹 4、根據CSSOM將渲染樹的節點佈局計算 5、將渲染樹節點樣式繪製到頁面上 // 注意 在渲染的過程中是自上而下渲染， js會阻塞頁面的渲染，優先等js執行完成 如果在渲染的過程中改變了樣式，會造成迴流需要重新渲染
link和@import的區別？
1、從屬關係區別：
link屬於html標籤，而@import是css提供的。
2、載入順序區別：
頁面被載入時，link會同時被載入，而@import引用的css會等到頁面被載入完再載入。
3、相容性區別：
import只在IE5以上才能識別，而link是html標籤，無相容問題。
4、dom可操作性區別：
可以通過JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於文件的，無法使用@import的方式插入樣式
5、權重區別：
如果已經存在相同樣式，@import引入的這個樣式將被該 CSS 檔案本身的樣式層疊掉，表現出link方式的樣式權重高於@import的權重這樣的直觀效果。
（簡而言之，link和@import，誰寫在後面，誰的樣式就被應用，後面的樣式覆蓋前面的樣式。）
src與href的區別？
1.href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結，用於超連結。
2.src是指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文件內，例如js，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！