碼上歡樂
相關內容    簡體    繁體

HTML&&css面試題

本文轉載自   查看原文   2017-11-27 10:52   35568    面試題

HTML&css相關問題

1.XHTML和HTML有什么區別

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

2.什么是語義化的HTML？

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

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

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

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各自獨立的存儲空間；

5、（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為什么只需要寫？

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

10、html document是干嘛的？

  • HTML即：超文本標記語言，標准通用標記語言的一個應用，“超文本”就是指頁面內可以包含圖片、鏈接、甚至音樂、程序等非文字元素。
  • HTML Document即：HTML Document對象，每個載入瀏覽器的HTML文檔都會成為Document對象
  • 由於Document對象是window對象的一部分，所以可通過window.document屬性對其進行訪問。

11、html5哪些操作可以SEO優化

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

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

Q1

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

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大

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

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

14、頁面導入樣式時，使用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改變樣式，后者不可。

15、介紹以下你對瀏覽器內核的理解？

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

16、box-sizing常用的屬性有哪些？分別有什么作用？

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

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

  • 1、父級div定義height。
  • 2、結尾處加空div標簽clear：both。
  • 3、父級div定義偽類：after和zoom。
  • 4、父級div定義overflow：hidden。
  • 5、父級div定義overflow：auto。
  • 6、父級div也浮動，需要定義寬度。
  • 7、父級div定義display：table。
  • 8、結尾處加br標簽clear:both。
  • 比較好的是第3種，好多網站都這樣用

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

Q1

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

Q2

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

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

19、iframe的作用？

用法

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

優點

  • 1、便於修改，模擬分離，像一些信息管理系統會用到。
  • 2、但現在基本不推薦使用。除非特殊需要，一般不推薦使用。

缺點

  • 1、iframe的創建比一般的DOM元素慢了1-2個數量級
  • 2、iframe標簽會阻塞頁面的的加載，如果頁面的onload事件不能及時觸發，會讓用戶覺得網頁加載很慢，用戶體驗不好，在Safari和Chrome中可以通過js動態設置iframe的src屬性來避免阻塞。
  • 3、iframe對於SEO不友好，替換方案一般就是動態語言的Incude機制和ajax動態填充內容等。

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

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

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

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

22、有一個導航欄在Chrome里面樣式完好？在IE里文字都聚到一起了，是哪個兼容性問題？

  • 用了display：flex屬性，在IE10以下都是無效的。

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;

26、寫一下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;

29、px、em、rem的區別？

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

30、CSS3新特性有哪些？

  • 1、顏色：新增RGBA、HSLA模式
  • 2、文字陰影(text-shadow)
  • 3、邊框：圓角（border-radius）邊框陰影：box-shadow
  • 4、盒子模型：box-sizing
  • 5、背景：background-size設置背景圖片的尺寸，background-origin設置背景圖片的原點，background-clip設置背景圖片的裁剪區域，以“，”分隔可以設置多背景，用於自適應布局
  • 6、漸變：linear-gradient、radial-gradient
  • 7、過渡：transition可實現動畫
  • 8、自定義動畫
  • 9、在CSS3中唯一引入的偽元素是::selection
  • 10、多媒體查詢、多欄布局
  • 11、border-image
  • 12、2D轉換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
  • 13、3D轉換

31、標簽上title與alt屬性的區別是什么？

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

32、描述css reset的作用和用途？

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

33、解釋css sprites,如何使用？

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

33（1）、為什么要使用css sprites

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

34、在新窗口打開鏈接的方法是？

  • target:_blank

35、合理的頁面布局中常聽過結構與表現分離，那么結構是什么？表現是什么？

  • 結構是html,表現是css

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

  • 就是讓瀏覽器更好的讀懂你寫的代碼，在進行HTML結構、表現、行為設計時，盡量使用語義化的標簽，使程序代碼簡潔明了，易於進行web操作和網站SEO，方便團隊的一種標准，以圖實現一種“無障礙”的web開發。

37、display:none;與visibility:hidden的區別是什么？

  • display:none;使用該屬性后，HTML元素（對象）的寬高，高度等各種屬性值都將“丟失”；
  • visibility:hidden;使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，也即是說它仍然具有高度，寬度等屬性值。

38、請用css定義p標簽，要求實現以下效果；字體顏色在IE6下為黑色（#000000）；IE7下為紅色（#ff0000）;而其他瀏覽器下為綠色（#00ff00）

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

39、前端頁面有哪三層構成，分別是什么？作用是什么？

  • 結構層、表示層、行為層
  • 結構層（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>

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

  • 1、map+area或者svg
  • 2、border+radius
  • 3、純js實現需要求一個點在不在圓上簡單算法，獲取鼠標坐標等等

42、介紹一下標准css的盒子模型？低版本IE的盒子模型有什么不同的？

  • 1、有兩種：IE盒子模型、W3c盒子模型
  • 2、盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)。
  • 3、區別：IE的content部分把border和padding計算了進去

43、你如何對網站的文件和資源進行優化？期待的解決方案包括：

  • 文件合並
  • 文件最小化/文件壓縮
  • 使用CDN托管
  • 緩存的使用

44、IE8以下版本的瀏覽器中盒模型有什么不同？

  • IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊劇和邊距

45、寫出幾種IE6 BUG的解決方法

  • 1、雙邊距BUG float引起的 使用display
  • 2、3像素問題使用float引用的使用display:inline -3px;
  • 3、超鏈接hover后點擊失效，使用正確的書寫順序 link visited hover active
  • 4、le z-index問題給父級添加position:relative
  • 5、png 透明使用js代碼改
  • 6、min-height最小高度 ！important解決
  • 7、select 在ie6下遮蓋 使用iframe嵌套
  • 8、為什么沒有辦法定義1px左右的寬度器（IE6默認的行高造成的，使用over:hidden,zoom:0.08,line-height:1px）

46、css選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？內聯和important哪個優先級高？

  • css選擇符：類選擇器、標簽選擇器、ID選擇器、后代選擇器（派生選擇器）、群組選擇器
  • 可以繼承：類選擇器、標簽名選擇器、后代選擇器（派生選擇器）、群組選擇器
  • 優先級算法：
  • 標簽內直接定義：1000
  • ID選擇器：100
  • 類選擇器：1
  • 內聯和important中，important優先級高

47、css的基本語句構成是？

  • 選擇符、屬性、值

看到錯誤歡迎在評論區指出！！！


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML、CSS、JS面試題 前端面試題之Html和CSS html5與css3面試題（1） html5和css3面試題 HTML+CSS+JS（面試題） 基礎面試題——HTML/CSS CSS面試題 HTML面試題 CSS面試題 CSS 面試題
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM