HTML5 常用新增元素和属性

一、什么是 HTML5

HTML5 的概念与定义

• 定义：

  HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML。

• 两个概念：

  • 是一个新版本的 HTML 语言，定义了新的标签、特性和属性

  • 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript，这也是广义上的 HTML5

HTML5 拓展了哪些内容

• 语义化标签

• 本地存储

• 兼容特性

• 2D、3D

• 动画、过渡

• CSS3 特性

• 性能与集成

HTML5 的优势：

• 提高可用性和改进用户的友好体验

• 更好的语义化标签

• 可以给站点带来更多的多媒体元素(视频和音频)

• 可以很好的替代FLASH和Silverlight

• 当涉及到网站的抓取和索引的时候，对于SEO很友好

• 将被大量应用于移动应用程序和游戏

• 可移植性好

HTML5 的劣势：

• 该标准并未能很好的被PC端浏览器所支持
• HTML5 的新增特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持

二、 HTML5 新增的语义化标签

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。

新增的语义化标签：

• header — 头部标签

• nav — 导航标签

• article — 内容标签

• section — 块级标签

• aside — 侧边栏标签

• footer — 尾部标签
  

注意：

• 语义化标签主要针对搜索引擎

• 新标签在页面中可以使用一次或者多次

• 在 IE9 浏览器中，需要把这些语义化标签都转换为块级元素

• 语义化标签，在移动端支持比较友好，移动端更喜欢使用这些标签

三、HTML5 新增的多媒体标签

新增的多媒体标签有两个：

• 音频 – audio

• 视频 – video

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。

1. audio 音频标签

• 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放

• 但是，播放格式是有限的。目前，<audio> 元素支持三种音频格式文件: MP3，Wav 和 Ogg。
  

• 语法：

  <audio controls="controls">
  	<source src="horse.ogg" type="audio/ogg">
  	<source src="horse.mp3" type="audio/mpeg">
  	您的浏览器不支持 audio 元素。
  </audio>
  

• 说明：

  • control 属性供添加播放、暂停和音量控件。

  • src 属性指定要播放的音频的URL。

  • 在 <audio> 与 </audio> 之间需要插入浏览器不支持的 <audio> 元素的提示文本 。

  • 因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件。

  • <audio> 元素允许使用多个 <source> 元素， <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

• 其他属性：

  • autoplay

    音频自动播放，在 chrome 浏览器中已经禁用了 autoplay 属性。

  • loop

    循环播放音频

2. video 视频标签

• 当前， <video> 元素支持三种视频格式： MP4，WebM 和 Ogg。
  

  • MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

  • WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

  • Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

• 语法

  <video width="320" height="240" controls>
  	<source src="movie.mp4" type="video/mp4">
  	<source src="movie.ogg" type="video/ogg">
  	您的浏览器不支持 video 标签。
  </video>
  

• 说明

  • <video> 元素提供了 width 和 height 属性控制视频的尺寸。如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。

• 属性
  

• 多媒体标签总结

  • 音频标签与视频标签使用基本一致

  • 多媒体标签在不同浏览器下情况不同，存在兼容性问题

  • 谷歌浏览器把音频和视频标签的自动播放都禁止了

  • 谷歌浏览器中视频添加 muted 标签可以自动播放，音频不可以（可以通过JavaScript解决）

  • 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

四、HTML5 新增的 input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

类型	描述	示例
color	从拾色器中选择一个颜色	选择你喜欢的颜色: <input type=“color” name=“favcolor”>
date	从日期选择器选择一个日期	生日: <input type=“date” name=“bday”>
time	选择一个时间	选择时间: <input type=“time” name=“usr_time”>
email	会自动验证 email 域的值是否合法有效	E-mail: <input type=“email” name=“email”>
month	定义月与年 (无时区)	生日 (月和年): <input type=“month” name=“bdaymonth”>
week	定义周和年	选择周: <input type=“week” name=“week_year”>
url	提交表单时，会自动验证 url 域的值	添加您的主页:
number	限制用户输入必须为数字类型	数量 ( 1 到 5 之间 ): <input type=“number” name=“quantity” min=“1” max=“5”>
tel	输入电话号码	电话号码: <input type=“tel” name=“usrtel”>
search	用于搜索域，比如站点搜索或 Google 搜索	earch Google: <input type=“search” name=“googlesearch”>

使用 number 时，还可以使用下面的属性：

• disabled：规定输入字段是禁用的

• max：规定允许的最大值

• maxlength：规定输入字段的最大字符长度

• min：规定允许的最小值

• pattern：规定用于验证输入字段的模式

• readonly：规定输入字段的值无法修改

• required：规定输入字段的值是必需的

• size：规定输入字段中的可见字符数

• step：规定输入字段的合法数字间隔

• value：规定输入字段的默认值

五、HTML5 新增的表单属性

• <form> / <input> 属性 autocomplete

  • autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

  • 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

  • autocomplete 属性有可能在 <form> 元素中是开启的，而在 <input> 元素中是关闭的。

  • autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text、search、url、telephone、email、password、datepickers、range 以及 color。

  • <input> 标签必须有 name 属性并且提交成功 autocomplete 属性才有用。

  • 示例

    <form action="" 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>
    

• <input> 属性 autofocus

  • autofocus 属性规定在页面加载完成后，域自动地获得焦点。

  • 示例

    <form action="" autocomplete="on">
    	First name: <input type="text" name="fname" autofocus="autofocus"><br>
    	Last name: <input type="text" name="lname"><br>
    	<input type="submit">
    </form>
    

• <input> 属性 form

  • form 属性规定输入域所属的一个或多个表单。

  • 如需引用一个以上的表单，使用空格分隔。

  • 示例

    <form action="" id="form1">
    	First name: <input type="text" name="fname"><br>
    	<input type="submit" value="提交">
    </form>
    
    <!-- 位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分) -->
    Last name: <input type="text" name="lname" form="form1">
    

• <input> 属性 required

  • 表示当前<input>标签内容不能为空。

  • required 属性适用于以下类型的 <input> 标签：text、search、url、telephone、email、password、date pickers、number、checkbox、radio 以及 file。

  • 示例

    <form action="">
    	Username: <input type="text" name="usrname" required="required">
    	<input type="submit" value="提交">
    </form>
    

• <input> 属性 multiple

  • multiple 属性规定 <input> 元素中可选择多个值。

  • multiple 属性适用于以下类型的 <input> 标签：email 和 file。

  • 示例

    <form action="">
    	选择图片: <input type="file" name="img" multiple="multiple">
    	<input type="submit">
    </form>
    

• <input> 属性 placeholder

  • placeholder 属性提供一种提示（hint），描述输入域所期待的值，简短的提示在用户输入值前会显示在输入域上。

  • placeholder 属性适用于以下类型的 标签：text、 search、 url、 telephone、email 以及 password。

  • 如果 <input> 有默认值，placeholder 会失去作用。

  • 示例

    <form action="">
    	<input type="text" name="fname" placeholder="First name"><br>
    	<input type="text" name="lname" value="Lname" placeholder="Last name"><br>
    	<input type="submit" value="提交">
    </form>
    

  • 修改placeholder里面的字体颜色

    input::placeholder {
    	color: #fcfcfc;
    }