ACCESSHTML5 学习总括(一)——HTML5概要与新增标签

一、HTML5概要

ACCESS 1

1.0、写在最前方

1.0.一 、行业前景

https://www.lagou.com/

http://www.51job.com/

ACCESS 2

ACCESS 3

1.0.② 、课程中用到的开发工具

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.一 、为啥要求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,揽胜极光IA),例如:AdobeFlash、Microsoft
Silverlight与Oracle
JavaFX的须要,并且提供更多能有效增强互连网使用的标准集。HTML5是HTML最新版本,二〇一五年八月由万维网缔盟(W3C)实现标准制订。目的是替换一九九九年所制定的HTML
4.01和XHTML
1.0正式,以期能在互连网使用连忙发展的时候,使互联网正式达到特出当代的网络必要。

1.③ 、HTML5现状及浏览器协理

多数主流浏览器已经帮助HTML5,然则各样浏览器支持的方法以及语法有所差别性。援救Html5的浏览器包涵Firefox(火狐浏览器),IE9
会同更高版本,Chrome(谷歌(谷歌(Google))浏览器),Safari,Opera等现代浏览器。

ACCESS 4

支撑得分:

ACCESS 5

ACCESS 6

假使想精通越来越多请看本文的包容性那一节的内容。

PC端(总分555分):

ACCESS 7

平板(总分555分):

ACCESS 8

移动(总分555分):

ACCESS 9

1.4、HTML5特性

HTML5 五本性状连串对应的捌个Logo
语义化、离线&存款和储蓄、设备访问、通讯
多媒体、图形和特效、性能和购并、展现(CSS3)

ACCESS 10

1.4.1. 语义脾性(Class:Semantic)

HTML5授予网页更好的意思和协会。越发助长的竹签将随着对奥迪Q5DFa的。

1.4.2. 地点存储天性(Class: OFFLINE & STORAGE)

HTML5 APP Cache、本地存款和储蓄功用、IndexedDB、FileAPI

1.4.3. 装备访问个性 (Class: DEVICE ACCESS)

为移动支付而生。重力感应、满世界地理定位、Mike风、摄像头

1.4.4. 一连特性(Class: CONNECTIVITY)

WebSocket、Server-Sent 伊芙nts完成双向连接,音讯推送

1.4.5. 网页多媒体特性( Class: MULTIMEDIA)

支撑网页端的奥迪o、Video等多媒体效能。

1.4.6. 三维、图形及特效本性(Class: 3D, Graphics & Effects)

这一招将Flash征服,图形增强,SVG,Canvas,WebGL,2D/3D游戏和页面视觉特效。

1.4.7. 性质与集成性子(Class: Performance & Integration)

未曾用户会永远等待你的Loading,HTML三日增WebWorker、XMLHttpRequest2

1.4.8.呈现(CSS3/styling)

除去DOM接口,HTML十八日增了更几种化的应用程序接口(API):

HTML5Canvas API:有关动态出现与渲染图形、图表、图像和卡通片的API
HTML5音频与录制:HTML5里新增的因素,它们为开发者提供了一套通用的、集成的、脚本式的拍卖音频与摄像的API,而无需安装其他插件
离线存款和储蓄数据库(离线网络应用程序)
编辑
拖放
跨文书档案通讯
通信/网络
Communication APIs:创设实时和跨源(cross-origin)通讯的两大基础:
跨文档通信(克罗斯 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.五 、HTML5亮点与缺点

1.5.1、优点

一 、互联网正式联合、HTML5自家是由W3C推荐出来的。
2、多设备、跨平台
三 、即时更新。
四 、进步可用性和革新用户的和谐体验;
五 、有几个新的价签,那将促进开发人士定义首要的始末;
⑥ 、能够给站点带来更加多的多媒体成分(录像和音频);
7、可以很好的替代Flash和Silverlight;
⑧ 、涉及到网站的抓取和目录的时候,对于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.⑥ 、HTML5效应体现

 HTML5对此此前版本的话,并非不难的版本升级,而是壹次周详的框架和总体性的升级与优化;这表今后:语法更简约、新增了大气的语义性标签、强大的canvas成分代替flash、丰盛的API接口使用极大便利了开发者与浏览器的竞相。在那之中,关键进步在于:基于HTML5强有力的新扩张框架,如手提式有线电话机端设备与页面举行互动,如引力影响、地理定位、离线操作等,
在主流移动端平台,能够很自在地自定义质量强大的webapp,包涵游戏、动画和集团级的运用开发。

ACCESS 11

CSS3绘制《Simpson一家》

ACCESS 12

HTML5费用的玩乐

1.⑦ 、HTML5就学与开发工具

1.7.壹 、基础供给

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.八 、HTML5语法规则与文书档案注明

1.8.一 、语法规则

a)、标签要小写
属性值不加” “或 ‘ ‘
b)、能够简简单单有些标签
HTML body head tbody
c)、能够归纳有个别结束标签
tr td li
d)、单标签不用加停止标签
img input
e)、废除的标签,看第2点
font center big

HTML 结构
CSS 表现
JavaScript 行为

1.8.二 、文书档案注解

<!DOCTYPE> 注脚必须放在 HTML5 文书档案中的第2行,也正是置身
<HTML> 标签以前。该标签告知浏览器文书档案所使用的 HTML 规范。
doctype 申明不属于 HTML
标签,它是一条指令,告诉浏览器编写页面所用的标记的本子。
在拥有 HTML 文书档案中规定 doctype
是尤其重庆大学的,那样浏览器就能精晓预期的文书档案类型。
HTML 4.01 中的 doctype 必要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而
HTML 5 不根据 SGML,因而不要求对 DTD 进行引用。

1.8.二 、文书档案注明

② 、放弃的价签

以下的 HTML 4.01
元素在HTML5中早就被去除,即使浏览器为了包容性考虑都还支持这么些标签,但提出使用新的代表标签,争执的是老浏览器对新标签的扶助度又不够,视项目的受众对象而定了。

2.一 、能用CSS代替的因素 

这几个因素包罗basefont、big、center、font、s、strike、tt、u。那几个成分纯粹是为页面显示用的,表现的内容应当由CSS实现。

2.2、frame框架

那些要素包括frameset、frame、noframes。HTML第55中学不帮忙frame框架,只帮忙iframe框架,或然用服务器方创建的由七个页面组成的契合页面包车型地铁款式,删除上述那八个标签。

2.③ 、唯有部分浏览器扶助的因素

那个元素包括applet、bgsound、blink、marquee等标签。

2.四 、其余被舍弃的因素

废除rb,使用ruby替代
废除acronym使用abbr替代
废除dir使用ul替代
抛开isindex使用form与input相结合的法门代替
废除listing使用pre替代
废除xmp使用code替代
废除nextid使用guids
甩掉plaintex使用“text/plian”(无格式正文)MIME类型替代

③ 、新增的价签

3.一 、新增的协会标签

在HTML4.01中div被周边用于各样布局环境在,没有显明的定义,HTML5为了SEO将div语义化了,新扩大结构标签如下:

a)、section元素
代表页面中的1个情节区块,比如章节、页眉、页脚或页面的其余部分。能够和h一 、h2……等要素构成起来使用,表示文书档案结构。例:HTML5中<section>……</section>;HTML4中<div>
……</div>。

b)、article元素
意味着页面中一块与上下文不相干的独门内容。比如一篇文章。

c)、aside元素
代表article成分内容之外的、与article成分内容有关的救助音信。

d)、header元素
代表页面中3个内容区块或真个页面包车型大巴标题。

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.贰 、新增添其余成分

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>二〇一五-10-6</time>

<time>2015-10-6</time>
我们在每天早上 <time>8:30</time> 开始上课。 我在<time datetime="2017-02-14">情人节</time>有个约会。

运作效果:

ACCESS 19

 因为该标签是2个语义标签,在浏览器上查看时没有特意的法力,基本与从不设置标签的机能一样。

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
元素由2个或几个字符(须求八个解说/发音)和一个提供该音信的 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.叁 、多媒体标签

借使急需在页面中播放音频与摄像大家平时会用使用的格局有:

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等第1方插件的情事下,直接在你的网页上安置多媒体组件。浏览器提供原生帮衬录制的新力量使得网页开发职员更易于在不借助于外置插件有效性的状态下,在她们的网站上添加摄像组件。由于苹果公司近日在Samsung和三星GALAXY Tab上应用的Flash技术的局限性,HTML5多媒体组件的力量就展现更为关键了。

3.3.一 、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事件名的样式绑定事件后绑定会覆盖前边绑定的轩然大波,也等于最终三个绑定的事件会收效;

行使add伊夫ntListener绑定事件则不会覆盖,可同时在多个要素上绑定三个一律的轩然大波。

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.贰 、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成分,浏览器在列表顺序查找,直到找到2个它能播放的文件格式,找到后,就播放该文件并忽略随后的别样成分。

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.一 、兼容性测试

① 、当前浏览器HTML5支撑情形在线测试:http://www.html5test.com/

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

ACCESS 35

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

ACCESS 36

贰 、当前浏览器对HTML五 、CSS3的支撑境况:http://www.findmebyip.com/

ACCESS 37

ACCESS 38

3、种种浏览器对HTML五 、CSS3支持情形大全:http://www.caniuse.com/

能够用来测试钦点的HTML,CSS3,JavaScript新技巧,以Web SQL
Database的帮忙意况为例:

ACCESS 39

4.二 、HTML5向下包容

4.2.一 、包容测试

为的测试兼容性,做叁个简单的示范,脚本如下:

<!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 (以及红米 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标签在IE第88中学无法应用,使用了该插件后如故不可能播放录制。

4.2.3、Modernizr

Modernizr 是1个用来检查和测试浏览器功效帮忙意况的 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,倘诺不援救则会添加1个类样式: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.一 、自定义一个简约的播放器

ACCESS 46

2.二 、调节和测试全体上课示例

2.三 、从支持文书档案中找到多少个没有上课教的HTML5标签,查询包容性。

七、视频

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

相关文章