HTML基礎(chǔ)詳解(下)
目錄
- 1、列表
- 2、表單
- 4、前端HTML基礎(chǔ)面試題
- 總結(jié)
1、列表
列表ul容器里面裝載著結(jié)構(gòu),樣式一致的文字或圖表的一種形式,叫列表。
列表最大的特點(diǎn)就是整齊 、整潔、 有序,跟表格類(lèi)似,但是它可組合自由度會(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è)完整的表單通常由表單控件(也稱(chēng)為表單元素)、提示信息和表單域3個(gè)部分構(gòu)成。表單目的是為了收集用戶(hù)信息。
表單控件:
包含了具體的表單功能項(xiàng),如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。
提示信息:
一個(gè)表單中通常還需要包含一些說(shuō)明性的文字,提示用戶(hù)進(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)指定不同的控件類(lèi)型
- 除了type屬性還有別的屬性
用戶(hù)名: <input type="text" /> 密 碼:<input type="password" />
value屬性
value 默認(rèn)的文本值。有些表單想剛打開(kāi)頁(yè)面就默認(rèn)顯示幾個(gè)文字,就可以通過(guò)這個(gè)value 來(lái)設(shè)置。
用戶(hù)名:<input type="text" name="username" value="請(qǐng)輸入用戶(hù)名">
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)簽主要目的是為了提高用戶(hù)體驗(yàn)。為用戶(hù)提高最優(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> 用戶(hù)名: <input type="radio" name="usename" value="請(qǐng)輸入用戶(hù)名"> </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)讓用戶(hù)選擇,為了節(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表單域
收集的用戶(hù)信息怎么傳遞給服務(wù)器?
- 通過(guò) form表單域
目的:
- 在HTML中,form標(biāo)簽被用于定義表單域,以實(shí)現(xiàn)用戶(hù)信息的收集和傳遞,form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。
<form action="url地址" method="提交方式" name="表單名稱(chēng)"> 各種表單控件</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ù)類(lèi)型,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)程里不要讓它影響別人
從用戶(hù)輸入信息到頁(yè)面展示的不同階段,是不同的進(jìn)程在發(fā)揮作用,示意圖如下:
從圖中可以看出,整個(gè)過(guò)程是需要各個(gè)進(jìn)程之間相互配合完成的,過(guò)程大致可以描述為:
- 用戶(hù)輸入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
用戶(hù)輸入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ù)的類(lèi)型。瀏覽器通過(guò)這個(gè)來(lái)決定如何顯示響應(yīng)體的內(nèi)容。比如:若為application/octet-stream,則會(huì)按照下載類(lèi)型來(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à),可能會(huì)出現(xiàn)上下、左右滾動(dòng)條,會(huì)分散訪(fǎng)問(wèn)者的注意力,用戶(hù)體驗(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)擊" 用戶(hù)名:" 就可以定位光標(biāo)到輸入框
<form><label for="myid "> 用戶(hù)名:</label><input type="text" id="myid" /></form>
例子2: 點(diǎn)擊" 用戶(hù)名:" 或按鍵alt+1, 都可以定位光標(biāo)到輸入框
<form> <label for="myid" accesskey="1"> 用戶(hù)名:</label> <input type="text" id="myid" tabindex="1" /></form>
for 屬性功能:表示Label 標(biāo)簽要綁定的HTML 元素,你點(diǎn)擊這個(gè)標(biāo)簽的時(shí)候,所綁定的元素將獲取焦點(diǎn)。
acesskey 屬性
功能:表示訪(fǎng)問(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ì)從你以前的同名輸入框的歷史記錄中查找出類(lèi)似的內(nèi)容并列在輸入框下面,這樣就不用全部輸入進(jìn)去了,直接選擇列表中的項(xiàng)目就可以了。
但有時(shí)候我們希望關(guān)閉輸入框的自動(dòng)完成功能,例如當(dāng)用戶(hù)輸入內(nèi)容的時(shí)候,我們希望使用AJAX技術(shù)從數(shù)據(jù)庫(kù)搜索并列舉而不是在用戶(hù)的歷史記錄中搜索。
關(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ù)器通信。
- 離線(xiàn)和存儲(chǔ) - 允許網(wǎng)頁(yè)在本地存儲(chǔ)數(shù)據(jù)并有效地離線(xiàn)運(yùn)行。
- 多媒體 - 在 Open Web 中,視頻和音頻被視為一等公民(first-class citizens)。
- 2D/3D 圖形和特效 - 提供更多種演示選項(xiàng)。
- 性能和集成 - 提供更快的訪(fǎng)問(wèn)速度和性能更好的計(jì)算機(jī)硬件。
- 設(shè)備訪(fǎng)問(wèn) - 允許使用各種輸入、輸出設(shè)備。
- 外觀 - 可以開(kāi)發(fā)豐富的主題。
瀏覽器是怎么對(duì)HTML5的離線(xiàn)儲(chǔ)存資源進(jìn)行管理和加載的呢?
在瀏覽器的html頭部加上 manifest 屬性,如果是第一次訪(fǎng)問(wèn)瀏覽器會(huì)根據(jù)manifest的內(nèi)容進(jìn)行下載存儲(chǔ)離線(xiàn)內(nèi)容,如果已經(jīng)訪(fǎng)問(wèn)過(guò)則從離線(xiàn)存儲(chǔ)中進(jìn)行加載,然后在比對(duì)服務(wù)器如果有新內(nèi)容在更新離線(xiàn)存儲(chǔ)
離線(xiàn)的情況下,瀏覽器就直接使用離線(xiàn)存儲(chǔ)的資源。
瀏覽器的渲染過(guò)程?
1、將獲取的html解析成dom樹(shù)2、處理css,構(gòu)成層疊樣式表模型CSSOM3、將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í)行完畢,圖片和框架等元素也如此,類(lèi)似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注的更多內(nèi)容!
相關(guān)文章:
