一、前言
html5的标签有很多很多,里面有不少实用的标签,今天让我们一起来看看这些好用又被埋没的标签吧。
走过路过别错过了,看看收藏不吃亏。
二、正文部分
1、sup&sub标签
有时候我们会需要输入一些单位的符号,一般都是输入法打开符号大全里有的。
但有些时候,符号里找不到,又得打上标或者下标,就可以用这里的了。
您可以在文档中添加上标(如x²)sup和下标(如x₀)sub 。
x²的例子
<p>X<sup>2</sup></p>
x₀的例子
<p>X<sub>o</sub></p>
2、map&area
很多时候我们导入了一张图片,但是可能需要对其他不同区域响应不一样的事件。
那就可以用map&area的形式,来创建图像映射,这是对具有可点击区域的图像的一个奇特术语。
这是w3school的例子
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
画面中有电脑手机咖啡等等物品,我们创建了map容器,指向了这张图,同时创建了3个area区域,分别划分范围,实现不同的事件触发。
shape指定形状,coords指定范围,这在大背景里相当好用,可以试试看。
3、track
开发过程中,我们经常会嵌入一些视频,有时候拿到的视频文件是没有字幕的,这种时候就需要额外指定文本轨道文件。
而track标签,可以用来指定audio或者video标签的文本,文本格式为.vtt文件。
此元素用于指定字幕、字幕文件或其他包含文本的文件,这些文件在播放媒体时应该可见。
曲目采用 WebVTT 格式(.vtt 文件)。
如以下是一个指定了双字幕的例子。
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
4. object
这是一个被废弃的标签,目前基本上不再使用了,看个乐呵就行。
嵌入图片
<object data="pic_trulli.jpg" width="300" height="200"></object>
嵌入网页
<object data="snippet.html" width="500" height="200"></object>
嵌入视频
<object data="video.mp4" width="400" height="300"></object>
object允许您嵌入各种文件,如PDF、图像、视频、音频甚至插件程序(java小程序,activeX控件和flash等)。
不过目前浏览器已经不再支持java小程序、activeX控件和flash了。
同时有新的标签,按用途来专门使用。
要嵌入图片,最好使用标签`<img>`。
要嵌入 HTML,最好使用 标签`<iframe>`。
要嵌入视频或音频,最好使用`<video>`和`<audio>`标签。
ps: 我是地霊殿__三無, 51小水一波。