HTML&&css面試題

時間 2019-11-10

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

原文原文鏈接

HTML&css相關問題

1.XHTML和HTML有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XMl的置標語言
最主要的不一樣
XHTML元素必須被正確地嵌套。
XHTML元素必須被關閉
標籤名必須用小寫字母
XHTMl文檔必須擁有根元素

2.什麼是語義化的HTML？

直觀的認識標籤對於搜索引擎的抓取有好處，用正確的標籤作正確的事情！
HTML語義化就是讓頁面的內容結構化，便於對瀏覽器，搜索引擎解析；
在沒有樣式css狀況下也以一種文檔格式顯示，而且是容易閱讀。搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於SEO。
在閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

2（1）、簡述一下你對HTML語義化的理解？

一、用正確的標籤作正確的事情。
二、html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器，搜索引擎解析；
三、即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的；
四、搜索引擎的爬蟲也依賴於HTML標記肯定上下文和各個關鍵字的權重，利用SEO;
五、使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

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

Trident內核：IE,MaxThon,TT,The Word,360,搜狗瀏覽器等。[又稱爲MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
Presto內核：Opera7及以上。[Opera內核原爲：Presto，現爲：Blink]
Webkit內核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

3(1).常見哪幾種瀏覽器測試？有哪些內核（Layout Engine）？

瀏覽器：IE、Chrome、FireFox、Safari、Opera
內核：Trident、Gecko、Presto、Webkit

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

HTML5如今已經不是SGML的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
繪畫canvas
用於媒介回放的video和audio元素
本地離線存儲localStorage長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素，好比article,footer,header,nav,section
表單控件：calendar,date,time,email,url,search
新的技術webworker,websocktGeolocation
移除的元素
純表現的元素：basefont,big,center,font,s,strike,tt,u;
對可用性產生負面影響的元素：frame,frameset,noframes;
支持HTML5新標籤：
IE8/IE7/IE6支持經過document,createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

5.請描述一下cookies,sessionStorage（會話存儲）和localStrorage（本地存儲）的區別？

cookie在瀏覽器和服務器間來回傳遞。sessionStorage和localStorage不會；
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；

五、（1）請描述一下cookies、sessionStorage和localStorage區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
cookie數據始終在同源的http請求中攜帶（即便不須要），即會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存
存儲大小：
cookie數據大小不能超過4K。
sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
有期時間：
localStorage：存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage：數據在當前瀏覽器窗口關閉後自動刪除
cookie：設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

6.如何實現瀏覽器內多個標籤頁之間的通訊？

調用localstorage,cookies等本地存儲方式
WebSocket、SharedWorker
localstroge另外一個瀏覽器上下文被添加、刪除或修改時，它都會觸發一個事件，咱們經過監聽事件，控制它的值來進行頁面信息通訊。
注意quirks:Safari在無痕跡模式下設置localstorge值拋出QuotExceededError的異常。

7.HTML5爲何只須要寫！DOCTYPE HTML？

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

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

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

9.Doctype？嚴格模式與混雜模式如何觸發這兩種模式，區分它們有何意義？

用於聲明文檔使用哪一種規範（html/Xhtml）通常爲嚴格過渡基於框架的html文檔。
加入XML聲明可觸發，解析方式更改成IE5.5擁有IE5.5的Bug。

9(1)、HTML5爲何只須要寫<!DOCTYPE HTML>？

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

十、html document是幹嗎的？

HTML即：超文本標記語言，標準通用標記語言的一個應用，「超文本」就是指頁面內能夠包含圖片、連接、甚至音樂、程序等非文字元素。
HTML Document即：HTML Document對象，每一個載入瀏覽器的HTML文檔都會成爲Document對象
因爲Document對象是window對象的一部分，因此可經過window.document屬性對其進行訪問。

十一、html5哪些操做能夠SEO優化

title標籤；meta標籤；header標籤；footer標籤
元標籤（meta標籤）；導航標籤（nav標籤）；文章標籤（article標籤）；左或右側標籤（aside標籤）

十二、css盒模型有哪些及區別content-box border-box padding-box

Q1

IE盒子模型box-sizing:border-box;（怪異模式）
W3C標準盒子模型 box-sizing:content-box;（標準模式）默認模式javascript

Q2
content-box:這是默認樣式指定CSS標準。測量width和height屬性只包括的內容，但不是border, margin, 或者 padding。
padding-box:width和height屬性包括padding的大小，不包括border和margin
border-box:width和height屬性包括padding和border，但不是margin。這是盒模型的文檔時，Internet Explorer使用Quirks模式。
content-box不包含padding，border-box包含padding。因此若是你設置的大小是同樣的，content-box看起來，會比border-box大css

1三、行內元素和塊狀元素的區別？行內快元素的兼容性使用？（IE8如下）

行內元素：會在水平方向排列，不能包含快級元素，設置width無效，height無效（能夠設置line-height），margin上下無效，padding上下無效
塊級元素：各佔據一行，垂直方向排列。重新行開始結束接着一個斷行
兼容性：display:inline-block;display:inline;zoom:1;

1四、頁面導入樣式時，使用link和@import有什麼區別？

1.link屬於HTML標籤，除了加載CSS外，還能用於定義RSS，定義rel鏈接屬性等做用；而@import是CSS提供，只能加載CSS;
2.頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；
import是CSS2.1提出的，只在IE5以上才能被識別，而link是HTML標籤，無兼容問題；

14(1).css引入的方式有哪些？link和@import的區別是？

內聯，內嵌，外鏈，導入
區別：同時加載，
前者無兼容性，後者css2.1如下瀏覽器不支持
link支持使用javascript改變樣式，後者不可。

1五、介紹如下你對瀏覽器內核的理解？

一、主要分紅兩部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。
二、渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等）、以及計算網頁的顯示方式、而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣、因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其餘須要編輯、顯示網絡內容的應用程序都須要內核
三、JS引擎則：解析和執行javascript來實現網頁的動態效果。
四、最開始渲染引擎和JS引擎並無區分得很明確，後來JS引擎愈來愈獨立，內核九傾向於只指渲染引擎。

1六、box-sizing經常使用的屬性有哪些？分別有什麼做用？

box-sizing：content-box|border-box|inherit
content-box：寬度和高度分別應用到元素的內容框。

1七、清楚浮動有哪些方式？比較好的方式是哪種

一、父級div定義height。
二、結尾處加空div標籤clear：both。
三、父級div定義僞類：after和zoom。
四、父級div定義overflow：hidden。
五、父級div定義overflow：auto。
六、父級div也浮動，須要定義寬度。
七、父級div定義display：table。
八、結尾處加br標籤clear:both。
比較好的是第3種，好多網站都這樣用

1八、html5有哪些新特性？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分HTML和HTML5？

Q1

HTML5如今已經不是SGML的子集，主要是關於圖像，位置，存儲，多任務等功能的增長；
一、繪畫canvas；
二、用於媒介回放的video和auto元素；
三、本地離線存儲localStorage長期存儲數據，瀏覽器關閉後數據不丟失；
四、sessionStorage的數據在瀏覽器關閉後自動刪除；
五、語意化更好的內容元素，好比article、footer、header、nav、section；
六、表單控件：calendar、date、time、url、search；
七、新的技術html

Q2

IE8/IE7/IE6支持經過document.createElement方法產生的標籤；前端

<!--[if lt IE 9]>
  <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  <![endif]-->

1九、iframe的做用？

用法

一、iframe是用來在網頁中插入第三方頁面，早期的頁面使用iframe主要是用於導航欄這種不少頁面都相同的部分，這樣在切換頁面的時候避免重複下載。html5

優勢
一、便於修改，模擬分離，像一些信息管理系統會用到。
二、但如今基本不推薦使用。除非特殊須要，通常不推薦使用。java

缺點
一、iframe的建立比通常的DOM元素慢了1-2個數量級
二、iframe標籤會阻塞頁面的的加載，若是頁面的onload事件不能及時觸發，會讓用戶以爲網頁加載很慢，用戶體驗很差，在Safari和Chrome中能夠經過js動態設置iframe的src屬性來避免阻塞。
三、iframe對於SEO不友好，替換方案通常就是動態語言的Incude機制和ajax動態填充內容等。css3

20、box-sizing、transition、translate分別是什麼？

一、box-sizing:用來指定模型的大小的計算方式。主要分爲border-box(從邊框固定盒子大小)、content-box(從內容固定盒子大小)兩種計算方式。
二、transition:當前元素只要有"屬性"發生變化時，能夠平滑的進行過渡。經過transition-propety設置過渡屬性；transition-duration設置過渡時間；transition-timing-function設置過渡速度；transition-delay設置過渡延時。
三、translate：經過移動改變元素的位置；有x,y,z三個屬性

2一、選擇器優先級是怎樣的？

一、！important>行內樣式>id選擇器>類選擇器>標籤選擇器>通配符>繼承
二、權重算法：(0,0,0,0)==》第一個0對應的是important的個數，第二個0對應的是id選擇器的個數，第三個0對應的類選擇器的個數，第四個0對應的是標籤選擇器的個數，就是當前選擇器的權重
三、比較：先從第一個0開始比較，若是第一個0大，那麼說明這個選擇器的權重高，若是第一個相同，比較第二個，依次類推。web

2二、有一個導航欄在Chrome裏面樣式無缺？在IE裏文字都聚到一塊兒了，是哪一個兼容性問題？
用了display：flex屬性，在IE10如下都是無效的。ajax

23.CSS實現垂直水平居中

HTML結構：算法

<div class="wrapper">
    <div class="content"></div>
</div>

CSS：

.wrapper{position:relative;}
.content{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        //父元素須要相對定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
}

方法二

.content{
        position:absolute;
        left:50%;
        top:50%;
        width:200px;
        height:200px;
        background:red;
        -webkit-transform:translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        -o-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
    }

24.display有哪些值？說明它們的做用。

block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
none 缺省值。像行內元素類型同樣顯示。
inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
inline-block 默認寬度爲內容寬度，能夠設置寬高，同行顯示。
list-item 像塊類型元素同樣顯示，並添加樣式列表標記。
table 此元素會做爲塊級表格來顯示。
inherit 規定應該從父元素繼承display屬性的值。

25.行內元素有哪些？塊級元素有哪些？css的盒模型？

塊級元素：div ,p,h1,form,ul,li
行內元素：span,a,label,input,img,strong,em;
css盒模型：內容，border,margin,padding;

2六、寫一下audio標籤中，如何實現音樂的暫停和播放

play()開始,pause()暫停

26（1）、寫出video標籤中預加載視頻用到的屬性是什麼

preload

27.css選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和important哪一個優先級高？

標籤選擇符；類選擇符；id選擇符
id>class>標籤選擇
important優先級高

28.css清除浮動的幾種方法？

使用帶clear屬性的空標籤；
使用css的overflow屬性；
使用css的：after僞元素；

同時爲了兼容 IE6，7 一樣須要配合zoom使用

.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
     .clear{zoom:1;}

使用鄰接元素處理；
父級設置成inline-block；
br清浮動
以浮制浮（父級同時浮動）
給浮動元素父級設置高度
給父元素添加overflow：hidden 清除浮動方法；
問題：須要配合寬度或者 zoom 兼容IE6 IE7；
```
overflow: hidden;
     *zoom: 1;
```

2九、px、em、rem的區別？

一、px像素。絕對單位，像素px是相對於顯示器屏幕分辨率而言的，是一個虛擬單位。是計算機系統的數字化圖像長度單位，若是px要換算成物理長度，須要指定精度DPI。
二、em是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，所以並非一個固定的值。
rem是CSS3新增的一個相對單位(root em,根em),使用rem爲元素設定字體大小事，仍然是相對大小但相對的只是HTML根元素。
四、區別：IE沒法調用那些使用px做爲單位的字體大小，而em和rem能夠縮放，rem相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器已支持rem。

30、CSS3新特性有哪些？

一、顏色：新增RGBA、HSLA模式
二、文字陰影(text-shadow)
三、邊框：圓角（border-radius）邊框陰影：box-shadow
四、盒子模型：box-sizing
五、背景：background-size設置背景圖片的尺寸，background-origin設置背景圖片的原點，background-clip設置背景圖片的裁剪區域，以「，」分隔能夠設置多背景，用於自適應佈局
六、漸變：linear-gradient、radial-gradient
七、過渡：transition可實現動畫
八、自定義動畫
九、在CSS3中惟一引入的僞元素是::selection
十、多媒體查詢、多欄佈局
十一、border-image
十二、2D轉換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
1三、3D轉換

3一、標籤上title與alt屬性的區別是什麼？

Alt當圖片不顯示時，用文字表明
Title爲該屬性提供信息

3二、描述css reset的做用和用途？

Reset重置瀏覽器的css默認屬性，瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一。

3三、解釋css sprites,如何使用？

css 精靈圖，把一堆小的圖片整合到一張大的圖片（png）上，減輕服務器對圖片的請求數量。

33（1）、爲何要使用css sprites

css精靈把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量
css sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用css的"background-image","background-position"的組合進行背景定位，這樣能夠減小。
不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是若是請求太多會給服務器增長很大的壓力。

3四、在新窗口打開連接的方法是？

target:_blank

3五、合理的頁面佈局中常聽過結構與表現分離，那麼結構是什麼？表現是什麼？

結構是html,表現是css

3六、簡述對Web語義化的理解？

就是讓瀏覽器更好的讀懂你寫的代碼，在進行HTML結構、表現、行爲設計時，儘可能使用語義化的標籤，使程序代碼簡潔明瞭，易於進行web操做和網站SEO，方便團隊的一種標準，以圖實現一種「無障礙」的web開發。

3七、display:none;與visibility:hidden的區別是什麼？

display:none;使用該屬性後，HTML元素（對象）的寬高，高度等各類屬性值都將「丟失」；
visibility:hidden;使用該屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在，也便是說它仍然具備高度，寬度等屬性值。

3八、請用css定義p標籤，要求實現如下效果；字體顏色在IE6下爲黑色（#000000）；IE7下爲紅色（#ff0000）;而其餘瀏覽器下爲綠色（#00ff00）

p{
    color:green;
    *color:blue;
    _color:black;
}

3九、前端頁面有哪三層構成，分別是什麼？做用是什麼？

結構層、表示層、行爲層
結構層（structural layer）：由HTML或XHTML之類的標記語言負責建立。
表示層（presentation layer）:由css負責建立。
行爲層（behaviorlayer）:負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM主宰的領域。

40、實現佈局中間自適應寬度，左右兩欄固定寬度

<style>
        .box{
            display:flex;
        }
        .left{
            width: 200px;
            height: 600px;
            background:red;
        }
        .right{
            width: 200px;
            height: 600px;
            background:red;
        }
        .center{
            width: 100%;
            height:600px;
            background:green;
        }
    </style>
</head>
<body>
    <div class="box" >
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>