HTML元素语义化（二）及补充

文章目录

HTML5新增元素 - audio
- **常见属性**
- - 代码展示
audio支持的音频格式
input元素的扩展内容
新增全局属性data–
css属性 –white–space
css属性–text–overflow

HTML5新增元素 - audio

HTML 元素用于在文档中嵌入音频内容, 和video的用法非常类似
在这里插入图片描述

常见属性

常见属性值的方式属性作用

src URL地址音频播放的URL地址

controls Boolean类型是否显示控制栏,包括音量，进度，暂停/恢复播放。

autoplay Boolean类型，是否音频自动播放(某些浏览器需要添加muted, 比如Chrome)

muted Boolean类型是否静音播放

preload none/metadata/auto 是否需要预加载视频. metadata表示预加载元数据(比如视频)

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title><style>    </style></head><body>      <audio src="./assets/yhbk.mp3" controls></audio>    </body></html>

在这里插入图片描述

在开发中，开发人员回自己开发这个东西，默认的不好看，通过JS对某一个按钮/功能进行监听

audio支持的音频格式

每个音频都会有自己的格式, 浏览器的audio并非支持所有的视频格式

具体的支持的格式可以通过下面的链接查看

https://developer.mozilla.org/en–US/docs/Web/Media/Formats/Audio_codecs

在这里插入图片描述
在元素中间的内容，是针对浏览器不支持此元素时候的降级处理。

input元素的扩展内容

◼HTML5对input元素也进行了扩展：

placeholder：输入框的占位文字
multiple：多个值（属于表单）
autofocus：最多输入的内容（自动聚焦）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style></style>
</head>
<body><input type="text"placeholder="zhanwei"><select multiple><option value="">apples</option><option value="">barneer</option><option value="">orangge</option></select></body>
</html>

在这里插入图片描述

输入文本，占位文字自动取消

多选multiple

◼ 另外对于input的type值也有很多扩展：
 date
 time
 number
 tel
 color
 email
 等等…
◼ 查看MDN文档:
 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

新增全局属性data–

在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:

data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到；
通常用于HTML和JavaScript数据之间的传递；
在这里插入图片描述
name，age定义在HTML文档中，到时候JS可以进行获取这个数据。
能不能把这些数据放置在JS当中呢，在公司中一般会在服务器下载到本地，然后通过for循环遍历在文档中，直接调用进行使用。否则还得放置在文档中，操作性变复杂。

◼ 在小程序中, 就是通过data-来传递数据的, 所以该全局属性必须要掌握

css属性 –white–space

white-space用于设置空白处理和换行规则
◼ normal：合并所有连续的空白，允许单词超屏时自动换行
◼ nowrap：合并所有连续的空白，不允许单词超屏时自动换行
◼ pre：阻止合并所有连续的空白，不允许单词超屏时自动换行
◼ pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行
◼ pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>.box {width: 200px;background-color: orange;}
</style>
</head>
<body><div class="box">wulin  kebi  hywulinhehojj    whjkcfhjjhgddfg</div></body>
</html>

在这里插入图片描述
会发现空格符与换行符出现了合并现象变成了空白符。
为什么会自动换行呢？

这个因为white–space属性normal进行了默认合并

css属性–text–overflow

◼text-overflow通常用来设置文字溢出时的行为

 clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
 ellipsis：溢出那行的结尾处用省略号表示

◼ text-overflow生效的前提是overflow不为visible

◼ 常见的是将white-space、text-overflow、overflow一起使用：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>.box {overflow: visible;white-space: nowrap;width: 150px;background-color: #f00;}
</style>
</head>
<body><div class="box">mu name is wulin age is 21 </div></body>
</html>

在这里插入图片描述
如果设置为text–overflow将会把多余的进行隐藏掉，如果设置为auto会出现滚动条相当于scroll
.box {
overflow: scroll;
white-space: nowrap;
width: 150px;
background-color: #f00;
text-align: clip;
}