前端面試題

爲何要語義化？

爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構 : 爲了裸奔時好看；

用戶體驗：例如title、 alt 用於解釋名詞或解釋圖片信息、 label 標籤的活用；

有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

語義化標籤有哪些？

<header></header>

<footer></footer>

<nav></nav>

<section></section>

<article></article> 表示一套結構完整且獨立的內容部分

<aslde></aside> 主題的附屬信息 

<figure></figure>媒體元素，好比視頻，圖片

<datalist></datalist>選項列表，與 input 元素配合使用，來定義 input 可能的值

<details></details>用於描述文檔或者文檔某個部分的細節

3.Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1）、 聲明位於文檔中的最前面，處於標籤以前。告知瀏覽器的解析器，用什麼文檔類型 規範來解析這個文檔。

（2）、嚴格模式的排版和JS 運做模式是以該瀏覽器支持的最高標準運行。

（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

11.請你描述一下 cookies，sessionStorage 和 localStorage 的區別?

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，能夠方便的在 web 請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。

sessionStorage、 localStorage 、 cookie 都是在瀏覽器端存儲的數據，其中 sessionStorage 的概念很特別，引入了一個「瀏覽器窗口」的概念。

 

sessionStorage 是在同源的同學口（或 tab ）中，始終存在的數據。只要瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。

關閉窗口後， sessionStorage 即被銷燬。同時「獨立」打開的不一樣窗口，即便是同一頁面， sessionStorage 對象也是不一樣的

cookies會發送到服務器端。其他兩個不會。

區別：

Cookie

每一個域名存儲量比較小（各瀏覽器不一樣，大體 4K ）

全部域名的存儲量有限制（各瀏覽器不一樣，大體 4K ）

有個數限制（各瀏覽器不一樣）

會隨請求發送到服務器

LocalStorage

永久存儲

單個域名存儲量比較大（推薦 5MB ，各瀏覽器不一樣）

整體數量無限制

SessionStorage

只在 Session 內有效

存儲量更大（推薦沒有限制，可是實際上各瀏覽器也不一樣）

瀏覽器頁面有哪三層構成，分別是什麼，做用是什麼?

構成：結構層、表示層、行爲層

分別是：HTML、CSS、JavaScript

做用：HTML實現頁面結構，CSS完成頁面的表現與風格，JS實現一些客戶端的功能與業務。

HTML5行內元素有哪些,塊級元素有哪些, 空元素有哪些?

行內元素

a - 錨點

abbr - 縮寫

acronym - 首字

b - 粗體 ( 不推薦 )

bdo - bidi override

big - 大字體

br - 換行

cite - 引用

code - 計算機代碼 ( 在引用源碼的時候須要 )

dfn - 定義字段

em - 強調

font - 字體設定 ( 不推薦 )

i - 斜體

img - 圖片

input - 輸入框

kbd - 定義鍵盤文本

label - 表格標籤

q - 短引用

s - 中劃線 ( 不推薦 )

samp - 定義範例計算機代碼

select - 項目選擇

small - 小字體文本

span - 經常使用內聯容器，定義文本內區塊

strike - 中劃線

strong - 粗體強調

sub - 下標

sup - 上標

textarea - 多行文本輸入框

tt - 電傳文本

u - 下劃線

var - 定義變量

塊元素 (block element)

address - 地址

blockquote - 塊引用

center - 舉中對齊塊

dir - 目錄列表

div - 經常使用塊級容易，也是 css layout 的主要標籤

dl - 定義列表

fieldset - form控制組

form - 交互表單

h3 - 大標題h4 - 副標題h3 - 3級標題h4 - 4級標題h5 - 5級標題h6 - 6級標題

hr - 水平分隔線

isindex - input prompt

menu - 菜單列表

noframes - frames可選內容，（對於不支持 frame 的瀏覽器顯示此區塊內容

noscript - ）可選腳本內容（對於不支持 script 的瀏覽器顯示此內容）

ol - 排序表單

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表

可變元素,可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。

applet - java applet

button - 按鈕

del - 刪除文本

iframe - inline frame

ins - 插入的文本

map - 圖片區塊 (map)

object - object對象

script - 客戶端腳本

空元素 ( 在 HTML[1] 元素中，沒有內容的 HTML 元素被稱爲空元素 )

br

hr

input

img

link

meta

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

>1. `Trident內核`： `IE`,`MaxThon`,`TT`,`The World`,`360`, `搜狗`等。[ 又稱 MSHTML]

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

3. `Presto內核`： `Opera7 `及以上。[`Opera` 內核原爲： `Presto` ，現爲：` Blink`;]

4. `Webkit內核`： `Safari`,`Chrome` 等。[ `Chrome` 的： `Blink （ WebKit 的分支）` ]

問：xhtml和html有什麼區別?

答：HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

最主要的不一樣：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。

標籤名必須用小寫字母。

XHTML 文檔必須擁有根元素。

link和@import的區別：

二者都是外部引用CSS方式，可是存在必定的區別

a、link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

b、link支持使用Javascript控制DOM去改變樣式，而@import不支持。

c、link是XHTML標籤，除了加載CSS，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS

d、link是XHTML標籤，無兼容問題；@import是在CSS 2.1提出的，低版本的瀏覽器不支持。

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

標籤選擇符 類選擇符 id選擇符

繼承不如指定 Id>class>標籤選擇

important優先級高