1 -【 HTML 】- 3 HTML5 新标签与特性

1 文档类型设定

• document
  • HTML:
  • XHTML:
  • HTML5

2 字符设定

• <meta http-equiv="charset" content="utf-8">：HTML与XHTML中建议这样去写

• <meta charset="utf-8">：HTML5的标签中建议这样去写

3 常用新标签

• header：定义文档的页眉
• nav：定义导航链接的部分
• footer：定义文档或节的页脚
• article：标签规定独立的自包含内容
• section：定义文档中的节（section、区段）
• aside：定义其所处内容之外的内容

4 常用新属性

属性****	用法****	含义****
placeholder****		占位符提供可描述输入字段预期值的提示信息
autofocus****		规定当页面加载时 input 元素应该自动获得焦点
multiple****		多文件上传
autocomplete****		规定表单是否应该启用自动完成功能
required****		必填项
accesskey****		规定**（使元素获得焦点）元素的快捷键

5 新增的type属性值

类型****	使用示例****	含义****
email****		输入邮箱格式
tel****		输入手机号码格式
url****		输入url格式
number****		输入数字格式
search****		搜索框（体现语义化）
range****		*拖动滑块
time****
date****
datetime****
month****
week****

6 综合案例

<form action="">
  <fieldset>
    <legend>学生档案</legend>
    <label for="userName">姓名:</label>
    <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
    <label for="userPhone">手机号码:</label>
    <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
    <label for="email">邮箱地址:</label>
    <input type="email" required name="email" id="email"><br>
    <label for="collage">所属学院:</label>
    <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
    <datalist id="cList">
      <option value="前端与移动开发学院"></option>
      <option value="java学院"></option>
      <option value="c++学院"></option>
    </datalist><br>
    <label for="score">入学成绩:</label>
    <input type="number" max="100" min="0" value="0" id="score"><br>
    <label for="level">基础水平:</label>
    <meter id="level" max="100" min="0" low="59" high="90"></meter><br>
    <label for="inTime">入学日期:</label>
    <input type="date" id="inTime" name="inTime"><br>
    <label for="leaveTime">毕业日期:</label>
    <input type="date" id="leaveTime" name="leaveTime"><br>
    <input type="submit">
  </fieldset>
</form>

7 多媒体标签

• embed：标签定义嵌入的内容

• audio：播放音频

• video：播放视频

7.1 多媒体 embed

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

优酷，土豆，爱奇艺，腾讯、乐视等等

1. 先上传
2. 在分享

7.2 多媒体 audio

HTML5通过<audio>标签来解决音频播放的问题。

使用相当简单，如下图所示

并且可以通过附加属性可以更友好控制音频的播放，如：

• autoplay 自动播放
• controls 是否显不默认播放控件
• loop 循环播放

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考

多浏览器支持的方案，如下图

7.3 多媒体 video

HTML5通过<video>标签来解决音频播放的问题。

同音频播放一样，<video>使用也相当简单，如下图

同样，通过附加属性可以更友好的控制视频的播放

• autoplay 自动播放
• controls 是否显示默认播放控件
• loop 循环播放
• width 设置播放窗口宽度
• height 设置播放窗口的高度

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考

多浏览器支持的方案，如下图