為了規範 HTML，W3C 結合 XML 制定了 XHTML1.0 標準，這個標準沒有增加任何新的標籤，只是按照 XML 的要求來規範 HTML。兩者最主要的區別是：
"" 括起來checked="checked" 而不是 checked）<!DOCTYPE> 宣告位於 HTML 檔案中的第一行，處於 <html> 標籤之前。告知瀏覽器的解析器使用標準模式渲染檔案。DOCTYPE 不存在或格式不正確會導致檔案以相容模式呈現。// 返回當前檔案關聯的檔案型別定義（DTD），如果當前檔案沒有 DTD，則該屬性返回 null。
document.doctype標準模式：又稱嚴格模式，是指瀏覽器按照 W3C 標準解析程式碼。
相容模式：又稱怪異模式或混雜模式，是指瀏覽器用自己的方式解析程式碼。
如何區分：
<!DOCTYPE html>link 屬於 XHTML 標籤，除了載入 CSS 外，還能用於定義 RSS，定義 rel 連線屬性等作用；而 @import 是 CSS 提供的，只能用於載入 CSS；link 會同時被載入，而 @import 參照的 CSS 會等到頁面被載入完再載入；@import 是CSS2.1 提出的，只在 IE5 以上才能被識別，而 link 是 XHTML 標籤，無相容問題；link 方式的樣式的權重高於 @import 的權重。user-scalbale="no" 時不允許使用者進行手動縮放| 屬性 | 描述 |
|---|---|
| width | 裝置的虛擬視口的寬度。 |
| height | 裝置的虛擬視口的高度。 |
| device-width | 裝置螢幕的物理寬度。 |
| device-height | 裝置螢幕的物理高度。 |
| initial-scale | 存取頁面時的初始縮放。1.0無法縮放。 |
| user-scalable | 允許裝置放大和縮小，值為 yes 或 no。 |
| minimum-scale | 允許使用者的最小縮放值，1.0 表無法縮放。 |
| maximum-scale | 允許使用者的最大縮放值，1.0 表無法縮放。 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />meta 元素可用於包含描述 HTML 檔案屬性的名稱/值對，如作者，字元編號，關鍵字列表，檔案作者等資訊<!DOCTYPE html>
<html>
<head>
<!-- 推薦 Meta Tags -->
<meta charset="utf-8" />
<meta name="language" content="english" />
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Author Name" />
<meta name="designer" content="Designer Name" />
<meta name="publisher" content="Publisher Name" />
<meta name="no-email-collection" content="[email protected]" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 搜尋引擎優化 Meta Tags -->
<meta name="description" content="Project Description" />
<meta
name="keywords"
content="Software Engineer,Product Manager,Project Manager,Data Scientist"
/>
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="7 days" />
<meta name="distribution" content="web" />
<meta name="robots" content="noodp" />
<!-- 可選 Meta Tags-->
<meta name="distribution" content="web" />
<meta name="web_author" content="" />
<meta name="rating" content="" />
<meta name="subject" content="Personal" />
<meta name="title" content=" - Official Website." />
<meta name="copyright" content="Copyright 2020" />
<meta name="reply-to" content="" />
<meta name="abstract" content="" />
<meta name="city" content="Bangalore" />
<meta name="country" content="INDIA" />
<meta name="distribution" content="" />
<meta name="classification" content="" />
<!-- 移動裝置上 HTML 頁面的 Meta Tgas -->
<meta name="format-detection" content="telephone=yes" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- http-equiv Tags -->
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>HTML5 Meta Tags</title>
</head>
<body>
...
</body>
</html><!-- 在5秒鐘內重定向到提供的 URL。設定為0可立即重定向 -->
<meta http-equiv="refresh" content="3;url=https://juejin.cn/user/96412754251390" />替換元素：就是瀏覽器根據其標籤的元素屬性來判斷顯示具體的內容的元素，且元素一般擁有固定的尺寸（寬高或寬高比）。
img，input，textarea，select，object，這些都是替換元素，這些元素都沒有實際的內容。非替換元素：html 中大多數都是非替換元素，他們直接將內容告訴瀏覽器，直接顯示出來。
iframe，audio，canvas 在某些情況下也為替換元素。| 塊級元素 | 行內元素 |
|---|---|
| 獨佔一行 | 不獨佔一行 |
| 可以設定寬高（盒模型） | 不可以設定寬高，寬高由元素內部的內容決定，padding 和 margin 的 top/bottom 不會對元素生效 |
| 可以包含行內元素和其他塊級元素 | 行內元素只能包含文字和其他行內元素。 |
CSS 規範規定，每個元素都有 display 屬性，每個元素都有預設的 display 值。例如：
display 屬性值為 block，為塊級元素；display 屬性值為 inline，為行內元素。塊級元素：
<h1>-<h6>、<p>、<div>、<ul>、<ol>、<form>、<table>、<address>、<blockquote>、<center>、<dir>、<dl>、<fieldset>、<hr>、<menu>、<noscript>、<pre>、<noframes>、<isindex>display 屬性為 block、list-item 或 table 時，該元素將成為 「塊級元素」。行內元素：
<a>、<img>、<input>、<span>、<textarea>、<label>、<select>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<kbd>、<q>、<s>、<samp>、<small>、<strike>、<strong>、<sub>、<sup>、<tt>、<u>display 屬性為 inline、inline-block 或 inline-table 時，該元素將成為 「行內元素」常見的空元素：標籤內沒有內容的 HTML 標籤被稱為空元素。
<br>、<hr>、<img>、<input>、<link>、<meta><area>、<base>、<col>、<command>、<embed>、<keygen>、<param>、<source> <track>、<wbr>p，li，td，tr，th，html，head，body 等。如：<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.</p> 結束標籤。瀏覽器會檢測到它需要它們，並且無論如何都會正確顯示在 DOM 中。但這可能帶給你編寫上的困難！為了便於閱讀，當您的標籤內有內容/文字時，帶上結束標籤。
href（hyperReference）即超文字參照：瀏覽器遇到並行下載資源，不阻塞頁面解析，與 link 引入 css 一樣，瀏覽器並行下載 css 不阻塞頁面解析
src （resource）即資源：當瀏覽器遇到 src 時，會暫停頁面解析，直到該資源下載或執行完畢，這也是script 標籤之所以放底部的原因
title 是滑鼠放在圖片上面時顯示的文字，title 是對圖片的描述和進一步的說明。alt 定義了影象的備用文字描述。tips：瀏覽器並非總是會顯示影象。當有下列情況時，alt 屬性可以為影象提供替代的資訊：
alt 屬性提供一些有用的資訊。<!-- × -->
<img src="wenhao.jpg" alt="圖片" />
<!-- √ -->
<img src="wenhao.jpg" alt="滿臉問號的男人" />影象上 alt 屬性的用途是什麼？
srcset 和 sizes 來提供更多額外的資源影象和提示，幫助瀏覽器選擇正確的一個資源。處理過程：
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""><noscript> 元素用來定義在指令碼未被執行時的替代內容（文字）。<noscript> 標籤中的內容只有在下列情況下才會顯示出來：
<!-- 給予使用者友好的提示! -->
<noscript>您的瀏覽器不支援 JavaScript！</noscript>label 標籤定義表單控制間的關係，當使用者選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制元件上。<label for="select">愛我</label>
<input type="radio" id="select" name="love" value="love" />
<label>恨我<input type="radio" name="hate" value="hate" /></label><title> 與 <h1> 的區別
<title> 用於網站資訊標題，一個網站可以有多個 title，seo 權重高於 h1；<h1> 概括的是文章主題，一個頁面最好只用一個 h1，seo 權重低於 title。<b> 與 <strong> 的區別
<b> 為了加粗而加粗<strong> 為了標明重點內容而加粗，有語氣加強的含義<i> 與 <em> 的區別
<i> 為了斜體而斜體，<em> 為了標明重點而斜體，且對於搜尋引擎來說 <strong> 和 <em> 比 <b> 和 <i> 要重視的多rel="noopener" 應在什麼場景下使用，為什麼？rel="noopener" 是 <a> 標籤的一個屬性。他可以禁止開啟的新頁面中使用 window.opener 屬性，這樣一來開啟的新頁面就不能通過 window.opener 去操作你的頁面。window.opener.location = newURL 將你的頁面導航至任何網址。<!-- home.html -->
<a href="./home.html" target="_blank">home</a>
<!-- <a href="./home.html" target="_blank" rel="noopener">home</a> -->
<!-- details.html -->
<h1>點關注 不迷路！</h1>
<script>
window.opener.location = 'https://juejin.cn/user/96412754251390'
</script>target ="_ blank" 的外部連結，則您的連結應具有 rel="noopener" 屬性，以防止標籤被挪用。如果您需要支援舊版本的 Firefox，請使用 rel="noopener noreferrer"rel="noopener" 應用於超連結，防止開啟的連結操縱源頁面<link> 標籤放在 <head></head> 之間是規範要求的內容。此外，這種做法可以讓頁面逐步呈現，提高了使用者體驗。<script> 標籤放在底部，保證 HTML 首先完成解析，將頁面儘早呈現給使用者。例外情況：當你的指令碼裡包含 document.write() 時。
document.write() 不推薦使用。<script> 標籤放在底部，意味著瀏覽器不能開始下載指令碼，直到整個檔案（document）被解析。對此比較好的做法是，<script> 使用 defer 屬性，放在 <head> 中。accesskey：設定快捷鍵，提供快速存取元素class：為元素設定類標識，多個類名用空格分開，CSS 和 JavaScript 可通過 class 屬性獲取元素contenteditable：指定元素內容是否可編輯contextmenu：自定義滑鼠右鍵彈出選單內容data-*：為元素增加自定義屬性dir：設定元素文字方向draggable：設定元素是否可拖拽dropzone：設定元素拖放型別： copy，move，linkhidden：表示一個元素是否與檔案。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果id：元素 id，檔案內唯一lang：元素內容的的語言spellcheck：是否啟動拼寫和語法檢查style：行內 CSS 樣式tabindex：設定元素可以獲得焦點，通過 tab 可以導航title：元素相關的建議資訊translate：元素和子孫節點內容是否需要在地化在 SEO 中，所謂的 TDK 其實就是 title、description、keywords 這三個標籤
title 標題標籤description 描述標籤keywords 關鍵詞標籤!!! 5
html
head
title = HelloWorld
body
h1使用Jade建立HelloWorld網頁編譯為
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
</head>
<body>
<h1>使用Jade建立HelloWorld網頁</h1>
</body>
</html><iframe>）表示嵌入的瀏覽上下文。它能夠將另一個 HTML 頁面嵌入到當前頁面中。<iframe></iframe> 之間，來提示某些不支援 iframe 的瀏覽器優點
缺點
分離方便、改版快、清晰簡潔、seo
因為瀏覽器頁面渲染的時候是從上至下的，而 table 和 iframe 這兩種元素會改變這樣渲染規則，他們需要等待自己元素內的內容載入完才整體渲染。使用者體驗會很不友好。
iframe 的話本文有所提及，可以翻閱查詢:lang(zh) {
font-size: 1.5em;
}enctype='multipart/form-data' 意思？enctype 屬性指定將表單資料提交到伺服器時應如何編碼。HTML5 是 HTML（超檔案標示語言）最新的修訂版本，由全球資訊網聯盟（W3C）於 2014 年 10 月完成標準制定。目標是取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 標準。它是一種為全球資訊網構建和顯示內容的語言，全球資訊網是網際網路的核心技術。
<!DOCTYPE html>？<!DOCTYPE html><meta charset="UTF-8" />document.querySelector、document.querySelectorAll、matchesSelector()canvas，支援內聯 SVG。支援 MathMLvideo 和 audio 元素localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；sessionStorage 的資料在瀏覽器關閉後自動刪除article、footer、header、nav、section 等語意標籤calendar、date、time、email、url 等datalist、keygen、outputwebWorker， 全雙工通訊協定 webSocket 和地理定位 Geolocationdata-* 屬性，把額外資料儲存在 DOM 自身中，而當時沒有其他 Hack 手段（比如使用非標準屬性或 DOM 上額外屬性）。它用於儲存頁面或應用程式專用的自定義資料，對於這些資料，沒有更合適的屬性或元素。而現在，不鼓勵使用 data-* 屬性。原因：
<acronym>：建議用 <abbr><applet>：建議用 <object><basefont>：建議用 <font><bgsound>：建議用 <audio><b>：不推薦使用，建議用 font-weight 代替<big>：不推薦使用，建議用 font-size 代替<blink>：建議採用 animation 代替<center>：不推薦使用，建議用 text-align: center 代替<dir>：建議根據語意採用 <ul>、<ol> 或者 <dl><font>：不推薦使用，建議用 CSS 代替，以便更好控制。<frame>：不推薦使用，建議用 <iframe> 代替。但 <iframe> 現在又可以用 ajax 來代替<frameset>：不推薦使用<hgroup>：不推薦使用<isindex>：建議用 <input><listing>：建議用 <pre> 或使用語意更好的 <code><marquee>：不推薦使用<multicol>：建議用 <input><nobr>：不推薦使用，建議用 white-space 代替<noframes>：不推薦使用，建議用 幀 CSS 代替<plaintext>：建議用 <pre> 或使用語意更好的 <code><u>：不推薦使用，建議用 幀 font-style 代替<spacer>：不推薦使用<strike>：建議用語意更好的 <del> 或 <s><tt>：建議用 <code> 或 <span><xmp>：建議用帶有 CSS 的 <pre> 或使用語意更好的 <code>它用於改進檔案的自動化處理。自動處理髮生的頻率比你意識到的要高——搜尋引擎中的每個網站排名都是從所有網站的自動處理中派生出來的。
<!-- 機器：這種結構看起來可能是導航元素？ -->
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>
<!-- 機器: 這是導航元素！ -->
<nav class="some-meaningless-class"><ul><li><a>...</nav><form>，<table>， <article>，<aside>，<details>，<figcaption>，<figure>，<footer>，<header>，<main>，<mark>，<nav>，<section>，<summary>，<time> 明確規定其含義。<div>，<span> 不包含任何含義。<header> 用於包含有關頁面某個部分的介紹性和導航資訊。這可以包括章節標題、作者姓名、出版時間和日期、目錄或其他導航資訊。<article> 是用來存放一個自成體系的作文，在邏輯上可以在頁面之外獨立地重新建立，而不會失去它的意義。個人部落格文章或新聞故事就是很好的例子。<section> 是一個靈活的容器，用於儲存共用公共資訊主題或目的的內容。<footer> 用於儲存應該出現在內容節末尾的資訊，幷包含有關該節的附加資訊。作者姓名、版權資訊和相關連結是此類內容的典型範例。<main> 元素表示 body 檔案的主要內容。主要內容區域由與檔案的中心主題或應用程式的中心功能直接相關或擴充套件的內容組成。SVG 意為可縮放向量圖形（Scalable Vector Graphics）是一種基於 XML 的影象格式，用於為 web 定義基於向量的二維圖形。與光柵影象（例如 .jpg、.gif、.png 等）不同，向量影象可以在不損失影象品質的情況下進行任何程度的放大或縮小。
<!-- SVG 是向量和宣告性的 -->
<svg viewBox="0 0 200 200">
<circle cx="10" cy="10" r="10" />
</svg>Canvas 是一個 HTML5 元素，用於在網頁上繪製圖形。它是一個帶有 "立即模式" 圖形應用程式程式設計介面（API）的點陣圖，用於在其上繪圖。<canvas> 元素只是圖形的容器。為了繪製圖形，你應該使用 js 畫布在繪製路徑、方框、圓、文字和新增影象時有幾種策略。HTML <canvas> 元素提供了一個空白繪圖區域，可通過 JavaScript API（Canvas API 或 WebGL API）繪製圖形及圖形動畫
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
</script>| Canvas | SVG |
|---|---|
| 基於柵格（由畫素組成） | 基於向量（由形狀組成），非常適合 UI/UX 動畫 |
| 依賴解析度 | 不依賴解析度 |
| 不支援事件處理器 | 支援事件處理器 |
| 文字渲染能力差 | 良好的文字渲染功能 |
| 使用更多的物件或更小的曲面或兩者都提供更好的效能 | 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快） |
| 最適合影象密集型的遊戲，其中的許多物件會被頻繁重繪 | 不適合遊戲應用 |
| 僅通過指令碼修改 | 通過指令碼和 CSS 修改 |
| 能夠以 .png 或 .jpg 格式儲存結果影象 | 多個圖形元素，成為頁面 DOM 樹的一部分 |
| 可伸縮性差。不適合以較高解析度列印。可能發生畫素化 | 更好的可延伸性。可以任何解析度高品質列印。不會發生畫素化 |
canvas 標籤定義圖形，比如圖表和其他影象。該標籤基於 JavaScript 的繪圖 API<canvas width="300" height="300">
抱歉，您的瀏覽器不支援canvas元素
</canvas>figure 代表一段獨立的內容，經常與說明（caption）配合使用，並且作為一個獨立的參照單元figcaption 是與其相關聯的圖片的說明/標題，用於描述其父節點 figure 元素裡的其他資料。<style>
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 220px;
margin: auto;
}
img {
max-width: 220px;
max-height: 150px;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
text-align: center;
}
</style>
<figure>
<img src="1.jpg" alt="索隆">
<figcaption>An elephant at sunset</figcaption>
</figure>summary 利用了一個 details 元素的一個內容的摘要，標題或圖例。details 可建立一個掛件，僅在被切換成展開狀態時，它才會顯示內含的資訊。
<style>
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: 0.5em 0.5em 0;
}
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
}
details[open] {
padding: 0.5em;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}
</style>
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>header、nav、main、footer、section、article<section>
<header></header>
<main>
<nav></nav>
</main>
<footer></footer>
</section>
<article></article>map 定義一個使用者端影象對映。影象對映（image-map）指帶有可點選區域的一幅影象
<div>
<img
src="../img/cs.jpg"
width="500"
height="500"
alt="pic"
usemap="#circusmap"
/>
<map name="circusmap">
<area shape="rect" coords="90,18,202,186" href="https://www.baidu.com/"/>
<area shape="rect" coords="222,141,318, 256" href="https://www.baidu.com/" />
<area shape="circle" coords="343,111,455, 267" href="https://www.baidu.com/" />
<area shape="rect" coords="35,328,143,500" href="https://www.baidu.com/" />
</map>
</div>mark 突出顯示 html 中的文字。在這個標籤出現之前，常使用使用 em 或 strong 賦予突出顯示的內容一些語意。現在不推薦了。如果需要突出顯示，請使用此標籤<p><mark>Lio</mark></p>預設背景顏色 <mark> 是黃色
/* default style */
mark {
background: yellow;
color: black;
}可以使用 CSS 自定義樣式
mark {
background: red;
color: white;
}meter 標籤定義已知範圍或分數值內的標量測量。也被稱為 gauge（尺度）。
<meter> 標籤不應用於指示進度（在進度條中）。如果標記進度條，請使用 <progress> 標籤。<div>
<meter value="4" min="0" max="10">4/10</meter><br />
<meter value="0.6">60%</meter>
</div>progress 標籤標示任務的進度（程序）。<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>time 定義日期或時間。<p>The concert starts at <time datetime="2020-06-01T20:00:00">20:00</time>.</p>bdi 允許您設定一段文字，使其脫離其父元素的文字方向設定。<p dir="ltr">Lorem ipsum <bdi>dolor</bdi> sit amet.</p>dialog 標籤定義一個對話方塊、確認框或視窗。<dialog open>
<p>Greetings, one and all!</p>
</dialog>source 定義視訊源 <video> 和 <audio>track 定義文字軌道video 定義視訊元素
src 指定視訊的來源。video 設定高度和寬度時，瀏覽器不知道視訊的大小，當視訊載入時，頁面將發生變化或閃爍<!-- 1. 用 src 屬性定義 -->
<video
src="video.mp4"
controls
></video>
<!-- 2. 定義 source 標籤 -->
<video controls>
<source src="video.mp4" type="video/mp4">
你的瀏覽器不支援 HTML5 viedo 標籤。
</video>embed 將外部內容嵌入檔案中的指定位置。<embed
src="https://juejin.cn/user/96412754251390"
height="700"
width="100%"
/>
<embed
type="video/webm"
src="/media/cc0-videos/flower.mp4"
height="700"
width="100%"
/>audio 定義音訊內容
<audio controls>
<source src="sound.ogg" type="audio/ogg" />
<source src="sound.mp3" type="audio/mpeg" />
您的瀏覽器不支援 HTML5 audio 標籤。
</audio>datalist
<datalist> 標籤定義選項列表。與 input 元素配合使用該元素，來定義 input 可能的值。<label for="course">選擇學習課程：</label>
<input list="target" name="course" id="course" />
<datalist id="target">
<option value="HTML"></option>
<option value="CSS"></option>
<option value="JavaScript"></option>
<option value="Node"></option>
<option value="Vue"></option>
<option value="React"></option>
<option value="Webpack"></option>
</datalist>keygen 該元素有助於生成金鑰和通過表單提交。
keygen 必須在表單內使用。keygen 已經從 Web 標準中刪除，請使用 JavaScript 生成金鑰output 標籤定義不同型別的輸出，比如指令碼的輸出。<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
0 <input type="range" id="a" value="50"> 100
* <input type="number" id="b" value="1" /> =
<output name="x" for="a b"></output>
</form>pre 標籤可定義預格式化的文字。被包圍在 <pre> 標籤中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型。strong 用於指示比周圍文字更重要的文字，例如警告或錯誤。從語意上講，它的重要性。它顯示為粗體b 與 strong 非常相似，因為它也顯示為粗體。然而，與它不同的是，它並沒有真正傳達出任何重要性，它更像是一種文體而非語意。em 用於強調某個詞。它顯示為斜體<strong>lorem</strong>
<b>lorem</b>
<em>lorem</em>q 和 blockquote
q 引號blockquote 塊引號<q>lorem</q>
<blockquote>lorem</blockquote>bdo 可以更改 HTML 文字的方向
<p><bdo dir="rtl">This text will go right to left.</bdo></p>使用 abbr 標籤縮寫您的程式碼，當你傳遞一個標題時，它將建立一個工具提示
<abbr> 不同瀏覽器的預設樣式有些不同。在 Chrome 和 Firefox 中，它將帶有下劃線，並且在懸停時將帶有 title 傳遞的值的工具提示。如果您在 Safari 上開啟此頁面，則不會出現下劃線。此外，僅當您具有 title 屬性時才顯示下劃線。<abbr> 程式碼加上自定義樣式。這樣，您將在瀏覽器之間擁有一致的外觀定義術語時，可以與 dfn 混合使用
<dfn>
<abbr title="Today I learned">TIL</abbr> something awesome!
</dfn>指示的非縮寫詞並將其輸出到頁面上的括號中
abbr[title]::after {
content: ' (' attr(title) ')';
}利用 hover 狀態僅在點選時顯示非縮寫詞
abbr[title]:hover::after {
content: ' (' attr(title) ')';
}使用 abbr 標籤來指示在順序鍵盤導航中是可聚焦的 tabindex="0"，然後在聚焦時觸發我們的非縮寫內容。
<abbr title="Today I learned" tabindex="0">TIL</abbr>abbr[title]:focus::after {
content: ' (' attr(title) ')';
}也可以使用一些提示工具，如 Bootstrap 的工具提示元件。
kbd 和 code
kbd：表示使用者從鍵盤、語音輸入或任何其他文字輸入裝置輸入的文字。code：表示計算機程式碼的簡短片段的文字。monospace 字型。但是在語意上它們是不同的。最好使用 kbd 代替 code<kbd>Ctrl</kbd> + <kbd>C</kbd>
<code>Ctrl</code> + <code>C</code>/* Default Style */
kbd {
font-family: monospace;
}
kbd, code {
border: 1px solid gray;
border-radius: 5px;
padding: 5px;
}s 和 del 刪除線
s 當您嘗試表示不再相關或不再準確的事物時，使用它。del 當您要指示某些內容已從檔案中刪除時，使用它。<s>Lorem ipsum dolor sit amet.</s>
<!-- 常使用於商品價格折扣 -->
<span><s>$1999</s></span>
<span style="color: red;">$99</span>
<del>Lorem ipsum dolor sit amet.</del>
<!-- 常使用於待辦事項清單 -->
<ul>
<li><del>打卡</del></li>
<li>喝杯咖啡</li>
</ul>ins<p>
Lorem ipsum
<ins>dolor sit amet consectetur adipisicing elit.</ins> Perferendis, rem.
</p>contenteditable
contenteditable 屬性應用於任何HTML元素，它可以像 input 或 <textare> 那樣工作編輯它們contenteditable 屬性值有3個不同的值：true、false、inherit<div contenteditable="true">
<h1>元素可編輯</h1>
</div>
<div contenteditable="false">
<h1>元素不可編輯</h1>
</div>
<div contenteditable="inherit">
<h1>元素繼承其父元素的可編輯狀態</h1>
</div>input
requiredautofocus 屬效能夠讓 button，input 或 textarea 元素在頁面載入完成時自動成為頁面焦點pattern 用正規表示式驗證<!-- required -->
<input type="text" id="username1" name="username" required>
<!-- autofocus -->
<input type="text" id="username2" name="username" >
<!-- pattern -->
<input
type="password"
name="password"
placeholder="請輸入密碼"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$"
required
/>HTML5 新的表單輸入型別？
date、month、week、time、number、range、email、url、color、datatime-local、datetime、search、telsearch：用於搜尋域，比如站點搜尋或 Google 搜尋，域顯示為常規的文字域。url ：用於應該包含 URL 地址的輸入域在提交表單時，會自動驗證 url 域的值。email：用於應該包含 e-mail 地址的輸入域，在提交表單時，會自動驗證 email 域的值。datetime：選取時間、日、月、年（UTC 時間）date：選取日、月、年month：選取月、年week：選取周和年time：選取時間（小時和分鐘）datetime-local：選取時間、日、月、年（本地時間）number：用於應該包含數值的輸入域，您還能夠設定對所接受的數位的限定。range：用於應該包含一定範圍內數位值的輸入域，型別顯示為滑動條。color：定義拾色器。tel：定義用於輸入電話號碼的欄位。datetime 不在被推薦使用，轉而使用 datatime-local<!-- url -->
<input type="url" />
<!-- tel -->
<input type="tel" name="tel" />
<!-- search -->
<input type="search" />
<!-- email -->
<form action="/">
<input type="email" />
<input type="submit" value="提交">
</form>
<!-- date -->
<input type="date" value="2020-06-01" min="2020-01-01" max="2022-01-01" />
<!-- time -->
<input type="time" value="12:00" />
<!-- datetime -->
<input type="datetime" value="2020-09-12T23:00Z" />
<!-- week -->
<input type="week" />
<!-- month -->
<input type="month" value="2020-06-01" />
<!-- datetime-local -->
<input type="datetime-local" value="2020-09-06T23:00" />
<!-- number -->
<input type="number" name="number" min="2" max="10" value="3" />
<!-- color -->
<input type="color" onchange="showColor(event)">
<!-- range -->
<input type="range" name="range" min="0" max="100" step="1" value="" />hiden 屬性規定對元素進行隱藏。
hidden 屬性進行設定，使使用者在滿足某些條件時才能看到某個元素（比如選中核取方塊，等等）。然後，可使用 JavaScript 來刪除 hidden 屬性，使該元素變得可見。<div hidden>lorem</div>Download
href 屬性中指定的連結download 屬性時，它將變成一個下載連結。提示您要下載的檔案。下載的檔案將具有與原始檔名相同的名稱。但是，您也可以通過將值傳遞給 download 屬性來設定自定義檔名download 屬性僅適用於同源 URL。如果的 href 來源與網站的來源不同，那麼它將無法正常工作。換句話說，您只能下載屬於該網站的檔案。此屬性遵循同源策略中的相同規則概述。<a href="../img/cs.jpg" download>
使用原始檔名下載本地檔案
</a>
<a href="../img/cs.jpg" download='logo'>
使用自定義檔名下載 logo.png
</a>input 設定為 autocomplete=off<!-- 不使用 autocomplete -->
<input type="email" name="email" />
<!-- 使用 autocomplete -->
<form action="/post">
<input type="email" name="email" autocomplete="off" />
<input type="submit" value="提交" />
</form><script> 標記上的 defer 和 async 屬性是什麼？<script>：當遇到指令碼時，HTML 停止解析，指令碼被獲取並立即執行。執行結束後，HTML 解析繼續。defer 和 async 的作用：都是讓指令碼的下載和執行不阻塞頁面的渲染區別：
defer 是推遲執行，它是等到頁面渲染完畢，所有指令碼下載完成，在 DOMContentLoaded 事件前按照指令碼的在檔案中的順序執行；async 是立即下載並執行，載入和渲染後續檔案元素的過程將和 js 指令碼的載入與執行並行進行（非同步）defer，我們還要記住的是它是按照載入順序執行指令碼的async 的指令碼並不保證按照指定它們的先後順序執行。對它來說指令碼的載入和執行是緊緊挨著的，所以不管你宣告的順序如何，只要它載入完了就會立刻執行。async 對於應用指令碼的用處不大，因為它完全不考慮依賴（哪怕是最低階的順序執行），不過它對於那些可以不依賴任何指令碼或不被任何指令碼依賴的指令碼來說卻是非常合適的。<script src="longTime.js"></script>
<script src="longTime.js" defer></script>
<script src="longTime.js" async></script>src 屬性的指令碼（即不是內聯指令碼），async 和 defer 屬性會被忽略。document.createElement 方法產生的標籤，利用這一特性讓這些瀏覽器支援 HTML5 新標籤HTML5：
<header>、<section> 等）<article>
<h1>通過 Modernizr 檢測 HTML5 特性</h1>
</article>
<script
crossorigin="anonymous"
integrity="sha384-l7lIexAaQrMGAnOGdPikxQDjq8aY1MS3oqkKPS8FXlJ47UejXvEzmezjhEwHVkzm"
src="https://lib.baomitu.com/modernizr/2010.07.06dev/modernizr.js"
></script>
<script>
window.onload = function () {
//通過Modernizr.對瀏覽器canvas功能進行檢測
if (Modernizr.canvas) {
console.log('本瀏覽器支援Canvas API')
} else {
console.log('本瀏覽器不支援Canvas API')
}
}
</script>localStorage 持久化的本地儲存，除非是通過 js 刪除，或者清除瀏覽器快取，否則資料永遠不會過期，關閉瀏覽器也不會丟失。
sessionStorage 儲存物件儲存一個對談的資料，資料會在瀏覽器關閉後自動刪除。
| cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 由誰初始化 | 使用者端或伺服器，伺服器可以使用Set-Cookie請求頭。 | 使用者端 | 使用者端 |
| 過期時間 | 手動設定 | 永不過期 | 當前頁面關閉時 |
| 在當前瀏覽器對談（browser sessions）中是否保持不變 | 取決於是否設定了過期時間 | 是 | 否 |
| 是否隨著每個 HTTP 請求傳送給伺服器 | 是，Cookies 會通過Cookie請求頭，自動傳送給伺服器 | 否 | 否 |
| 容量（每個域名） | 4kb | 5MB | 5MB |
| 存取許可權 | 任意視窗 | 任意視窗 | 當前頁面視窗 |
IndexedDB 是一種底層非同步 API，瀏覽器內建的資料庫，用於在使用者端儲存大量的結構化資料（也包括檔案/二進位制大型物件（blobs））。
IndexedDB API 功能強大，但對於簡單的情況可能看起來太複雜如果你更喜歡一個簡單的API，請嘗試 localForage，dexie.js，PouchDB，IDB，IDB-KEYVAL，JsStore 或者 lovefield 之類的庫，這些庫使 IndexedDB 對開發者來說更加友好。
IndexedDB 像一個 NoSQL 資料庫，而 WebSQL 像關係型資料庫，使用 SQL 查詢資料。W3C WebSQL 已經不再支援這種技術。
根據最新的標準，該特性已經從 Web 標準中刪除，建議使用 Service Workers 代替。這裡找了一些資料，感興趣瞭解一下。
使用者端 js：
var myWebWorker = new Worker("task.js") // 建立 worker
// 監聽 task.js worker 訊息
worker.addEventListener("message", function(event) {
console.log("Worker said: ", event.data)
}, false)
// 啟動工作程式
worker.postMessage("From web worker file")task.js（工作檔案）檔案：
// 監聽使用者端 JS 檔案發布訊息
self.addEventListener("message", function(event) {
// 處理後的資料傳送到使用者端監聽 JS 檔案
self.postMessage(event.data)
}, false)webSocket 如何相容低瀏覽器？
websocket 與 socket 的區別
Socket 是傳輸控制層協定，WebSocket 是應用層協定。更多請看參考
參考
navigator 獲取物件。if ("geolocation" in navigator) {
/* geolocation is available */
} else {
/* geolocation IS NOT available */
}navigator.geolocation.getCurrentPosition() 方法獲取使用者的位置document.hidden 返回一個布林值。
document.visibilityState：表示頁面所處的狀態，當前頁面的可見性，有四個取值
visible：頁面徹底不可見。hidden：頁面至少一部分可見。prerender：頁面即將或正在渲染，處於不可見狀態。unloaded：已被廢棄，不在使用。document.visibilityState 屬性發生變化，就會觸發 visibilitychange 事件// 開啟新的頁面，來回切換分頁，觀察頁面標題的變化
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'hidden') {
document.title = "愛我"
} else {
document.title = "恨我"
}
})用途：
// 視訊暫停或播放
document.addEventListener('visibilitychange', function () {
if (document.visibilityState === 'hidden') {
video.pause()
} else if (document.visibilityState === 'visible') {
video.play()
}
})HTML 拖放（Drag and Drop）介面使應用程式能夠在瀏覽器中使用拖放功能。例如，使用者可使用滑鼠選擇可拖拽（draggable）元素，將元素拖拽到可放置（droppable）元素，並釋放滑鼠按鈕以放置這些元素。
| Event | Description |
|---|---|
| Drag | 每次拖動物件時移動滑鼠時，它都會激發。事件主體是被拖放元素，在正在拖放被拖放元素時觸發。 |
| Dragstart | 當使用者開始拖動物件時觸發。事件主體是被拖放元素，在開始拖放被拖放元素時觸發。 |
| Dragenter | 當使用者將滑鼠遊標移到目標元素上時，它將激發。事件主體是目標元素，在被拖放元素進入某元素時觸發。 |
| Dragover | 當滑鼠移到某個元素上時觸發此事件。事件主體是目標元素，在被拖放在某元素內移動時觸發。 |
| Dragleave | 當滑鼠離開元素時觸發此事件。事件主體是目標元素，在被拖放元素移出目標元素是觸發。 |
| Drop | 拖放操作結束時觸發。事件主體是目標元素，在目標元素完全接受被拖放元素時觸發。 |
| Dragend | 當使用者釋放滑鼠按鈕以完成拖動操作時觸發。事件主體是被拖放元素，在整個拖放操作結束時觸發 |
draggable 是可列舉的屬性指示該元素是否可以拖動，用於標識元素是否允許使用 HTML拖放API
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script>
function allowDrop(e) {
e.preventDefault()
}
function drag(e) {
e.dataTransfer.setData("text", e.target.id)
}
function drop(ev) {
e.preventDefault()
var data = e.dataTransfer.getData("text")
e.target.appendChild(document.getElementById(data))
}
</script>querySelector()：根據 css 選擇器返回第一個匹配的元素，如果沒有匹配返回 nullquerySelectorAll()：方法返回檔案中匹配指定 CSS 選擇器的所有元素，返回 NodeList 物件。如果 querySelectorAll 沒有匹配的內容返回的是一個空陣列。ele.classList.add("addClass")
ele.classList.remove("removeClass")
ele.classList.toggle("toggleClass")
ele.classList.contains("containsClass")<div id="menu">Lorem ipsum dolor sit amet.</div>
<script>
menu.addEventListener('contextmenu', function() {
alert('點我！')
})
</script>你也可以阻止它，顯示自己自定義的選單
menu.addEventListener('contextmenu', function(e) {
e.preventDefault()
// ...
})dataset 可以方便的獲取或設定 data-* 自定義資料屬性集<div class="avatar" data-user="lisi" data-avatar-type="circle" data-animateSpeed>
lorem
</div>
<script>
const avatar = document.querySelector('.avatar')
avatar.dataset.user === 'lisi' // true
avatar.dataset.avatarType === 'circle' // true
avatar.dataset.animateSpeed = 4000
// 新增不存在的屬性
avatar.dataset.id = 'user'
// console.log(avatar.dataset)
</script>tabindex 屬性規定當使用 "tab" 鍵進行導航時元素的順序。在 HTML4.01 中，tabindex 屬性可用於：<a>，<area>，<button>，<input>，<object>，<select> 和 <textarea>。
tabindex 屬性可用於任何的 HTML 元素（它會驗證任何 HTML 元素。但不一定是有用）<ul>
<li tabindex="2">HTML</li>
<li tabindex="1">CSS</li>
<li tabindex="3">JAVASCRIPT</li>
</ul>accessKey 屬性規定啟用（使元素獲得焦點）元素的快捷鍵。不同瀏覽器使用的快捷鍵方法不同：
<input accesskey="b" />
<a href="https://www.baidu.com/" accesskey="c">百度一下，你就知道</a>const fullscreen = (mode = true, el = 'body') =>
mode
? document.querySelector(el).requestFullscreen()
: document.exitFullscreen();
fullscreen(); // 預設全螢幕模式開啟 "body"
fullscreen(false); // 退出全螢幕模式:fullscreen CSS 偽元素代表一個元素，當瀏覽器是在全螢幕模式下的顯示。
.elem:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}<link rel> 標記指示瀏覽器預載入內容：<link rel="prefetch" href="/index.css" as="style" />
<link rel="preload" href="/index.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/index.js" />preload 作為 rel 屬性的屬性值。還需要通過 href 和 as 屬性指定需要被預載入資源的資源路徑及其型別。<link rel="preload" href="index.css" as="style">使用 as 來指定將要預載入的內容的型別，將使得瀏覽器能夠：
<link rel="prefetch"> 要求瀏覽器在後臺下載並快取資源（例如 JS 或 CSS）。下載的優先順序較低，因此不會干擾更重要的資源。當您知道在下一個頁面上需要該資源，並且想要提前對其進行快取時，這將很有幫助。link 標籤的 rel 屬性指定為 "prefetch"，在 href 屬性裡指定要載入資源的地址<!-- 預載入整個頁面 -->
<link rel="prefetch" href="https://juejin.cn/user/96412754251390" />
<!-- 預載入一個圖片 -->
<link rel="prefetch" href="https://s3.ap-northeast-1.wasabisys.com/img.tw511.com/202105/pexels-photo-918281iaotwodsk1d.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" /><link rel="preconnect"> 要求瀏覽器提前執行到域的連線。<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390"> DNS-prefetch（DNS 預獲取）是嘗試在請求資源之前解析域名。這可能是後面要載入的檔案，也可能是使用者嘗試開啟的連結目標。<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390"> 連結預載入的一些注意事項
<link rel="prerender"> 要求瀏覽器載入 URL 並將其呈現在不可見的標籤中。當使用者單擊指向該 URL 的連結時，應立即呈現該頁面。當您確實確定使用者接下來將存取特定頁面並且想要更快地呈現它時，這將很有幫助。<link rel="prerender" href="https://juejin.cn/user/96412754251390" /><link rel="modulepreload"> 告訴瀏覽器儘快下載，快取和編譯 JS 模組指令碼。import ... 或匯入的模組 <script type="module">。<link rel="modulepreload" href="/static/Header.js" />web 標準簡單來說可以分為結構、表現和行為。
W3C 對 web 標準提出了規範化的要求，也就是在實際程式設計中的一些程式碼規範：
此類技術的範例：
DOMContentLoaded/load 事件載入其他資源和內容。<meta charset="UTF-8" />WHATWG（Web 超文字應用技術工作組）是一個對通過標準和測試來發展Web感興趣的人們組成的社群。
Web Components 是一套不同的技術，允許您建立可重用的客製化元素（它們的功能封裝在您的程式碼之外）並且在您的web應用中使用它們。不需要需要任何外部庫來工作。
特徵：
維基百科：可存取性是最常用於描述設施或設施，幫助殘疾人，如「輪椅」。這可以擴充套件到盲文標識、輪椅坡道，音訊訊號在人行橫道，輪廓人行道，網站設計，等等。
Accessible Rich Internet Applications (ARIA) 是能夠讓殘障人士更加便利的存取 Web 內容和使用 Web 應用（特別是那些由JavaScript 開發的）的一套機制。
[role = button]）來使您的網站更易於存取<style>
[role='note'] {
padding: 10px;
border: 1px solid;
border-left: 5px solid rebeccapurple;
color: rebeccapurple;
border-radius: 5px;
}
</style>
<section>
<div role="note">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illum cum
totam.
</div>
</section>role 沒有為大多數元素的預設語意新增任何內容role，狀態或屬性來表達。常被稱為元素的「預設隱式ARIA語意」一些冗餘 ARIA 的範例：
<button role="button">按我</button>
<a href="https://www.baidu.com" role="link"></a>
<input type="checkbox" role="checkbox" />
<input type="radio" role="radio" />HTML5 使用預設的隱式語意定義了一組新的結構和分段元素，這些語意與 ARIA role 匹配（在某些情況下）：
role = button 時，考慮使用 <button> 元素，或者其他各種原生 HTML 按鈕型別。role=link 時，考慮改用 <a href> 元素。role=heading 和 aria-level="1-6"，考慮改用 <h1> 到 <h6> 元素。role=list 和 role=listitem 時，考慮改用 <ol> 或 <ul> 和 <li> 元素。role=listbox 和 role=option，考慮改用 <select> 和 <option> 元素。role=checkbox 或 role=radio 時，考慮改用 <input type="checkbox"> 或 <input type="radio"> 元素。role=textbox，可以考慮使用 <input type="text"> 或搜尋、電子郵件、url 或電話。article、aside、footer、header、main、nav、section 等等…螢幕閱讀器是提供輔助技術的軟體程式，該技術可以使殘障人士（例如，沒有視力，聲音或滑鼠能力的人）使用 Web 應用程式。
<header>，<section>，<footer>，<main>...）HTMLHint：我使用工具來幫助我分析我的HTML程式碼可能遇到的任何問題。
target ="_ blank" 的外部連結，則您的連結應具有 rel="noopener" 屬性，以防止標籤被挪用。如果您需要支援舊版本的 Firefox，請使用 rel="noopener noreferrer"壓縮 HTML：將註釋、空格和空行從生產檔案中刪除。
刪除不必要的屬性：像 type="text/javascript" or type="text/css" 這樣的屬性應該被移除。
text/css 和 text/javascript 作為預設值。沒用的程式碼應在網站或應用程式中刪除，因為它們會使網頁體積增大。<script> 標記都沒有任何 type 屬性。避免指令碼阻塞載入。確保在使用 JavaScript 程式碼之前載入 CSS。
<link> 和 <style> 始終位於 <script> 之前。儘可能使用 async 和 defer
<link rel="dns-prefetch" href="http://example.com/">減少內聯指令碼的數量
document.write() 來輸出內容，在一定情況下可以加速整體頁面的載入。現在瀏覽器中一般使用現代的 W3C DOM 方法操作頁面內容，優於使用 document.write() 的傳統方法。縮小和壓縮影象
最小化檔案數量
頁面快取：在不設定頁面快取的情況下，每次重新整理頁面會重新讀取伺服器檔案。設定頁面快取，每次重新整理可從本地讀取，提高頁面載入效率
expires 來定義頁面過期時間，將過期時間定久一點就達到了 "永久" 快取。<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />避免 Table 佈局：table 比其它 HTML 標記佔更多的位元組（造成下載時間延遲，佔用伺服器更多流量資源）
table 佈局，而應運用 floats，positioning，flexbox 或 grids 來佈局。