HTML5- 前端学习02

  HTML5的概念与定义

 HTML5是一个新版本的 HTML 语言，定义了新的标签、特性和属性.HTML5有更大的技术集，允许更多样化和强大的网站和应用程序。增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。这个集合有时称为HTML5和朋友，通常缩写为HTML5

1.HTML5新增标签

• <header>：头部标签
• <nav>：导航标签
• <article>：内容标签
• <section>：定义文档某个区域
• <asider>：侧边栏标签
• <footer>：尾部标签

 

新增的语义标签主要是针对搜索器。还要用户阅读。不像以前一样前端开局div，结束也是div。手机端可以使用，但是浏览器IE9以上才支持。需要把语义化标签都转换为块级元素，个人建议如果考虑兼容性还是不要使用了。

2新增视频标签

<vedio>  标签， 目前支持三种格式， ogg， webm， mp4,前两种存在兼容性问题，但是mp4所有浏览器都支持。

属性

属性	值	备注
autoplay	autoplay	视频自动播放（谷歌浏览器需加muted才有效）
controls	controls	显示视频的控制器
width	像素	宽度
height	像素	高度
loop	loop	循环播放
preload	auto/none	是否预加载，如果一开始就播放就没要设置了
src	ulr	视频的地址
poster	img url	加载图片的地址
muted	muted	静音

 属性ie6的语法属性与值相同时可以，可以简写：controls="controls"=>controls.

 <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls autoplay muted loop poster="./img.png">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
 </video>

其中的<source src="" type="">标签是考虑视频格式的兼容性，如果一个支持就放第一个，否则播放下一个。

3音频标签

<audio></audio> 目前支持ogg wav mp3, 所有浏览支持MP3，其他存在兼容性问题

属性

属性	值	备注
autoplay	autoplay	视频自动播放（谷歌浏览器无效）
controls	controls	显示视频的控制器
loop	loop	循环播放
src	ulr	视频的地址

 4  input 属性与类型

  新增类型

属性	备注
type="email"	输入必须是邮箱地址
type="url"	输入必须是url地址
type="date"	日期拾取器
type="time"	时间拾取器
type="month"	年月拾取器
type="week"	周拾取器
type="number"	输入必须是数字
type="tel"	输入必须是数字手机号码
type="serch"	输入框，右边有清除按钮down变成search
type="color"	颜色拾取器

新增属性

属性	值	备注
required	required	表单必须有内容，不能为空
paceleholder	提示文本	当vulue为空时显示的提示文字
autocomplete	off/on	浏览器记录表元素的内容 条件： 1 autocomplete="on" 2 表单的name=""不能空 3 表单提交成功
multiple	multiple	可以选择多个文件：type="file"时可以上传多个图片