一、HTML <kbd> 標簽
1. <kbd> 標簽定義鍵盤文本，它用來表示文本是從鍵盤上鍵入的。
2. 瀏覽器通常用等寬字體來顯示該標簽中包含的文本。
3. <kbd> 標簽經常用在于計算機相關的文檔和手冊中。例如：
鍵入 <kbd>quit</kbd> 來退出程序，或者鍵入 <kbd>menu</kbd> 來返回主菜單。
二、使用 data-* 屬性來嵌入自定義數據
① data-* 屬性用于存儲頁面或應用程序的私有自定義數據。
② data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。
③ 屬性名不應該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符
④ 屬性值可以是任意字符串
語法:
<element data-*="somevalue">
例如：通過data-key將頁面展示的內容和audio關聯起來
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
三、rem和px的轉換
1. rem是指相對于根元素的字體大小的單位(html)
2. em是指相對于父元素的字體大小的單位
設置rem的方法：
方法一：
html {
font-size: 10px; // 代表1rem = 10px
}
方法二：動態獲取
var html = document.documentElement;
var width = html.clientWidth;
html.style.fontSize = width / 7.5 + 'px'; // 1rem=100px
注：我們在開發中，一般font-size還是用px，因為在大小屏上顯示有出入，字體需要換行時，line-height也使用px
四、addEventListener() 方法，事件監聽
addEventListener() 方法，事件監聽
removeEventListener() 方法移除事件的監聽
4.1 語法：
element.addEventListener(event, function, useCapture);
第一個參數是事件的類型 (如 "click" 或 "mousedown").
第二個參數是事件觸發后調用的函數。
第三個參數是個布爾值用于描述事件是冒泡還是捕獲。該參數是可選的。
注意:不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。
4.2 引用函數：
你可以使用函數名，來引用外部函數:
element.addEventListener("click", function(){ alert("Hello World!"); });
element.addEventListener("click", myFunction);
function myFunction() { alert ("Hello World!");}
4.3 向 Window 對象添加事件句柄
window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext;});
4.4 傳遞參數
當傳遞參數值時，使用"匿名函數"調用帶參數的函數：
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
4.5 事件冒泡或事件捕獲？
事件傳遞有兩種方式：[冒泡]與[捕獲]。
事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？
在[冒泡]中，內部元素的事件會先被觸發，然后再觸發外部元素，即： <p> 元素的點擊事件先觸發，然后會觸發 <div> 元素的點擊事件。
在[捕獲]中，外部元素的事件會先被觸發，然后才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然后再觸發 <p> 元素的點擊事件。
addEventListener() 方法可以指定 "useCapture" 參數來設置傳遞類型：
addEventListener(event, function, useCapture);
默認值為 false, 即冒泡傳遞，當值為true 時, 事件使用捕獲傳遞。
document.getElementById("myDiv").addEventListener("click", myFunction, true);
4.6 removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
element.removeEventListener("mousemove", myFunction);
4.7 瀏覽器兼容處理
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流瀏覽器，除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，
對于這類瀏覽器版本可以使用 detachEvent() 方法來移除事件句柄:
element.attachEvent(event, function);element.detachEvent(event, function);
五、HTML DOM querySelector() 方法
5.1 定義和用法
querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。
注意： querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。
如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。
5.2 語法
document.querySelector(CSS selectors)
參數是String，必填。指定一個或多個匹配元素的 CSS 選擇器。可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。
對于多個選擇器，使用逗號隔開，返回一個匹配的元素。
5.3 單個實例
獲取文檔中第一個 <p> 元素：
document.querySelector("p");
獲取文檔中 class="example" 的第一個元素:
document.querySelector(".example");
獲取文檔中 class="example" 的第一個 <p> 元素:
document.querySelector("p.example");
獲取文檔中有 "target" 屬性的第一個 <a> 元素：
document.querySelector("a[target]");
5.4 多個實例
假定你選擇了兩個選擇器: <h2> 和 <h3> 元素。
以下代碼將為文檔的第一個 <h2> 元素添加背景顏色：
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2, h3").style.backgroundColor = "red";
但是，如果文檔中 <h3> 元素位于 <h2> 元素之前，<h3> 元素將會被設置指定的背景顏色。
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2, h3").style.backgroundColor = "red";
