audio
标签定义声音,比如音乐或其他音频流。
- autoplay='autoplay' 如果出现该属性,则音频在就绪后马上播放。
- controls='controls' 如果出现该属性,则向用户显示控件,比如播放按钮。
- loop='loop' 如果出现该属性,则每当音频结束时重新开始播放。
- muted='muted' 规定视频输出应该被静音。
- preload='preload' 如果出现该属性,则音频在页面加载时进行加载,并预备播放。使用 "autoplay",则忽略该属性。
- src='URL' 要播放的音频的 URL。
DEMO
video
标签定义视频,比如电影片段或其他视频流。
- autoplay='autoplay' 如果出现该属性,则视频在就绪后马上播放。
- controls='controls' 如果出现该属性,则向用户显示控件,比如播放按钮。
- height='pixels' 设置视频播放器的高度。
- loop='loop' 如果出现该属性,则当媒介文件完成播放后再次开始播放。
- muted='muted' 规定视频的音频输出应该被静音。
- poster='URL' 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
- preload='preload' 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
- src='url' 要播放的视频的 URL。
- width='pixels' 设置视频播放器的宽度。
DEMO
博客园将 video
标签渲染出来之后就不能渲染后面的内容了,故此处不写 video
标签了。
blockquote
标签定义块引用。
很多人觉得它非常简单,确实,从本质上来说,它都算不上一中语言,只是一种描述型的标签。所以,在写业务的时候,大多数人都是全屏的div和span,完全满足要求,实现效果完美。
很多人觉得它非常简单,确实,从本质上来说,它都算不上一中语言,只是一种描述型的标签。所以,在写业务的时候,大多数人都是全屏的div和span,完全满足要求,实现效果完美。
- cite='URL' 规定引用的来源。
output
标签定义不同类型的输出,比如脚本的输出。
- for='element_id' 定义输出域相关的一个或多个元素。
- form='form_id' 定义输入字段所属的一个或多个表单。
- name='name' 定义对象的唯一名称。(表单提交时使用)。
0 100 + =
picture
元素通过包含零或多个
元素和一个
元素来为不同的显示/设备场景提供图像版本。
- srcset='URL' 必填,引用图片的url
- media='(min-width=700px)' 允许你提供一个用于媒体查询的条件
- size 定义图片的宽度值,或者一些媒体查询的值
- type 允许你为
元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型,那么这个
元素会被跳过。
DEMO
progress
标签标示任务的进度(进程)。
- max='number' 规定任务一共需要多少工作。
- value='number' 规定已经完成多少任务。
meter
标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。例子:磁盘用量、查询结果的相关性,等等。
标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 标签。
- form='form_id' 规定
元素所属的一个或多个表单。 - high='number' 规定被视作高的值的范围。
- low='number' 规定被视作低的值的范围。
- max='number' 规定范围的最大值。
- min='number' 规定范围的最小值。
- optimum='number' 规定度量的优化值。
- value='number' 必需。规定度量的当前值。
template
元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现,但随后可以(原文为 may be)在运行时使用JavaScript实例化。
you-dont-konw-html
function createNewNode() {
const node = document.querySelector('template');
const template = node.content.cloneNode(true);
document.body.appendChild(template);
}
time
用来表示24小时制时间或者公历日期,若表示日期则也可包含时间和时区。
现在是早上
现在是早上7:00
wbr
元素 — 一个文本中的位置,其中浏览器可以选择来换行,虽然它的换行规则可能不会在这里换行。
和
不同,
表示必须折行。而wbr的意思是在宽度足够的情况下不换行,当宽度不足的时候,在 wbr 处主动换行。
所以,如果你有一段很长的文本,其中有一个英文单词,你不希望在文本自适应宽度时,单词因为折行被分割成两个部分,那么可以使用wbr标签保证这个单词不会被折行。
在文本中使用这个属性,可以在页面宽度变小时,在这个英文单词front处折行,保证单词不会被分割
在文本中使用这个属性,可以在页面宽度变小时,在这个英文单词front处折行,保证单词不会被分割
details
标签用于描述文档或文档某个部分的细节。
- open='open' 定义 details 是否可见。
概要
details可以创建一个挂件,仅在被切换成展开状态时才会显示内容信息。可以在其中嵌入``标签,为该部件提供概要。
概要 details可以创建一个挂件,仅在被切换成展开状态时才会显示内容信息。可以在其中嵌入` `标签,为该部件提供概要。
参考资料
- MDN
- 还在用div的span打天下吗:你应该了解的HTML标签