DTD 有什么作用？

文檔類型聲明

在 HTML 中，文檔類型 doctype 的聲明是必要的。

在所有文檔的頭部，你都將會(huì)看到"" 的身影。

這個(gè)聲明的目的是防止瀏覽器在渲染文檔時(shí)，切換到我們稱為“怪異模式(兼容模式)”的渲染模式。

“" 確保瀏覽器按照最佳的相關(guān)規(guī)范進(jìn)行渲染，而不是使用一個(gè)不符合規(guī)范的渲染模式。

什么是怪異模式？什么是標(biāo)準(zhǔn)模式？二者有什么差別（舉例）？產(chǎn)生的歷史原因是什么？使用時(shí)需要注意什么？

怪異模型

使用瀏覽器自己的方式解析執(zhí)行代碼，因?yàn)椴煌瑸g覽器解析執(zhí)行的方式不一樣，所以稱之為怪異模式。

標(biāo)準(zhǔn)模型

按照 W3C 標(biāo)準(zhǔn)解析執(zhí)行代碼

瀏覽器解析時(shí)使用標(biāo)準(zhǔn)模式還是怪異模式，與網(wǎng)頁中的DTD聲明直接相關(guān)，DTD聲明定義了標(biāo)準(zhǔn)文檔的類型（標(biāo)準(zhǔn)模式解析）文檔類型，會(huì)使瀏覽器使用相關(guān)的方式加載網(wǎng)頁并顯示，忽略DTD聲明，將使網(wǎng)頁進(jìn)入怪異模式（quirks mode）。

產(chǎn)生的歷史原因？

是因?yàn)橐郧胺至藘蓚€(gè)，一個(gè)是網(wǎng)景，一個(gè)是 IE 瀏覽器，而W3C標(biāo)準(zhǔn)創(chuàng)建之后，為了兼容老代碼，老網(wǎng)站，所以采取了兩種模式。

二者都有什么差別

在怪異模式下，排版會(huì)模擬 Navigator 4 與 Internet Explorer 5 的非標(biāo)準(zhǔn)行為。為了支持在網(wǎng)絡(luò)標(biāo)準(zhǔn)被廣泛采用前，就已經(jīng)建好的網(wǎng)站，這么做是必要的。

在標(biāo)準(zhǔn)模式下，行為即（但愿如此）由 HTML 與 CSS 的規(guī)范描述的行為。

使用時(shí)需要注意什么？

1、盒模型：

在怪異模式下，盒模型為IE模型

height = border-top + border-bottom + padding-top + padding-bottom + content

width = border-left + border-right + padding-left + padding-right + content

而在W3C標(biāo)準(zhǔn)的盒模型

height = content

width = content

HTML5是什么？有哪些新特性？新增了哪些語義化標(biāo)簽？新增了哪些表單元素？

HTML5 是什么？

它是一個(gè)新版本的HTML語言，具有新的元素，屬性和行為，

它有更大的技術(shù)集，允許構(gòu)建更多樣化和更強(qiáng)大的網(wǎng)站和應(yīng)用程序。這個(gè)集合有時(shí)稱為HTML5和它的朋友們，不過大多數(shù)時(shí)候僅縮寫為一個(gè)詞 HTML5。

• 語義：能夠讓你更恰當(dāng)?shù)孛枋瞿愕膬?nèi)容是什么。
• 連通性：能夠讓你和服務(wù)器之間通過創(chuàng)新的新技術(shù)方法進(jìn)行通信。
• 離線 & 存儲(chǔ)：能夠讓網(wǎng)頁在客戶端本地存儲(chǔ)數(shù)據(jù)以及更高效地離線運(yùn)行。
• 多媒體：使 video 和 audio 成為了在所有 Web 中的一等公民。
• 2D/3D 繪圖 & 效果：提供了一個(gè)更加分化范圍的呈現(xiàn)選擇。
• 性能 & 集成：提供了非常顯著的性能優(yōu)化和更有效的計(jì)算機(jī)硬件使用。
• 設(shè)備訪問 Device Access：能夠處理各種輸入和輸出設(shè)備。
• 樣式設(shè)計(jì): 讓作者們來創(chuàng)作更加復(fù)雜的主題吧！

有哪些新特性？

• 語義化標(biāo)簽
• 多媒體 video/audio
• 畫布 canvas
• 通信 websocket/webworker/Server-sent events
• 緩存 localStorage/sessionStorage
• 拖拽 drag/dragstart/dragover/dragleave/drop

新增了哪些語義化標(biāo)簽？

• section 塊
• article 文章
• nav 導(dǎo)航
• header 頭部
• footer 頁腳
• main 主要
• aside 側(cè)邊欄

新增了哪些表單元素？

html5篇——新增表單元素和表單屬性

<form method="get" id="test">
      <input type="text" name="name"/>
      <input type="password" name="password"/>
      <input type="submit" value="提交">
 </form>
<input type="text" name="confirm" form="test">
<input type="email" name="email"/>
<input type="url" name="url"/>
<input type="number" name="number" min=2 max=100 step=5 value="15"/>
<input type="range" name="range" min=20 max=200 value="60"/>
<input type="date" name="date"/>
<input type="month" name="month"/>
<input type="week" name="week"/>
<input type="time" name="time"/>
<input type="datetime" name="datetime"/>
<input type="datetime-local" name="datetime-local"/>
<input type="search" name="search" result="s"/>
<input type="tel" name="tel" />
<input type="color" name="color"/>
<input type="text" name="name" pattern="[A-z0-9]{8}"/>

什么是HTML語義化？

單純的HTML代碼是不帶任何樣式的只是用來標(biāo)記這一段是標(biāo)題、這一塊是代碼、那一個(gè)是要強(qiáng)調(diào)的內(nèi)容等等，但是為什么我們只寫HTML在瀏覽器中不同的標(biāo)簽也是有不同的樣式呢？那是因?yàn)楦鱾€(gè)瀏覽器都自帶的有相應(yīng)標(biāo)簽的默認(rèn)樣式，為了方便在沒有設(shè)定樣式的情況下友好的展示頁面。良好的語義化代碼可以直接從代碼上就能看出來那一塊到底是要表達(dá)什么內(nèi)容。

為什么要使用HTML語義化標(biāo)簽？

• 1.標(biāo)簽語義化有助于構(gòu)架良好的HTML結(jié)構(gòu)，有利于搜索引擎的建立索引、有助于爬蟲抓取更多的有效信息.簡單來說，試想在H1標(biāo)簽中匹配到的關(guān)鍵詞和在div中匹配到的關(guān)鍵詞搜索引擎會(huì)吧那個(gè)結(jié)果放在前面。
• 2.有利于不同設(shè)備的解析（屏幕閱讀器，盲人閱讀器等）滿是div的頁面這些設(shè)備如何區(qū)分那些是主要內(nèi)容優(yōu)先閱讀？
• 3.有利于構(gòu)建清晰的機(jī)構(gòu)，有利于團(tuán)隊(duì)的開發(fā)、維護(hù)。
• 4.提升用戶體驗(yàn)，例如title、alt可用于解釋名詞或解釋圖片信息。
• 5.網(wǎng)頁加載慢導(dǎo)致CSS文件還未加載時(shí)（沒有CSS），頁面仍然清晰、可讀、好看。

語義化標(biāo)簽有啥缺陷

• 兼容性差

meta viewport 是做什么用的，怎么寫？

該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度

<meta name="viewport" content="width=device-width,initial-scale=1">

meta viewport 的6個(gè)屬性：

• width設(shè)置layout viewport的寬度，為一個(gè)正整數(shù)，或字符串"width-device"

• initial-scale設(shè)置頁面的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)

• minimum-scale允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)

• maximum-scale允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)

• height設(shè)置layout viewport的高度，這個(gè)屬性并不重要，很少使用

• user-scalable 是否允許用戶進(jìn)行縮放，值為"no"或"yes"

使用 data-* 屬性有什么用？

是一類被稱為自定義數(shù)據(jù)屬性的屬性，它賦予我們在所有 HTML 元素上嵌入自定義數(shù)據(jù)屬性的能力，并可以通過腳本在 HTML 與 DOM 表現(xiàn)之間進(jìn)行專有數(shù)據(jù)的交換。

通過 element.dataset[屬性名字] 獲取對(duì)應(yīng)的值。

<script>、<script async> 和 <script defer> 的區(qū)別。

<script>

不帶屬性，加載到 script 腳本立即下載執(zhí)行，阻塞后續(xù)渲染的執(zhí)行。

<script async>

與后續(xù)元素渲染異步執(zhí)行，亂序執(zhí)行，若js文件之間存在依賴關(guān)系，容易產(chǎn)生錯(cuò)誤，

只適用于完全沒有依賴的文件，文檔解析過程中異步下載，下載完成之后立即執(zhí)行。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="../vue.js" async></script>
  <div id="app"
       @once>
  </div>
  <script>
            const vm = new Vue({
                el: "#app",
                data(){
                    return {
                    }
                },
            })

            console.log("vm", vm)
    </script>
</body>

</html>

你會(huì)發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò)了：

Uncaught ReferenceError: Vue is not defined

<script defer>

與后續(xù)渲染異步執(zhí)行，延遲到界面文檔解析完成之后執(zhí)行，即為立即下載，延遲執(zhí)行。所有執(zhí)行均在DOMContentLoaded 事件觸發(fā)之前完成。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="../vue.js" defer></script>
  <div id="app"
       @once>
  </div>
  <script>
            const vm = new Vue({
                el: "#app",
                data(){
                    return {
                    }
                },
            })

            console.log("vm", vm)
    </script>
</body>

</html>

window.onload = function() {
      // 將所有 js 代碼都在 window.onload 方法加載
}

<script type="module">
  import {addTextToBody} from './utils.js';
 
  addTextToBody('Modules are pretty cool.');
</script>