本文介绍了HTML5的基本概念、语法规范和主要新特性，包括新增的语义标签，如<nav>, <article>, <aside>等，改进的表单元素与属性，如email, tel, range等，以及多媒体处理，如<audio>和<video>标签。HTML5旨在提升网页的结构化和交互性，提供了更好的浏览器兼容性和用户体验。"
14229891,1487993,UVA 10081 - 紧凑单词动态规划解法,"['动态规划', '算法', '编程竞赛', '数组处理']
一、认识 HTML5
前面我们学习的html 是什么？ Html4.0
网页开发： html 结构 4.0
Css ->样式 2.0
Js 行为 用户交互
HTML5 是html4.0 升级版
结构 Html5 、样式 css3 、行为: API 都有所增强
HTML5 并不仅仅只是做为HTML 标记语言的一个最新版本，更重要的是
它制定了Web 应用开发的一系列标准，成为第一个将Web 做为应用开发平台的
HTML 语言。
HTML5 定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，
可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定
位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合
Canvas 我们可开发网页版游戏。
广义概念：HTML5 代表浏览器端技术的一个发展阶段。在这个阶段，浏
览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，
Javascript，API 在内的一套技术组合
H5 范称
HTML + CSS3 + JS
语法规范
HTML5 在语法规范上也做了比较大的调整，去除了许多冗余的内容，书
写规则更加简洁、清晰。
见代码实例
特点：
1、更简洁
2、更宽松
单标签不用写关闭符号双标签省略结束标签
html、head、body、colgroup、tbody 可以完全省略
实际开发中应规范书写，不建议太随意 ！
W3C 验证地址
二、语义标签
语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表
<h1> ~ <h6>表示一系列标题等，在此基础上HTML5 增加了大量更有意
义的语义标签，更有利于搜索引擎或辅助设备理解HTML 页面内容。
传统的做法我们或许通过增加类名如class=“header”、class=“footer”， 使
HTML 页面具有语义性，但是不具有通用性。
HTML5 则是通过新增语义标签的形式来解决这个问题，例如
<header></header>、<footer></footer>等，这样就可以使其具有通用性。 此章
节学习目的为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中
能够合理使用标签。传统网页布局：
<!-- 头部 -->
<div class="header">
<ul class="nav"></ul>
</div>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<div class="article"></div>
<!-- 侧边栏 -->
<div class="aside"></div>
</div>
<!-- 底部 -->
<div class="footer"></div>
H5 经典网页布局:
<!-- 头部-->
<head>
<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</div>
<!-- 底部 -->
<footer></footer>
常用新语义标签
<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li 做个比较
<mark> 表示标记(带用“UI”，不怎么用)
<progress> 表示进度 (带用“UI”，不怎么用)
<time> 表示日期
本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使
用时除了在HTML 结构上需要注意外，其它和普通标签的使用无任何差别，可以
理解成<div class="nav"> 相当于 <nav>。不要好奇，它只是一个标签！
尽量避免全局使用header、footer、aside 等语义标签。
三、表单
伴随着互联网富应用以及移动开发的兴起，传统的Web 表单已经越来越不能满足开发的需求，所以HTML5 在Web 表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
此章节学习目的，了解HTML5 表单的新增的特性，以及PC 和移动设备间的差 异，其兼容性较差。
输入类型 (表单类型，表单元素，表单属性,表单事件.)
email 输入email 格式
tel 手机号码
url 只能输入url 格式
number 只能输入数字
search 搜索框
range 范围 滑动条
color 拾色器
time 时间
date 日期 不是绝对的
datetime 时间日期
month 月份
week 星期
部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当
中可选择性的使用。
表单元素（标签）
<datalist> 数据列表与input 配合使用
<input type=”text” list=”data”>
<datalist id=”data”>
<option>男</option>
<option>女</option>
<option>不详</option>
</datalist>
<keygen> 生成加密字符串
keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，
会生成两个键， 一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到
服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<output> 不可当做数据提交？
<meter> 表示度量器 不建议用作进度条
<progress></progress>
<meter value="81" min="0" max="100" low="60" high="80" />
Max-width
Min-width
表单属性：
placeholder 占位符
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭验证，可用于标签
required 必填项
表单事件
pattern 正则表达式 验证表单
手机号
:<input type="tel" name="tel" required="required"
pattern="^(\+86)?1[3,5,8](\d{9})$">
应用于提交按钮上，如：<input type="submit" formaction="xxx.php">
oninput 用户输入内容时触发，可用于移动端输入字数统计
oninvalid 验证不通过时触发
案例
四、多媒体
在HTML5 之前，在网页上播放音频/视频的通用方法是利用Flash 来播
放， 但是大多情况下，并非所有用户的浏览器都安装了Flash 插件，由此使得
处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash 插件。
Media palyer
此章节学习目的，了解如何通过 HTML5 播放音频/视频，以及针对不同
浏览器所支持的格式，做多浏览器兼容处理。
音频
HTML5 通过<audio>标签来解决音频播放的问题。使用相当简单，如下图所示
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
preload 预加载 同时设置autoplay 时些属性失效
由于版权等原因，不同的浏览器可支持播放的格式是不一样的
目前 audio音频支持三种音频格式
多浏览器支持的方案，如下图
视频
HTML5 通过<video>标签来解决音频播放的问题
同样，通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
preload 预加载，同时设置了 autoplay，此属性将失效
width 设置播放窗口宽度
height 设置播放窗口的高度
由于版权等原因，不同的浏览器可支持播放的格式是不一样的
当前 video视频支持三种格式
多浏览器支持的方案，如下图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
