HTML冷门但实用的标签和API

冷门但实用的标签pre标签我们都知道，普通标签中的文本格式是不会显示的，比如输入多个空格，但不会显示，以及将显示pre标签。

元素表示预先格式化的文本。该元素中的文本通常根据原文件中的排列以等宽字体显示，文本中的空白字符（如空格和换行符）将被显示。比如如何在我的HTML中显示我的佛像_ooOoo_o8888888o88"."88(|-_-|)O\=/O____/`---'\____.'\\||//`。/\\|||:|||//\/_|||||-:-|||||-\||\\\-///|||\_|''\---/''||\.-\__`-`___/-./___`。.'/--.--\`。.__.""'<`.___\_<|>_/___.'>'“”。||:`-\`.;`\_/`;.`/-`:||\\`-。\___\/___/.-`//======`-.____`-.___\_____/___.-`____.-'======`=---='第一张图片是div显示的第二张图片显示在pre中（
你要显示的格式化字符集
）。em标签和强标签标记了需要用户阅读的内容，一般显示为“斜体”。表示文字很重要，一般以粗体显示。del标签和ins标签HTML的标签表示要从文档中删除的一些文本内容。请参阅此处已删除的内容HTML元素定义已插入到文档中的文本。这段文字是新插入到文档中的。subtagandsuptag
水的化学式：H2O
2+32=11
废话不多说，大家感受一下上图中的ruby标签饭(tao)饭(tie)bdolabel玩LOL的朋友都知道魏神之箭！！！元素（HTML双向覆盖元素）用于覆盖当前文本的方向，使字符按给定方向排列。
箭头向后
实用的APIquerySelector获取指定元素中第一个css选择器匹配的元素：document.querySelector("#nav");//获取文档中id="nav"的元素document.querySelector(".nav");//获取文档中class="nav"的元素document.querySelector("#navli:first-child");//获取文档中id="nav"下的第一个li元素letnav=dodocument.querySelector("#nav");nav.querySelector("li");//如果li不止一个，则返回第一个liquerySelectorAll获取指定元素中匹配所有css选择器的元素：letlist=document.querySelectorAll("li");//NodeList(2)[li,li]这里假设返回的2是一个类数组，不是真正的数组数据集开发规范问题，所有的自定义属性都必须以data-为前缀，dataset才能获取该属性在标签上设置以“data-”为前缀：
document.querySelector("p").dataset；//{name:"老王",age:"32"}URLSearchParams假设浏览器的url参数为"?id=123&age=16"newURLSearchParams(location.search).get("id");//123contenteditable我是P元素，但我也可以编辑
spellcheck是一个html属性，指定输入内容是否检查英文拼写：getBoundingClientRect可以获取当前页面指定元素的空间信息：elem.getBoundingClientRect();//return{x:604.875,y:1312,width:701.625,height:31,top:1312,right:1306.5,bottom:1343,left:604.875}onlinestate监听当前网络状态变化，然后执行相应的方法：window.addEventListener("online",xxx);window.addEventListener("offline",()=>{alert("您已与网络断开连接！");});