HTML5学习笔记--------》HTML5概要与新增标签！
⼀、HTML5概要
1.1、为什么需要HTML5
HTML4陈旧不能满⾜⽇益发展的互联⽹需要，特别是移动互联⽹。为了增强浏览器功能Flash被⼴泛使⽤，但安全与稳定堪忧，不适合在移动端使⽤（耗电、触摸、不开放）。
HTML5增强了浏览器的原⽣功能，符合HTML5规范的浏览器功能将更加强⼤，减少了Web应⽤对插件的依赖，让⽤户体验更好，让开发更加⽅便，另外W3C从推出HTML4.0到5.0之间共经历了17年，HTML的变化很⼩，这并不符合⼀个好产品的演进规则。
1.2、什么是HTML5
HTML5指的是包括HTML、CSS和JavaScript在内的⼀套技术组合。它希望能够减少⽹页浏览器对于需要插件的丰富性⽹络应⽤服务（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强⽹络应⽤的标准集。HTML5是HTML最新版本，2014年10⽉由万维⽹联盟（W3C）完成标准制定。⽬标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联⽹应⽤迅速发展的时候，使⽹络标准达到匹配当代的⽹络需求。
1.3、HTML5现状及浏览器⽀持
⼤部分主流浏览器已经⽀持HTML5，但是各个浏览器⽀持的⽅式以及语法有所差异性。⽀持Html5的浏览器包括Firefox（⽕狐浏览
器），IE9 及其更⾼版本，Chrome（⾕歌浏览器），Safari，Opera等现代浏览器。
⽀持得分：
如果想了解更多请看本⽂的兼容性那⼀节的内容。
PC端（总分555分）：
平板（总分555分）：
移动（总分555分）：
1.4、HTML5特性
HTML5 ⼋个特性类别对应的8个Logo 语义⽹、离线&存储、设备访问、通信多媒体、图形和特效、性能和集成、呈现（CSS3）
1.4.1. 语义特性（Class：Semantic）
HTML5赋予⽹页更好的意义和结构。更加丰富的标签将随着对RDFa的。
1.4.
2. 本地存储特性（Class: OFFLINE & STORAGE）
HTML5 APP Cache、本地存储功能、IndexedDB、FileAPI
1.4.3. 设备访问特性 (Class: DEVICE ACCESS)
为移动开发⽽⽣。重⼒感应、全球地理定位、麦克风、摄像头
1.4.4. 连接特性（Class: CONNECTIVITY）
WebSocket、Server-Sent Events实现双向连接，消息推送
1.4.5. ⽹页多媒体特性( Class: MULTIMEDIA）
⽀持⽹页端的Audio、Video等多媒体功能。
1.4.6. 三维、图形及特效特性（Class: 3D, Graphics & Effects）
这⼀招将Flash打败，图形增强，SVG，Canvas，WebGL，2D/3D游戏和页⾯视觉特效。
1.4.7. 性能与集成特性（Class: Performance & Integration）
没有⽤户会永远等待你的Loading，HTML5增加WebWorker、XMLHttpRequest2
1.4.8.呈现（CSS3/styling)
除了DOM接⼝，HTML5增加了更多样化的应⽤程序接⼝（API）：
HTML5Canvas API：有关动态产出与渲染图形、图表、图像和动画的API HTML5⾳频与视频：HTML5⾥新增的元素，它们为开发者提供了⼀套通⽤的、集成的、脚本式的处理⾳频与视频的API，⽽⽆需安装任何插件离线存储数据库（离线⽹络应⽤程序）编辑拖放跨⽂档通信通信／⽹络 Communication APIs：构建实时和跨源（cross-origin）通信的两⼤基础：跨⽂档通信（Cross Document Messaging）与XMLHttpRequest Level 2。浏览历史管理 MIME和协议进程时表头登记微数据⽹页存储以上技术尽管是WHATWG HTML说明⽂档的内容，但并没有全部包括在W3C HTML5的说明⽂档⾥。⼀些相关的技术，像下⾯所列的，并没有包括在这2份⽂档中的任何⼀份中。W3C给这些技术单独出版了说明⽂档。 Geolocation API：⽤户可共享地理位置，并在Web应⽤的协助下享⽤位
置感知服务（location-aware services）索引数据库API（Indexed Database API，以前为WebSimpleDB）⽂件API：处理⽂件上传和操纵⽂件⽬录和⽂件系统：这个API是为了满⾜客户端在没有好的数据库⽀持情况下存储要求⽂件写⼊：从⽹络应⽤程序向⽂件⾥写内容⼀个普遍的误解是HTML5能够在⽹页中提供动画效果，这是不对的，动画效果是需要配合JavaScript和CSS。然⽽静态HTML5配合CSS可以表⽰出覆杂的排版结构⽽且原⽣⽀持与视频的混合与控制（控制⼀般由JavaScript运⾏），因此简单可以把HTML5单位时间的状态理解为动画的关键帧。
1.5、HTML5优点与缺点
1.5.1、优点
1、⽹络标准统⼀、HTML5本⾝是由W3C推荐出来的。
2、多设备、跨平台
3、即时更新。
4、提⾼可⽤性和改进⽤户的友好体验；
5、有⼏个新的标签，这将有助于开发⼈员定义重要的内容；
6、可以给站点带来更多的多媒体元素(视频和⾳频)；
7、可以很好的替代Flash和Silverlight；
8、涉及到⽹站的抓取和索引的时候，对于SEO很友好；
9、被⼤量应⽤于移动应⽤程序和游戏。
1.5.2、缺点
a)、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被⿊客利⽤，来盗取⽤户的信息和资料。 b)、完善性：许多特性各浏览器的⽀持程度也不⼀样。 c)、技术门槛：HTML5简化开发者⼯作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚⾄浏览器原理的知识，机遇的同时也是巨⼤的挑战 d)、性能：某些平台上的引擎问题导致HTML5性能低下。 e)、浏览器兼容性：最⼤缺点，IE9以下浏览器⼏乎全军覆没。
1.6、HTML5效果展⽰
HTML5对于之前版本来说，并⾮简单的版本升级，⽽是⼀次全⾯的框架和性能的提升与优化；这表现
在：语法更简单、新增了⼤量的语义性标签、强⼤的canvas元素代替flash、丰富的API接⼝使⽤极⼤⽅便了开发者与浏览器的交互。其中，关键提升在于：基于HTML5强⼤的新增加框架，如⼿机端设备与页⾯进⾏交互，如重⼒感应、地理定位、离线操作等，在主流移动端平台，可以很轻松地⾃定义性能强⼤的webapp，包括游戏、动画和企业级的应⽤开发。
1.7、HTML5学习与开发⼯具
1.7.1、基础要求
HTML+CSS+JavaScript与任何⼀种Web服务器后台技术如（Java,dotNET,PHP)
1.7.2、开发⼯具
主流浏览器，如Chrome浏览器、Firefox浏览器、Safari浏览器、IE9+浏览器、IETester等
HTML5对开发⼯具并没有限制，任意的⽂本编辑器都可以如：webstorm/notepad++ + zendcode /textMate + zendcode / sublime 2，Visual Studio2013+，Visual Studio Code，HBuilder等
如果习惯了eclipse的朋友可以使⽤HBuilder，eclipse实在不适合⽤于写前端脚本（4千万美⼑的东西...），
1.8、HTML5语法规则与⽂档声明
1.8.1、语法规则
a)、标签要⼩写属性值不加" "或 ' ' b)、可以省略某些标签 HTML body head tbody c)、可以省略某些结束标签 tr td li  d)、单标签不⽤加结束标签 img input e)、废除的标签，看第⼆点 font center big
1.8.2、⽂档声明
<!DOCTYPE> 声明必须位于 HTML5 ⽂档中的第⼀⾏，也就是位于 <HTML> 标签之前。该标签告知浏览器⽂档所使⽤的 HTML 规范。doctype 声明不属于 HTML 标签，它是⼀条指令，告诉浏览器编写页⾯所⽤的标记的版本。在所有 HTML ⽂档中规定 doctype 是⾮常重要的，这样浏览器就能了解预期的⽂档类型。 HTML 4.01 中的 doctype 需要对 DTD 进⾏引⽤，因为 HTML 4.01 基于 SGML。⽽ HTML 5 不基于 SGML，因此不需要对 DTD 进⾏引⽤。
1.8.2、⽂档声明
⼆、废弃的标签
以下的 HTML 4.01 元素在HTML5中已经被删除，虽然浏览器为了兼容性考虑都还⽀持这些标签，但建议使⽤新的替代标签，⽭盾的是⽼浏览器对新标签的⽀持度⼜不够，视项⽬的受众对象⽽定了。
2.1、能⽤CSS代替的元素
这些元素包含basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为页⾯展⽰⽤的，表现的内容应该由CSS完成。
2.2、frame框架
这些元素包含frameset、frame、noframes。HTML5中不⽀持frame框架，只⽀持iframe框架，或者⽤服务器⽅创建的由多个页⾯组成的符合页⾯的形式，删除以上这三个标签。
2.3、只有部分浏览器⽀持的元素
这些元素包含applet、bgsound、blink、marquee等标签。
2.4、其他被废除的元素
废除rb，使⽤ruby替代废除acronym使⽤abbr替代废除dir使⽤ul替代废除isindex使⽤form与input相结合的⽅式替代废除listing使⽤pre替代废除xmp使⽤code替代废除nextid使⽤guids 废除plaintex使⽤“text/plian”（⽆格式正⽂）MIME类型替代
三、新增的标签
3.1、新增的结构标签
在HTML4.01中div被⼴泛⽤于各种布局环境在，没有明确的定义，HTML5为了SEO将div语义化了，新增加结构标签如下：
a)、section元素表⽰页⾯中的⼀个内容区块,⽐如章节、页眉、页脚或页⾯的其他部分。可以和h1、 h2……等元素结合起来使⽤，表⽰⽂档结构。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。
b)、article元素表⽰页⾯中⼀块与上下⽂不相关的独⽴内容。⽐如⼀篇⽂章。
c)、aside元素表⽰article元素内容之外的、与article元素内容相关的辅助信息。
d)、header元素表⽰页⾯中⼀个内容区块或真个页⾯的标题。
e)、hgroup元素表⽰对真个页⾯或页⾯中的⼀个内容区块的标题进⾏组合。
f)、footer元素表⽰整个页⾯或页⾯中⼀个内容区块的脚注。⼀般来说，他会包含创作者的姓名、创作⽇期以及创作者的联系信息。
g)、nav元素表⽰页⾯中导航链接的部分。
h)、figure元素表⽰⼀段独⽴的流内容，⼀般表⽰⽂档主体流内容中的⼀个独⽴单元。使⽤figcaption元素为figure元素组添加标题。例如：<figure>  <figcaption>PRC</figcaption>  <p>The People's Republic of China was born in 1949</p>  </figure>  HTML4中常写作  <dl>
<h1>prc</h1>  <p>The People's Republic of China was born in 1949</p>  </dl>
⽰例：
View Code
运⾏结果：
3.2、新增加其它元素
3.2.1、meter
表⽰特定范围内的数值，可⽤于⼯资、数量、百分⽐等 max表⽰最⼤值，min表⽰最⼩值，value代表当前值。
<meter max="100" min="0" value="60" ></meter>
可以试试⽤js控制让它从0变化到100。
3.2.2、time
time。表⽰时间值，属性datetime强调时间⼤会时间：<time>2015-10-6</time>
<time>2015-10-6</time>
我们在每天早上 <time>8:30</time> 开始上课。我在<time datetime="2017-02-14">情⼈节</time>有个约会。
运⾏效果：
因为该标签是⼀个语义标签，在浏览器上查看时没有特别的效果，基本与没有设置标签的效果相同。
3.2.3、progress
⽤来表⽰进度条
<h3>progress</h3>
<progress value="75" max="100"></progress>
max：最⼤值，完成时的值
value：当前值
firefox运⾏结果:
chrome运⾏结果：
3.2.4、datalist
该标签定义可选数据的列表。与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。
当与input组合时既可以完成选择有可以输⼊。
<input type="text" list="countries" />
<datalist id="countries">
<option value="中国"></option>
<option value="美国"></option>
<option value="⽇本"></option>
</datalist>
3.2.5、mark元素主要⽤来在视觉上向⽤户呈现哪些需要突出显⽰或⾼亮显⽰的⽂字。典型应⽤搜索结果中⾼亮显⽰搜素关键字。
HTML5<mark></mark>;HTML4 <span></span>。
3.2.6、ruby元素定义 ruby 注释（中⽂注⾳或字符）。与 <ruby> 以及 <rt> 标签⼀同使⽤。ruby 元素由⼀个或多个字符（需要⼀个解释/发⾳）和⼀个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不⽀持 "ruby" 元素时显⽰的内容。  <ruby>  汉 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>  </ruby>
3.2.7、rt元素定义字符（中⽂注⾳或字符）的解释或发⾳。
3.2.8、rp元素在 ruby 注释中使⽤，以定义不⽀持 ruby 元素的浏览器所显⽰的内容。
3.2.9、wbr元素表⽰软换⾏。与br元素的区别：br元素表⽰此处必须换⾏；wbr表⽰浏览器窗⼝或⽗级元素⾜⼸宽时（没必要换⾏时），不换⾏，⽽宽度不够时主动在此处换⾏。
3.2.10、canvas元素定义图形，⽐如图表和其他图像。<canvas> 元素只是图形容器（画布），必须使⽤脚本来绘制图形。  <canvas
id="myCanvas"></canvas><script type="text/javascript">  var ElementById('myCanvas');  var
Context('2d');  ctx.fillStyle='#FF0000';  ctx.fillRect(0,0,80,100);  </script>
3.2.11、command元素表⽰命令按钮，⽐如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显⽰这个元素，但是可以⽤它规定键盘快捷键。。  <menu>  <command onclick="alert('Hello World')">  Click Me!</command>
</menu>
3.2.12、details标签⽤于描述⽂档或⽂档某个部分的细节。可与 summary 标签配合使⽤，summary可以为 details 定义标题。标题是可见的，⽤户点击标题时，会显⽰出 details。summary应该是details的第⼀个⼦元素。
3.2.14、datalist标签定义选项列表。请与 input 元素配合使⽤该元素，来定义 input 可能的值。datalist 及其选项不会被显⽰出来，它仅仅是合法的输⼊值列表。使⽤ input 元素的 list 属性来绑定 datalist。
3.2.15、output标签定义不同类型的输出，⽐如脚本的输出。  <form action="form_action.asp" method="get" name="sumform">  <output name="sum"></output>  </form>
3.2.16、menu标签定义菜单列表。当希望列出表单控件时使⽤该标签。注意与nav的区别，menu专门⽤于表单控件。
3.3、多媒体标签
如果需要在页⾯中播放⾳频与视频我们经常会⽤使⽤的⽅法有：
a)、embed
html frame<embed src='uku/player.php/sid/XODIxNTY0NTQw/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
<embed src="img/iceage4.mp4"></embed>
b)、使⽤flash播放器
如⼀些三⽅插件，flowplayer602
html5多媒体组件指的是video(视频)组件和audio(⾳频)组件。HTML5多媒体组件可以在不借助诸如Flash Player等第三⽅插件的情况下，直接在你的⽹页上嵌⼊多媒体组件。浏览器提供原⽣⽀持视频的新能⼒使得⽹页开发⼈员更易于在不依赖于外置插件有效性的情况下，在他们的⽹站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使⽤的Flash技术的局限性，HTML5多媒体组件的能⼒就显得尤为重要了。
3.3.1、video视频标签
⽤于在播放视频，电影
标签基本格式如下：
<video width="800" height="600" controls="controls" poster="content/1.jpg">
<source src="content/iceage4.mp4" type="video/mp4"></source>
<source src="content/iceage4.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不⽀持 video直接播放，点击这⾥下载视频： <a href="content/iceage4.webm">下载视频</a>
</video>
运⾏效果：
source是视频源，可以有多种，当⼀种失败时将选择下⼀种，主要有如下3种：
Ogg = 带有 Theora 视频编码和 Vorbis ⾳频编码的 Ogg ⽂件 MPEG4 = 带有 H.264 视频编码和 AAC ⾳频编码的 MPEG 4 ⽂件 WebM = 带有 VP8 视频编码和 Vorbis ⾳频编码的 WebM ⽂件
格式⽀持情况：
标签属性：
source⼦标签属性：
video API⽅法
video API属性
video API事件
注意：
<video src="img/iceage4.mp4" controls="controls" poster="img/1.jpg">
您的浏览器太⽼了，请升级，视频下载<a href="#">地址</a>
</video>
多数的HTML5标签的innerHTML内容是浏览器不⽀持该标签时显⽰的内容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。