1
一、details 查看详情
details是detail的复数形式，作为标签只能用复数。该标签不能单独使用，需与sumary子标签相配合，否则属语法不规范，h5验证不通过。举例如下：
<details>
<summary>查看详情</summary>
<p>此处为详情描述文本或图片</p>
</details>
details标签是H5中难得的一个交互标签，它产生的效果是详情部分的内容默认情况下处于隐藏状态，用户想了解的话需要点击三角形图标后方能查看。这项工作，过去，H5以前，只能由JS完成。
下图是details标签运行前后的状态：
2
二、mark 高亮文本
mark本意是标记，与刻舟求剑中的刻含义相同。mark属于行内标签，它和span一样都是内联级别的，不会因为用了它而产生换行行为。对于需要在文档中高亮显示的重要文本，用它再合适不过，真的简单使用。试看：
<p>mark是<mark>高亮文本</mark>标签，它是一个行内标签。</p>
运行效果如下：
mark是高亮文本标签，它是一个行内标签。
有一种非常流行的标记性语言就叫 Markdown，现在广泛使用于类似于blog性质的社交平台，从道理上讲，它和H5一样，都大量使用语义化的标签，学习语言，还是需要懂得一些基本的英文单词。
mark标签呈现出来的效果实际上相当于在一个span标签里设置了background-color，但它的简洁性实在令人惊叹的。在此，我仅使用了它的默认样式，感觉已经非常理想了。
3
三、figure 图像文本描述
不久前，我发布过一个极简发图JS脚本程序，图片附带文本说明。当时我就想用figure标签，但不确定这样做是否会增加对脚本的理解难度，所以放弃使用。但不管怎么说，figure是img的好搭档，只是用起来语法结构略显复杂：
<figure>
<img alt="" src="图片地址" />
<figcaption>图片文本说明</figcaption>
</figure>
这将在图片下方出现图片的文本说明。
使用时，figure标签以父元素存在，其下的图片和文本说明作为一对并列子元素出现，文本说明使用的是 figcaption 标签，它不一定放在图片标签之后，可以上提。此外，figure标签并不是只能用于对img的说明，也可以用于其它元素，比如div。
4
四、progress 进度条
先看以下效果：
上面的进度条代码如下：
<progress max="100" value="50"></progress>
这是块状级（block）的标签，它会独立占用一行。这么复杂的效果代码却是极其简单的：max属性表示其长度，value属性表示当前进度。H5这个progress进度条标签极度简化了做进度条的成本，但是在过去，我们需要用诸如div等盒子加background底色来模拟，设计消耗极大。
当然，要动态驱动这个进度条，H5自身是没有办法的，还是需要JS的参与。不过，它已经很优秀了，极简的参数，JS的编程开销一般也仅主要针对progress的value值，应该很小。
若仅作为静态表示事务的进度，没有JS它也完全可以胜任。
5
五、sup和sub上下标
请看下面的样式，是不是可以让我们回到中学的课堂？你还记得数学老师可爱或可恶的样子么？
102
102
不论上面的东东能否勾起对中学课堂的回忆，上下标的实现确实是没有中学数学的难度，语句很简单：
10<sup>2</sup>
10<sub>2</sub>
仅仅需要分清哪个是表示上标、哪个是表示下标。记忆这对双胞胎的技巧是：sup和sub的区别仅仅是最后一个字母，一个是p，一个是b，前者脸朝上，是上标，后者脸朝下，是下标。
记得我此前介绍过这个内容，这里且当复习。
6
六、fieldset 标签
fieldset标签主要用于组合表单中的相关元素。我们知道，表单常用来让用户填写信息的，里面的元素众多，为了归拢这些元素，可用fieldset将同类的项目组织起来。
并非说fieldset只能用于表单，很多时候，我们也可以用它来装饰一段文本、给一张图片提供装饰的同时附带一个标题，都是可以的。看下面的效果：
代码如下：
<fieldset>
<legend>漂亮的边框</legend>
<p>这段文本是p标签里的内容</p>
</fieldset>
fieldset其实就是一个框框，把其下的子元素框起来。它如果和子元素legend配合使用，这个框就可以提供一个简短的文本，我们可以称之为标题。legend标签是fieldset的子标签，其他在框内显示内容的标签，如文本、图片、表单元素等等，和legend是并列关系，都归属于fieldset这个父元素。
七、hr 水平分割线
hr过去拥有自己的诸多属性，在H5里，它的属性都被剥夺了，不建议再使用，但不等于说它的样式永远只是以下这个默认的样子：
严格来说，上面那条水平分割线它不算难看，实现它只需使用和br标签写起来差不多一样的代码：
<hr />
对，它也和br一样，是一个自闭合标签，标准的H5写法是hr之后是一个空格加一个斜杠。得出的默认样式就是上面那个样子，如果不满意，可以通过CSS来定义它的样式，以下随便给出一个例子：
.myhr {
margin: auto;
background: red;
height: 1px;
width: 300px;
border: none;
}
它默认是有 border 的，所以我把 border 设置为 none，这就得到如下的1像素的红色水平线：
7
八、blockquote 长引用
blockquote是长段引用其他文本时最常使用的一个标签，包裹在<blockquote>和</blockquote>之间的长文本会头尾自动缩进，试看以下效果：
blockquote是长段引用文本时所使用的标签，包裹在<blockquote>和</blockquote>之间的长文本会头尾缩进……
block是块，quote是引用，合起来的意思是块状引用，就是大段落引用之意。H5还有一个短引用，真的是太短了，语法如下：
<q>效果会肿么样？</q>
效果是酱紫：
效果会肿么样？
这只不过是加上了双引号，不过它可以表明这个是引用的，能避免话语的产权纠纷。与blockquote不同，q标签是内联级别即行内标签，和span标签一样，不会产生分行。
8
小小福利：教你简单画月牙
css代码：
.moon {
width: 200px;
height: 200px;
box-shadow: 40px 40px 0 0 gold;
border-radius: 50%;
}
html代码：
<div class="moon"></div>
效果：
内封
发表于 2022-5-4 20:37
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2022-5-4 21:16
楼主
发表于 2022-5-4 21:40
