1 HTML5概述
html4.01和xhtml1.0的内容见这篇文章。如果完全不知html建议先去看看那篇文章。
我们先看看html5对比html4和xhtml1.0有哪些部分的增强。完整的文档参考MDN。增强了下面几大块。
- HTML4.01、XHTML1.0中定义了很多语义的标签，div、p、ul、ol等等。
HTML5增加了很多语义的标签、表单标签。具体见下一节。 - 连通性
web socket ， 服务器和浏览器之间能够通过web socket（网络套接字）来保持持久联通了。
之前只能使用http协议通信，而http协议是无连接的。 - 离线 & 存储：
离线：我们之前的网页，一旦脱机（没网）就不能访问了。但是，我们急着上飞机，在空中没有wifi，能 不能在机场提前把一个网站的所有网页都离线保存呢？能不能在飞机上继续阅读刚才保存的离线网站呢？HTML5给了我们新的API。
存储：我们之前开发程序，所有的内容持久化都是通过MySQL数据库，所谓的持久化指的就是电脑断电、关机都不丢失的数据。之前我们是无法通过JS来操作数据库的，但是HTML5中提供了JS能够操作的迷你数据库，叫做localStorage、session storage。 - 多媒体
音频视频标签，audio、video 标签。 - 3D, 图像 & 效果
canvas、webgl、svg。
web游戏的利器，可视化展示的基础。 - 性能 & 集成
增加了web worker能够让js操作线程，之前JS是单线程的，不能操作多线程，HTML5诞生能够让JS操作线程了（现在浏览器支持极差，只有把玩的意义）
增加了新的JS的API：拖放API、全屏API等等 - 设备访问
使用地理位置、摄像头、触控事件、检测设备方向。都是给移动端提供的API - 样式
CSS3
总结一下，HTML5是一个大概念，里面包括了HTML的增强（标签语义化、canvas）、CSS的增强（CSS3）、JS的增强（ECMAScript5、6）、浏览器的API增强（拖放、全屏、摄像头）。
2 HTML5语义增强
2.1 HTML5新的骨架结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>汤姆猫的个人博客</title>
</head>
<body>
</body>
</html>
2.2 HTML5新的标签
2.2.1 提纲标签
在HTML4.01中，对于提纲的标签，只有h1~h6。页面如果有其他的“提纲”，需要用div加类名模拟：
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="aside"></div>
<div class="main"></div>
</div>
<div class="footer"></div>
HTML5中把所有常见的语义div，都提炼为标签了：
<section></section>
<article></article>
<nav></nav>
<header></header>
<footer></footer>
<aside></aside>
<hgroup></hgroup>
上面这些标签，在语义上都比
大，也就是说它们能包裹div，但是div不能包裹它们。
它们都是块级元素、没有任何默认样式、容器级标签，可以包裹任何东西。
它们都是块级元素、没有任何默认样式、容器级标签，可以包裹任何东西。
2.2.2 新的语义标签
图和它的标题语义：
<figure>
<img src="images/1.jpg" alt="">
<figcaption>范冰冰和李晨结婚照</figcaption>
</figure>
进度条语义：
<progress value="60" max="100">60%</progress>
地址语义：
<address>北京市昌平区宏福大厦</address>
高亮语义：
我们一定要<mark>好好学习，天天向上</mark>
注释语义，拼音语义：
<ruby>
漢 <rp>(</rp><rt>hàn</rt><rp>)</rp>
字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>
2.2.3 新的表单元素
input元素多了一些type：
search 这个元素呈现为一个搜索框。换行符会从输入值中去掉，此外没有其他的语法增强了。
tel 电话
url 网址
email 邮箱
number 数字
color 颜色
date 日期 time week
可以用pattern属性来描述正则：
<input type="tel" pattern="^[\d]{11}$" />
3 音频、视频
3.1 视频
插入视频
<video autoplay controls width="500" height="300">
<source src="video/1.mp4"/>
<source src="video/2.mp4"/>
</video>
video标签支持的格式是mp4和ogv。
autoplay属性自动播放，controls属性显示控件，width宽度、height高度
里面source就是播放列表。
也提供了JS的API。
事件：
onpause 暂停事件
onplay 播放事件
控制方法：
.pause()
.play()
3.2 音频
audio标签就是音频，支持的格式是mp3和ogg
<audio src="All of Me.mp3" autoplay/>
其它部分就不多说啦，哈哈哈。
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
