比较少用的网页标签

135 阅读2分钟

一、前言

html5的标签有很多很多,里面有不少实用的标签,今天让我们一起来看看这些好用又被埋没的标签吧。

走过路过别错过了,看看收藏不吃亏。

二、正文部分

 1、sup&sub标签

有时候我们会需要输入一些单位的符号,一般都是输入法打开符号大全里有的。

image.png

但有些时候,符号里找不到,又得打上标或者下标,就可以用这里的了。

您可以在文档中添加上标(如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区域,分别划分范围,实现不同的事件触发。

QQ图片20230430142008.png

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小水一波。

Snipaste_2022-07-19_15-30-26.jpg