1.Doctype作用？標準模式與兼容模式各有什么區別

聲明位于位于HTML文檔中的第一行，處于?標簽之前。告知瀏覽器的解析器,用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

標準模式的排版?和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

2.HTML5 為什么只需要寫?？

HTML5 不基于?SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為(讓瀏覽器按照它們應該的方式來運行)；

而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。**

3.行內元素有哪些？塊級元素有哪些？?空(void)元素有那些？

首先：CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。

(1)行內元素有：a b span img input select strong(強調的語氣)

(2)塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

(3)常見的空元素：

鮮為人知的是：

4.頁面導入樣式時，使用link和@import有什么區別？

link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;

頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;

5.介紹一下你對瀏覽器內核的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。

JS引擎則：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。

6.常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto內核：Opera7及以上。????? [Opera內核原為：Presto，現為：Blink;]

Webkit內核：Safari,Chrome等。?? [ Chrome的：Blink(WebKit的分支)]

7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分?HTML 和?HTML5？

HTML5 現在已經不是?SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

繪畫?canvas;

用于媒介回放的?video 和?audio 元素;

本地離線存儲?localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;

sessionStorage 的數據在瀏覽器關閉后自動刪除;

語意化更好的內容元素，比如?article、footer、header、nav、section;

表單控件，calendar、date、time、email、url、search;

新的技術webworker, websocket, Geolocation;

移除的元素：

純表現的元素：basefont，big，center，font, s，strike，tt，u;

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標簽：

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，

可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

當然也可以直接使用成熟的框架、比如html5shim;

如何區分HTML5：?DOCTYPE聲明新增的結構元素功能元素

H5新特性

表單 畫布 音視頻 地理定位 媒體查詢 css新特性 離線緩存 本地存儲 拖拽

8.簡述一下你對HTML語義化的理解？

用正確的標簽做正確的事情。

html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;

即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;

使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

9.HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

在用戶沒有連網時，可以正常訪問站點或應用，在用戶與網絡連接時更新用戶機器上的緩存文件。

原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。

如何使用：

頁面頭部像下面一樣加入一個manifest的屬性；

在cache.manifest文件的編寫離線存儲的資源；

CACHE MANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

/ /offline.html

在離線狀態時，操作window.applicationCache進行需求實現。

10.瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？

在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。

離線的情況下，瀏覽器就直接使用離線存儲的資源。

11.iframe有那些缺點？

iframe會阻塞主頁面的Onload事件；

搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;

iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。

使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript

動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。

12.Label的作用是什么？是怎么用的？

label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。

Number:

Date:

13.如何實現瀏覽器內多個標簽頁之間的通信?

WebSocket、也可以調用localstorge、cookies等本地存儲方式，還可以使用頁面的路有參數傳遞

localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，

我們通過監聽事件，控制它的值來進行頁面信息通信；

14.如何在頁面上實現一個圓形的可點擊區域？

map+area或者svg

border-radius

純js實現?需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

15.title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；

strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：會重讀，而是展示強調內容。

i內容展示為斜體，em表示強調的文本；

16.data-屬性的作用是什么？

h5新增的屬性

可以通過ele.dataset獲取到標簽上的data-x的屬性

返回一個對象

17.常見兼容性問題？

問題：png24位的圖片在iE6瀏覽器上出現背景，

解決：解決方案是做成PNG8.

問題：瀏覽器默認的margin和padding不同。

解決：方案是加一個全局的*{margin:0;padding:0;}來統一。

問題：IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。浮動ie產生的雙倍距離?#box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產生20px的距離**

解決：解決方案是在float的標簽樣式控制中加入?——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)

漸進識別的方式，從總體中逐漸排除局部。

首先，巧妙的使用“9”這一標記，將IE游覽器從所有情況中分離出來。?接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

css

.bb{

background-color:#f1ee18;/*所有識別*/

.background-color:#00deff\9; /*IE6、7、8識別*/

+background-color:#a200ff;/*IE6、7識別*/

_background-color:#1e0bd1;/*IE6識別*/

}

問題：IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性，Firefox下,只能使用getAttribute()獲取自定義屬性.

解決：解決方法:統一通過getAttribute()獲取自定義屬性.

問題：IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性，Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

解決方法：(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

問題：Chrome 中文界面下默認會將小于?12px 的文本強制按照?12px 顯示,

解決：可通過加入?CSS 屬性?-webkit-text-size-adjust: none; 解決.

問題：超鏈接訪問過后hover樣式就不出現了?被點擊訪問過的超鏈接樣式不在具有hover和active了

解決：方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

18.你知道多少種Doctype文檔類型？

該標簽可聲明三種?DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的?HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及?Frameset。

XHTML 1.0 規定了三種?XML 文檔類型：Strict、Transitional 以及?Frameset。

Standards (標準)模式(也就是嚴格呈現模式)用于呈現遵循最新標準的網頁，而?Quirks(包容)模式(也就是松散呈現模式或者兼容模式)用于呈現為傳統瀏覽器而設計的網頁。

19.HTML與XHTML——二者有什么區別？

1)所有的標記都必須要有一個相應的結束標記

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

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

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

5)把所有

6)給所有屬性賦一個值

7)不要在注釋內容中使“--”

8)圖片必須有說明文字

20.的title和alt有什么區別？

title是global attributes之一，用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。

alt是的特有屬性，是圖片內容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

21.div+css的布局較table布局有什么優點？

改版的時候更方便?只要改css文件。

頁面加載速度更快、結構化清晰、頁面顯示簡潔。

表現與結構相分離。

易于優化(seo)搜索引擎更友好，排名更容易靠前。

22.CSS都有哪些選擇器？

派生選擇器(用HTML標簽申明)

id選擇器(用DOM的ID申明)

類選擇器(用一個樣式類名申明)

屬性選擇器(用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了)

除了前3種基本選擇器，還有一些擴展選擇器，包括

后代選擇器(利用空格間隔，比如div?.a{??})

群組選擇器(利用逗號間隔，比如p,div,#a{??})

那么問題來了，CSS選擇器的優先級是怎么樣定義的？

基本原則：

一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。

復雜的計算方法：

用1表示派生選擇器的優先級

用10表示類選擇器的優先級

用100標示ID選擇器的優先級

div.test1?.span?var?優先級?1+10?+10?+1

span#xxx?.songs?li?優先級1+100?+?10?+?1

xxx?li?優先級?100?+1

那么問題來了，看下列代碼，

標簽內的文字是什么顏色的？

.classA{ color:blue;}

.classB{ color:red;}

123

答案：red。與樣式定義在文件中的先后順序有關，即是后面的覆蓋前面的，與在

中的先后關系無關。

23.行內元素和塊級元素的具體區別是什么？行內元素的padding和margin可設置嗎？

塊級元素(block)特性：

總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;

寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;

內聯元素(inline)特性：

和相鄰的內聯元素在同一行;

寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變(也就是padding和margin的left和right是可以設置的)，就是里面文字或圖片的大小。

那么問題來了，瀏覽器還有默認的天生inline-block元素(擁有內在尺寸，可設置高寬，但不會自動換行)，有哪些？

答案： 、 、 、 、。

24.什么是外邊距重疊？重疊的結果是什么？

外邊距重疊就是margin-collapse。

在CSS當中，相鄰的兩個盒子(可能是兄弟關系也可能是祖先關系)的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。

折疊結果遵循下列計算規則：

兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。

兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。

兩個外邊距一正一負時，折疊結果是兩者的相加的和。

25.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能實現透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，

而rgba()只作用于元素的顏色或其背景色。(設置rgba透明的元素的子元素不會繼承透明效果！)

26.CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有那些？

* 1.id選擇器( # myid)

2.類選擇器(.myclassname)

3.標簽選擇器(div, h1, p)

4.相鄰選擇器(h1 + p)

5.子選擇器(ul < li)

6.后代選擇器(li a)

7.通配符選擇器( * )

8.屬性選擇器(a[rel = "external"])

9.偽類選擇器(a: hover, li: nth - child)

* 可繼承： font-size font-family color, UL LI DL DD DT;

* 不可繼承 ：border padding margin width height ;

* 優先級就近原則，樣式定義最近者為準;

* 載入樣式以最后載入的定位為準;

優先級為:

!important > id > class > tag

important 比 內聯優先級高

CSS3新增偽類舉例：

p:first-of-type 選擇屬于其父元素的首個

元素的每個

元素。

p:last-of-type 選擇屬于其父元素的最后

元素的每個

元素。

p:only-of-type 選擇屬于其父元素唯一的

元素的每個

元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個

元素。

p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個

元素。

:enabled、:disabled 控制表單控件的禁用狀態。

:checked，單選框或復選框被選中。

27.如何居中div,如何居中一個浮動元素?

給div設置一個寬度，然后添加margin:0 auto屬性

div{

width:200px;

margin:0 auto;

}

居中一個浮動元素

確定容器的寬高 寬500 高 300 的層

設置層的外邊距

.div {

Width:500px ; height:300px;//高度可以不設

Margin: -150px 0 0 -250px;

position:relative;相對定位

background-color:pink;//方便看效果

left:50%;

top:50%;

}

28.瀏覽器的內核分別是什么?經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

* IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto；

* png24為的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.

* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。

浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)

漸進識別的方式，從總體中逐漸排除局部。

首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。

接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

css

.bb{

background-color:#f1ee18;/*所有識別*/

.background-color:#00deff\9; /*IE6、7、8識別*/

+background-color:#a200ff;/*IE6、7識別*/

_background-color:#1e0bd1;/*IE6識別*/

}

* IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,

也可以使用getAttribute()獲取自定義屬性;

Firefox下,只能使用getAttribute()獲取自定義屬性.

解決方法:統一通過getAttribute()獲取自定義屬性.

* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;

Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

* (條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

* Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

29.css優先級算法如何計算？

!important > id > class > 標簽

!important 比 內聯優先級高

優先級就近原則，樣式定義最近者為準;

以最后載入的樣式為準;

30.哪些css屬性可以繼承？

可繼承： font-size font-family color, ul li dl dd dt;

不可繼承 ：border padding margin width height ;

DOM

講 DOM 先從 HTML 講起，講 HTML 先從 XML 講起。XML 是一種可擴展的標記語言，所謂可擴展就是它可以描述任何結構化的數據，它是一棵樹！

1.documen.write和 innerHTML的區別

document.write只能重繪整個頁面

innerHTML可以重繪頁面的一部分

2.DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?

1)創建新節點

createDocumentFragment() ? ?//創建一個DOM片段

createElement() ? //創建一個具體的元素

createTextNode() ? //創建一個文本節點

2)添加、移除、替換、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子節點前插入一個新的子節點

3)查找

getElementsByTagName() ? ?//通過標簽名稱

getElementsByName() ? ?//通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等于name值的)

getElementById() ? ?//通過元素Id，唯一性

3.attribute和property的區別是什么？

attribute是dom元素在文檔中作為html標簽擁有的屬性；

property就是dom元素在js中作為對象擁有的屬性。

所以：

對于html的標準屬性來說，attribute和property是同步的，是會自動更新的，

但是對于自定義的屬性來說，他們是不同步的，

4.src和href的區別

src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯系。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。

Src source,指向外部資源的位置,如果我們添加瀏覽器會暫停其他資源的下載和處理,直到該資源加載,編譯,執行完畢(圖片和框架也是如此),這也就是為什么js腳本要放在底部。

src用于替換當前元素,href用于在當前文檔和引入資源之間建立聯系。

存儲

cookie

cookie 本身不是用來做服務器端存儲的(計算機領域有很多這種“狗拿耗子”的例子，例如 CSS 中的 float)，它是設計用來在服務器和客戶端進行信息傳遞的，因此我們的每個 HTTP 請求都帶著 cookie。但是 cookie 也具備瀏覽器端存儲的能力(例如記住用戶名和密碼)，因此就被開發者用上了。

使用起來也非常簡單，document.cookie = ....即可。

但是 cookie 有它致命的缺點：

存儲量太小，只有 4KB

所有 HTTP 請求都帶著，會影響獲取資源的效率

API 簡單，需要封裝才能用

locationStorage 和 sessionStorage

后來，HTML5 標準就帶來了sessionStorage和localStorage，先拿localStorage來說，它是專門為了瀏覽器端緩存而設計的。

其優點有：

存儲量增大到 5MB

不會帶到 HTTP 請求中

API 適用于數據存儲 localStorage.setItem(key, value) localStorage.getItem(key)

sessionStorage的區別就在于它是根據 session 過去時間而實現，而localStorage會永久有效，應用場景不同。例如，一些需要及時失效的重要信息放在sessionStorage中，一些不重要但是不經常設置的信息，放在localStorage中。

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

標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性；

總結

以上是生活随笔為你收集整理的html网页在图片的后面同一行追加,htmlcss的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。