HTML5
html規范常識，HTML 規范是 W3C 與 WHATWG 合作共同產出的：
- W3C 指 World Wide Web Consortium
- WHATWG 指 Web Hypertext Application Technology Working Group
那么 HTML5 給開發者提供了哪些便利呢？簡單列舉有：
- 用於繪畫的 canvas 元素
- 用於媒介播放的 video 和 audio 元素
- 對本地離線存儲更好的支持（localStorage、sessionStorage）
- 新的語義化標簽（article、footer、header、nav、section…)
- 新的表單控件（calendar、date、time、email、url、search…)
- 給漢字加拼音
<ruby> 前端開發核心知識進階 <rt> qianduankaifahexinzhishijinjie </rt> </ruby>
- 實現collapse的功能
<details> <summary>前端開發核心知識進階</summary> 前端領域，入門相對簡單，可是想要“更上一層樓”卻難上加難，也就是我們常說的“職業天花板較低”，君不見——市場上高級/資深前端工程師鳳毛麟角。這當然未必完全是壞事，一旦突破瓶頸，在技能上脫穎而出，便是更廣闊的空間。那么，如何從夯實基礎到突破瓶頸？ </details>
- 原生進度條和度量
<progress value="22" max="100"></progress>
- 打電話發郵件
<a href="tel: 110">打電話給警察局</a> <a href="sms: 110">發短信給警察局</a> <a href="mailto: 110@govn.com">發郵件給警察局</a> <a href="mailto: 110@govn.com?cc=baba@family.com">發郵件給警察局，並抄送給我爸爸</a> <a href="mailto: 110@govn.com?cc=baba@family.com&bcc=mama@family.com">發郵件給警察局，並抄送給我爸爸，密送給我媽媽</a > <a href="mailto: 110@govn.com; 120@govn.com">發郵件給警察局，以及 120 急救</a> <a href="mailto: 110@govn.com?subject=SOS">發郵件給警察局，並添加救命主題</a> <a href="mailto: 110@govn.com?subject=SOS&body=快來救我">發郵件給警察局，並添加救命主題和內容</a>
- 移動端 300 毫秒點擊延遲以及點擊穿透現象
這是由於歷史原因造成的，一般解決手段為禁止混用 touch 和 click，或者增加一層“透明”蒙層，也可以通過延遲上層元素消失來實現。
- 點擊元素禁止產生背景或邊框
-webkit-tap-highlight-color: rgba(0,0,0,0);
- 禁止長按鏈接與圖片彈出菜單
-webkit-touch-callout: none;
- 禁止用戶選中文字
-webkit-user-select:none;
user-select: none;
- 取消 input 輸入時，英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
- 語音和視頻自動播放
// JS 綁定自動播放（操作 window 時，播放音樂） $(window).on('touchstart', () => { video.play() }) // 微信環境 document.addEventListener("WeixinJSBridgeReady", () => { video.play() }, false)
- 視頻全屏播放
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src=""></video>
- 開啟硬件加速
transform: translate3d(0,0,0);
- fixed 定位問題
這個問題主要體現在 iOS 端，比如軟鍵盤彈出時，某些情況下，會影響 fixed 元素定位；配合使用 transform、translate 時，某些情況下，也會影響 fixed 元素定位。一般解決方案是模擬 fixed 定位，或者使用 iScroll 庫。
- 怎么讓 Chrome 支持小於 12px 的文字？
-webkit-text-size-adjust:none;
Web components
web components通過一種標准化的非侵入的方式封裝一個組件，每個組件能組織好它自身的 HTML 結構、CSS 樣式、javascript 代碼，並且不會干擾頁面上的其他代碼。
優點：
- 原生規范，無需框架
- 原生使用，無需編譯
- 真正的 CSS scope
基礎問題梳理
1、link 和 @import 的區別
引用的方式不同：
link(外部引用): <link rel="stylesheet" href="xxx.css" type="text/css" />
@import(導入式): @import url(xxx.css);
放置的位置不同：link 一般放在 head 標簽中，而 @import 必須放在 <style type="text/css"> 標簽中。
加載方式不同：link 會和 dom 結構一同加載渲染，而 @import 只能等 dom 結構加載完成以后才能加載渲染頁面。
兼容性不同：@import 只能在 IE6 以上才能識別，而 link 是 XHTML 標簽，無兼容問題。
樣式權重不同：link 方式的樣式的權重高於 @import。
改變樣式：link 支持使用 JavaScript 改變樣式，而 @import 不可以。
加載內容不同：link 除了可以加載 css 文件以外，還可以加載 MIME 類型的文件；而 @import 只能加載 css 文件。
2、CSS3 新增選擇符有哪些
3、CSS 如何定義權重規則
我們把特殊性分為4個等級，每個等級代表一類選擇器，每個等級的值為其所代表的選擇器的個數乘以這一等級的權值，最后把所有等級的值相加得出選擇器的特殊值。
4個等級的定義如下：
第一等：代表內聯樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1。
4、如何使用純 CSS 創建一個三角形
用border邊框實現三角形的效果
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; }
5、CSS3 如何寫出一個旋轉的立方體
<style type="text/css"> body{ padding: 0; margin:0; perspective:800px; } @keyframes rotate{ 0%{ transform:rotateX(0deg) rotateY(0deg); } 100%{ transform:rotateX(360deg) rotateY(360deg); } } .box{ margin:200px auto; width:300px; height:300px; position:relative; transform-style: preserve-3d; transform:rotateX(-45deg) rotateY(-45deg); animation:rotate 5s infinite linear; } .box>div{ width:100%; height:100%; text-align:center; line-height:300px; font-size:60px; font-weight:bold; color:#FFFFFF; border:1px solid #FFFFFF; position:absolute; top:0; left:0; /* transition:transform 5s ease-in; */ } .one{ transform:translateX(150px) rotateY(90deg); background:red; opacity:.5; } .two{ transform:translateX(-150px) rotateY(-90deg); background:green; opacity:.5; } .three{ transform:translateZ(-150px); background:yellow; opacity:.5; } .four{ transform:translateZ(150px); background:blue; opacity:.5; } .five{ transform:translateY(-150px) rotateX(90deg); background:purple; opacity:.5; } .six{ transform:translateY(150px) rotateX(-90deg); background:pink; opacity:.5; } </style> <body> <div class="box"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div> <div class="five">5</div> <div class="six">6</div> </div> </body>
6、localStorage ，sessionStorage，cookies 的區別是什么
共同點：都是保存在瀏覽器中並且是同源的。
從生命周期的角度講：cookie可以設置失效時間，localstorage除非被手動清除，不然永久保存；sessionstorage僅在當前網頁會話下有效，關閉頁面或者瀏覽器之后就會被清除。
從存放數據角度講：cookie可以存放4k左右，而且值屬於某個路徑下的，localstorage和sessionstorage可以保存5M的信息
從http請求的角度講：cookie每次都會攜帶在http頭當中和服務器做交互，如果使用cookie保存過多數據會帶來性能問題，localStroage和sessionStorage僅在客戶端中保存，不參與和服務器的通信。
從易用性講：cookie需要程序員自己封裝，其他兩個可以采用原生的接口。
應用場景：cookie用於保存用戶的登陸狀態等，sessionstorage將某些用戶信息保存，便於不同頁面之間的傳遞等。
7、如何實現瀏覽器內多個標簽頁之間的通信
- websocket通訊定時器
全雙工(full-duplex)通信自然可以實現多個標簽頁之間的通信
- setInterval+cookie
在頁面A設置一個使用 setInterval 定時器不斷刷新，檢查 Cookies 的值是否發生變化，如果變化就進行刷新的操作。
由於 Cookies 是在同域可讀的，所以在頁面 B 審核的時候改變 Cookies 的值，頁面 A 自然是可以拿到的。
- 使用localStorage
localstorage是瀏覽器多個標簽共用的存儲空間，所以可以用來實現多標簽之間的通信(ps：session是會話級的存儲空間，每個標簽頁都是單獨的）。
直接在window對象上添加監聽即可：
window.onstorage = (e) => {console.log(e)}// 或者這樣window.addEventListener('storage', (e) => console.log(e))
- html5瀏覽器的新特性SharedWorker
普通的webworker直接使用new Worker()即可創建，這種webworker是當前頁面專有的。然后還有種共享worker(SharedWorker)，這種是可以多個標簽頁、iframe共同使用的。
SharedWorker可以被多個window共同使用，但必須保證這些標簽頁都是同源的(相同的協議，主機和端口號)
8、漸進增強和優雅降級概念區別是什么
漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，然后針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。
.transition { /*漸進增強寫法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.transition { /*優雅降級寫法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
*前綴CSS3（-webkit- / -moz- / -o-）和正常CSS3在瀏覽器中的支持情況是這樣的：
1.很久以前：瀏覽器前綴CSS3和正常CSS3都不支持；
2.不久之前：瀏覽器只支持前綴CSS3，不支持正常CSS3；
3.現在：瀏覽器既支持前綴CSS3，又支持正常CSS3；
4.未來：瀏覽器不支持前綴CSS3，僅支持正常CSS3.
如果低版本用戶居多，當然優先采用漸進增強的開發流程；
如果高版本用戶居多，為了提高大多數用戶的使用體驗，那當然優先采用優雅降級的開發流程。
絕大多數的大公司都是采用漸進增強的方式，因為業務優先，提升用戶體驗永遠不會排在最前面。
9、如何實現 CSS3 動畫
參考博客：https://blog.csdn.net/charlene0824/article/details/50705931
CSS 變量和主題切換
CSS 變量
實例：
body { background: white; color: #555; } a, a:link { color: #639A67; } a:hover { color: #205D67; }
變量轉換：
:root { --bg: white; --text-color: #555; --link-color: #639A67; --link-hover: #205D67; } body { background: var(--bg); color: var(--text-color); } a, a:link { color: var(--link-color); } a:hover { color: var(--link-hover); }
我們使用--變量名的方式定義變量，使用var(--變量名)的方式消費變量。
主題切換
再定義一個粉色的主題：
.pink-theme { --bg: hotpink; --text-color: white; --link-color: #B793E6; --link-hover: #3532A7; }
切換主題代碼：
const toggleBtn = document.querySelector('.toggle-theme')
toggleBtn.addEventListener('click', e => {
e.preventDefault()
if (document.body.classList.contains('pink-theme')) {
// 當前主題為粉色主題，需要移除 pink-theme class
document.body.classList.remove('pink-theme')
toggle.innerText = '切換正常主題色'
} else {
document.body.classList.add('pink-theme')
toggle.innerText = '切換為粉色少女主題'
}
})
利用 localStorage 實現主題的保存：
const toggleBtn = document.querySelector('.toggle-theme')
if (localStorage.getItem('pinkTheme')) {
document.body.classList.add('pink-theme')
toggle.innerText = '切換為粉色少女主題'
}
toggleBtn.addEventListener('click', e => {
e.preventDefault()
if (document.body.classList.contains('pink-theme')) {
// 當前主題為粉色主題，需要移除 pink-theme class
document.body.classList.remove('pink-theme')
toggle.innerText = '切換正常主題色'
localStorage.removeItem('pinkTheme')
} else {
document.body.classList.add('pink-theme')
toggle.innerText = '切換為粉色少女主題'
localStorage.setItem('pinkTheme', true)
}
})
CSS Modules
CSS Modules
項目中所有 class 名稱默認都是局部起作用的。CSS Modules 並不是一個官方規范，更不是瀏覽器的機制。它依賴我們的項目構建過程，因此實現往往需要借助 Webpack。借助 Webpack 或者其他構建工具的幫助，可以將 class 的名字唯一化，從而實現局部作用。
.test { color: red; } <div class="test">This is a test</div> //編譯之后，class 名是動態生成的，全項目唯一的。因此通過命名規范的唯一性，達到了避免樣式沖突的目的。 ._style_test_309571057 { color: red; } <div class="_style_test_309571057"> This is a test </div>
compose關鍵字的樣式復用
.common { color: red; } .test { composes: common; font-size: 18px; } <div class="${style.test}"> This is a test </div> //編譯后 <div class="_style__test_0980340 _style__common_404840"> This is a test </div>
參考文獻：
https://blog.csdn.net/Dora_5537/article/details/92792949
https://www.cnblogs.com/libingql/p/4375354.html
https://www.cnblogs.com/Tony100/p/10038860.html
https://www.jianshu.com/p/5f0e6d8fd36a