目录一、HTML5概要1.1、为什么需要HTML51.2、什么是HTML51.3、HTML5现状及浏览器支持1.4、HTML5特性1.5、HTML5优点与缺点1.5.1、优点1.5.2、缺点1.6、HTML5效果展示1.7、HTML5学习与开发工具1.7.1、基础要求1.7.2、 ...
目录
- 一、HTML5概要
- 1.1、为什么需要HTML5
- 1.2、什么是HTML5
- 1.3、HTML5现状及浏览器支持
- 1.4、HTML5特性
- 1.5、HTML5优点与缺点
- 1.6、HTML5效果展示
- 1.7、HTML5学习与开发工具
- 1.8、HTML5语法规则与文档声明
- 1.8.1、语法规则
- 1.8.2、文档声明
- 1.8.2、文档声明
- 二、废弃的标签
- 三、新增的标签
- 3.1、新增的结构标签
- 3.2、新增加其它元素
- 3.2.1、meter
- 3.2.2、time
- 3.2.3、progress
- 3.2.4、datalist
- 3.3、多媒体标签
- 3.3.1、video视频标签
- 3.3.2、audio音频标签
- 3.3.3、embed元素
- 四、HTML5兼容性
- 4.1、兼容性测试
- 4.2、HTML5向下兼容
- 4.2.1、兼容测试
- 4.2.2、html5shiv
- 4.2.3、Modernizr
- 五、示例下载
<!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
<input type="text" list="countries" /> <datalist id="countries"> <option value="中国"></option> <option value="美国"></option> <option value="日本"></option> </datalist>
3.2.5、mark元素
<video width="800" height="600" controls="controls" poster="content/1.jpg"> <source src='/images/loading.gif' data-original="content/iceage4.mp4" type="video/mp4"></source> <source src='/images/loading.gif' data-original="content/iceage4.webm" type="video/webm"></source> <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"> <param name="movie" value="myvideo.swf" /> <param name="flashvars" value="autostart=true&file=myvideo.swf" /> </object> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="content/iceage4.webm">下载视频</a> </video>
运行效果：
source是视频源，可以有多种，当一种失败时将选择下一种，主要有如下3种：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
<!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>audio标签</title> </head> <body> <h2>audio标签</h2> <audio src='/images/loading.gif' data-original="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之间。
<!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不认识section这个HTML5标签，浏览器测试结果如下：
从IE9开始才部分支持HTML5中的标签。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>HTML5兼容</title> <!--[if lt IE 9]> <script src='/images/loading.gif' data-original="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中不能使用，使用了该插件后仍然不能播放视频。
<!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='/images/loading.gif' data-original="js/modernizr-custom.js" type="text/javascript" charset="utf-8"></script> </body></html>
使用插件后，当页面运行时会自动检测浏览器是否支持某个特定的功能，如果支持则会在html标签上添加一个类样式如：cssgradients,如果不支持则会添加一个类样式:no-*，如no-cssgradients。
Modernizr.video //在js中判断是否支持video标签
原标题：HTML5 学习笔记（一）——HTML5概要与新增标签
关键词：HTML
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
