# HTML ... 还有这操作？

> 许多原生的HTML元素及其属性，我们在实际开发中很少应用，可能因为兼容及不统一性；但是，有些元素及其属性值得一览，实际项目开发过程中还是有一定的帮助。

Author: DeathGhost
Published: 2021-07-13 20:02:29
Category: html
Canonical: https://www.deathghost.cn/article/html/99
Keywords: reversed, details, summary, mark, color, range, loading, lazy, download, controlsList

虽然现在前端开发流行组件化框架应用，很少用到原生的HTML元素，或多或少错过了一些原始的功能属性要点，下面列举一些不常使用的HTML元素与其属性值，希望对你的Web前端开发工作有一定的帮助。

![不常使用的HTML元素与其属性值](https://static.deathghost.cn/post/2021/07/13/1626191912563955.jpg)

不常使用的HTML元素与其属性值

## ol 元素序列定义与反转

li元素的父元素通常由ol、ul或menu元素包裹，其中ol定义有序列表；ul与menu属于无序列表，其中menu只是ul的语义替代元素。

可以通过li元素设置属性value值自定义序列。

<figure>
	<figcaption>新冠疫苗接种服务流程</figcaption>
	<ol>
		<li value="1">登记个人信息</li>
		<li value="2">预约接种时间</li>
		<li value="3">接种出示接种码</li>
		<li value="4">查询接种记录</li>
	</ol>
</figure>
若需颠倒序列码，可以设定value值，还有就是在ol元素中直接使用reversed属性即可，无需定义子项value值。

reversed属性是一个布尔属性。如果存在，则表示该列表是降序列表 (..., 3, 2, 1)。如果省略该属性，则列表为升序列表（1、2、3、...）。

<figure>
	<figcaption>新冠疫苗接种服务流程</figcaption>
	<ol reversed>
		<li>登记个人信息</li>
		<li>预约接种时间</li>
		<li>接种出示接种码</li>
		<li>查询接种记录</li>
	</ol>
</figure>

## details摘要数据信息组件（折叠面板）

summary为第一元素（摘要信息），若不存在将会显示为&ldquo;详细信息&rdquo;。其他则为附加信息。open属性是一个布尔值，表示面板是否展开。默认仅显示摘要信息。details也是web中常见的一种组件。

同时可以根据open属性定义样式，如：details[open] > summary { color: red; }。

<section class="progress window">
	<h1>新冠疫苗接种服务流程</h1>
	<details>
		<!-- <summary>新冠疫苗预约接种服务流程</summary> -->
		<dl>
			<dt>个人新冠疫苗接种</dt>
			<dd>
				<ol>
					<li>登记个人信息</li>
					<li>预约接种时间</li>
					<li>接种出示接种码</li>
					<li>查询接种记录</li>
				</ol>
			</dd>
			<dt>企事业单位员工绑定</dt>
			<dd>--</dd>
		</dl>
	</details>
</section>

## mark 标记元素

文本中突出显示关键词，起到警示作用，默认自带高亮样式。

<blockquote lang="en-GB">
	<p>预约前请先完善相关资料信息，预约后，按预约时间携带
		<mark>身份证</mark> 前往指定地点接种疫苗。
	</p>
</blockquote>

## a 元素或 area 元素中的download 属性 - 资源下载

默认情况下，未设置download属性，为导航链接。设置后，则下载指定资源。

<a href="/images/logo.png" download="/images/logo.png">下载资源</a>
[关于HTML download 属性可查阅这篇文章](https://www.deathghost.cn/article/html/94)

## img与iframe元素loading属性 - 延迟加载

loading="lazy" 懒加载、延迟加载亦或所谓的按需加载，通常在业务项目中会有此需求。

<img src="deathghost.jpg" loading="lazy" alt="新码笔记" />
相关文章可参考：[浏览器图片属性loading="lazy"延迟请求加载资源](https://www.deathghost.cn/article/html/61)

<iframe src="https://www.deathghost.cn" loading="lazy" onload="alert('iframe lazy...');"></iframe>
相关文章可参考：[延迟加载IFRAME](https://www.deathghost.cn/article/html/80)

## video视频元素与audio音频元素

controlsList属性控制在媒体元素上显示的控件。

例如：video 元素 与 audio 元素默认显示右（下）角操作集 ⋮ 标识，里面有下载或画中画操作项。这时我们可以通过controlsList取消下载、全屏或 ⋮ 标识。

<video src="https://static.deathghost.cn/post/2021/06/11/caret.mp4" controls="controls" controlsList="nodownload"></video>
另外controlsList 属性接受三个值，如：

controlslist="nodownload nofullscreen noremoteplayback"
nodownload 关键字暗示的下载控制应使用用户代理自己的一套媒体元素控件时被隐藏。

nofullscreen 关键字暗示在使用用户代理自己的媒体元素控件集时，应隐藏全屏模式控件。

noremoteplayback 关键字暗示当使用用户代理自己的媒体元素控件集时，应隐藏远程播放控件。

### video视频与audio音频取消下载操作

<video src="https://static.deathghost.cn/post/2021/06/11/caret.mp4" controls="controls" controlsList="nodownload"></video>
设置 controlsList="nodownload" 即可。

### video视频禁止全屏显示

<video src="https://static.deathghost.cn/post/2021/06/11/caret.mp4" controls="controls" controlsList="nofullscreen"></video>
设置 controlsList="nofullscreen" 这个，那么全屏操作将会被禁止。

### video 视频封面设置

<video src="https://static.deathghost.cn/post/2021/06/11/caret.mp4" controls="controls" controlsList="nodownload nofullscreen noremoteplayback" poster="https://www.deathghost.cn/public/upload/article/2019/12/15/1576343289760327.jpg" disablePictureInPicture></video>
设置poster属性，添加一张图片资源路径即可。

poster="https://www.deathghost.cn/public/upload/article/2019/12/15/1576343289760327.jpg"

### audio音频与video视频静音

muted="true"

### 禁止video视频画中画功能

<video src="https://static.deathghost.cn/post/2021/06/11/caret.mp4" controls="controls"  disablePictureInPicture></video>
设置 disablePictureInPicture 属性即可。

相关文章：[视频画中画Web API粗略](https://www.deathghost.cn/article/javascript/59)

### video视频设置字幕

<video controls>
  <source src="deathghost.mp4">
  <track src="webvttFile.vtt" default>
</video>
相关文章：[WebVTT文件为HTML视频 video 元素添字幕](https://www.deathghost.cn/article/html/44)

## progress进度条

<progress value="22" max="100"></progress>
这个标签应该很早看到过，HTML中的<progress>元素用来显示一项任务的完成进度，规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下该元素都显示为一个进度条形式。所以实际应用中很少用原始的标签。

## input元素type="color" 拾色器

<input type="color">元素是<input>元素中的一个特定种类，用来创建一个允许用户使用颜色选择器，或输入兼容CSS语法的颜色代码的区域。（不支持Alpha通道）

此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。

<input type="color" value="#ff0000"/>

## input元素type="range" 滑动条

<input>  range 类型的元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。

<div>
	<input type="range" id="volume" name="volume" min="0" max="11">
	<label for="volume">Volume</label>
</div>

<div>
	<input type="range" id="cowbell" name="cowbell" min="0" max="100" value="90" step="10">
	<label for="cowbell">Cowbell</label>
</div>
好了，就到这里，有些元素或属性在Web前端开发中的确很少应用到，UI的不统一性及兼容性问题；但有些属性还是值得了解一下，希望对你有用。

## Related

- Previous: [使用了HTML标签中的 download 属性，却出现了意外](https://www.deathghost.cn/article/html/94)
- Next: [分享URL地址到微信朋友圈没有缩略图？](https://www.deathghost.cn/article/html/125)