其他常用标签汇总

一，语义化标签

概念：

语义化标签解决了div的无限嵌套维护困难和SEO搜索引擎的优化问题。

常用：

• header - 通常包含标题、Logo、导航辅助元素、搜索框等
• nav - 通常包含菜单、目录、链接、索引
• aside - 通常表示和页面完全无关的内容，拆出不会影响整体页面效果，比如广告、tips等
• section - 通常出现在文档的大纲中，带有标题，主要的意义是按主题将内容分组
• article - 独立的文档、页面、站点或者可以复用的组件，可以脱离当前环境复用
• footer - 页脚，通常包含版权、作者、文章链接等
• figure/figcaption - figure通常用作包裹独立的流内容（图像、图表、照片、代码等等）;figcaption通常作为figure的标题（位于figure的第一个或最后一个）

<figure>
    <figcaption>xx</figcaption>
    <img src="">
</figure>

• address - 联系信息
• cite - 通常用为作品标题（论文、书籍、电影等）
• mark - 标记突出的文本
• code - 代码片段
• time - 机器可读的日期和时间，需要配合datetime属性赋值

我在<time datetime="2023-02-14">情人节</time>有个约会

• small - 小字体。免责声明、注意事项等

二，base标签

放在head标签里。描述了基本的链接地址/链接目标，作为整个HTML中所有标签的默认链接。

eg：<base href="" target="">

三，列表标签

ul、ol、li：ul是无序列表、ol是有序列表；li是列表中的项

dl、dt、dd：dl是定义列表、dt定义列表中的项、dd定义列表描述

四，多媒体标签

• audio - 定义音频内容，配合内嵌source标签使用
• video - 定义视频内容，配合内嵌source标签使用

<video width="320" height="480" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

常用属性：

• autoplay - 设置或返回是否自动播放
• loop - 循环播放
• paused - 是否暂停
• controls - 是否显示播放控件（播放、暂停、音量、字幕等）
• currentTime - 当前播放位置（以秒计）
• currentSrc - 当前URL

常用方法：

• load() - 重新加载
• play() - 播放
• pause() - 暂停

详细使用参考APIHTML 音频/视频 | 菜鸟教程

五，progress和meta标签

• progress - 定义任务的进度。value-进度值，max-完整进程值

                eg：<progress value="22" max="100">

• meta - 定义度量衡。min、max设置最小值和最大值，value为当前值，low设置低于一个值，显示黄色，high设置高于一个值，显示绿色

                eg：<meta low="60" high="90" min="0" max="100" value="80">

六，embed标签

他定义一个容器，用来潜入外部内容或插件。比如swf插件。属性type-嵌入内容的MIME类型

eg：<embed src="hello.swf" width="" height="" type=""> 

七，a标签

• download - 指定下载链接（eg：<a href="xxx" download="YYY">）
• type - 目标URL的MIME类型

八，常见行内元素

行内元素可以分为内联元素inline、行内块级元素inline-block

内联元素inline：

• 只占据他对应的标签边框所包含的空间
• 只能容纳文本或者其他内联元素
• 只能通过修改水平边距、边框、行高来改变尺寸
• 常见的有：a、span、strong、i、em、cite、code、label、br等

行内块级元素inline-block：

• 元素在行内排列，不会独占一行
• 支持设置宽高、垂直边距、边框
• 常见的有：img、input、td

九，常见块级元素

块级元素只占据一整行，一个新的块级元素总是从新行开始。

• 能容纳其他块级元素或内联元素
• 可以控制宽高、行高、边距、边框等改变尺寸
• 常见的有：div、p、h1~h6、ol、ul、dl、table、form、address、blockquote等

十，canvas标签

canvas标签是H5新增的绘图工具，可以用于javascript绘图的API。

主要属性：id、width、height

<canvas id="draw" width="800" height="400">
    您的浏览器不支持canvas
</canvas>