ACCESSHTML5 学习笔记(一)——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,包括打、动画以及商社级的运开发。

CSS3绘制《辛普森同下》

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/

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>

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>京东创始人刘强东一元年薪背后的O2O棋局</title>
        <style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
        }
            #container {
                width: 900px;
                margin: 0 auto;
                font-family: "microsoft yahei";
            }

            #container header {
                background: dodgerblue;
                height: 100px;
                color: #fff;
            }

            #container header h1 {
                height: 100px;
                line-height: 100px;
                padding: 0 0 0 30px;
            }

            #main article {
                width: 63%;
                float: left;
            }

            #main aside {
                width: 33%;
                float: right;
            }

            #main aside li {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            footer {
                clear: both;
                height: 70px;
                background: orange;
            }
            footer nav{

            }

            footer li {
                display: inline-block;
                color: white;
                width: 100px;
                height: 30px;
                line-height: 30px;
                border-radius: 5px;
                cursor: pointer;
                margin-top: 20px;
            }
            footer li:hover{
                background: orangered;
            }
            footer nav{
                text-align: center;
            }
            p,li{
                line-height: 26px;
            }
            hgroup{
                padding: 10px 0;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <header>
                <h1>中国电子商务研究中心</h1>
            </header>
            <div id="main">
                <article>
                    <hgroup>
                        <h1>京东创始人刘强东一元年薪背后的O2O棋局</h1>
                        <h4>2015年10月06日14:50 中国电子商务研究中心</h4>
                    </hgroup>
                    <section>
                        <p>8月,京东公布了一项薪酬计划,该计划透露,未来十年,刘强东的年薪降至一元并推出股权激励计划,希望借此将其与京东的关系捆绑得更加紧密,进而提升投资者信心。与“一元年薪”并行的是京东43亿元入股永辉超市的消息,高价布局供应链的背后彰显着京东对O2O的野心。</p>

                        <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%,并接受高管自愿降薪申请,三一重工[微博]董事长梁稳根甚至主动申请将自己的年薪降至一元。对于目前并没有表现得很困难的京东来说,中国电子商务协会研究中心专家委员唐兴通认为,“一元年薪”只是对于团队管理上的一种姿态而,并没有什么特别实际的用处。而上述股权激励计划更多的是为了稳定投资者的信心稳定投资者信心或许是为了缓解其在最新一期财务报告中持续亏损所带来的负面影响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>
                    <section>
                        <p>其实除了降薪,京东为了提振市场信心也在做着诸多尝试。据京东2015年中报显示,其总负债为72.84亿美元(约合465.45亿人民币),较去年底的47.39亿美元,大幅攀升约53.7%。在这种情况下,京东宣布,以每股9元,共计43.1亿元人民币入股永辉超市。若交易完成,京东将持有永辉超市10%的股份。并拥有提名永辉两名董事(包括一名独立董事)的权利。双方将主要通过联合采购的方式,加强供应链管理能力,并会继续探索O2O等领域战略合作的发展机遇。</p>

                        <p>唐兴通认为,入股永辉超市是京东从物流战略的角度进行资源整合的重要一步。“以资金入股的方式配合上下游转型,目的是为了能够形成一个完整的消费链条。”他对新金融记者表示。除此之外,京东还看中其在生鲜市场的份额。刘强东曾表示,在生鲜的部分,永辉超市的量和连锁超市的量不相上下(生鲜上半年占永辉43%的销售额),并且成本结构在行业中是最优质的,京东认为生鲜类商品是可以盈利的,毛利润非常健康。</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>
                        <li>
                            <a href="zt/jdipo/">京东启动赴美IPO:优势与挑战并存!</a>
                        </li>
                        <li>
                            <a href="zt/cyhcp/">春运刮起火车票网购潮 电商研究中心支招买票攻略</a>
                        </li>
                        <li>
                            <a href="zt/hwdg/">前空姐逃税案敲警钟 海外代购难掩"内忧外患"</a>
                        </li>
                        <li>
                            <a href="zt/snznq/">2014企业公益论坛暨"阳光1+1" 苏宁社工志愿者行动</a>
                        </li>
                        <li>
                            <a href="zt/2013sh11/">电商宫心计—"双11"</a>
                        </li>
                        <li>
                            <a href="zt/anl_zmq/">上海自贸区推"跨境通"电商平台 国内跨境电商将迎新机遇</a>
                        </li>
                        <li>
                            <a href="zt/snkfpt/">苏宁开放平台战略通报暨联盟大会</a>
                        </li>
                        <li>
                            <a href="zt/anl_hzp/">八月化妆品电商价格大战 聚美、乐蜂上演"宫心计"</a>
                        </li>
                        <li>
                            <a href="zt/wx/">淘宝新浪微博账号互通 微信反击阿Q大战擦火花</a>
                        </li>
                        <li>
                            <a href="zt/jdkfpt/">京东举办史上最大规模供应商大会 电商大佬纷纷争夺供应商资源</a>
                        </li>
                        <li>
                            <a href="zt/sx/">电商巨头争夺生鲜"蓝海""陷阱"还是"钱"景?</a>
                        </li>
                        <li>
                            <a href="zt/jgz/">休战数月 火红6月电商"排位赛"再次上演</a>
                        </li>
                        <li>
                            <a href="zt/wdzr/">淘宝开放网店离婚与继承者转让 《实施细则》出台</a>
                        </li>
                        <li>
                            <a href="zt/sg/">闪购模式频遭电商复制 究竟是蓝海or红海?</a>
                        </li>
                        <li>
                            <a href="zt/anl_ltjs/">兰亭集势纽约证券交易所上市 外贸电子商务将迎来春天? </a>
                        </li>
                        <li>
                            <a href="zt/anl_zhsh/">网店收税传闻来袭 淘宝或成征税重点区</a>
                        </li>
                        <li>
                            <a href="zt/anl_2013al/">阿里巴巴入股新浪微博 社交电子商务时代开启</a>
                        </li>
                        <li>
                            <a href="zt/anl_2013ya/">4.20雅安大地震 电商在行动</a>
                        </li>
                        <li>
                            <a href="zt/anl_qne/">去哪儿涨价遭供应商联合抵制 折射OTA市场利益博弈? </a>
                        </li>
                        <li>
                            <a href="zt/anl_dshgm/">苏宁、京东、银泰等纷纷更名解读电商企业集体更名现象</a>
                        </li>
                        <li>
                            <a href="zt/anl_2013zfb/">用户交易信息泄露透视电商支付账号安全?</a>
                        </li>
                        <li>
                            <a href="zt/anl_fk/">从初刻被迫卖身老东家 透视国内垂直B2C电商生存状态? </a>
                        </li>
                        <li>
                            <a href="zt/2013315/">质量、诚信、承诺 启动"315电商维权月</a>
                        </li>
                        <li>
                            <a href="zt/2013lh/">聚焦2013年"两会" 代表电商立法、网店征税提案</a>
                        </li>
                    </ul>
                </aside>
            </div>
            <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

 

运作结果:

3.2、新增加其他元素

3.2.1、meter

意味着一定范围外之数值,可用来工资、数量、百分比等
max表示极度特别价值,min表示无比小值,value代表时价。

<meter max="100" min="0" value="60" style="width: 300px;"></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 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>

运作效果:

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内容是浏览器不支持该标签时显示的情节。

事件绑定与监听的界别:

<!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>

运作结果:

应用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>

运作结果:

 练习:

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>

 

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>

运行结果:

高低只于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分

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

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

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

可用于测试指定的HTML,CSS3,JavaScript新技巧,以Web SQL
Database的支撑情况呢例:

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浏览效果:

胡非显得,因为IE8不识sectionACCESS这个HTML5签,浏览器测试结果如下:

从今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>

运行效果:

得视于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:

引入插件后底本子如下:

<!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>

 

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

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

五、示例下载

 演示下载:github

参照:http://www.cnblogs.com/best

相关文章