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>
效果:
内封