第一讲 HTML5新增标签

前言:什么是html5？

• HTML5是超文本标记语言的最新版本，也就是描述网页的代码，html5实际上是三种代码形式，首先是HTML提供结构，其次是层叠样式表负责网站的样式和布局，最后是JavaScript是给网站添加动态功能。
• HTML5是一个新的网络标准，现在仍处于发展阶段。HTML5是构建Web内容的一种语言描述方式，H5是指第5代HTML，也指用H5语言制作的一切数字产品。是构建以及呈现互联网内容的一种语言方式。

一、HTML5的新特征

HTML5的新特征
语义	多媒体
离线存储	三维、图形与特效
设备通用	性能与集成
连接	CSS3

1、语义化标签

标签：

<header>头标记</header>

<main>主体标记</main>

<nav>导航标记</nav>

<footer>底部标记</footer>

<section>节、部分</section>

<aside>侧边栏</aside>

<article>节</article>

2、 结构性标签

• <details></details>

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

 注意：目前只有 Chrome 和 Safari 6 支持 <details> 标签。

• <figure></figure>标签规定独立的流内容（图像、图表、照片、代码等等）

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

用作文档中插图的图像，带有一个标题：
<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

 注意：figure 元素的内容应该与主内容不相关，但如果被删除，则不应对文档流产生影响。

• <time> 标签 <time> 标签

定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

•  <progress> 标签 <progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）

<progress value="22" max="100">

</progress>

注意：Internet Explorer 9 以及更早的版本不支持 <progress> 标签。

• <meter> 标签 Value  如果标签内没有数字，那么标量的实际值就是0 Max Min

<p>
       Christmas is in
       <meter value ="30" min="1" max="366" title="days">
       30 days!
</p>

 注意：<meter>标签中的内容可以不包含任何数字，这时最大值会被认为是1；

3、表单标签

1.  <datalist > </datalist>

<input list="browsers">
    <datalist id="browsers">
    <option value="Safari"> </option>
    <option value="Internet Explorer"></option>	
    <option value="Opera"> </option>
    <option value="Firefox"> </option>
</datalist>

注意：datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。

（1）Input 类型 - email

• email 类型用于应该包含 e-mail 地址的输入域。 在提交表单时，会自动验证 email 域的

邮箱 <input type="email">

（2）Input 类型 - URL

• url 类型用于应该包含 URL 地址的输入域。 在提交表单时，会自动验证 url 域的值。 

网址: <input type="url" name="user_url" />

（3）Input 类型 -  number

number 类型用于应该包含数值的输入域。 

数字：<input type="number" name="points" min="1" max="10" />

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值       有些浏览器不兼容

 （4）Input 类型 -  range

range 类型用于应该包含一定范围内数字值的滑动条。 range 类型显示为滑动条。

滑动条：<input type="range" name="points" min="1" max="10" />

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	number	规定默认值

（5）Input 类型 - Date Pickers（日期选择器）

date - 选取日、月、年<input type="date">

month - 选取月、年 <input type="month">

week - 选取周和年<input type="week">

time - 选取时间（小时和分钟） <input type="time">

datetime - 选取时间、日、月、年（UTC 时间）<input type="datetime">

datetime-local - 选取时间、日、月、年（本地时间）<input type="datetime-local">

<input type="date" name="user_date" />

(5) Input 类型 - search（搜索）

search 类型用于搜索域，比如站点搜索或 Google 搜索。 search 域显示为常规的文本域。

搜索域 ：<input type="search">

(6)Input 类型 - color（颜色）

默认颜色    value=“#ff0000”<input type="color" value="#0000ff">

(7)input 类型 ---tel（电话号码) telphone      定义用于输入电话号码的字段。

(8)autofocus 属性

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

注意：autofocus 属性适用于所有 <input> 标签的类型。

（9）placeholder 属性 placeholder 属性提供一种提示（hint），描述输入域所期待的值。

<input type="search" name="user_search"  placeholder="Search" />

（10）required 属性 required 属性规定必须在提交之前填写输入域（不能为空）。

Name: <input type="text" name="usr_name" required="required" />

4、多媒体（音频和视频）

• <audio src="sound.mp3" controls></audio>音频
• <video src="movie.webm" autoplay controls></video>视频

（1）视频兼容性

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

（2）<video> 标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	load	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。
poster	图片路径	为视频设置一个“相框默认图片”性质的背景图片
muted	muted	静音