html&&css

時間 2019-11-06

標籤 html&&css html css 欄目 HTML 简体版

原文原文鏈接

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

<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html>標籤以前。告知瀏覽器的解析器,用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。
標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。javascript

2.HTML5 爲何只須要寫 <!DOCTYPE HTML>？

HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；
而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。**css

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）常見的空元素：

html

<img><input><link><meta>
不爲人知的是：
<area><base><col><command><embed><keygen><param><source><track><wbr>
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引擎愈來愈獨立，內核就傾向於只指渲染引擎。html5

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的分支）]java

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;web

移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；
算法

支持HTML5新標籤：
IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還須要添加標籤默認的樣式。
固然也能夠直接使用成熟的框架、好比html5shim;
canvas
如何區分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標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。

<label for="Name">Number:</label>
<input type=「text「name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

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和IE七、IE6分離開來，這樣IE8已經獨立識別。
css

.bb{ 
   background-color:#f1ee18;/*全部識別*/ 
  .background-color:#00deff\9; /*IE六、七、8識別*/ 
  +background-color:#a200ff;/*IE六、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.<img>的title和alt有什麼區別？

title是global attributes之一，用於爲元素提供附加的advisory information。一般當鼠標滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

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
那麼問題來了，看下列代碼，<p>標籤內的文字是什麼顏色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。與樣式定義在文件中的前後順序有關，便是後面的覆蓋前面的，與在<p class=’classB classA’>中的前後關係無關。

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元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

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> 元素的每一個 <p> 元素。
p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
: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和IE七、IE6分離開來，這樣IE8已經獨立識別。

css

.bb{
   background-color:#f1ee18;/*全部識別*/
  .background-color:#00deff\9; /*IE六、七、8識別*/
  +background-color:#a200ff;/*IE六、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,指向外部資源的位置,若是咱們添加<script src ="js.js"></script>瀏覽器會暫停其餘資源的下載和處理,直到該資源加載,編譯,執行完畢(圖片和框架也是如此),這也就是爲何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腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性；

相關標籤/搜索

htmlcss

HTML

CSS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。