HTML5 学习笔记(一)——HTML5无不要和新增标签

一、HTML5概要

图片 1

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

图片 2

支持得分:

图片 3

图片 4

要想了解再多请圈本文的兼容性那同样节省之情节。

PC端(总分555分):

图片 5

平板(总分555分):

图片 6

移动(总分555分):

图片 7

1.4、HTML5特性

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

图片 8

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,包括打、动画及店铺级的采取开发。

图片 9

CSS3绘制《辛普森同小》

图片 10

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/

图片 11

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>

图片 12

示例:

图片 13图片 14

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

 

运转结果:

图片 15

3.2、新长其它元素

3.2.1、meter

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

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

图片 16

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

运作效果:

图片 17

 因为该标签是一个语义标签,在浏览器上查看时并未专门之功力,基本跟没有安装标签的力量一样。

3.2.3、progress

故来表示进度漫漫

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

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

value:当前值

firefox运行结果:

 图片 18

chrome运行结果:

图片 19

3.2.4、datalist

拖欠标签定义可选数据的列表。与 input
元素配合下,就可制造有输入值的下拉列表。

当跟input组合时既可成功选择来可输入。

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

 图片 20

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>

运行效果:

图片 21

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

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

格式支持情况:

图片 22

 标签属性:

图片 23

 source子标签属性:

 图片 24

video API方法

图片 25

video API属性

图片 26

video API事件

图片 27

注意:

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

运作结果:

图片 28

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

运作结果:

图片 29

 练习:

图片 30

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>

 图片 31

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>

运转结果:

图片 32

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

图片 33

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

图片 34

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

图片 35

图片 36

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

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

图片 37

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

图片 38

怎未显,因为IE8不认section这个HTML5标签,浏览器测试结果如下:

图片 39

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

运转效果:

图片 40

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

图片 41

引入插件后底台本如下:

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

 

图片 42

图片 43

采取插件后,当页面运行时会自动检测浏览器是否支持有特定的效能,如果支持则会于html标签上添加一个像样样式而:cssgradients,如果不支持则会补充加一个近乎样式:no-*,如no-cssgradients。 

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

图片 44

五、示例下载

 演示下载:github

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

图片 45

相关文章