html的标准,html标签规范

　　HTML5已经出来很久了。不过由于我不是搞前端的，只知道有这个东西，具体概念有点模糊(其实是一系列标准和规范)；所以，去年我对HTML5做了一个简单的总结，今天才看到。我想把它放在我的博客里，以免丢失。如有错误，请指正。我是前端的菜鸟。

　　先来个目录，如下：

　　什么是HTML5

　　HTML5发展历史

　　5 html 5的详细介绍

　　视频/音频、canvas SVG、可编辑内容的拖放、Web存储、Web Worker、服务器发送事件、表单增强、语义标记以及更多HTML5标准

　　html 5实例分析

　　飞翔的鸟

　　条形图

　　5 html 5的发展前景

　　参考资源

　　什么是HTML5

　　简单来说，HTML5是用于制定现代丰富Web内容的一系列相关技术的总称。

　　HTML5 HTML5核心规范CSS 3 JavaScriptHTML5和CSS主要负责接口，JavaScript负责逻辑处理；

　　目的：减少Internet Rich Applications (RIA)对Flash、Silverpght、Java Applet等的依赖。并提供更多可以有效增强网络应用的API。

　　以下是一个典型的RIA (rich internet apps)网页，其中包含了一些图表、视频、游戏等内容：

　　HTML5发展历史

　　2004年，WHATWG (Web超文本技术工作组)提出了HTML5的前身Web AppConferences 1.0草案；

　　2007年，W3C同意采用HTML5作为标准，并成立了一个新的HTML工作小组。

　　2014年10月28日，W3C正式发布HTML5.0推荐标准；

　　2016年底前，计划发布HTML5.1

　　将来HTML5.1发布后，工作组会重复HTML5.1的步骤，做一个新的HTML5.2，不断完善和丰富其功能。

　　下表显示了HTML 5标准的演进：

　　2012年计划

　　2012

　　2013

　　2014

　　2015

　　2016

　　HTML 5.0

　　候选版本

　　征求评估

　　推荐标准

　　HTML 5.1

　　第一份工作草案

　　最后打电话

　　候选版本

　　推荐标准

　　HTML 5.2

　　第一份工作草案

　　Tips：

　　问：什么是WHATWG？

　　答：Mozilla基金会和Opera软件公司于2004年6月向W3C提交了一份立场文件，但被拒绝。Mozilla、Opera和Apple各自成立了WHATWG (Web超文本技术工作组)，还提出了Web Apppcations 1.0。

　　问：问：HTML5.0和HTML5.1有什么区别？

　　答：5.1是5.0的超集，只包含稳定特性，5.1包含不稳定特性和5.0中省略的其他新特性；目的：为了尽快完成HTML5，W3C抛弃了一些不稳定和有争议的元素，等到后续的5.1版本。

　　HTML5详细介绍HTML5 视频音频

　　到目前为止，网页上显示视频和音频仍然没有标准，大部分是通过插件(比如Flash)来显示的；

　　然而，使用HTML5，我们可以简单地使用视频和音频标签来播放音频和视频，而不依赖于任何插件，如下面的代码所示：

　　XML/HTML代码将内容复制到剪贴板

　　视频宽度=320 高度=240 控件=控件

　　sources RC=/I/movie . ogg type= video/ogg

　　sources RC=/I/movie . MP4 type= video/MP4

　　您的browserdoesnotsupportthevideotag。

　　/视频

　　XML/HTML代码将内容复制到剪贴板

　　audiocontrols=controls

　　sources RC=/I/song . ogg type= audio/ogg

　　sources RC=/I/song . MP3 type= audio/mpeg

　　您的browserdoesnotsupporttheaudioelement。

　　/音频

　　以下是视频和音频的效果图：

　　Tips：1、HTML5视频和音频元素有方法、属性和事件。可以使用js动态控制视频和音频播放暂停等动作；2.视频和音频元素允许多个源元素。源元素可以链接不同的文件。浏览器将使用第一个识别的格式。

　　PS: YouTube默认使用HTML5播放器。可以在官网登录其www.youtube.com查看源代码，如下：

　　HTML5 Canvas SVG

　　画布Canvas

　　HTML5的canvas元素使用JavaScript在网页上绘制图像，有多种方式绘制路径、矩形、圆形、字符和添加图像。

　　XML/HTML代码将内容复制到剪贴板

　　canvasid= my canvas width= 200 height= 100 style= border:1 px sopd # c3c3c 3；

　　您的browserdoesnotsupportthecanvaselement。

　　/画布

　　scripttype=text/javascript

　　varc=document . getelementbyid( my canvas )；

　　var ccxt=c . get context( 2d )；

　　cxt.moveTo(10，10)；

　　cxt.pneTo(150，50)；

　　cxt.pneTo(10，50)；

　　cxt . stroke()；

　　/脚本

　　以下是效果图：

　　可伸缩矢量图形 (Scalable Vector Graphics)

　　XML/HTML代码将内容复制到剪贴板

　　svgxmlns= http://www . w3 . org/2000/SVG version= 1.1 height= 190

　　多边形点数=100，1040，180190，6010，60160，180

　　style=fill:红色；笔画：蓝色；笔画宽度：3；填充规则：偶数奇数；/

　　/svg

　　Canvas SVG 的常见应用

　　很多小应用都可以用canvas和SVG来实现，尤其是canvas，如下图所示：

　　5 HTML5可编辑内容拖放

　　Contenteditable全局属性

　　Contenteditable可用于实现fckeditor。目前很多fckeditor都是用这个属性实现的，如下图所示：

　　Drag 和 drop

　　HTML5的拖放将把与用户的交互带到另一个层面，并将对如何设计用户交互产生重大影响。

　　的主要事件函数：Ondragstart()、Ondragover()、ondrop()；

　　在下面的代码示例中，将一个P拖放到另一个P中：

　　将JavaScript代码内容编码到剪贴板

　　scripttype=text/javascript

　　功能性下降

　　{

　　ev . prevent default()；

　　}

　　功能阻力(电动汽车)

　　{

　　ev.dataTransfer.setData(Text ，ev . target . id)；

　　}

　　函数drop(ev)

　　{

　　ev . prevent default()；

　　var data=ev . data transfer . get data( Text )；

　　ev . target . appendchild(document . getelementbyid(data))；

　　}

　　/脚本

　　/头

　　身体

　　PID= P1 ondrop= drop(event) ondragover= allow drop(event)

　　img src=/I/w3 school _ logo _ black . gif draggable= true ondragstart= drag(event) id= drag 1 /

　　PID= p2 on drop= drop(event) on dragover= allow drop(event)/p

　　HTML5 Web存储

　　在说HTML5 Web存储之前，先说一下cookie的缺点。主要有三点：

　　Cookie将被附加到每个HTTP请求上，这实际上增加了流量。

　　因为HTTP请求中的Cookie是以明文形式传递的，所以安全性是一个问题。(除非使用HTTPS)

　　Cookie的大小限制在4KB左右。这不足以满足复杂的存储需求。

　　让我们再来看看HTML5 Web存储的优势：

　　没有额外的请求报头数据。

　　设置、读取和删除数据的丰富方法

　　默认5MB存储限制

　　在HTML5中，有两种形式的Web存储：localStorag和sessionStorage，如下所示：

　　localStorage

　　存储数据没有时间限制；

　　将JavaScript代码内容编码到剪贴板

　　scripttype=text/javascript

　　local storage . last name= Smith ；

　　document . write( last name: local storage . last name)；

　　/脚本

　　sessionStorage

　　当用户关闭浏览器窗口时，数据将被删除。

　　将JavaScript代码内容编码到剪贴板

　　scripttype=text/javascript

　　session storage . last name= Smith ；

　　document.write(会话存储.姓氏)；

　　/脚本

　　Tips:Cookie必不可少：Cookie是用来与服务器交互的，是作为HTTP规范的一部分而存在的，而Web存储的创建只是为了在本地“存储”数据。

　　HTML5 Web Workers

　　Web worker是后台运行的JavaScript，独立于其他脚本，不会影响页面的性能(JS多线程解决方案)。

　　网络工作者的基本原理就是在当前爪哇岛描述语言的主线程中，使用工人类加载一个爪哇岛描述语言文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

　　优势：异步执行复杂计算，不影响页面的展示

　　如下为一个求和的代码示例：

　　Java Script语言代码复制内容到剪贴板

　　脚本

　　varw

　　functionstartWorker(){

　　if(typeof(Worker)！==未定义){

　　if(typeof(w)==undefined){

　　w=新工人( RS/demo _ workers。js’)；

　　}

　　w.onmessage=function(event){

　　文档。getelementbyid( result )。innerHTML=event.data

　　};

　　}否则{

　　文档。getelementbyid( result )。innerHTML=抱歉，您的 browserdoesnotsupportweb workers . ；

　　}

　　functionstopWorker(){

　　w。terminate()；

　　}

　　/脚本

　　demo_workers.js文件，其中的postMessage()方法，用于向超文本标记语言页面传回一段消息。

　　Java Script语言代码复制内容到剪贴板

　　vari=0；

　　functiontimedCount()

　　{

　　I=I 1；

　　邮件（一);

　　setTimeout(timedCount()，500)；

　　}

　　定时计数()；

　　Tips:

　　1.不能跨域加载射流研究…

　　2 .工人内代码不能访问数字正射影像图

　　HTML 5 服务器发送事件

　　传统的网页都是浏览器向服务器"查询"数据，但是很多场合，最有效的方式是服务器向浏览器"发送"数据。比如，每当收到新的电子邮件，服务器就向浏览器发送一个"通知",这要比浏览器按时向服务器查询（波尔彭)更有效率。

　　HTML5服务器发送事件（服务器发送的事件)允许网页获得来自服务器的更新；

　　举个例子，如下，其中服务器端使用爪哇的支柱2框架，会向浏览器发送服务器最新的时间数据：

　　服务端代码：

　　Java Script语言代码复制内容到剪贴板

　　publicclassseextendsactionsupport {

　　privateInputStreamsseStream

　　pupcinputstreamgetssestream(){

　　返回流

　　}

　　pupcstringhandlesse(){

　　系统。出去。println( InsidehandleSSE())；

　　Stringresult=data: newDate().toString() \ n \ n ；

　　SSE stream=newbytearrayiputstream(结果。getbytes())；

　　系统。出去。println( ExitinghandleSSE())；

　　return成功

　　}

　　Java Script语言代码复制内容到剪贴板

　　action name= handleSSE class= pichen。Java。html 5。测试。“SSE”方法=“handleSSE”

　　结果名称=成功类型=流

　　param name= content type text/event-stream/param

　　paramname=inputName 的流/param

　　/结果

　　/操作

　　客户端代码：

　　Java Script语言代码复制内容到剪贴板

　　poutputid= result 输出值/输出/p

　　脚本

　　（函数（全局、窗口、文档){

　　使用严格的；

　　functionmain(){

　　窗户。addeventpstener( DOMContentLoaded ，内容已加载)；

　　}

　　functioncontentLoaded(){

　　varresult=文档。getelementbyid(“结果”)；

　　varstream=新事件源( handlesse。动作’)；

　　溪流。on消息=功能(事件){

　　var数据=事件。数据“byon消息”；

　　结果。值=数据；

　　}

　　main()；

　　})(这个，窗，窗。文档)；

　　/脚本

　　HTML 5 表单增强功能

　　新的投入类型

　　电子邮件

　　网址

　　数量

　　范围

　　日期选择器（日期、月、周、时间、日期时间、本地日期时间)

　　搜索

　　颜色

　　下图为各个投入元素的效果图：

　　HTML5 的新的表单元素

　　数据发布

　　keygen

　　输出

　　下图为数据发布的示例：

　　HTML5 的新的表单属性

　　新的形式属性：

　　自动完成

　　更新

　　新的投入属性：

　　自动完成

　　自动对焦

　　形式

　　高度和宽度

　　太平洋标准时间

　　最小值、最大值和步骤

　　多重

　　模式（正则表达式)

　　占位符

　　必需的

　　表单覆盖（表单操作、表单类型、表单方法、表单更新、表单目标)

　　下表为各个浏览器对表单属性的支持情况：

　　输入类型

　　工业管理学(工业工程)

　　火狐浏览器

　　歌剧

　　铬

　　旅行队

　　自动完成

　　8.0

　　3.5

　　9.5

　　3.0

　　4.0

　　自（动）调焦装置

　　不

　　10.0

　　3.0

　　4.0

　　形式

　　不

　　9.5

　　不

　　表单覆盖

　　不

　　10.5

　　不

　　高度和宽度

　　8.0

　　3.5

　　9.5

　　3.0

　　4.0

　　聚苯乙烯纤维

　　不

　　9.5

　　不

　　最小、最大和步长

　　不

　　9.5

　　3.0

　　不

　　多个的

　　不

　　3.5

　　不

　　3.0

　　4.0

　　更新

　　不

　　模式

　　不

　　9.5

　　3.0

　　不

　　占位符

　　不

　　3.0

　　需要

　　不

　　9.5

　　3.0

　　不

　　HTML5语义化标记

　　HTML5可以使用语义标签，而不是大量无意义的P标签。这个语义特性不仅提高了网页的质量和语义，还减少了以前用于CSS或JS调用的class和id属性。

　　更多HTML 5标准

　　HTML5推荐标准（W3C官网推荐标准）

　　http://www.w3.org/TR/html5/

　　或者参考w3school。

　　HTML5 完整的新标签

　　http://www.w3school.com.cn/tags/index.asp

　　HTML 全局属性

　　http://www . w3school . com . cn/tags/html _ ref _ standard attributes . ASP

　　全局事件属性

　　http://www.w3school.com.cn/tags/html_ref_eventattributes.asp

　　飞鸟的HTML5示例分析

　　基于Phaser(开源HTML5 2D游戏开发框架)，主要需要编写以下三个函数：

　　Preload函数（执行一次）：

　　加载资源(背景、图片和其他资源)

　　Create函数（执行一次）：

　　给鸟一个向下的重力，失去控制时自动下落。

　　添加键盘空格事件，按下空格时改变鸟的坐标。

　　创建墙事件。每隔1.5s，一排墙会向左移动(中间随机3块)。

　　Update函数（每帧执行）：

　　确定是否飞出边界。

　　确定它是否接触到墙壁。

　　效果图如下：

　　条形图

　　主要步骤：

　　用画布画一张图表

　　定义鼠标点击事件(获取鼠标坐标以区分点击的目标)，$ (canvas)。on (cpck ，mouse cock)；

　　定义鼠标悬停事件(获取鼠标坐标以区分悬停的目标)，$ (canvas)。on (mousemove ，mousemove)；

　　效果图：

　　5 html 5的发展前景

　　目前主要浏览器对HTML5的支持(满分为555)，http://html5test.com/

　　总之，无论是桌面还是手机浏览器，谷歌对HTML5的支持都是最全面的。

　　主要公司的行动

　　谷歌，宣布Flash广告自动转换为HTML5版本；Chrome浏览器

　　——Youtube，使用HTML 5的播放器；

　　——亚马逊，宣布停止所有Flash广告；

　　腾讯、微信朋友圈游戏、贺卡或邀请函；空间QQ H5游戏helpp

　　百度，直达号；

　　阿里、UC浏览器、手机淘宝H5游戏helpp

　　以上关于最新HTML标准HTML5(必看)的总结，就是边肖分享的全部内容。希望能给你一个参考和支持。

　　原地址：http://www.cnblogs.com/chenpi/archive/2016/06/12/5578011.html

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读