一、 HTML4與HTML5有什麼不同？
HTML5主要解決了以往文檔的一些痛點：
- 解決文檔結構混亂：以前的文檔結構過於依賴div，HTML5推出了多種語義化標籤，使得文檔更利於閱讀器等理解，更利於SEO優化。
- 解決瀏覽器之間的兼容性問題：市場上的瀏覽器種類繁多，每個瀏覽器廠商都在做自己的東西，沒有一個標準限值，HTML5的出現就是爲了統一標準。
- 擴展Web應用的功能：以前Web頁面僅僅只是展示作用，HTML5出現許多新的api，瀏覽器廠商也在迅速的封裝這些api，使的Web頁面更像是一個多交互的應用而非單純的頁面展示。
HTML4與HTML5主要區別
- 文檔類型聲明 文檔聲明的作用就是告訴標記語言解析器，應該用什麼文檔類型定義（DTD）來解析，HTML5的文檔解析不再基於SGML(Standard Generalized Markup Language)標準，而是形成了自己的一套標準。
// HTML4.0.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3.org/TR/html4/strict.dtd">
// HTML5
<!DOCTYPE HTML>
- 標籤方面
新增語義標籤，包括：
廢除一些網頁美化方面的標籤，使樣式與結構分離更加徹底<header>、<footer>、<section>、<aside>、<nav>、<article>、<hgroup>、<figure>
增加了<big>、<u>、<font>、<basefont>、<center>、<s>、<tt><audio> <video>兩個標籤實現對對媒體中的音頻、視頻的支持。 - 屬性方面
增加了一些表單屬性，主要是對input屬性的增強
其他標籤也新增了一些屬性<!-- 要求輸入正確的email地址 --> <input type="email"> <!-- 要求輸入正確的URL地址 --> <input type="url"> <!-- 要求輸入數字，默認會有上下兩個按鈕 --> <input type="number"> <!-- 時間格式，但目前只有Opera和Chrome支持 --> <input type="date"> <input type="time"> <input type="datetime"> <input type="datetime-local"> <input type="month"> <input type="week"> <!-- 默認佔位文字 --> <input type="text" placeholder="***"> <!-- 聚焦屬性 --> <input type="text" autofocus="true">
部分屬姓名默認具有boolean屬性<!-- meta標籤增加charset屬性 --> <meta charset="utf-8"> <!-- script標籤增加async屬性 --> <script async></async><!-- 只寫屬性名默認爲true --> <input type="checkbox" checked/> <!-- 屬性名="屬性名"也爲true --> <input type="checkbox" checked="checked"/> - 存儲方面
- 新增WebStorage，包括localStorage、sessionStorage
- 引入了IndexDB和Web SQL，允許在瀏覽器端創建數據庫並存儲數據，兩者的區別在於IndexDB更像是一個NoSQL數據庫，而WebSQL更像是關係型數據庫。W3C已經不再支持WebSQL。
- 引入了應用程序緩存器(application cache)，可對Web進行緩存，在沒有網絡的情況下使用，通過創建cache mainfest文件創建應用緩存，爲PWA提供了底層的技術支持。
二、meta標籤屬性都有哪些？
charset屬性
<!-- 定義網頁文檔的字符集 -->
<meta charset="utf-8">
name + content屬性
<!-- 網頁作者 -->
<meta name="author" content="作者名稱"/>
<!-- 網頁地址 -->
<meta name="website" content="url"/>
<!-- 網頁版權信息 -->
<meta name="copyright" content="2019-2020 ***"/>
<!-- 網頁關鍵字 用於SEO -->
<meta name="keywords" content="關鍵字"/>
<!-- 網頁描述 -->
<meta name="description" content="網頁描述"/>
<!-- 搜索引擎索引方式，一般爲all -->
<meta name="robots" content="all"/>
<!-- 移動端常用視口設置，參數詳解
width: 寬度（數值 / device-width 默認爲980像素）
height: 高度（數值 / device-height）
initial-scale: 初始的縮放比例 範圍從 0+ ~ 10
minimum-scele: 允許用戶縮放的最小比例
maxmum-scale: 允許用戶縮放的最大比例
user-scalable: 用戶是否可以手動縮放 no yes
-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
http-equiv屬性
<!-- expires指定網頁的過期時間，一旦過期，必須從服務器上下載 -->
<meta http-equiv="expires" content="Fri, 12 Jan 2020 23:59:59 GMT" />
<!-- refresh 等待一定的時間刷新或者跳轉到其他url，下面表示一秒 -->
<meta http-equiv="refresh" content="1; url=https://www.baidu.com" />
<!-- pragma 禁止瀏覽器從本地緩存中讀取網頁，即瀏覽器一旦離開網頁在無法連接網絡的情況下就無法訪問頁面 -->
<meta http-equiv="prgama" content="no-cache" />
<!-- set-cookie 也是設置cookie的一種方式，並且可以指定過期時間 -->
<meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2020 23:59:59 GMT, path=/" />
<!-- http-equiv="X-UA-Compatible 使用瀏覽器版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrom=1" />
<!-- 針對WebApp全屏模式，隱藏狀態欄/設置狀態欄顏色，content默認值爲default | black | black-translucent -->
<meta http-equiv="apple-mobile-web-app-status-bar-style" content="black-translucent" />
三、src和href的區別是什麼？
定義
href是Hypertext Reference的簡寫，表示超文本引用，指向網絡資源所在位置。
常見場景：
<a href="https://www.baidu.com">
<link type="text/css" rel="stylesheet" href="common.css">
src是source的簡寫，目的是要把文件下載到html頁面中去。
常見場景：
<img src="img/001.jpg">
<iframe src="xxx.html">
<script src="xxx.js">
作用結果
- href用於在當前文檔和引用資源之間確立聯繫
- src用於替換當前內容
瀏覽器解析方式
- 當瀏覽器遇到href會並行下載資源並且不會停止對當前文檔的處理，就是不會阻塞頁面加載，這也是爲什麼建議使用link方式加載css，而不是使用@import。
- 當瀏覽器解析到src，會暫停其他資源的下載和處理，知道將該資源加載或者解析完畢。這也是script標籤爲什麼放在底部而不是頭部的原因。
四、script標籤中的defer和async屬性的區別是什麼？
默認情況下，腳本的下載和執行將會按照文檔的先後順序同步進行。當腳本下載和執行的時候，文檔解析就會被阻塞，在腳本下載和解析完畢後文檔才能繼續往下繼續解析。
下面是async和defer的區別：
- 當script中有defer屬性時，腳本的加載過程和文檔的加載是異步發生的，等到文檔解析完畢後（DOMContentLoaded事件發生）腳本纔開始執行。
- 當script中有async屬性時，腳本的加載過程和文檔加載也是異步發生的。但是腳本下載完成後會停止HTML解析，會執行腳本，腳本解析完畢後繼續HTML解析。
- 當script中同時有async和defer屬性時，執行效果和async效果一致。
五、DOM篇
什麼是DOM？
MDN：文檔對象模型（DOM）是HTML和XML文檔的編程接口。它提供了對文檔的結構化描述，並定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構、樣式和內容。DOM將文檔解析爲一個由節點和對象（包含屬性和方法的對象）組成的結構集合。簡言之，它會將web頁面和腳本或者程序語言連接起來。
說白了DOM就是瀏覽器爲JavaScript提供的一系列接口去操作web頁面。
DOM創建
DOM節點（Node）通常對應於一個標籤、文本或者一個HTML屬性。DOM節點有一個nodeTyoe屬性用來表示當前元素的類型，它是一個整數：
1 - Element - 元素
2 - Attribute - 屬性
3 - Text -文本
DOM節點創建最常用的就是document.createElement和document.createTextNode方法：
var el1 = document.createElement('div')
var el2 = document.createElement('input')
var node = document.createTextNode('Hello')
DOM查詢
元素查詢的API返回的結果是DOM節點或者DOM節點的列表。
// 返回文檔中第一個類名爲"myClass"的元素
var el = document.querySelector(".myClass")
// 返回一個文檔中所有的class爲"node"或者"alert"的元素
var els = document.querySelectorAll("div.note, div.alert")
// 獲取元素
var el1 = document.getElementById('el1')
var el2 = document.getElementByClassName('el2')
var el3 = document.getElementByTagNAme('el3')
Element也提供了很多相對於DOM導航方法：
// 獲取父元素、父節點
var parent = ele.parentElement
var parent = ele.parentNode
// 獲取子節點，子節點可以試試任何一種節點，可以通過nodeType判斷
var node = ele.children
// 查詢尋子元素
var els = ele.getElementByTagName('td')
var els = ele.getElementByClassName('test')
// 當前元素的第一個 / 最後一個子元素節點
var el = ele.firstElementChild
var el = ele.lastElementChild
// 上一個 / 下一個兄弟元素節點
var el = ele.previousElementsibling
var el = nextElementSibling
DOM刪改
// 添加、刪除子元素
ele.appendChild(el)
ele.removeChild(el)
// 替換子元素
ele.replaceChild(el1, el2)
// 插入子元素
parentElement.insertBefore(newElement, referenceElement)
屬性操作
// 獲取一個{ name: value }的數組
var attrs = el.attributes
// 獲取設置屬性
var c = el.getAttribute('class')
el.setAttribute('class', 'newAttr')
// 判斷、移除屬性
el.hasAttribute('class')
el.removeAttribute('class')
// 是否有屬性設置
el.hasAttribute()
行內元素和塊級元素的區別是什麼？inline-block是什麼？
-
行內元素會在一條直線上排列，默認寬度只與內容有關，水平方向排列；行內元素設置寬高無效，margin上下無效，padding上下無效，可以設置line-height；行內元素只能包含文本或者其他行內元素。
-
塊級元素各佔一行，默認寬度是它父容器的100%，與內容無關，垂直方向排列；塊級元素從新行開始，結束接着一個斷行，且塊級元素可以包含塊級元素和行內元素。
-
inline-block元素（如img、input）既具有block元素可以設置寬高的特性，同時又具有inline元素默認不換行的特性。inline-block元素還可以設置verticle-align屬性。HTML中的換行符、空格符、製表符等都會合併爲空白符，字體大小不爲0的情況下，空白負佔據一定的寬度，使用inline-block會產生元素之間的空隙，需要注意一下。
-
行內元素有：
<a>、<abbr>、<b>、<br>、<em>、<i>、<img>、<input>、<label>、<q>、<select>、<span>、<sub>、<textarea>、<tt>
- 塊級元素有：
<address>、<dd>、<dt>、<div>、<dl>、<fieldset>、<form>、<h1 - h6>、<hr>、<legend>、<li>、<ol>、<ul>、<p>、<table>、<td>、<tr>
可到我的GitHub獲取更多內容 https://github.com/lovelyBug/front-end-knowledge-system