1.什么是html

??????HTML（Hyper?Text?Mark-up?Language?）即超文本標記語言，是?WWW?的描述語言，由?Tim?Berners-lee提出。設(shè)計?HTML?語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯(lián)系在一起，形成有機的整體，人們不用考慮具體信息是在當(dāng)前電腦上還是在網(wǎng)絡(luò)的其它電腦上。這樣，你只要使用鼠標在某一文檔中點取一個圖標，Internet就會馬上轉(zhuǎn)到與此圖標相關(guān)的內(nèi)容上去，而這些信息可能存放在網(wǎng)絡(luò)的另一臺電腦中。?HTML文本是由?HTML命令組成的描述性文本，HTML?命令可以說明文字、?圖形、動畫、聲音、表格、鏈接等。?HTML的結(jié)構(gòu)包括頭部?(Head)、主體?(Body)?兩大部分。頭部描述瀏覽器所需的信息，主體包含所要說明的具體內(nèi)容。

2.對WEB標準以及W3C的理解與認識

WEB標準不是某一個標準，而是一系列標準的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標準也分三方面：結(jié)構(gòu)化標準語言主要包括XHTML和XML，表現(xiàn)標準語言主要包括CSS，行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由萬維網(wǎng)聯(lián)盟（外語縮寫：W3C）起草和發(fā)布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。

（1）web標準規(guī)范要求，書寫標簽必須閉合、標簽小寫、不亂嵌套，可提高搜索機器人對網(wǎng)頁內(nèi)容的搜索幾率。--- SEO
（2）建議使用外鏈css和js腳本，從而達到結(jié)構(gòu)與行為、結(jié)構(gòu)與表現(xiàn)的分離，提高頁面的渲染速度，能更快地顯示頁面的內(nèi)容。
（3）樣式與標簽的分離，更合理的語義化標簽，使內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件， 從而降低維護成本、改版更方便
（4）不需要變動頁面內(nèi)容，便可提供打印版本而不需要復(fù)制內(nèi)容，提高網(wǎng)站易用性

????????遵循w3c制定的web標準，能夠使用戶瀏覽者更方便的閱讀，使網(wǎng)頁開發(fā)者之間更好的交流。

3.HTML與XHTML有什么差別

HTML與XHTML之間的差別，粗略可以分為兩大類比較：一個是功能上的差別，另外是書寫習(xí)慣的差別。關(guān)于功能上的差別，主要是XHTML可兼容各大瀏覽器、手機以及Pad，并且瀏覽器也能快速正確地編譯網(wǎng)頁。

XHTML的規(guī)則區(qū)別：

1.所有的標記都必須要有一個相應(yīng)的結(jié)束標記

2.所有標簽的元素和屬性的名字都必須使用小寫

3.所有的XML標記都必須合理嵌套

4.所有的屬性必須用引號""括起來

5.把所有<和&特殊符號用編碼表示

6.給所有屬性賦一個值

7.不要在注釋內(nèi)容中使“--”

8.圖片必須有說明文字

9.不允許使用target="_blank"

從XHTML1.1開始全面禁止target屬性，如果想要有開新窗口的功能，就必須改寫為rel="external"，并搭配JavaScript實現(xiàn)此效果。

錯誤：<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標準的方法。當(dāng)然還必須配合一個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)，然后通過外部聯(lián)接方法調(diào)用：<script?type="text/javascript"?src="external.js"></script>

4.Doctype? 嚴格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?

混雜模式是一種比較寬松的向后兼容的模式?。混雜模式通常模擬老式瀏覽器的行為，以防止老站點無法工作?。?

混雜模式（quirks?mode）?//讓IE的行為與（包含非標準特性的）IE5相同 標準模式（standards?mode）//讓IE的行為更接近標準行為 準標準模式（almost?standards?mode）//這種模式下的瀏覽器特性有很多都是符合標準的，不標準的地方主要體現(xiàn)在處理圖片間隙的時候（在表格中使用圖片時問題最明顯）。 超級標準模式://IE8引入的一種新的文檔模式，超級文檔模式可以讓IE以其所有版本中最符合標準的方式來解釋網(wǎng)頁內(nèi)容。

• 觸發(fā)混雜模式:?
  如果在文檔開始處沒有發(fā)現(xiàn)文檔類型聲明，則所有瀏覽器都會默認開啟混雜模式。但采用混雜模式不是什么值得推薦的做法，因為不同瀏覽器在這種模式下的行為差異非常大，如果不使用某些hack技術(shù)，跨瀏覽器的行為根本就沒有一致性?可言。

????根據(jù)Doctype是否存在以及使用哪種DTD來觸發(fā)其不同的模式。如果Doctype不存在或者其形式不正確那么默認為混雜模式。如果XHTMLl文檔中包含完整的Doctype，那么它一般以標準模式呈現(xiàn)。?

????? ?區(qū)分它們的意義可以讓開發(fā)者更好的寫出標準兼容的頁面，同時不影響以前的頁面標準。

5.行內(nèi)元素有哪些？塊級元素有哪些？

?塊元素(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可選內(nèi)容，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容?
??? * noscript - 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）?
??? * ol - 排序表單?
??? * p - 段落?
??? * pre - 格式化文本?
??? * table - 表格?
??? * ul - 非排序列表

內(nèi)聯(lián)元素(inline element) HTML標簽分類明細?

??? * a - 錨點?
??? * abbr - 縮寫?
??? * acronym - 首字?
??? * b - 粗體(不推薦)?
??? * bdo - bidi override?
??? * big - 大字體?
??? * br - 換行?
??? * cite - 引用?
??? * code - 計算機代碼(在引用源碼的時候需要)?
??? * dfn - 定義字段?
??? * em - 強調(diào)?
??? * font - 字體設(shè)定(不推薦)?
??? * i - 斜體?
??? * img - 圖片?
??? * input - 輸入框?
??? * kbd - 定義鍵盤文本?
??? * label - 表格標簽?
??? * q - 短引用?
??? * s - 中劃線(不推薦)?
??? * samp - 定義范例計算機代碼?
??? * select - 項目選擇?
??? * small - 小字體文本?
??? * span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊?
??? * strike - 中劃線?
??? * strong - 粗體強調(diào)?
??? * sub - 下標?
??? * sup - 上標?
??? * textarea - 多行文本輸入框?
??? * tt - 電傳文本?
??? * u - 下劃線?
??? * var - 定義變量

可變元素? HTML標簽分類明細?

??? * applet - java applet　　?
??? * button - 按鈕　　?
??? * del - 刪除文本　　?
??? * iframe - inline frame　　?
??? * ins - 插入的文本　　?
??? * map - 圖片區(qū)塊(map)　　?
??? * object - object對象　　?
??? * script - 客戶端腳本

6.行內(nèi)元素與塊級元素有什么不同？

塊級元素和行內(nèi)元素的區(qū)別是，塊級元素會占一行顯示，而行內(nèi)元素可以在一行并排顯示。

通過樣式控制，它們可以相互轉(zhuǎn)換。

1.尺寸-塊級元素和行內(nèi)元素之間的一個重要的不同點

設(shè)置寬度width 無效。
設(shè)置高度height 無效，可以通過line-height來設(shè)置。
設(shè)置margin 只有左右margin有效，上下無效。
設(shè)置padding 只有左右padding有效，上下則無效。

注：這里說的無效， 是指，它對其它元素的排列沒有影響。也就是說，對于設(shè)置的margin,padding行內(nèi)元素文檔流里的上下元素來說，他們的間距不會因為上下margin或者上下padding而產(chǎn)生間距。但是就他本身而言，對于上下margin與padding是有效的。

7.CSS的盒模型？

1、W3C的標準Box Model:

?/*外盒尺寸計算（元素空間尺寸）*/???
?Element空間高度?=?content?height?+?padding?+?border?+?margin???
?Element?空間寬度?=?content?width?+?padding?+?border?+?margin???
?/*內(nèi)盒尺寸計算（元素大小）*/???
?Element?Height?=?content?height?+?padding?+?border?（Height為內(nèi)容高度）???
?Element?Width?=?content?width?+?padding?+?border?（Width為內(nèi)容寬度）

2、IE)傳統(tǒng)下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:

/*外盒尺寸計算（元素空間尺寸）*/ ?
Element空間高度 = content Height + margin (Height包含了元素內(nèi)容寬度，邊框?qū)挾?#xff0c;內(nèi)距寬度) ?
Element空間寬度 = content Width + margin (Width包含了元素內(nèi)容寬度、邊框?qū)挾取?nèi)距寬度) ?
/*內(nèi)盒尺寸計算（元素大小）*/ ?
Element Height = content Height(Height包含了元素內(nèi)容寬度，邊框?qū)挾?#xff0c;內(nèi)距寬度) ?
Element Width = content Width(Width包含了元素內(nèi)容寬度、邊框?qū)挾取?nèi)距寬度)

8.DOM是什么？

文件對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標志語言的標準編程接口。

9.請解釋一下什么是語義化的HTML。語義化HTML的優(yōu)點

根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

語義化HTML優(yōu)點：

1，去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)

2，有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重；

3，方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；

4，便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

寫html時注意點：

盡可能少的使用無語義的標簽div和span；

在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；

不要使用純樣式標簽，如：b、font、u等，改用css設(shè)置。

需要強調(diào)的文本，可以包含在strong或者em標簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；

使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；

表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；

每個input標簽對應(yīng)的說明文本都需要使用label標簽，并且通過為input設(shè)置id屬性，在lable標簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

轉(zhuǎn)載于:https://blog.51cto.com/xhtml/1571735

總結(jié)

以上是生活随笔為你收集整理的前端面试常见HTML问题（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。