整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML稱為超文本標記語言，是一種標識性的語言。在前端開發中離不開HTML，支持不同數據格式的文件鑲入。前端工程師在面試過程中涉及到一些基礎知識，常見的前端HTML面試題有哪些呢？本文，千鋒武漢Web前端培訓小編分享12道經典的HTML面試題給大家！
1、<image>標簽上title屬性與alt屬性的區別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》
2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體
加粗：<b>、<strong>
下標：<sub>
居中：<center>
字體：<font>、<basefont>、參考《HTML標簽列表》
3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景
section：定義文檔中的一個章節
nav：定義只包含導航鏈接的章節
header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
參考《HTML5 標簽列表》
4、請說說你對標簽語義化的理解？
a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
6、你知道多少種Doctype文檔類型？
標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，
Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。
7、HTML與XHTML——二者有什么區別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關閉。
c. 標簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
h. sessionStorage 的數據在頁面會話結束時會被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術webworker, websocket等
移除的元素：
a. 純表現的元素：basefont，big，center, s，strike，tt，u；
b. 對可用性產生負面影響的元素：frame，frameset，noframes；
9、iframe的優缺點？
優點：
a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務器的http請求
d. 會產生很多頁面，不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么？它和Standards模式有什么區別？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有布局、樣式解析和腳本執行三個方面的區別。
a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用
d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
11、請闡述table的缺點
a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td
c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂
d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。
e. 不夠語義
參考《為什么說table表格布局不好？》
12、簡述一下src與href的區別
src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接
以上千鋒武漢Web前端培訓小編僅介紹了部分HTML面試題及答案。如果想要在眾多競爭者中脫穎而出，除了專業技能還需要掌握一些求職面試的技巧，在面試過程中爭取更多的主動權。了解更多Web前端工程師求職面試技巧，你可以關注“武漢千鋒”微信公眾號，定期發布技術熱點文章和求職指南。你也可以來千鋒武漢Web前端培訓班免費試聽兩周，親身感受教學效果，滿意后進行系統深入的學習進階！
千鋒武漢Web前端培訓課程結合時下流行技術，以實戰項目驅動教學，除了培養學員的開發技術，覆蓋熱門大數據可視化內容，深度貫穿前端后端開發，緊貼主流企業一線需求。這里有專業老師帶你，最多半年的時間讓你完美蛻變。進名企、拿高薪不再是問題，命運掌握在自己的手里，想要什么樣的人生就看你自己的選擇了！
tml是一種超文本標記語言，用在B/S結構的B端。B/S架構是用戶在瀏覽器地址欄輸入URL地址（http://www.baidu.com），再回車，相當于通過瀏覽器向服務器發送一個請求(request)，服務器會給瀏覽器一個響應，響應一段HTML代碼給瀏覽器(response)，瀏覽器對HTML代碼進行解釋后展示一個結果。HTML最簡單的結構如下圖：
基本標簽：段落標簽<p>，標題字<h1…6>，換號標記<br>獨目標簽，水平線<hr>獨目標簽，保留格式pre，粗體字標簽<b>，斜體字<i>，插入字<ins>，刪除字<del>，右上角加字<sup>，右上角加字<sub>，font字體標簽屬性color，size
<!DOCTYPE html>表示為HTML5頁面，<meta charset=utf-8" />告訴瀏覽器采用什么字符編碼方式打開。
實體符號：空格（ ），小于號(<)，大于號(>)
表格:表格的行tr，表格的列td（th可以代替td做單元格，th中的內容會自動加粗會自動居中），border用來設置邊框的寬度，width用來設置表格的寬度，height用來設置邊框的高度，align表示表格的對其方式，colspan表格列合并，rowspan表格行合并，一個表格可以被thead tbody和tfoot分成三部分。
背景顏色和背景圖片：body標簽的bgcolor屬性指定背景顏色，body標簽的background屬性指定背景圖片。
網頁中圖片：用img標簽，屬性有src，width，height，title，alt
超鏈接：用a標簽的href屬性指定鏈接的路徑，target屬性_self指定為當前窗口_blank指定為新窗口，_parent指定為當前窗口的父窗口，_top指定為頂級窗口。
列表：無序列表標簽<ul>，列表項目<li>，屬性type指定列表前面的符號為圓圈或三角形等；有序列表標簽<ol>，type指定列表前面的符號為數字或字母順序等。
表單：就是用戶登錄注冊，它發送的請求不同于超鏈接在于它會攜帶相關數據給服務器。表單標簽form，屬性action和超鏈接中的href相同。
按鈕標簽input，屬性type指定為submit提交可以跳到鏈接里面去，指定為button不能跳到鏈接里面去，指定為text表示文本框，指定為password表示密碼框，指定為radio表示單選按鈕，指定為checkbox表示復選框，指定為file表示打開文件，指定為hidden表示隱藏域；屬性value顯示按鈕的名字；屬性name非常重要，有name這個屬性時才會提交給服務器，提交的格式如下， url?name=value&name=value&name=value&name=value&name=value, 其中第一個name（x）是html中寫的用戶名那個地方寫的name值，第二個value是前端頁面輸入的名字，第三個name是html中密碼那個地方寫的name值，例如http://192.168.145.2:8080/crm/login?x=rzhou006&y=111，其中x=rzhou006和y=111。
下拉標簽<select>和可選標簽<option>同時使用
文本域標簽<textarea>,屬性rows，cols可以指定文本域行列
Id屬性：在HTML中任何一個節點上，都有id屬性，代表了這個節點的身份證號。在javascript中可以很方便的獲得某節點的id，并對其進行操作。
Div和span：稱為圖層，用于網頁布局，每個div和span的左上角都有x和y軸坐標，用來定位div和span在網頁中的位置，div獨占一行，span不會獨占行。
、HTML與XHTML的區別
（1）在XHTML 中標簽名稱必須小寫，在HTML 中標簽名稱既可以小寫也可以大寫；
（2）在XHTML 中標簽必須封閉，在HTML中標簽可以不成對出現；
（3）在XHTML 中標簽必須嚴格嵌套，HTML對標簽嵌套沒有嚴格規定；
（4）在XHTML 中屬性名稱必須小寫，在HTML 中也一樣；
（5）在XHTML 中標簽必須用雙引號引起來，HTML中可以不用；
二、特殊符號
三、列表的使用
（1）無序列表
# 打印實心圓點的無序列表 <body> <ul type="disc"> <li>第一</li> <li>第二</li> <li>第三</li> </ul> </body>
（2）有序列表
# 打印數字排序的有序列表 <body> <ol type="1"> <li>我最愛椰奶</li> <li>第二愛可樂</li> <li>第三愛橙汁</li> </ol> </body>
（3）定義列表
<body> <dl> <dt>春曉</dt> <dd>春眠不覺曉，處處聞啼鳥</dd> <dd>夜來風雨聲，花落知多少</dd> </dl> </body>
四、表格的使用
（1）表格的基本結構
<table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> </table>
（2）表格的對齊方式
（3）表格的其他屬性
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
