一、为什么要新增特性
原因:之前学到的标签有不足,不足以满足后期的需要,因此新增部分特性对以前基础的部分加以改进。而且新增的特性会更加直接、便捷。
二、此处新增了哪些特性
新的标签、新的表单及新的表单元素等等
注意:此处新增的特性都有兼容性问题,IE9以上版本的浏览器才支持
三、新增标签
1、语义化标签
- header 头部标签:定义一个页面或一个区域的头部
- nav 导航标签:定义导航链接
- artical 内容标签
- section 定义文档中的某个文档:可看作一个大的div盒子,但它的范围比div更大,是一个区域
- aside 侧边栏标签
- footer 尾部标签:定义一个页面或一个区域的底部
注意:
a、这种语义化标签主要是针对 搜索引擎 的
b.这些标签可多次使用
c、使用这些标签时,元素必须都转换为块级元素
2、视频标签video
表达效果:在HTML5不使用插件的情况下,支持视频格式文件的播放
video元素支持三种视频格式,分别是:MP4、WebM、Ogg
相较于其他两种格式,MP4格式的视频受限制最少,通用性最好,比较推荐使用MP4格式
<body>
<video src="media/mi.mp4" autoplay="autoplay" controls="controls" loop="loop” muted="muted" poster="media/mi9.jpg"></video>
</body>
其样式为
<style>
video {
width: 100%;
}
</style>
它们语法结构相同,例如:<video src="文件地址” autoplay="autoplay">
width 是设置视频的宽度
autoplay意为自动播放,即点击开页面时便自动播放视频
muted意为静音播放
loop意为循环播放
poster意为等待加载画面,即信号不好的时候展现给我们的画面
controls意为控制标签,即控制播放、暂停的图标
3、音频标签audio
audio元素支持三种视频格式,分别是:MP3、Wav、Ogg
同样的MP3的通用性最强,比较推荐
因为音频标签和视频标签统称为多媒体标签,因此它们二者肯定有着非同一般的关系
音频标签和视频标签的使用语法结构相似,音频标签的语法结构为:
<audio src="文件地址” autoplay="autoplay">
音频标签有以下几个属性:autoplay、contrals、loop、muted
一般情况下muted属性在音频标签里的使用次数为o
3、input表单
优点:相较于之前的input表单元素,新增的更加便捷
验证的时候必须添加表单域
form表单域起到了验证的作用
- 邮箱
- 网址
- 日期
- 时间
- 数字
- 搜索
- 手机号码
- 颜色
当我们点击提交按钮的时候就可以直接进行验证、提交了,非常的方便。而且如果有错误,会直接指出错误所在
时间包括月和周,但time是通称,涵盖所有
<li>月份<input type="month"></li>
<li>周<input type="week"></li>
“search” 意为搜索框 “color” 意为颜色选择表单
4、表单元素
语法和input表单大致相同
<form action="">
<input type="search" name="sear" id="" required="required" placeholder="编程学习" autofocus="autofocus"
autocomplete="off">
<input type="file" multiple="multiple">
<input type="submit" value="提交">
</form>
其样式为
<style>
input::placeholder {
color: rgb(102, 190, 190);
}
</style>
required 属性是必须要的,必填项
placeholder 属性是框内默认值(提示文本)
autofocuse 标签可将鼠标光标自动定到框内
multiple 标签是文件加选
autocomplete 标签是会记录下来搜索历史,默认的是打开的,由于安全性不高,因此我们需要手动关闭 最重要一点:它需要定义名称!!!否则无效
注意!!!
只要操作需要验证就一定需要 form 标签,要记得把代码包含在 form 标签里面
好了,说了那么多了,“实践出真知”赶紧去试验一下,感受敲代码的魅力和快乐吧
如有不足之处,请在评论区指正!