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表示预加载元数据(比如视频)

代码展示

javascript 复制代码

<!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：最多输入的内容（自动聚焦）

javascript// 复制代码

<!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：合并所有连续的空白（但保留换行），允许单词超屏时自动换行

javascript// 复制代码

<!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  hywulin
          hehojj    whjkcfhjjhgddfg
      </div>
    
</body>
</html>

会发现空格符与换行符出现了合并现象变成了空白符。

为什么会自动换行呢？

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

css属性--text--overflow

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

 clip：溢出的内容直接裁剪掉（字符可能会显示不完整）

 ellipsis：溢出那行的结尾处用省略号表示

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

◼ 常见的是将white-space、text-overflow、overflow一起使用：

javascript// 复制代码

<!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;

}

设置成这样会进行滚动裁剪，但我们在开发中不会用这一种裁剪，单词显示不全

我们使用ellipsis属性

小编这篇先写到这里了，更多关注HTML语义化元素全套！！！