认识 HTML5

念：

HTML5 是HTML、XHTML 以及 HTML DOM 的新标准（推荐标准）。

语法：

根据HTML5设计化繁为简的准则，文档类型和字符说明都进行了简化：

<!DOCTYPE html>
<meta charset='UTF-8'>
.......

HTML5元素

HTML5定义了一组新的语义化标记来描述元素的内容。

header 标记头部区域的内容。
footer 标记脚部区域的内容
section 页面中的一块区域
article 独立的文章内容
aside 相关内容或者引文
nav 导航类
video：定义视频，比如 电影片段或其他视频流
<video src='movie.ogg' controls='controls'>video元素</video>
audio：定义音频，比如音乐或其他音频流 
<audio src='audio.wav'>audio元素</audio>
...........

HTML5其他功能

HTML5引入了一种用于用于查找页面DOM元素的selectors API。

document.querySelector("#demo")--->返回文档中匹配指定 CSS 选择器的第一个元素。
document.querySelectorAll("#demo")--->返回文档中匹配指定 CSS 选择器的所有元素。

html5文档结构代码

html5 有什么神奇？就是进化的一套标准。

我是不是整理的都好初级，不过整理即巩固加回忆，只要是好好学习，那么时间就不是浪费，那么道路就一定是正确的！！加油啊小果冻de迈阿密！！

TML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在网际网路应用迅速发展的时候，使网路标准达到符合当代的网路需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要外挂程式的丰富性网路应用服务（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强网路应用的标准集。

HTML5添加了许多新的语法特征，其中包括<video>、<audio>和<canvas>元素，同时整合了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。

发展历史

网页超文本技术工作小组（WHATWG）于2004年开始制定新标准。在当时，HTML 4.01自2000年来没有更新，以及全球资讯网协会（W3C）正在将未来的发展重点放在XHTML 2.0。2009年，W3C允许XHTML 2.0工作组章程结束过期并且决定不再续订。W3C与WHATWG合作共同为发展HTML5而努力。

2004年6月，Mozilla基金会和Opera软体公司在全球资讯网协会（W3C）所主办的研讨会上提出了一份立场文件，其重点是开发与现有浏览器向后相容的技术，包括Web Forms 2.0最初草案规范。研讨会最后以——8票赞成，14票反对——否决继续对HTML的开发工作。这引起一些人的不满，在研讨会之后，网页超文本技术工作小组（WHATWG）立即根据该立场文件成立，第二个草案，Web Applications 1.0也公布了。后来这两种规范合并形成HTML5。2007年，获得W3C接纳，并成立了新的HTML工作团队。2008年1月22日，第一份公开工作草案发布。

尽管HTML5已经在网络开发人员中非常出名了，但是它成为主流媒体的一个话题是在2010年的4月，当时苹果公司的CEO乔布斯发表一篇题为“对Flash的思考”的文章，指出随着HTML5的发展，观看影片或其它内容时，Adobe Flash将不再是必须的。这引发了开发人员间的争论，包括HTML5虽然提供了加强的功能，但开发人员必须考虑到不同浏览器对标准不同部分的支持程度的不同，以及HTML5和Flash间的功能差异。

特点

标记

HTML5提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签，但有一定含义，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理、小萤幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如<audio>和<video>标记。一些过时的HTML 4.01标记将取消，其中包括纯粹用作显示效果的标记，如<font>和<center>，因为它们已经被CSS取代。还有一些透过DOM的网络行为。

尽管和SGML在标记上的相似性，HTML5的句法并不再基于它了，而是被设计成向后兼容对老版本的HTML的解析。它有一个新的开始列看起来就像SGML的文档类型声明，<!DOCTYPE HTML>，这会触发和标准兼容的渲染模式。在2009年1月5日，HTML5添加了Web Form 2.0的内容，HTML5开始发展起来。

新的API

HTML5相关APIs

除了原先的DOM接口，HTML5增加了更多样化的应用程序接口（API）：

Canvas

定时媒体播放

离线

可编辑内容

拖放

历史

MIME和协议处理程序时表头登记

微数据

网路讯息

网路存储

以上技术尽管是WHATWG HTML说明文档的内容，但并没有全部包括在W3C HTML5的说明文档里。一些相关的技术，像下面所列的，并没有包括在这2份文档中的任何一份中。W3C给这些技术单独出版了说明文档。

地理位置

网页SQL数据库 ─ 本地SQL数据库（不再维护）

IndexedDB

文件─ 处理文件上传和操纵文件

目录和文件系统 ─ 这个API是为了满足客户端在没有好的数据库支持情况下存储要求

文件写入 ─ 从网络应用程序向文件里写内容

网路音频

ClassList

网路加密

WebRTC

一个普遍的误解是HTML5能够在网页中提供动画效果，这是不对的，动画效果是需要配合JavaScript和CSS。然而静态HTML5配合CSS可以表示出覆杂的排版结构而且原生支援与影片的混合与控制（控制一般由JavaScript执行），因此简单可以把HTML5单位时间的状态理解为动画的关键影格。

XHTML5（XML-serialized HTML5）

XHTML5是对HTML5的XML序列化。XML文档必须被设置为XML互联网文件类型，像application/xhtml+xml或者application/xml。XHTML5要求像XML一样严格的格式化的语法。在XHTML5中，HTML5的<!DOCTYPE HTML>可有可无的。

XHTML5并非XHTML的第5版，没有自己独立的标准规范，而是HTML5的一种序列化方式。XHTML1.x和2.0使用的名字是Extensible HyperText Markup Language，不同于XHTML5。

异常处理

HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码。与HTML4.01相比，HTML5给出了解析的完整规则，让不同的浏览器即使在发生语法错误时也能返回完全相同的结果。

普及率

根据2011年9月30日发布的一份报告，全球排名前100的网站中有34个网站使用HTML5──主要是搜寻引擎与社群网站。2013年8月发布的另一份报告显示，财富美国500强企业中已有多达153家采用HTML5。

HTML 4.01和XHTML 1.x的差异

以下为大略的不同之处，与例子：

文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。

新的解析顺序：不再基于SGML。

新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。

input元素的新类型：date, email, url等等。

新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。

全域属性：id, tabindex, repeat。

新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。

移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

、什么是 HTML5？

HTML5 是最新的 HTML 标准；
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件；
HTML5 拥有新的语义、图形以及多媒体元素；
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建；
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行；

二、HTML5的一些新特性

用于绘画的 canvas 元素；
用于媒介回放的 video 和 audio 元素；
对本地离线存储的更好的支持；
新的特殊内容元素，比如article、footer、header、nav、section；
新的表单控件，比如 calendar、date、time、email、url、search；

三、video 元素

<video> 元素提供了播放、暂停和音量控件来控制视频；
<video> 元素也提供了 width 和 height 属性控制视频的尺寸；
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的；

video 元素的三种视频格式：

Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件；
MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件；
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件；

video 元素的属性：

src：要播放的视频的 URL；
width：设置视频播放器的宽度；
height：设置视频播放器的高度；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件，比如播放按钮；
loop：循环播放；
preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

video 元素的方法：

pause()：暂停当前播放的视频；
play()：开始播放视频；
load()：重新加载视频元素；
canPlayType()：检测浏览器是否能播放指定的视频类型；
addTextTrack()：向音频/视频添加新的文本轨道；

四、audio元素

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素；
<audio>元素能够播放声音文件或者音频流；

audio元素的三种音频格式：

MP3：适用于Internet Explorer、Chrome、Safari 等浏览器；
Wav：适用于Firefox、Opera等浏览器；
Ogg：适用于Firefox、IE9、Chrome 浏览器；

audio元素的属性：

src：要播放的音频的 URL；
autoplay：自动播放；
controls：如果出现该属性，则向用户显示控件；
loop：循环播放；
preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

audio元素的方法：

pause()：暂停当前播放的音频；
play()：开始播放音频；
load()：重新加载音频；

五、canvas 元素

什么是 Canvas？

HTML5 的 canvas 元素通过 JavaScript 在网页上绘制图像，元素本身并没有绘制能力，它只是图形容器，必须使用脚本来绘制图形；
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法；
创建一个画布

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas在HTML5 中的新属性有：

height：设置 canvas 的高度；
width：设置 canvas 的宽度；

六、绘制三角形

getElementById()：可返回对拥有指定 ID 的第一个对象的引用；

getContext()：返回一个用于在画布上绘图的环境，2d表示二维绘图；

beginPath()：开始一条路径，或重置当前的路径；

moveTo()：把路径移动到画布中的指定点，不创建线条。

lineTo()：添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）；

closePath()：创建从当前点到开始点的路径；

strokeStyle属性：设置或返回用于笔触的颜色、渐变或模式；

stroke()：会实际地绘制出路径；

fillStyle属性：设置或返回用于填充绘画的颜色、渐变或模式；

fill()：填充当前的图像（路径），默认颜色是黑色；

//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或闭合 需要先闭合路径才能画
cxt.strokeStyle="red";
cxt.stroke();
//实心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

演示图

图1

七、使用Canvas绘制一个空心圆

arc()：创建弧或曲线（用于创建圆或部分圆）；

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas") 
 var ctx=can.getContext("2d"); //创建context对象
 ctx.beginPath();//标志开始一个路径
 ctx.arc(100,100,50,0,2*Math.PI);//在canvas中绘制圆形
 ctx.stroke()
 </script>

演示图

图2

八、绘制一个实心圆

<body>
 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d"); 
 ctx.beginPath();
 ctx.arc(100,100,50,0,2*Math.PI);
 ctx.fillStyle="#deffff";
 ctx.fill();
 ctx.strokeStyle="red"
 ctx.stroke();
 </script>

演示图

图3

九、绘制一个空心矩形

strokeRect()：绘制矩形（不填色），笔触的默认颜色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
 var can=document.getElementById("myCanvas"); //获得画板数据
 var ctx=can.getContext('2d'); //获得笔刷
 ctx.strokeStyle="blue"; //设置线条颜色
 ctx.strokeRect(100,100,100,100); //线条画矩形
 </script>

演示图

图4

十、绘制一个实心的矩形

fillRect()：绘制“已填色”的矩形，默认的填充颜色是黑色；

<body>
 <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//获得画板数据
var ctx=can.getContext('2d'); //获得笔刷
 ctx.strokeStyle="blue"; //设置线条颜色
 ctx.fillStyle="#ddedee"; //填充矩形
 ctx.fillRect(100,100,100,100);
 ctx.strokeRect(100,100,100,100);//线条画矩形
 </script>

演示图

图5

在线咨询

上一篇：ID Selectors - 声明式 CSS 选择的
下一篇：为什么7-11便利店每个产品都能做到爆款？