1.1 HTML 標簽 · 前端面試知識點總結

# HTML 標簽主要是介紹了一些常用的、易混淆的 HMTL 標簽。 ## label 為輸入字段做相關標記。例如： ```html <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> ``` 這時候，點擊 label 標簽內容，后邊的 input 會自動獲得焦點。 > 注意 label 的 for 值要與后邊 input 的 id 相同。class 不可以。 ## iframe ### iframe 缺點 - iframe 會阻塞主頁面的 Onload 事件。 - 搜索引擎的檢索程序無法解讀這種頁面，不利于 SEO。 - iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。 ### 建議使用iframe之前需要考慮上邊兩個缺點。如果需要使用iframe，最好是通過 javascript，動態給 iframe 添加 src 屬性值，這樣可以繞開以上兩個問題。 ### iframeborder 設置 iframe 的邊框。 ## br 在不產生新段落得情況下進行換行。一個 br 產生一個換行。 ## 不常見格式化標簽 |標簽| 描述 | |-------|--------------| |`<b>` |定義粗體文本 | |`<em>` |定義著重文字 | |`<i>` |定義斜體字 | |`<small>`|定義小號字 | |`<strong>`|定義加重語氣 | |`<sub>` |定義下標字 | |`<sup>` |定義上標字 | |`<ins>` |定義插入字 | |`<del>` |定義刪除字 | |標簽 |描述| |-------|--------------| |`<code>` |定義計算機代碼 | |`<kbd>` |定義鍵盤碼 | |`<samp>` |定義計算機代碼樣本| |`<var>` |定義變量 | |`<pre>` |定義預格式文本 | |標簽 |描述 | |-------|-----------------| |`<abbr>` |定義縮寫 | |`<address>` |定義地址 | |`<bdo>` |定義文字方向 | |`<blockquote>` |定義長的引用| |`<q>` |定義短的引用語 | |`<cite>` |定義引用、引證 | |`<dfn>` |定義一個定義項目| ## head ### title 定義文檔的標題，一般顯示在瀏覽器的標簽中。 ### base 定義頁面中所有鏈接默認的鏈接地址。 ```html <head> <base href="http://www.runoob.com/images/" target="_blank"> </head> ``` ### meta 用來描述 HTML 文檔的描述，關鍵詞，作者，字符集等。 ```html <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <meta name="description" content="免費在線教程"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="runoob"> </head> ``` ### 圖標 ```html <link rel="shortcup icon" href="img_url"> ``` ## 圖片映射實現圖片的部分區域可點擊。 ```html <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap">  <area shape="rect" coords="x1,y1,x2,y2" alt="Sun" href="sun.htm">  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">  </map> ``` > 實際測試谷歌瀏覽器中，usemap="@planetmap" 中帶有 # 與不帶有 # 同樣有效果，但是 map 只能使用 map，使用 id 和 class 不可以。 [運行結果](http://www.runoob.com/try/try.php?filename=tryhtml_areamap) ## table 表格標簽。 tr：一行。 th：表頭，單元格。 td：表體，單元格。 caption：定義表格標題。 colgroup：定義表格列的組。 col：定義表格列的屬性。 thead：定義表格的頁眉。 tbody：定義表格的主體。 tfoot：定義表格的頁腳。 ## ul ul + li，無序列表。 ol + li，有序列表。 dl + (dt + dd)，自定義列表，dt 為列表項，dd 為列表項描述。 ## input 使用 type 定義 input 的種類，例如： |Type 的值|input 的種類| |---------|------------| |text |輸入框 | |password |密碼字段 | |radio |單選按鈕（對應的常見的屬性值有 value、name、checked）| |checkbox |多選按鈕（屬性值有 value、name、checked）| |submit |提交按鈕 | |reset |重置按鈕 | ## noscript noscript 標簽提供無法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。 noscript 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 <noscript> 元素中的內容： ```html <script> document.write("Hello World!") </script> <noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>  ```