ACCESSHTML5 学习总结(一)——HTML5无不要同新增标签

一、HTML5概要

ACCESS 1

1.0、写以尽前边

1.0.1、行业前景

https://www.lagou.com/

http://www.51job.com/

ACCESS 2

ACCESS 3

1.0.2、课程中因故到的开发工具

HBuilder、IntelliJ IDEA、MySQL、NodeJS、Spring MVC、PHP、Photoshop

HBuilder:www.dcloud.com,其它(webstorm,sublime…)

MySQL:http://www.cnblogs.com/best/p/6517755.html

NodeJS:https://nodejs.org/

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等现代浏览器。

ACCESS 4

支持得分:

ACCESS 5

ACCESS 6

万一想打听再多要看本文的兼容性那同样节的情。

PC端(总分555分):

ACCESS 7

平板(总分555分):

ACCESS 8

移动(总分555分):

ACCESS 9

1.4、HTML5特性

HTML5 八单性状类别对应之8只Logo
语义化、离线&存储、设备看、通信
多媒体、图形和特效、性能和合、呈现(CSS3)

ACCESS 10

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,包括打、动画以及商家级的下开发。

ACCESS 11

CSS3绘制《辛普森同下》

ACCESS 12

HTML5开发之戏

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千万美刀的东西…),

HBuilder是DCloud(数字天堂)推出的平等慢性支持HTML5的Web开发IDE。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。
及早,是HBuilder的卓绝充分优势,通过一体化的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开销效率。官网:http://www.dcloud.io/

ACCESS 13

1.8、HTML5语法规则与文档声明

1.8.1、语法规则

a)、标签而小写
属于性值不加” “或 ‘ ‘
b)、可以简单某些标签
HTML body head tbody
c)、可以概括某些结束标签
tr td li
d)、单标签不用加完标签
img input
e)、废除的价签,看第二触及
font center big

HTML 结构
CSS 表现
JavaScript 行为

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>

ACCESS 14

HTML 结构

CSS 表现

JavaScript 行为

示例:

ACCESS 15ACCESS 16

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>京东创始人刘强东一元年薪背后的O2O棋局</title>
        <style type="text/css">
            * {
                margin: 0;        /*所有元素的外边距为零*/
                padding: 0;
                font-family: "microsoft yahei";
            }

            ul li {
                list-style: none;
            }

            #container {
                width: 900px;
                margin: 0 auto;
            }

            header {
                height: 80px;
                line-height: 80px;
                background: dodgerblue;
                color: #fff;
                padding: 0 20px;
            }

            header h1 {
                font-size: 30px;
                font-weight: normal;
            }

            #main {
                font-size: 14px;
            }

            #main article {
                float: left;
                width: 70%;
                margin-right: 3%;
            }
            #main article hgroup{
                height: 70px;
            }
            #main article p{
                line-height: 22px;
                margin-bottom: 5px;
                text-indent: 26px;
            }

            #main aside {
                float: left;
                width: 27%;
            }
            #main aside li{
                height: 26px;
                line-height: 26px;
                overflow: hidden;
            }
            #main aside li a{
                text-decoration: none;
                border-bottom: 1px dashed #ccc;
            }
            #main aside li a:hover{
                background:orangered;
                color:white;
            }
            footer{
                clear: both;
                height:70px ;
                line-height: 70px;
                background: #FF4500;
                color: #fff;
                text-align: center;
            }
            footer nav li{
                display: inline-block;
                margin-right: 8px;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <header>
                <h1>中国电子商务研究中心</h1>
            </header>
            <section id="main">
                <article>
                    <hgroup>
                        <h2>京东创始人刘强东一元年薪背后的O2O棋局</h2>
                        <h3>2015年10月06日14:50  中国电子商务研究中心</h3>
                    </hgroup>
                    <section>
                        <p>
                            京东董事会今年5月份批准了针对公司董事长兼CEO刘强东的一项为期10年的薪酬计划。计划规定,10年内,刘强东每年只能领到1元现金形式底薪和零元现金形式奖金。难道刘强东就因此连杯奶茶也买不起了吗?这么想就太天真了。根据京东的股权激励计划,刘强东被授予涉及2600万股京东A级普通股的购买权,涉及股票规模约占京东总股本的0.9%,只有当每股ADS达到或超过33.4美元(相当于京东股价不低于16.7美元)时,刘强东才能将这部分股权进行套现。</p>
                        <p>
                            按每股16.7美元计算,刘强东获得的这部分股权将价值4.34亿美元,相当于27.8亿人民币。在这10年内,公司不得再向刘强东授予额外股权。其实“一元年薪”不仅并非刘强东首创,甚至已经成为企业面临危机时的一种常见路数。诸多企业都采取过“一元年薪”,比如三一重工。2008年经济危机时,三一重工[微博]全体董事降薪90%,并接受高管自愿降薪申请,三一重工[微博]董事长梁稳根甚至主动申请将自己的年薪降至一元。
                        </p>
                        <p>对于目前并没有表现得很困难的京东来说,中国电子商务协会研究中心专家委员唐兴通认为,“一元年薪”只是对于团队管理上的一种姿态而,并没有什么特别实际的用处。而上述股权激励计划更多的是为了稳定投资者的信心稳定投资者信心或许是为了缓解其在最新一期财务报告中持续亏损所带来的负面影响8月7日,京东发布了2015年第二季度财报。据财报显示,虽然京东第二季度交易总额为1145亿元,同比增长82%,净收入则达到459亿元,同比增长61%。</p>
                        <p>
                            尽管京东业绩增长强劲,但其似乎还没有找到有效的盈利模式。在去年第二季度净亏损5.825亿元的京东,今年该季度依然净亏损5.104亿元,净利润率为-1.1%。该公司在2015年第二季度非美国通用会计准则下净亏损为1570万元人民币(约250万美元),净利润率为-0.03%。但事情却未向着京东期望的方向发展。据资料显示,以8月5日京东收盘价34.32美元计,至8月12日,短短5个交易日,其最低价格下探至25.64美元,最大跌幅高达25.29%;按其总股本27.35亿股计,5个交易日,京东蒸发市值237亿美元,蒸发比例高达39%。</p>
                    </section>
                </article>
                <aside>
                    <ul>
                        <li>
                            <a href="zt/2015zhifu/">让红包再多飞一会——新春土豪玩转红包 霸主地位花落谁家</a>
                        </li>
                        <li>
                            <a href="zt/2015taobao/">淘宝PK国家监管部门“假货“争议引发“史上最大危机”?</a>
                        </li>
                        <li>
                            <a href="zt/2015expectation/">2015电子商务展望</a>
                        </li>
                        <li>
                            <a href="zt/2014pandian/">2014年度中国电子商务产业链系列盘点专题 </a>
                        </li>
                        <li>
                            <a href="zt/20141111/">六年历程、上市首秀:电商鏖战“双11”全程直播大型专题报道 </a>
                        </li>
                        <li>
                            <a href="zt/2014shcb/">2014上半年电商上市公司财报解读</a>
                        </li>
                        <li>
                            <a href="zt/wganq/">全国百家电商牵手质检机构 保障网购产品质量与安全行动计划</a>
                        </li>
                        <li>
                            <a href="zt/sn818/">苏宁打响“百日会战” 电商再掀促销“风暴”</a>
                        </li>
                        <li>
                            <a href="zt/dssj/">从电商平台第三方卖家奢侈品售假 揭电商假货之觞 引行业地震</a>
                        </li>
                        <li>
                            <a href="zt/2014World_Cup/">足球盛宴 电商角逐“世界杯经济”</a>
                        </li>
                        <li>
                            <a href="zt/jdipo/">京东启动赴美IPO 优势与挑战并存</a>
                        </li>
                        <li>
                            <a href="zt/anl_al2014/">阿里巴巴集团提交IPO招股书 招股书背后的机遇与挑战</a>
                        </li>
                        <li>
                            <a href="zt/jmipo/">聚美优品向美提交上市申请 招股书背后机遇与挑战并存</a>
                        </li>
                        <li>
                            <a href="zt/7twlytui/">电商VS消费者 电商7天无理由退货大阅兵</a>
                        </li>
                        <li>
                            <a href="zt/jdtx/">腾讯战略投资京东 国内B2C电商市场格局将迎 "寡头时代"</a>
                        </li>
                        <li>
                            <a href="zt/jdo2o/">京东零售业O2O战略万家便利店ERP供应商签约仪式</a>
                        </li>
                        <li>
                            <a href="zt/yhty/">聚焦"7天无理由退货" 专家解读《网络交易管理办法》、《新消法》</a>
                        </li>
                        <li>
                            <a href="zt/2014lh/">聚焦2014两会——鼓励电子商务创新发展 互联网金融掀新一轮颠覆潮</a>
                        </li>
                        <li>
                            <a href="zt/2014315/">倡导阳光 诚信 安全网购 迎接电商立法元年</a>
                        </li>
                        <li>
                            <a href="zt/anl_wxqb/">微信红包引发移动端支付争夺战 占据高地为时尚早</a>
                        </li>
                    </ul>
                </aside>
            </section>
            <footer>
                <nav>
                    <ul>
                        <li>关于我们</li>
                        <li>联系我们</li>
                        <li>投稿撤稿</li>
                        <li>友情链接</li>
                        <li>免责声明</li>
                        <li>人才招聘</li>
                        <li>独家专题</li>
                        <li>中心微信</li>
                    </ul>
                </nav>
            </footer>
        </div>
    </body>

</html>

View Code

运行结果:

ACCESS 17

3.2、新长其它元素

3.2.1、meter

意味着一定范围外的数值,可用来工资、数量、百分比等
max表示无比老价值,min表示最好小价,value代表时值。

<meter max="100" min="0" value="60" style="width: 300px;"></meter>

ACCESS 18

好试用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>有个约会。

运行效果:

ACCESS 19

 因为拖欠标签是一个语义标签,在浏览器上查看时尚未特意的效力,基本与无装标签的力量等同。

3.2.3、progress

因此来表示进度漫长

        <h3>progress</h3>
        <progress value="75" max="100"></progress>

max:最老价值,完成时的价值

value:当前值

firefox运行结果:

 ACCESS 20

chrome运行结果:

ACCESS 21

3.2.4、datalist

该标签定义可挑选数据的列表。与 input
元素配合使用,就得打造出输入值的下拉列表。

当与input组合时既好成功选择发生得输入。

        <input type="text" list="countries" />
        <datalist id="countries">
            <option value="中国"></option>
            <option value="美国"></option>
            <option value="日本"></option>
        </datalist>

 ACCESS 22

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 canvas = document.getElementById('myCanvas');
                var ctx = canvas.getContext('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

<embed
src=’http://player.youku.com/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&amp;file=myvideo.swf" />
            </object>
            当前浏览器不支持 video直接播放,点击这里下载视频: <a href="content/iceage4.webm">下载视频</a>
        </video>

运行效果:

ACCESS 23

source是看出频源,可以起强,当一栽失败时用甄选下同样种植,主要有如下3种:

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

格式支持情况:

ACCESS 24

 标签属性:

ACCESS 25

 source子标签属性:

 ACCESS 26

video API方法

ACCESS 27

video API属性

ACCESS 28

video API事件

ACCESS 29

注意:

        <video src="img/iceage4.mp4" controls="controls" poster="img/1.jpg">
            您的浏览器太老了,请升级,视频下载<a href="#">地址</a>
        </video>

多数的HTML5标签的innerHTML内容是浏览器不支持该标签时显示的情节。

事件绑定与监听的界别:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>事件绑定与监听的区别</title>
    </head>

    <body>
        <button id="btnA">按钮A</button>
        <button id="btnB">按钮B</button>
        <script type="text/javascript">
            var btnA = document.getElementById("btnA");
            var btnB = document.getElementById("btnB");
            btnA.onclick = function() {
                alert("你点了一下");
            }
            btnA.onclick = function() {
                alert("你又点了一下");
            }

            btnB.addEventListener("click",function(event){
                alert("你点了一下");
            },false);

            btnB.addEventListener("click",function(event){
                alert("你又点了一下");
            },false);
        </script>
    </body>

</html>

运作结果:

ACCESS 30

应用on事件称为的款式绑定事件后绑定会蒙前绑定的事件,也就是终极一个绑定的波会收效;

用addEventListener绑定事件则不会见蒙,可同时于一个素上绑定多单相同的事件。

video API的习性和事件示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Video 标签</title>
    </head>
    <body>
        <video id="videoIce" 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&amp;file=myvideo.swf" />
            </object> 当前浏览器不支持 video直接播放,点击这里下载视频:
            <a href="content/iceage4.webm">下载视频</a>
        </video>
        <h2>
            <button onclick="play()">播放</button>
            <button onclick="pause()">暂停</button>

        </h2>
        <script type="text/javascript">
           var videoIce=document.getElementById("videoIce");
            function play() {
                videoIce.play();
            }

            function pause() {
                videoIce.pause();
            }

            videoIce.ontimeupdate = function() {
                document.getElementById("msg").innerHTML=videoIce.currentTime;
            }
        </script>
    </body>

</html>

运转结果:

ACCESS 31

 练习:

ACCESS 32

3.3.2、audio音频标签

 audio可以兑现播放音响,音乐功能。

<audio src=http://baidu/demo/test.mp3 controls >
君的浏览器不支持audio元素
</autio>

<audio src="content/fcml.mp3" controls="controls" autoplay="autoplay"></audio>

 ACCESS 33

audio标签的属性,很多性能都是跟video相同的:

autoplay:true|false,如果是 true,则音频在稳后即时播放。
controls:true|false 如果是true,则为用户展示控件,比如播放按钮。
end:numeric value
定义播放器在音频流中的哪里停止播放。默认地,声音会播放到最终。
loopend:numeric value 定义在音频流中循环播放停止的职务,默认是 end
属性的价值。
loopstart: numeric value 定义在音频流中循环播放的开始位置。默认是 start
属性的价。
playcount: numeric value 定义音频片断播放多少次。默认是 1。
src: url 所播放音频的 url。
start : numeric value
定义播放器在音频流中开播报的职。默认地,声音在开班进行播放。

source子标签

动source元素作为多媒体元素的子标签
例:
<audio>
<source src=’test.mp3’ type=’audio/mpeg’/>
<source src=’test.ogg’ type=’audio/ogg’/>
<source src=’test.spx’ type=’audio/ogg’/>
</audio>
使用source元素,浏览器在列表顺序查找,直到找到一个其亦可播放的文件格式,找到后,就播放该公文并忽略随后的旁元素。

audio的API与video基本等同,下面是一个自定义调整音量的言传身教:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>audio标签</title>
    </head>
    <body>
        <h2>audio标签</h2>
        <audio src="content/fcml.mp3" controls="controls" autoplay="autoplay" id="mp3">
            <marquee><h2>换个浏览器吧,太老了</h2></marquee>
        </audio>
        <input type="range" min="0" max="100" onchange="setVolume(this)" />  
        <script type="text/javascript">
            function setVolume(obj){
                document.getElementById("mp3").volume=obj.value*0.01;
            }
        </script>
    </body>
</html>

运转结果:

ACCESS 34

高低只在0-1里边。

3.3.3、embed元素 

之所以来放置内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例:<embed
src=”flash.swf” /> 
HTML4蒙代码示例<object data=”flash.swf”
type=”application/x-shockwave-flash”><object>

四、HTML5兼容性

时至今日大部分现代浏览器对HTML5的支撑都坏高了,特别是移动端,但HTML5尚是在一些标签的兼容性问题的,只要世界上还起1单以上之浏览器就会在兼容问题,

4.1、兼容性测试

1、当前浏览器HTML5支持情况在线测试:http://www.html5test.com/

IE8浏览器,得分33分,共555分

ACCESS 35

Chrome浏览器,54版,共555分,得分499分

ACCESS 36

2、当前浏览器对HTML5、CSS3的支撑情况:http://www.findmebyip.com/

ACCESS 37

ACCESS 38

3、各个浏览器对HTML5、CSS3支撑情况大全:http://www.caniuse.com/

可以用来测试指定的HTML,CSS3,JavaScript新技巧,以Web SQL
Database的支持情况也例:

ACCESS 39

4.2、HTML5向下兼容

4.2.1、兼容测试

啊之测试兼容性,做一个简单易行的演示,脚本如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5兼容</title>
        <style type="text/css">
            #section1{
                height: 200px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <section id="section1"></section>
    </body>
</html>

IE8浏览效果:

ACCESS 40

胡未形,因为IE8不识section这个HTML5签,浏览器测试结果如下:

ACCESS 41

打IE9开始才有支撑HTML5着的签。

4.2.2、html5shiv

html5shiv可以透过大简短的JavaScript让IE6-IE9浏览器都支持HTML5备受的因素
HTML5 Shiv这可吃具有考古价值的Internet
Explorer支持HTML5彼此关元素,同时也IE6-9, Safari 4.x (以及iPhone 3.x),
以及Firefox 3.x供基本的HTML5样式。
类地址:https://github.com/aFarkas/html5shiv

下载后以页面被引入插件,代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5兼容</title>
        <!--[if lt IE 9]>
          <script src="js/html5shiv.min.js" type="text/javascript" charset="utf-8"></script>
        <![endif]-->
        <style type="text/css">
            #section1 {
                height: 200px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <section id="section1"></section>
    </body>
</html>

运转效果:

ACCESS 42

可以看于IE8下就是可知正常使用section了,但是建议以无支持HTML5的浏览器被避免采取HTML5标签,可以用div替代;

另外不要看使用了之大概的插件后具备的HTML5力量于非支持HTML5的浏览器被都发生矣,它只是做了简约的相当功能,如

video标签在IE8中不克采取,使用了该插件后还是未能够播放视频。

4.2.3、Modernizr

Modernizr 是一个就此来检测浏览器功能支持情况的 JavaScript 库。
目前,通过查看浏览器对同一多样测试的处理状态,Modernizr 可以检测18起 CSS3
功能与40基本上桩关于HTML5 的效益。
它于传统检测浏览器名称(浏览器嗅探)的计越来越可靠。
一整套测试的履时才得几粗秒。 此外,Modernizr
网站通过定制脚本只针对而感兴趣的素进行检测,从而实现效率优化。
https://modernizr.com/

此处坐CSS3饱受之线性渐变成例子,在支持CSS3的浏览器采用渐变,如果无支持则使图片,先生化作检测的js:

ACCESS 43

引入插件后底台本如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5兼容</title>
        <style type="text/css">
            #div1 {
                height: 100px;
                background:linear-gradient(#36f,#9cf);
            }
            .no-cssgradients #div1{
                background:url(content/bg.png) repeat-x;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <script src="js/modernizr-custom.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

 

ACCESS 44

ACCESS 45

动用插件后,当页面运行时会自动检测浏览器是否支持有特定的功能,如果支持则会在html标签及上加一个接近样式而:cssgradients,如果未支持则会补充加一个好像样式:no-*,如no-cssgradients。 

Modernizr.video   //在js中判断是否支持video标签

            Modernizr.on('video',function(result){
                alert(result);
            });

五、示例下载

 演示下载:github

https://coding.net/u/zhangguo5/p/HTML5\_01/git(上课示例,小米素材)

六、作业

PC端:https://www.mi.com/index.html

移动端:https://m.mi.com

实际要求:http://www.cnblogs.com/best/p/6163294.html

作业2:

2.1、自定义一个简约的播放器

ACCESS 46

2.2、调试所有上课示例

2.3、从协助文档中找到5独没有达到课教的HTML5标签,查询兼容性。

七、视频

https://www.bilibili.com/video/av16293468/

相关文章