H5新增标签 : 使用量 / 进度条 / audio / video / embed / iframe / figure 标签等等
H5: H5标签 一般都是在 标准浏览器 和 IE8 之后的版本支持
1️⃣ 新增了很多标签
2️⃣ 支持本地持久化
3️⃣ 废弃了很多能用CSS修饰的标签
4️⃣ 增加了 音频,视频 ,标签
5️⃣ 增加了 Canvas 标签
1️⃣ 使用量标签 ( meter ) :
属性值: 电池的使用量,内容的使用量等等
min: 最小值
max: 最大值
value: 当前值
low: 最小预警值
high: 最高预警值
当浏览器不支持该标签的时候,会显示标签中的文字
例 : <meter min="0" max="100" value="10" low="20" high="80"></meter>
2️⃣ 进度条标签 ( progress ): 支持 min,默认值为0
例 : <progress max="100" value="50">进度条</progress>
3️⃣ 单词内换行( webr ) :
例 :
<p>
<webr></webr>
agdihdijahda kldkw
<webr>k</webr>hjihgg
</p>
4️⃣ ruby标签 ( ruby ) : 拼音,注音,注释等
属性值 :
rt: 要注释的内容
rp: 浏览器不支持当前标签时,会显示的内容
例 :
<ruby>
闲心
<rt>闲心xianxin</rt>
<rp>浏览器不支持该标签</rp>
</ruby>
5️⃣ datalist 标签 : 结合 input 使用
例 :
<form action="###">
<!--input标签的 list 属性与 datalist 的id 配合使用-->
<input type="text" list="show" />
<datalist id="show">
<option value="一支"></option>
<option value="红杏"></option>
<option value="出墙来"></option>
</datalist>
</form>
6️⃣ details 标签 : 自带折叠效果(可以 点击上下 箭头) summary 与 details 是一个组合,summary 是 details 的标题
例 :
<details>
<summary>金钱</summary>
<p>万恶金钱</p>
<p>都砸过来</p>
</details>
7️⃣ audio : 播放音频文件,支持 mp3, ogg, wav 类型的文件
属性值 :
autop: 自动播放 controls: 循环播放 muted: 静音
preload 属性值: 预加载
auto, 默认值, 在网页加载完成之后,就开始加载整个音频文件
metadata: 只加载音乐yuan文件
none: 不加载(减少服务器压力)
注: 写了 autoplay 就不要写 preload 了
例 : <audio src="source 2/一双人-原声带.mp3" autop="autop" controls="controls" preload="metadata"></audio>
audio 结合 source 标签使用
一个 source 代表一个播放资源
source 是用来解决不同浏览器版本支持的音频格式不统一的问题
例 :
<audio autop controls>
<source src="source 2/一双人-原声带.mp3"></source>
<source src="source 2/一双人-原声带.ogg"></source>
<source src="source 2/一双人-原声带.wav"></source>
</audio>
8️⃣ video用户播放视频 : 支持三种格式: mp4, ogg, webm
例 :
<video src="source 2/levelVedio.mp4" controls="controls" width="500px"></video>
<!--不同浏览器下的兼容格式-->
<video width="800" height="">
<source src="source 2/levelVedio.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
</video>
9️⃣ figure注释标签 : 包裹一段独立的内容,一般用来包裹图片,统计类的图表,代码等.(注释的内容写在 figcaption 标签中)
例 :
<figure>阳光明媚</figure>
<img width="300" src="source 2/1.jpg" />
附加 :
1️⃣ input : type (text,password,submit,checkbox,radio,buttom,file,image,reset)
1, email 类型用于应在包含E-mail地址的输入域
例 : <input type="email" />
2, url类型用于应在包含url地址的输入域
例 : <input type="url" />
3 ,颜色盘
例 : <input type="color" />
4, number类型用于应在包含数值的输入域 step 设置步长(每次的变化量)
例 : <input type="number" value="2" step="10" />
5, 滑竿 min: 最小值 max: 最大值 valie: 当前值
例 : <input type="range" min="0" max="100" value="20" />
6, date 选取日月年
例 : <input type="date" />
7, month 选取月年
例 : <input type="month" />
8, week 选取周和年
例 : <input type="week" />
9, time 选取时间(小时和分钟)
例 : <input type="time" />
10, datetime选取时间、日、月、年(UTC时间)
例 : <input type="datetimel" />
11, datetime-local 选取时间、日、月、年(本地时间)
例 : <input type="datetime-local" />
12, required: 修饰文本输入框,文本内容不能为空
例 : <input type="text" required="required" />
13, autofocus 修饰输入框,自动获取焦点
例 : <input type="text" autofocus="autofocus" />
2️⃣ time : 标签语义化
第一种用法 : 修饰时间
例 : <time>15:00</time>喊了一声....
第二种用法 : 内容展示给用户,具体的时间不会显示出来,隐藏的来获取事件
例 : <time datetime="2018-07-23 15:03:06">说点啥了,不知道该说啥</time>
3️⃣ iframe :在当期的网页中展示另一个网页,被称为网页中的网页
例 : <iframe src="http://www.baidu.com" width="500" height="500"></iframe>
4️⃣ embed: 用来嵌入对应的一些插件,比如flash插件 等,注意修改对应的type类型
例 : <embed src="source 2/levelVedio.mp4" type="" width="500" height="500"/></embed>