HTML5笔记03

文档类型设定

• document
  -HTML：sublime输入 html：4s
  -XHTML：sublime输入 html：xt
  -HTML5：sublime输入html：5

常用新标签

• header ：定义文档的页眉 头部
• nav ： 定义导航链接的部分
• footer：定义文档或节的页脚 底部
• article：定义文章
• section：定义文档中的节（section、区段）
• aside：定义其所处内容之外的内容 侧边
• datalist 标签定义选项列表。请与 input 元素配合使用该元素

<input type="text" value="输入明星" list="star"/> <!-- input里面用 list --> 
<datalist id="star"> <!-- datalist 里面用 id 来实现和 input 链接 --> 
	<option>刘德华</option> 
	<option>刘若英</option> 
	<option>刘晓庆</option> 
	<option>郭富城</option> 
	<option>张学友</option> 
	<option>郭郭</option> 
</datalist>

• fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<fieldset> 
	<legend>用户登录</legend> 标题 
	用户名: <input type="text"><br /><br /> 
	密 码: <input type="password">
 </fieldset>

新增的input type属性值

类型	含义
email	输入邮箱格式
tel	输入手机号码格式
url	输入url格式
number	输入数字格式
search	搜索框（体现语义化）
range	自由拖动滑块
time	小时分钟
date	年月日
datetime	时间
month	月年
week	星期 年

常用新属性

多媒体标签

• audio：播放音频
• video：播放视频

多谋体audio

<!--<audio src="bgsound.mp3" autoplay="autoplay" controls loop="-1"/></audio> -->
为了浏览器兼容， 我们需要做三种声音文件 ogg mp3 wav 
<audio controls autoplay> 
	 <source src="bgsound.mp3" />
	 <source src="music.ogg" />
	  您的浏览器不支持播放声音 
</audio>

autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环
多媒体 video

<!-- <video src="mp4.mp4" autoplay controls></video> --> 
我们的视频支持 ogg mp4 webM 三种视频格式
 <video controls autoplay> 
	 <source src="mp4.mp4"/> 
	 <source src="movie04.ogg"/> 
	 您的浏览器不支持视频播放
 </video>