【Day11】HTML5的相关内容

学习内容

• H5概述
• 新增语义化标签
• 视频音频标签
• H5新增表单
• H5新增表单属性

H5概述

一.h5新增
1.语义化标签
2.音频视频标签
3.智能表单

4.canvas画布和svg矢量图

二.常用浏览器
1.chrome 谷歌浏览器
2.opera 欧朋浏览器
3.safari
4.IE edge 浏览器
5.firefox 火狐浏览器

三.基本语法
文件后缀还是.html或者.htm
标签语法

新增语义化标签

section 元素表示页面中的一个内容区块
article 元素表示一块与上下文无关的独立的内容
aside 元素在article之外的,与article内容相关的辅助信息
header 元素表示页面中一个内容区块或整个页面的标题
footer 元素表示页面中一个内容区块或整个页面的脚注
nav 元素表示页面中导航链接部分
figure 元素表示一段独立的流内容，使用figcaption元素为其添加标题 (第一个或最后一个子元素的位置)
main 元素表示页面中的主要的内容 (ie不兼容)

以上都是块元素，正常设置class类型，正常设置css属性
header nav section footer

视频音频标签

视频标签
video 双标签
属性名:
  controls: 显示控件 (播放按钮)
  loop: 循环播放
  muted: 静音播放
  autoplay: 自动播放
  poster: 规定视频加载时显示的图片

音频标签
audio 双标签
属性名:
controls 显示控件 (播放按钮)
loop: 循环播放
muted: 静音播放

H5新增表单

h5新增表单控件
1.type="color" 取色器 HSL颜色表示法 饱和度 色调 亮度
2.type="tel" 唤起拨号键
3.type="search" 具有搜索意义的输入框

4.type="range" 进度条 !

5.type="number" 数值表单 !
min 规定最小数值
max 规定最大数值
value 规定初始数值
step 规定每次跳转数值

6.email 限制用户必须输入email类型

7.url 限制用户必须输入网址类型

8.date 日期类型
9.month 月类型
10.week 周类型
11.time 时间类型
12.datetime-local 本地时间

H5新增表单属性

实现表单历史记录: autocomplete: 开或者关 on (默认) off 结合name属性来使用

required: 验证表单输入是否为空

autofocus: 自动获取焦点

datalist 标签定义下拉列表
option 标签实现选项
通过input标签的 list=datalist的ID 来实现与输入框关联

multiple属性用来输入多组数据，逗号给开多组数据 (常用在邮箱，文件域等)