前端面试常见HTML问题（一）
1.什么是html
??????HTML（Hyper?Text?Mark-up?Language?）即超文本標記語言，是?WWW?的描述語言，由?Tim?Berners-lee提出。設計?HTML?語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯系在一起，形成有機的整體，人們不用考慮具體信息是在當前電腦上還是在網絡的其它電腦上。這樣，你只要使用鼠標在某一文檔中點取一個圖標，Internet就會馬上轉到與此圖標相關的內容上去，而這些信息可能存放在網絡的另一臺電腦中。?HTML文本是由?HTML命令組成的描述性文本，HTML?命令可以說明文字、?圖形、動畫、聲音、表格、鏈接等。?HTML的結構包括頭部?(Head)、主體?(Body)?兩大部分。頭部描述瀏覽器所需的信息，主體包含所要說明的具體內容。
2.對WEB標準以及W3C的理解與認識
WEB標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由萬維網聯盟（外語縮寫：W3C）起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。
（1）web標準規范要求，書寫標簽必須閉合、標簽小寫、不亂嵌套，可提高搜索機器人對網頁內容的搜索幾率。--- SEO
（2）建議使用外鏈css和js腳本，從而達到結構與行為、結構與表現的分離，提高頁面的渲染速度，能更快地顯示頁面的內容。
（3）樣式與標簽的分離，更合理的語義化標簽，使內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件， 從而降低維護成本、改版更方便
（4）不需要變動頁面內容，便可提供打印版本而不需要復制內容，提高網站易用性
????????遵循w3c制定的web標準，能夠使用戶瀏覽者更方便的閱讀，使網頁開發者之間更好的交流。
3.HTML與XHTML有什么差別
HTML與XHTML之間的差別，粗略可以分為兩大類比較：一個是功能上的差別，另外是書寫習慣的差別。關于功能上的差別，主要是XHTML可兼容各大瀏覽器、手機以及Pad，并且瀏覽器也能快速正確地編譯網頁。
XHTML的規則區別：
1.所有的標記都必須要有一個相應的結束標記
2.所有標簽的元素和屬性的名字都必須使用小寫
3.所有的XML標記都必須合理嵌套
4.所有的屬性必須用引號""括起來
5.把所有<和&特殊符號用編碼表示
6.給所有屬性賦一個值
7.不要在注釋內容中使“--”
8.圖片必須有說明文字
9.不允許使用target="_blank"
從XHTML1.1開始全面禁止target屬性，如果想要有開新窗口的功能，就必須改寫為rel="external"，并搭配JavaScript實現此效果。
錯誤：<a href="http://blog.mukispace.com" target="_blank">MUKI space</a>
正確：<a href="http://blog.mukispace.com" rel="external">MUKI space</a>
嚴格模式的文檔在IE下需要寫成這樣：<a?href="document.html"?rel="external">打開一個新窗口</a>? 這是符合strict標準的方法。當然還必須配合一個javascript才有效。? javascript?完整的代碼JS如下[object?Object]：? function?externallinks()?{? if?(!document.getElementsByTagName)?return;? var?anchors?=?document.getElementsByTagName("a");? for?(var?i=0;?i<anchors.length;?i++)?{? var?anchor?=?anchors[i];? if?(anchor.getAttribute("href")?&&?anchor.getAttribute("rel")?==?"external")? anchor.target?=?"_blank";? }? }? window.onload?=?externallinks;? 你可以把它保存成一個.js文件(比如external.js)，然后通過外部聯接方法調用：<script?type="text/javascript"?src="external.js"></script>4.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
混雜模式是一種比較寬松的向后兼容的模式?。混雜模式通常模擬老式瀏覽器的行為，以防止老站點無法工作?。?
混雜模式（quirks?mode）?//讓IE的行為與（包含非標準特性的）IE5相同 標準模式（standards?mode）//讓IE的行為更接近標準行為 準標準模式（almost?standards?mode）//這種模式下的瀏覽器特性有很多都是符合標準的，不標準的地方主要體現在處理圖片間隙的時候（在表格中使用圖片時問題最明顯）。 超級標準模式://IE8引入的一種新的文檔模式，超級文檔模式可以讓IE以其所有版本中最符合標準的方式來解釋網頁內容。
觸發混雜模式:?
如果在文檔開始處沒有發現文檔類型聲明，則所有瀏覽器都會默認開啟混雜模式。但采用混雜模式不是什么值得推薦的做法，因為不同瀏覽器在這種模式下的行為差異非常大，如果不使用某些hack技術，跨瀏覽器的行為根本就沒有一致性?可言。
????根據Doctype是否存在以及使用哪種DTD來觸發其不同的模式。如果Doctype不存在或者其形式不正確那么默認為混雜模式。如果XHTMLl文檔中包含完整的Doctype，那么它一般以標準模式呈現。?
????? ?區分它們的意義可以讓開發者更好的寫出標準兼容的頁面，同時不影響以前的頁面標準。
5.行內元素有哪些？塊級元素有哪些？
?塊元素(block element) HTML標簽分類明細?
??? * address - 地址?
??? * blockquote - 塊引用?
??? * center - 居中中對齊塊?
??? * dir - 目錄列表?
??? * div - 常用塊級容易，也是css layout的主要標簽?
??? * dl - 定義列表?
??? * fieldset - form控制組?
??? * form - 交互表單 （只能用來容納其它塊元素）?
??? * h1 - 大標題?
??? * h2 - 副標題?
??? * h3 - 3級標題?
??? * h4 - 4級標題?
??? * h5 - 5級標題?
??? * h6 - 6級標題?
??? * hr - 水平分隔線?
??? * isindex - input prompt?
??? * menu - 菜單列表?
??? * noframes - frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容?
??? * noscript - 可選腳本內容（對于不支持script的瀏覽器顯示此內容）?
??? * ol - 排序表單?
??? * p - 段落?
??? * pre - 格式化文本?
??? * table - 表格?
??? * ul - 非排序列表
內聯元素(inline element) HTML標簽分類明細?
??? * a - 錨點?
??? * abbr - 縮寫?
??? * acronym - 首字?
??? * b - 粗體(不推薦)?
??? * bdo - bidi override?
??? * big - 大字體?
??? * br - 換行?
??? * cite - 引用?
??? * code - 計算機代碼(在引用源碼的時候需要)?
??? * dfn - 定義字段?
??? * em - 強調?
??? * font - 字體設定(不推薦)?
??? * i - 斜體?
??? * img - 圖片?
??? * input - 輸入框?
??? * kbd - 定義鍵盤文本?
??? * label - 表格標簽?
??? * q - 短引用?
??? * s - 中劃線(不推薦)?
??? * samp - 定義范例計算機代碼?
??? * select - 項目選擇?
??? * small - 小字體文本?
??? * span - 常用內聯容器，定義文本內區塊?
??? * strike - 中劃線?
??? * strong - 粗體強調?
??? * sub - 下標?
??? * sup - 上標?
??? * textarea - 多行文本輸入框?
??? * tt - 電傳文本?
??? * u - 下劃線?
??? * var - 定義變量
可變元素? HTML標簽分類明細?
??? * applet - java applet ?
??? * button - 按鈕 ?
??? * del - 刪除文本 ?
??? * iframe - inline frame ?
??? * ins - 插入的文本 ?
??? * map - 圖片區塊(map) ?
??? * object - object對象 ?
??? * script - 客戶端腳本
6.行內元素與塊級元素有什么不同？
塊級元素和行內元素的區別是，塊級元素會占一行顯示，而行內元素可以在一行并排顯示。
通過樣式控制，它們可以相互轉換。
1.尺寸-塊級元素和行內元素之間的一個重要的不同點
設置寬度width 無效。
設置高度height 無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。
注：這里說的無效， 是指，它對其它元素的排列沒有影響。也就是說，對于設置的margin,padding行內元素文檔流里的上下元素來說，他們的間距不會因為上下margin或者上下padding而產生間距。但是就他本身而言，對于上下margin與padding是有效的。
7.CSS的盒模型？
1、W3C的標準Box Model:
?/*外盒尺寸計算（元素空間尺寸）*/???
?Element空間高度?=?content?height?+?padding?+?border?+?margin???
?Element?空間寬度?=?content?width?+?padding?+?border?+?margin???
?/*內盒尺寸計算（元素大小）*/???
?Element?Height?=?content?height?+?padding?+?border?（Height為內容高度）???
?Element?Width?=?content?width?+?padding?+?border?（Width為內容寬度）
2、IE)傳統下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:
/*外盒尺寸計算（元素空間尺寸）*/ ?
Element空間高度 = content Height + margin (Height包含了元素內容寬度，邊框寬度，內距寬度) ?
Element空間寬度 = content Width + margin (Width包含了元素內容寬度、邊框寬度、內距寬度) ?
/*內盒尺寸計算（元素大小）*/ ?
Element Height = content Height(Height包含了元素內容寬度，邊框寬度，內距寬度) ?
Element Width = content Width(Width包含了元素內容寬度、邊框寬度、內距寬度)
8.DOM是什么？
文件對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標志語言的標準編程接口。
9.請解釋一下什么是語義化的HTML。語義化HTML的優點
根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
語義化HTML優點：
1，去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
2，有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
3，方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
4，便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
寫html時注意點：
盡可能少的使用無語義的標簽div和span；
在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
不要使用純樣式標簽，如：b、font、u等，改用css設置。
需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；
每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。
轉載于:https://blog.51cto.com/xhtml/1571735
總結
以上是生活随笔為你收集整理的前端面试常见HTML问题（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS构造map/dict结构
- 下一篇： 成语小秀才1154关答案