HTML冷門卻實用的標籤與API

冷門卻實用的標籤

pre 標籤

我們都知道在常見標籤裏面的文字的格式是不會顯示的，比如你打了多個空格，但卻不會顯示，而pre標籤會顯示。
<pre> 元素表示預定義格式文本。在該元素中的文本通常按照原文件中的編排，以等寬字體的形式展現出來，文本中的空白符（比如空格和換行符）都會顯示出來。
比如，怎麼在我HTMl中顯示我佛呢

                   _ooOoo_
                  o8888888o
                  88" . "88
                  (| -_- |)
                  O\  =  /O
               ____/`---'\____
             .'  \\|     |//  `.
            /  \\|||  :  |||//  \
           /  _||||| -:- |||||-  \
           |   | \\\  -  /// |   |
           | \_|  ''\---/''  |   |
            \  .-\__  `-`  ___/-. /
          ___`. .'  /--.--\  `. . __
       ."" '<  `.___\_<|>_/___.'  >'"".
      | | :  `- \`.;`\ _ /`;.`/ - ` : | |
      \  \ `-.   \_ __\ /__ _/   .-` /  /
 ======`-.____`-.___\_____/___.-`____.-'======
                    `=---='

第一張圖片是用div顯示出來的

第二張圖片是用pre顯示出來的（<pre>你想顯示的帶有格式的字符集</pre>）

em 標籤 與 strong 標籤

<em>標記出需要用戶着重閱讀的內容，一般顯示爲 " 傾斜字體 "。
<strong>表示文本十分重要，一般用粗體顯示。

del 標籤 與 ins 標籤

HTML的 <del> 標籤表示一些被從文檔中刪除的文字內容。

請看這裏已刪除的內容

HTML <ins> 元素定義已經被插入文檔中的文本。

<ins>這一段文本是新插入至文檔的。</ins>

sub 標籤 與 sup 標籤

<p>水的化學公式: H<sub>2</sub>O</p>
<p>2 + 3<sup>2</sup>= 11</p>

不說廢話，上圖自己感受

ruby 標籤

<ruby>
  饕 <rp>(</rp><rt>tao</rt><rp>)</rp>
  餮 <rp>(</rp><rt>tie</rt><rp>)</rp>
</ruby>

bdo 標籤

玩LOL的朋友都知道韋神的那一箭吧！！！哈哈
<bdo> 元素 ( HTML雙向覆蓋元素 )用於覆蓋當前文本的朝向，它使得字符按給定的方向排列。

<p><bdo dir="rtl">那一箭又回來了</bdo></p>

實用的API

querySelector

獲取指定元素中匹配第一個css選擇器的元素：

document.querySelector("#nav"); // 獲取文檔中id="nav"的元素
document.querySelector(".nav"); // 獲取文檔中class="nav"的元素
document.querySelector("#nav li:first-child"); // 獲取文檔中id="nav"下面的第一個li元素
let nav = dodocument.querySelector("#nav");
nav.querySelector("li"); // 如果有多個li的話，返回第一個li

querySelectorAll

獲取指定元素中匹配所有css選擇器的元素：

let list = document.querySelectorAll("li");  // NodeList(2) [li, li] 這裏假設返回2個

返回的是一個類數組，不是真正的數組

dataset

開發規範問題，凡是自定義屬性都要加上data-前綴
而dataset能獲取標籤上以"data-"爲前綴的屬性集合：

<p data-name="老王" data-age="32"></p>
document.querySelector("p").dataset; // {name: "老王", age: "32"}

URLSearchParams

假設瀏覽器的url參數是 "?id=123&age=16"
new URLSearchParams(location.search).get("id"); //123

contenteditable

<p contenteditable>我是P元素，但是我也可以被編輯</p>

spellcheck

是一個html屬性，規定輸入的內容是否檢查英文的拼寫：

<!-- 默認就是true，可省略 -->
<textarea spellcheck="true"></textarea>

getBoundingClientRect

可以獲取指定元素在當前頁面的空間信息：

elem.getBoundingClientRect();

// 返回
{
  x: 604.875,
  y: 1312,
  width: 701.625,
  height: 31,
  top: 1312,
  right: 1306.5,
  bottom: 1343,
  left: 604.875
}

online state

監聽當前的網絡狀態變動，然後執行對應的方法：
window.addEventListener("online", xxx);

window.addEventListener("offline", () => {
alert("你斷網啦！");
});