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("你断网啦！");
});