1.mark
<mark.../>是用来显示页面需要重点关注的内容，就像看书喜欢用荧光笔标记重点一样，浏览器一半是用黄色来显示mark标记的内容
2.details和summary
当summary放在details元素内部的时候，summary元素为details定义摘要信息，默认是可见的，点击summary的时候，details会展开
使用方法
<div>mark：<mark>我是mark标记</mark></div>
<details>
<summary>疯狂的石头</summary>
<p>疯狂的石头真的是一部很好看的电影！</p>
</details>
显示效果
3.ruby，rb，rt，rp，rtc，rbc
| 标签 | 说明 |
|---|---|
| ruby | 被用来展示东亚文字注音或字符注释 |
| rt | 是字符（中文注音或字符）的解释或发音 |
| rb | 是表示被注音或注释的主题内容 |
| rp | 是在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容 |
| rtc | <rt>标签的加强版，他不是合集！一个内容标签最多可以对应两个<rtc>标签,这个标签一般字幕翻译会有，上面英文，中间汉字，下面汉语拼音 |
| rbc | 是<rb>标签的集合，一个<ruby>主体中只能存在一个，多个默认第一个有效，也就是来管理所有的<rb>标签的，可以不用，顶多DOM不那么规范 |
ruby，rb，rt，rp使用方法
<ruby>
<rb>我和我的祖国</rb>
<rt>wǒ hé wǒ de zǔ guó</rt>
<rp>(wǒ hé wǒ de zǔ guó)</rp>
</ruby>
显示效果
上面的例子中
| 标签 | 说明 |
|---|---|
<rb> |
内容主体（我和我的祖国） |
<rt> |
上方标注内容（wǒ hé wǒ de zǔ guó） |
<rp> |
当浏览器不兼容时备选显示内容 |
rbc，rtc使用方法1
<ruby>
<rbc>
<rb>你</rb><rp>(</rp><rt>nǐ</rt><rp>)</rp>
<rb>好</rb><rp>(</rp><rt>hǎo</rt><rp>)</rp>
</rbc>
<rtc style="ruby-position: under;">
<rp>(</rp><rt>hello</rt><rp>)</rp>
</rtc>
</ruby>
显示效果
注：<rtc>和<rbc>目前只有Firefox浏览器支持，如果您使用任何其他浏览器，该示例会在ruby批注周围加上括号，并且格式可能看起来很不好。
也可以采用上下都用<rtc>或者一个<rtc> + <rt>的组合
rbc，rtc使用方法2
<ruby>
<rb>赠人玫瑰手留余香</rb>
<rtc style = "ruby-position: over"><rt>zèng rén méi guī shǒu liú yú xiāng </rt></rtc>
<rtc style = "ruby-position: under"><rt>you share rose get fun</rt></rtc>
</ruby>
显示效果
ruby的常用样式属性：ruby-position，ruby-align
以下样式目前仅Firefox全支持
| 样式属性 | 说明 |
|---|---|
ruby-position |
<ruby>标签特有样式，控制<ruby>标签内容与标注文字的相对位置，over 水平文本是在上方渲染标注，垂直文本是在右侧渲染。默认值,under水平文本是在下方渲染标注，垂直文本是在左侧渲染 |
ruby-align |
表示内容与标注的文字对齐方式, start 起始位置对齐(左对齐)，center 居中， space-between 均匀分布，space-around 在其框内均匀分布内容，但不一定从边缘到边缘填充空间 |
4.bdi
使一段文本脱离其父元素的文本方向设置，在您无法完全控制的内容时，该标签表现的很有用处
我们举个例子直观的看一下，一般阿拉伯文是从右往左读的，比如当我们翻译 2008年北京奥运会 的时候，浏览器会认为2008是阿拉伯文本的一部分，会默认倒序排列 (本人举爪表示下面👇例子中，2008不是我自己写到前面的，当你在阿拉伯文字后面加上数字会默认倒序哦，小伙伴可以试一下)。我们加上bdi标签就可以解决了
使用方法
<p><bdi>الألعاب الأولمبية في بكين</bdi> ：2008年北京奥运会</p>
<p>الألعاب الأولمبية في بكين ：2008年北京奥运会</p>
显示效果
5.wbr
用于在指定文本适合的地方换行，一般对英文单词来说过长，浏览器会在指定的地方换行
使用方法
<div style="width: 100px;">国际化单词：inter<wbr>national<wbr>ization</div>
显示效果
6.fieldset和legend
会在相关表单元素周围绘制边框。用于对表单元素进行分组，fieldset还有name，form和disable三个属性
| fieldset属性 | 说明 |
|---|---|
name |
指fieldset元素的名称 |
form |
该属性必须是一个有效的<form.../>的id，用于指定fieldset元素指定该表单 |
disable |
表示禁用该表单元素，是一个boolean值（<fieldset disabled></fieldset>) |
使用方法
<fieldset>
<legend>表单填写</legend>
姓名：<input type="text" /><br>
年龄：<input type="text" />
</fieldset>
显示效果
题外话:根据上面的标签我们可以写出两边是线，中间是文字的效果
fieldset{
border-left: none;
border-right: none;
border-bottom: none;
color: #009688;
border-color: #defffc;
height:20px;
}
legend{
text-align: center;
padding: 0 10px;
font-size: 14px;
}
<fieldset>
<legend>历史活动</legend>
</fieldset>
效果如下
7.不常用又好用的标签
| 标签 | 说明 |
|---|---|
<b> |
粗体文本 |
<i> |
斜体文本 |
<em> |
强调文本 |
<small> |
定义小号字体文本，通常用来标注免责声明，注意事项，版权相关的，html5删除了<big>元素 |
<sup> |
上标文本 |
<sub> |
下标文本 |
<bdo> |
控制文字排序的标签，他有两个属性ltr：正序(左向右）或rtl反序（右向左） |
使用方法
<p><b>b: 粗体文本</b></p>
<p><i>i:斜体文本</i></p>
<p><em>em:强调文本</em></p>
<p>正常文本<small>:小号字体文本</small></p>
<p>H<sub>2</sub>O</p>
<p>10<sup>2</sup></p>
<p>正序ltr：<bdo dir="ltr">123456789</bdo></p>
<p>倒序rtl：<bdo dir="rtl">123456789</bdo></p>
显示效果
8.语义相关的标签
| 标签 | 说明 |
|---|---|
<abbr> |
用来表示一个缩写，建议指定title属性，指定该缩写的全称 |
<address> |
表示地址，浏览器一般使用斜体字来表示 |
<blockquote> |
定义一段很长的引用文本，浏览器会用缩进的方式显示这段文本，可指定cite属性，该属性是英语则指定该引用文本所用的url或者出处 |
<q> |
定义一段短的引用文本，浏览器会给该引用文本添加引号，与blockquote的区别就是，blockquote是用于引用一段可换行的大段文本，而q元素则是引用一段不带换行，较短的文本 |
<cite> |
用于表示作品的标题，浏览器会用斜体来显示 |
<code> |
表示计算机代码 |
<dfn> |
定义一个专业术语，浏览器通常会用粗体或者斜体来显示 |
<del> |
被删除的文本，浏览器会以中画线的方式显示 |
<ins> |
定义被插入的文本，浏览器会以下划线的形式显示 |
<pre> |
表示该元素所包含的文本已经进行了预格式化，也就是说pre元素所包含的文本的空格，回车，tab键等其他格式字符都会被保留下来，但浏览器会处理pre大部分的html元素 |
<samp> |
定义样本文本，用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体 |
<kbd> |
定义键盘文本，用来表示文本是键盘输入的，一般在计算机使用文档使用说明中会经常用 |
<var> |
表示一个变量，浏览器一般会以斜体的展示） |
使用方法
<p><mark>abbr标签：</mark>美国：<abbr title="American">USA</abbr></p>
<div><mark>address标签：</mark>地址：<address>江苏省南京市</address></div>
<p><mark>blockquote标签:</mark>定义一段很长的引用文本<blockquote>浏览器会用缩进的方式显示这段文本，可指定cite属性，该属性英语指定该引用文本所用的url或者出处</blockquote></p>
<p><mark>q标签文本：</mark><q>引用文本</q></p>
<p><mark>cite标签：</mark><cite>这是一个标题</cite></p>
<p><mark>code标签：</mark>一段电脑代码:<code>document.getELementById("id");</code></p>
<p><mark>dfn标签：</mark><dfn>定义项目</dfn></p>
<p><mark>del标签：</mark><del>我被删除了</del></p>
<p><mark>ins标签：</mark><ins>插入的文本</ins></p>
<p><mark>pre标签：</mark>
<pre>
let a = 1;
let b = 2;
console.log(a+b);
</pre>
</p>
<p><mark>samp标签：</mark>程序输出:<samp>程序输出</samp></p>
<p><mark>kdb标签：</mark>键入 <kbd>quit</kbd> 键入 <kbd>tab</kbd> 切换。</p>
<p><mark>var标签：</mark>变量：<var>type类型</var></p>
显示效果
