为什么学习HTML5
a.因为语义化标签的出现网页结构更加清晰
b.因为多媒体的出现,让网页播放音频和视频没有了依赖
c.因为CSS3的出现,让页面变得更加炫酷和多彩
d.因为新的API的出现,使的开发更加高效
什么是语义化标签
所谓的语义化标签是指用正确的标签使用正确的事情
HTML5的新特性
1.semantics(语义化标签)
2.offline & storage(离线和存储)
3.Device Access(设备访问)
4.connectivity(链接)
5.multimedia(多媒体)
6.3D,Graphics & Effects(3D 特效)
7.Performance & Integration(性能和集成)
8.CSS3 & styling(CSS3和样式)
常用的语义化标签:
header 头部
nav 导航
main 主要区域
article 文章
aside 侧边栏
section 独立的节或段
footer 底部
语义化标签的优点
1.有利于开发者维护和修改网站(层次清晰简单明了)
2.有利于搜索引擎收录网站
3.有利于残障人士更好的获取网站信息
HTML5 特性之 增强的表单
表单输入类型:
fieldset 边框
legend 印在边框上的字体
email 邮箱 邮箱 必须填写符合邮箱格式的字符串 也就是必须携带@符号
如果输入框中没有内容是不会进行验证的
URL 网址 URL 必须带有http或https的协议前缀
如果输入框中没有内容是不会进行验证的
search 搜索 搜索 和type=text不同的一点是当输入内容之后又清除按钮
tel 电话 电话 如果在手机上当输入框有焦点的时候回自动弹出数字键盘
number 数字 数字 数字有增减按钮 最大值 max 最小值 min 当前值 value 步进step
range 范围(滑块) 范围 范围有增减按钮 最大值 max 最小值 min 当前值 value 步进step
time 时间 时间 有小时和分钟的显示 还有增减按钮
date 日期 日期 日期和时间不同的地方 就是日期有日期选择空间 week month datetime(现在已经没有浏览器支持了) datetime-local
color 颜色 颜色 要给颜色一个默认值 希望写成完整的十六进制
新增表单输入属性(重点):
placeholder 占位符 告诉用户你将要在输入框中输入什么样的内容
autofocus 自动聚焦 当打开页面 输入光标会自动聚焦到该输入框
autocomplete 自动完成 自动提示填充表单 默认是打开的autocomplete="on" autocomplete="off"
required 必填 要求用户必须填写如果不填写 会报告错误
pattern 自定义验证 使用正则表达式进行自定义验证
multiple 多文件上传 当文件上传的时候可以选择多个文件 只适用于type=file这个类型
新增表单元素
datalist 数据列表
表单事件及方法
onchange 就是当输入框的值变化的时候触发事件
oninput 当元素获得用户输入时运行的脚本(当用户输入的时候触发该事件)
多媒体-音频
属性
1.controls 显示控制菜单
2.autoplay 自动播放
3.loop 循环播放
4.source 标签就是用来给音频或视频提供不同的格式的标签
<body>
音频资源设计给的 自己用格式工厂转换
<audio src="文件路径.mp3" controls autoplay loop>
您的浏览器不支持audio标签
<source src="文件路径.mp3">
<source src="文件路径.ogg">
<source src="文件路径.wav">
</audio>
</body>
```
###### 多媒体-视频
```
<body>
<!--注意:用webstorm如果想拉动进度条是不行的 就不要用webstorm打开-->
<!--原因:webstorm服务器性能太弱-->
<video controls autoplay loop>
<source src="下载%20(1).mp4"/>
<source src="下载%20(1).ogg"/>
<source src="下载%20(1).webm"/>
</video>
</body>
```