电商之梳理html5相关知识---前端技术

来源:互联网 发布:2016年汽车销售数据 编辑:程序博客网 时间:2024/05/22 06:39

html5 编辑
本词条由“科普中国”百科科学词条编写与应用工作项目 审核 。
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation、见本处参考资料原文内容:[1] )。
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。
外文名 HTML5.0 支持浏览器IE9+,Chrome25+,Firefox19+ 发布时间 2014年9月 完成时间 2014年10月29日 关键词HTML5 超文本标记语言 编程语言
目录
1 发展历程
▪ 设计目的
▪ 特性
▪ 沿革
▪ 规范
▪ 应用须知
▪ 漏洞
▪ 优点缺点
▪ 争议
▪ 发展趋势
▪ 未来趋势
▪ 盈利方案
2 新元素
▪ canvas
▪ 多媒体
▪ 表单
▪ 语义和结构
▪ 已移除元素
3 技术要点
▪ 重要标记
▪ 程序接口
▪ 元素变化
▪ 控件
▪ 图表库
▪ 标签
▪ 事件属性
▪ 标签属性
▪ 异常处理
▪ 优势
发展历程
标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而W3C(World Wide Web Consortium,万维网联盟) 专注于XHTML2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日, HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。
本次草案的发布,从2012年12月27日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg也进行了改进,性能得到进一步提升。
支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。
在移动设备开发HTML5应用只有两种方法,要不就是全使用HTML5的语法,要不就是仅使用JavaScript引擎。
JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂,已预订了一个UI工具包去使用。
纯HTML5手机应用运行缓慢并错漏百出,但优化后的效果会好转。尽管不是很多人愿意去做这样的优化,但依然可以去尝试。
HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果,不断地重复编码、调试和运行,这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准,开发人员可以轻松调试修改。
2014年10月29日,万维网联盟泪流满面地宣布,经过几乎8年的艰辛努力,HTML5标准规范终于最终制定完成了,并已公开发布。
在此之前的几年时间里,已经有很多开发者陆续使用了HTML5的部分技术,Firefox、Google Chrome、Opera、Safari 4+、Internet Explorer 9+都已支持HTML5,但直到今天,我们才看到“正式版”。
HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,为桌面和移动平台带来无缝衔接的丰富内容。
W3C CEO Jeff Jaffe博士表示:“HTML5将推动Web进入新的时代。不久以前,Web还只是上网看一些基础文档,而如今,Web是一个极大丰富的平台。我们已经进入一个稳定阶段,每个人都可以按照标准行事,并且可用于所有浏览器。如果我们不能携起手来,就不会有统一的Web。”
HTML5还有望成为梦想中的“开放Web平台”(Open Web Platform)的基石,如能实现可进一步推动更深入的跨平台Web应用。
接下来,W3C将致力于开发用于实时通信、电子支付、应用开发等方面的标准规范,还会创建一系列的隐私、安全防护措施。
W3C还曾在2012年透露说,计划在2016年底前发布HTML 5.1。
设计目的
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式,包括:
· 新的解析规则增强了灵活性
· 新属性
· 淘汰过时的或冗余的属性
· 一个HTML5文档到另一个文档间的拖放功能
· 离线编辑
· 信息传递的增强
· 详细的解析规则
· 多用途互联网邮件扩展(MIME)和协议处理程序注册
· 在SQL数据库中存储数据的通用标准(Web SQL)
HTML5在2007年被万维网联盟(W3C)新的工作组采用。这个工作组在2008年1月发布了HTML 5的首个公开草案。眼下,HTML5处于“呼吁审查”状态,W3C预期它将在2014年年底达到其最终状态。
特性
语义特性(Class:Semantic)
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。
本地存储特性(Class: OFFLINE & STORAGE)
基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。
设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。
连接特性(Class: CONNECTIVITY)
更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。
三维、图形及特效特性(Class: 3D, Graphics & Effects)
基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。
性能与集成特性(Class: Performance & Integration)
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。
沿革
HTML5提供了一些新的元素和属性,例如

var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);

程序接口
除了原先的DOM接口,HTML5增加了更多API,如:
1. 用于即时2D绘图的Canvas标签
2. 定时媒体回放
3. 离线数据库存储
4.文档编辑
5. 拖拽控制
6. 浏览历史管理
元素变化
新的解析顺序新的元素:section, video, progress, nav, meter, time, aside, canvasinput
元素的新属性:日期和时间,email, url。
新的通用属性:ping, charset, async
全域属性:id, tabindex, repeat。
移除元素:center, font, strike。
控件
就是Html标注的属性里加上runat=”server”所构成的控件,至于Html标注和Html控件之间的区别很明显,Html控件是运行于服务器端,Html标注是运行于客户端。
基本Html控件有:HtmlTexArea\HtmlTable\HtmlImage\HtmlButton\HtmlSelect\HtmlForm\HtmlInput。
自定义的Html控件是根据自己的需求定义。当自主开发效率低,可以从技术社区、源码网站下载需要的控件。比如,需要插入table, image, links 等标签。不必自己开发,可以使用:ComponentOne Wijmo Editor等。
免费HTML5图表库——.Net图表控件Chart FX,深受大家喜爱,相信大家已经非常熟悉了。而且还从Chart FX的开发商SoftwareFX获得一个激动人心的消息:该公司已推出一套为HTML5,jQuery和JavaScript开发者设计的图表库——jChartFX,而且jChartFX是免费的!
图表库
.Net图表控件Chart FX相信大家已经非常熟悉了。Chart FX的开发商SoftwareFX推出的一套为HTML5、jQuery和JavaScript开发者设计的免费HTML5图表库——jChartFX!
jChartFX亮点:
jChartFX充分利用了HTML5,CSS和SVG,让您能够在浏览器提供美观优越的图表和更丰富的最终用户体验。
jChartFX拥有很多令人振奋的功能,它在无插件纯JavaScript的浏览器上运行,这意味着在提高了网站安全性和速度的同时,最大程度的减少了网站服务器的负荷。
jChartFX还能够自动整合到jQuery UI ThemeRoller,自动读取并解释jQuery的主题和CSS文件,能够快速适应您的页面布局和设计,无需一行代码。
jChartFX支持JSON,JSON能够帮助您实现,任何数据源中的数据都可以展现到图表中。
jChartFX还支持超过40种的2D、3D图表类型,免费的图表控件中支持如此之多的图表展示类型实属难得。
标签
注:在下面表格中4: 指在HTML 4.01 中定义了该元素 5: 指在HTML 5 中定义了该元素
按字母顺序排列的标签列表
标签
描述
 

定义注释
4
5

定义文档类型
4
5

定义超链接
4
5

定义缩写
4
5

HTML 5 中不支持
4
 


定义地址元素
4
5

定义 applet(HTML 5 中不支持)
4
 

定义图像映射中的区域
4
5

定义 article
 
5

定义页面内容之外的内容
 
5

定义声音内容
 
5

定义粗体文本
4
5

定义页面中所有链接的基准URL
4
5

HTML 5 中不支持,请使用CSS 代替
4
 

定义文本显示的方向
4
5

定义大号文本(HTML 5 中不支持)
4
 

定义长的引用
4
5

定义 body 元素
4
5

插入换行符
4
5

定义按钮
4
5

定义图形
 
5

定义表格标题
4
5

定义居中的文本(HTML 5 中不支持)
4
 

定义引用
4
5

定义计算机代码文本
4
5

定义表格列的属性
4
5

定义表格列的分组
4
5

定义命令按钮
 
5

定义下拉列表
 
5

定义定义的描述
4
5

定义删除文本
4
5

定义元素的细节
 
5

定义定义项目
4
5

定义目录列表(HTML 5 中不支持)
4
 

定义文档中的一个部分
4
5

定义定义列表
4
5

定义定义的项目
4
5

定义强调文本
4
5

定义外部交互内容或插件
 
5

定义 fieldset
4
5

定义 figure 元素的标题
 
5

定义媒介内容的分组,以及它们的标题
 
5

HTML 5 中不支持
4
 

定义 section 或 page 的页脚
 
5

定义表单
4
5

定义子窗口(框架)(HTML 5 中不支持)
4
 

定义框架的集(HTML 5 中不支持)
4
 

to


定义标题1 到标题6
4
5

定义关于文档的信息
4
5

定义 section 或 page 的页眉
 
5

定义有关文档中的 section 的信息
4
5

定义 html 文档
4
5

定义斜体文本
4
5
<br/>&#10;&#23450;&#20041;&#34892;&#20869;&#30340;&#23376;&#31383;&#21475;&#65288;&#26694;&#26550;&#65289; <br/>&#10;4 <br/>&#10;5 <br/>&#10;<img/> <br/>&#10;&#23450;&#20041;&#22270;&#20687; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#36755;&#20837;&#22495; <br/>&#10;4 <br/>&#10;5 <br/>&#10;<ins> <br/>&#10;&#23450;&#20041;&#25554;&#20837;&#25991;&#26412; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#29983;&#25104;&#23494;&#38053; <br/>&#10;&#12288; <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#21333;&#34892;&#30340;&#36755;&#20837;&#22495;&#65288;HTML 5 &#20013;&#19981;&#25903;&#25345;&#65289; <br/>&#10;4 <br/>&#10;&#12288; <br/>&#10;<kbd> <br/>&#10;&#23450;&#20041;&#38190;&#30424;&#25991;&#26412; <br/>&#10;4 <br/>&#10;5 <br/>&#10;<label> <br/>&#10;&#23450;&#20041;&#34920;&#21333;&#25511;&#20214;&#30340;&#26631;&#27880; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041; fieldset &#20013;&#30340;&#26631;&#39064; <br/>&#10;4 <br/>&#10;5 <br/>&#10;<li> <br/>&#10;&#23450;&#20041;&#21015;&#34920;&#30340;&#39033;&#30446; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#36164;&#28304;&#24341;&#29992; <br/>&#10;4 <br/>&#10;5 <br/>&#10;<map> <br/>&#10;&#23450;&#20041;&#22270;&#20687;&#26144;&#23556; <br/>&#10;4 <br/>&#10;5 <br/>&#10;<mark> <br/>&#10;&#23450;&#20041;&#26377;&#35760;&#21495;&#30340;&#25991;&#26412; <br/>&#10;4 <br/>&#10;5 <br/>&#10;</mark></map><menu> <br/>&#10;&#23450;&#20041;&#33756;&#21333;&#21015;&#34920; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#20803;&#20449;&#24687; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#39044;&#23450;&#20041;&#33539;&#22260;&#20869;&#30340;&#24230;&#37327; <br/>&#10;&#12288; <br/>&#10;5 <br/>&#10;<nav> <br/>&#10;&#23450;&#20041;&#23548;&#33322;&#38142;&#25509; <br/>&#10;&#12288; <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041; noframe &#37096;&#20998;&#65288;HTML 5 &#20013;&#19981;&#25903;&#25345;&#65289; <br/>&#10;4 <br/>&#10;&#12288; <br/>&#10; <br/>&#10;&#23450;&#20041; noscript &#37096;&#20998; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#23884;&#20837;&#23545;&#35937; <br/>&#10;4 <br/>&#10;5 <br/>&#10;<ol> <br/>&#10;&#23450;&#20041;&#26377;&#24207;&#21015;&#34920; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#36873;&#39033;&#32452; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#19979;&#25289;&#21015;&#34920;&#20013;&#30340;&#36873;&#39033; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#36755;&#20986;&#30340;&#19968;&#20123;&#31867;&#22411; <br/>&#10;&#12288; <br/>&#10;5 <br/>&#10;<p> <br/>&#10;&#23450;&#20041;&#27573;&#33853; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#20026;&#23545;&#35937;&#23450;&#20041;&#21442;&#25968; <br/>&#10;4 <br/>&#10;5 <br/>&#10;<pre> <br/>&#10;&#23450;&#20041;&#39044;&#26684;&#24335;&#21270;&#25991;&#26412; <br/>&#10;4 <br/>&#10;5 <br/>&#10; <br/>&#10;&#23450;&#20041;&#20219;&#20309;&#31867;&#22411;&#30340;&#20219;&#21153;&#30340;&#36827;&#24230; <br/>&#10;&#12288; <br/>&#10;5 <br/>&#10;<q> <br/>&#10;&#23450;&#20041;&#30701;&#30340;&#24341;&#29992; <br/>&#10;4 <br/>&#10;5 <br/>&#10;<rp> <br/>&#10;&#23450;&#20041;&#33509;&#27983;&#35272;&#22120;&#19981;&#25903;&#25345; ruby &#20803;&#32032;&#26174;&#31034;&#30340;&#20869;&#23481; <br/>&#10;&#12288; <br/>&#10;5 <br/>&#10;<rt> <br/>&#10;&#23450;&#20041; ruby &#27880;&#37322;&#30340;&#35299;&#37322; <br/>&#10;&#12288; <br/>&#10;5 <br/>&#10;<ruby> <br/>&#10;&#23450;&#20041; ruby &#27880;&#37322; <br/>&#10;&#12288; <br/>&#10;5 <br/>&#10;<s> <br/>&#10;&#23450;&#20041;&#21152;&#21024;&#38500;&#32447;&#30340;&#25991;&#26412;&#65288;HTML 5 &#20013;&#19981;&#25903;&#25345;&#65289; <br/>&#10;4 <br/>&#10;&#12288; <br/>&#10;<samp> <br/>&#10;&#23450;&#20041;&#26679;&#26412;&#35745;&#31639;&#26426;&#20195;&#30721; <br/>&#10;4 <br/>&#10;5 <br/>&#10;</samp></s></ruby></rt></rp></q></progress></pre></param></p></output></option></optgroup></ol></object></noscript></noframes></nav></meter></meta></menu></link></li></legend></label></kbd></isindex></keygen></ins></input>

0 0
原创粉丝点击