H5学习---html，css---H5语意标签,新增表单元素

语义标签H5

内容类型（ContentType）

HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"。

DOCTYPE声明

不区分大小写

指定字符集编码

meta charset="utf-8" 

可省略标记的元素

不允许写结束表标记的元素：br,col,enbed,hr,img,input,link,meta
可以写省略结束标记的元素：li,dt,dd,p,option,colgruop,thead,tbody,tfoot,tr,td,th
可以省略全部标记的元素：html,head,body,colgruop,tbody

省略引号

属性值可以使用双引号，也可以用单引号。

*** HTML5新增语义标签

section元素 表示页面中的一个区块
article元素 表示一块与上下文无关的独立的内容（用来代表文章）
aside元素 在article之外的，与article内容相关的辅助信息（一般指侧边栏）
header元素 表示页面中一个内容区块或整个页面的标题
ooter元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分（用这个标签可以直接写li）
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容(ie不兼容)
hgroup标题的一个分组
mark定义高亮显示的文本
time时间
兼容低版本浏览器： <script src=“html5.js”></script>

音频视频

1.video元素 定义视频

<video src="movie.ogg">Video元素</video>

2.audio元素 定义音频

<audio src="someaduio.wav">Audio元素</audio>
controls属性：向用户显示控件，比如播放按钮。控件可能不一样
autoplay属性：视频在就绪后马上播放。谷歌屏蔽了该功能
loop属性：重复播放
muted属性：静音
poster属性：规定视频正在加载时显示的图像，直到用户点击播放按钮

3.定义媒介资源,写在video里面

<video>
	<source src="myvideo.mp4" type="video/mp4"></source>
	<source src="myvideo.ogv" type="video/ogg"></source>
	<source src="myvideo.webm" type="video/webm"></source>
</video>
video支持的格式：mp4.ogg.webm(每个浏览器兼容性不同)
audio支持的格式：mp3.ogg
规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择

H5新增的表单元素

1.input标签

type=“email” email电子邮件类型
type=“url” url地址类型
type=“range” 滑动条
type=“number”数字类型
type=“search” 搜索意义的框
type=“color” 颜色选择
以下有兼容问题：
type=“time” 时间类型
type=“month” 月类型
type=“week” 周类型
type=“datetime-local” 本地时间
type=“date”日期类型

2.output

HTML5新增属性

1.list

<input type="url" list="url-list"/>
<datalist id="url-list">
	<option value="https://www.baidu.com" label="百度"/>
	<option value="https://www.google.com" label="谷歌"/>
	<option value="https://www.jd.com" label="京东"/>
</datalist>

2.placeholder属性：

文本框处于未输入状态时的输入提示

3.autofocus属性：

控件自动获得焦点

4.required属性：

验证输入不能为空

5.autocomplete属性

<form action="" method="get" autocomplete="on">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="email" name="email" autocomplete="off"/><br />
  <input type="submit" />
</form>

6.pattern正则判断

<input type="text" pattern="[0-9][A-Z]{3}"/>

7.min,max,step

min最小值
max最大值
step步长

8.取消验证novalidate

可以对form表单添加novalidate属性,即使子元素添加了required属性
也不会进行验证

9.multiple

可以上传多个文件
也可以输入多个值,用逗号分隔