2018前端面試題及參考答案整理(二)

時間 2019-11-09

標籤端面試題參考答案整理简体版

原文原文鏈接

1.HTML5中的DataList是什麼？javascript

<datalist>定義選項列表，與input元素配合使用，來定義input可能的值。datalist及其選項不會被顯示出來，他僅僅是合法的輸入值列表php

2.SVG是什麼?css

svg（Scalable Vector Graphics,可伸縮矢量圖形）由萬維網聯盟（W3C）推出的基於xxxxim編碼的開放式圖形、圖像標準。他雖然是一種二維矢量圖形格式，但其中包含矢量圖形、光柵圖像及文本等。html

3.HTML5canvas是什麼?html5

定義圖形，好比圖表和其餘圖像java

4.如何使用canvas來畫一條線?jquery

[html] view plain copy

<canvas id="canvas" style="border:1px solid #aaa;display: block;margin:50px auto;">"></canvas>
<script>
window.onload= function() {
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
canvas.width = 1024
canvas.height = 768
context.moveTo(100,100)
context.lineTo(700,700)
context.lineWidth = 5
context.strokeStyle = 'red'
context.stroke()
}
</script>

5.HTML5中如何實現應用緩存?css3

[html] view plain copy

<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8">
<title>HTML應用緩存的實現</title>
</head>
<body>
文檔內容。。。。
</body>
</html>
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html

6.本地存儲和cookie(存儲在用戶本地終端上的數據)之間的區別是什麼?web

cookie數據始終在同源http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞；cookie數據還有路徑的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如回話標識。數據有效期不一樣，cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。ajax

7.HTML5爲何只須要寫<!DOCTYPEHTML>?

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

8.行內元素有哪些?塊級元素有哪些? 空(void)元素有哪些?

行內元素：a b span img select strong 塊級元素：div ul ol li dl dt h1 p 空元素： <br> <hr> <img> <link> <meta>

9.頁面導入樣式時,使用link和@import有什麼區別?

1.link屬於XHTML標籤，而@import徹底是css提供的一種方式。link標籤除了能夠加載css外，還能夠作不少其餘的事情。好比定義RSS，定義rel屬性等，而@import就只能加載css了。

2.加載順序的區別。當一個頁面被加載的時候，link引用的css會同時被加載，而@import引用的css會等到頁面所有被下載完再被加載。

3.兼容性的差異。因爲@import是css2.1提出的，因此老的瀏覽器不支持，@import只有在IE5以上的瀏覽器才能是識別，而link標籤無此問題。

4.使用dom控制樣式的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤由於@import不是dom能夠控制的。

10.HTML5有哪些特性、移除了哪些元素？如何處理HTML5新標籤的瀏覽器兼容性？

主要是關於圖像，位置，存儲，多任務等功能的增長。

語義化更好的標籤：header , nav , footer , aside , article , section

音頻，視頻： audio video

畫布：canvas

本地離線存儲localstorage長期存儲數據，瀏覽器關閉後數據不丟失，sessionStorage的數據在瀏覽器關閉後自動刪除

表單控件：calendar、date、time、email、url、search

新的技術：webworker，websock，Geolacation

移除的元素：basefont，big，center，font，s，frame等

兼容性處理：IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5標籤，瀏覽器支持新標籤後，還須要添加標籤默認樣式。固然最後的方式是直接利用成熟的框架，使用最多的是html5shim框架

[html] view plain copy

<strong><!--[if lt IE 9]> </strong>

[html] view plain copy

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

[html] view plain copy

<![endif]-->

11.如何區分HTML和HTML5？

1.在文檔類型聲明上

HTML：

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML5：

[html] view plain copy

<!DOCTYPE html>

　二、在結構語義上
　　HTML:沒有體現結構語義化的標籤，一般都是這樣來命名的<div id="header"></div>，這樣表示網站的頭部。
　　HTML5:在語義上卻有很大的優點，提供了一些新的HTML5標籤好比: article、footer、header、nav、section，這些通俗易懂。

12.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進行需求實現。

13.HTML5常見的兼容性問題？

1.讓老式瀏覽器支持HTML5

2.讓老式瀏覽器兼容css3

14.簡述css的盒子模型？

css盒子模型，又稱框模型，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個元素。

16.css選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？css3有哪些新屬性？

css選擇符：

1. 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
text-indent

優先級算法：

優先級就近原則，同權重狀況下樣式定義最近者爲準；
載入樣式以最後載入的定位爲準
！import > id > class > tag
important 比內聯優先級搞，但內聯比id要高

17.如何居中div？如何居中一個浮動元素？

18.dispaly:inline-block 何時會顯示間隙？

真正意義的inline-block水平呈現的元素間，換行顯示或者空格分隔的狀況下會有間隙

19.簡述一下 src 和 href 的區別？

scr用於替換當前元素，href用於在當前文檔和引用資源之間確立關係。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在的位置；在請求src資源時會將其指向的資源下載並應用到文檔內，列如js腳本，img圖片，和iframe等元素。當瀏覽器解析到該元素時，會暫停其餘資源的加載，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似將所指向資源嵌入當前標籤內。

href是Hypetext Reference的縮寫，指向網絡資源所在的位置，創建和當前元素（錨點）或當前文檔（連接）之間連接，

若是咱們在文檔中添加

<link href="common.css" rel="stylesheet"/>

那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式。

20.瀏覽器的內核分別是什麼？