ylbtech-杂项:HTML5-3/3-技术要点
 
1.返回顶部
1、

重要标记

<video>标记
定义和用法:
</video> 标签定义视频,比如电影片段或其他视频流。
<audio> 标记
定义和用法
</audio> 标签定义声音,比如音乐或其他音频流。
实例:
一段简单的HTML5 音频
<audio src="">
您的浏览器不支持 audio 标签。
</audio>
<canvas> 标记
定义和用法:
<canvas> 标签定义图形,比如图表和其他图像。
HTML5 的 canvas 元素使用JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
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>

程序接口

除了原先的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亮点:
  1. jChartFX充分利用了HTML5,CSS和SVG,让您能够在浏览器提供美观优越的图表和更丰富的最终用户体验。
  2. jChartFX拥有很多令人振奋的功能,它在无插件纯JavaScript的浏览器上运行,这意味着在提高了网站安全性和速度的同时,最大程度的减少了网站服务器的负荷。
  3. jChartFX还能够自动整合到jQuery UI ThemeRoller,自动读取并解释jQuery的主题和CSS文件,能够快速适应您的页面布局和设计,无需一行代码。
  4. jChartFX支持JSON,JSON能够帮助您实现,任何数据源中的数据都可以展现到图表中。
  5. jChartFX还支持超过40种的2D、3D图表类型,免费的图表控件中支持如此之多的图表展示类型实属难得。

标签

注:在下面表格中4: 指在HTML 4.01 中定义了该元素 5: 指在HTML 5 中定义了该元素
按字母顺序排列的标签列表
标签
描述
 
<!--...-->
定义注释
4
5
定义文档类型
4
5
<a>
定义超链接
4
5
<abbr>
定义缩写
4
5
HTML 5 中不支持
4
 
<address>
定义地址元素
4
5
<applet>
定义 applet(HTML 5 中不支持)
4
 
<area>
定义图像映射中的区域
4
5
<article>
定义 article
 
5
<aside>
定义页面内容之外的内容
 
5
<audio>
定义声音内容
 
5
<b>
定义粗体文本
4
5
<base>
定义页面中所有链接的基准URL
4
5
HTML 5 中不支持,请使用CSS 代替
4
 
<bdo>
定义文本显示的方向
4
5
<big>
定义大号文本(HTML 5 中不支持)
4
 
<blockquote>
定义长的引用
4
5
<body>
定义 body 元素
4
5
<br>
插入换行符
4
5
<button>
定义按钮
4
5
<canvas>
定义图形
 
5
<caption>
定义表格标题
4
5
<center>
定义居中的文本(HTML 5 中不支持)
4
 
<cite>
定义引用
4
5
<code>
定义计算机代码文本
4
5
<col>
定义表格列的属性
4
5
<colgroup>
定义表格列的分组
4
5
<command>
定义命令按钮
 
5
<datalist>
定义下拉列表
 
5
<dd>
定义定义的描述
4
5
<del>
定义删除文本
4
5
<details>
定义元素的细节
 
5
<dfn>
定义定义项目
4
5
<dir>
定义目录列表(HTML 5 中不支持)
4
 
<div>
定义文档中的一个部分
4
5
<dl>
定义定义列表
4
5
<dt>
定义定义的项目
4
5
<em>
定义强调文本
4
5
<embed>
定义外部交互内容或插件
 
5
<fieldset>
定义 fieldset
4
5
<figcaption>
定义 figure 元素的标题
 
5
<figure>
定义媒介内容的分组,以及它们的标题
 
5
<font>
HTML 5 中不支持
4
 
<footer>
定义 section 或 page 的页脚
 
5
<form>
定义表单
4
5
<frame>
定义子窗口(框架)(HTML 5 中不支持)
4
 
<frameset>
定义框架的集(HTML 5 中不支持)
4
 
<h1> to <h6>
定义标题1 到标题6
4
5
<head>
定义关于文档的信息
4
5
<header>
定义 section 或 page 的页眉
 
5
<hgroup>
定义有关文档中的 section 的信息
4
5
<html>
定义 html 文档
4
5
<i>
定义斜体文本
4
5
<iframe>
定义行内的子窗口(框架)
4
5
<img>
定义图像
4
5
<input>
定义输入域
4
5
<ins>
定义插入文本
4
5
<keygen>
定义生成密钥
 
5
<isindex>
定义单行的输入域(HTML 5 中不支持)
4
 
<kbd>
定义键盘文本
4
5
<label>
定义表单控件的标注
4
5
<legend>
定义 fieldset 中的标题
4
5
<li>
定义列表的项目
4
5
<link>
定义资源引用
4
5
<map>
定义图像映射
4
5
<mark>
定义有记号的文本
4
5
<menu>
定义菜单列表
4
5
<meta>
定义元信息
4
5
<meter>
定义预定义范围内的度量
 
5
<nav>
定义导航链接
 
5
<noframes>
定义 noframe 部分(HTML 5 中不支持)
4
 
<noscript>
定义 noscript 部分
4
5
<object>
定义嵌入对象
4
5
<ol>
定义有序列表
4
5
<optgroup>
定义选项组
4
5
<option>
定义下拉列表中的选项
4
5
<output>
定义输出的一些类型
 
5
<p>
定义段落
4
5
<param>
为对象定义参数
4
5
<pre>
定义预格式化文本
4
5
<progress>
定义任何类型的任务的进度
 
5
<q>
定义短的引用
4
5
<rp>
定义若浏览器不支持 ruby 元素显示的内容
 
5
<rt>
定义 ruby 注释的解释
 
5
<ruby>
定义 ruby 注释
 
5
<s>
定义加删除线的文本(HTML 5 中不支持)
4
 
<samp>
定义样本计算机代码
4
5
<script>
定义脚本
4
5
<section>
定义 section
4
5
<select>
定义可选列表
4
5
<small>
定义小号文本
4
5
<source>
定义媒介源
4
5
<span>
定义文档中的 section
4
5
<strike>
定义加删除线的文本(HTML 5 中不支持)
4
 
<strong>
定义强调文本
4
5
<style>
定义样式定义
4
5
<sub>
定义下标文本
4
5
<summary>
定义 details 元素的标题
 
5
<sup>
定义上标文本
4
5
按字母顺序排列的标签列表
标签
描述
4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 5 中定义了该元素
<table>
定义表格
4
5
<tbody>
定义表格的主体
4
5
<td>
定义表格单元
4
5
<textarea>
定义 textarea
4
5
<tfoot>
定义表格的脚注
4
5
<th>
定义表头
4
5
<thead>
定义表头
4
5
<time>
定义日期/时间
 
5
<title>
定义文档的标题
4
5
<tr>
定义表格行
4
5
<tt>
定义打字机文本
4
5
<u>
定义下划线文本(HTML 5 中不支持)
4
 
<ul>
定义无序列表
4
5
<var>
定义变量
4
5
<video>
定义视频
 
5
<xmp>
定义预格式文本(HTML 5 中不支持)
4
 

事件属性

HTML 5 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性,可以把它们插入 HTML 标签来定义事件行为。
HTML 5 中的新事件属性:onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload
4: 指在HTML 4.01 中定义了该元素。
5: 指在HTML 5 中定义了该元素。
HTML 5不再支持的 HTML 4.01 属性:onreset。
事件属性
属性
描述
4
5
onabort
script
发生 abort 事件时运行脚本。
 
5
onbeforeonload
script
在元素加载前运行脚本。
 
5
onblur
script
当元素失去焦点时运行脚本。
4
5
onchange
script
当元素改变时运行脚本。
4
5
onclick
script
在鼠标点击时运行脚本。
4
5
oncontextmenu
script
当菜单被触发时运行脚本。
 
5
ondblclick
script
当鼠标双击时运行脚本。
4
5
ondrag
script
只要脚本在被拖动就运行脚本。
 
5
ondragend
script
在拖动操作结束时运行脚本。
 
5
ondragenter
script
当元素被拖动到一个合法的放置目标时,执行脚本。
 
5
ondragleave
script
当元素离开合法的放置目标时。
 
5
ondragover
script
只要元素正在合法的放置目标上拖动时,就执行脚本。
 
5
ondragstart
script
在拖动操作开始时执行脚本。
 
5
ondrop
script
当元素正在被拖动时执行脚本。
 
5
onerror
script
当元素加载的过程中出现错误时执行脚本。
 
5
onfocus
script
当元素获得焦点时执行脚本。
4
5
onkeydown
script
当按钮按下时执行脚本。
4
5
onkeypress
script
当按键被按下时执行脚本。
4
5
onkeyup
script
当按钮松开时执行脚本。
4
5
onload
script
当文档加载时执行脚本。
4
5
onmessage
script
当 message 事件触发时执行脚本。
 
5
onmousedown
script
当鼠标按钮按下时执行脚本。
4
5
onmousemove
script
当鼠标指针移动时执行脚本。
4
5
onmouseover
script
当鼠标指针移动到一个元素上时执行脚本。
4
5
onmouseout
script
当鼠标指针移出元素时执行脚本。
4
5
onmouseup
script
当鼠标按钮松开时执行脚本。
4
5
onmousewheel
script
鼠标滚轮滚动时执行脚本
 
5
onreset
script
当表单重置时执行脚本。不支持。
4
 
onresize
script
当元素调整大小时运行脚本
 
5
onscroll
script
当元素滚动条被滚动时执行脚本
 
5
onselect
script
当元素被选中时执行脚本。
4
5
onsubmit
script
当表单提交时运行脚本。
4
5
onunload
script
当文档卸载时运行脚本。
 
5

标签属性

HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性(有个别例外)。
4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 5 中定义了该元素
HTML 5标签中的新属性有:contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template
HTML 5 中不再支持的属性:accesskey
标签属性
属性
描述
4
5
acceskey
a character
设置访问一个元素的键盘快捷键。不支持。
4
 
class
class_ruleorstyle_rule
元素的类名。
4
5
contenteditable
true
false
设置是否允许用户编辑元素。
 
5
contentextmenu
id of a menu element
给元素设置一个上下文菜单。
 
5
dir
ltr
rtl
设置文本方向
4
5
draggable
true
false
auto
设置是否允许用户拖动元素。
 
5
id
id_name
元素的唯一 id。
4
5
irrelevant
true
false
设置元素是否相关。不显示非相关的元素。
 
5
lang
language_code
设置语言码。
4
5
ref
urlorelementID
引用另一个文档或文档上另一个位置。仅在 template 属性设置时使用
 
5
registrationmark
registration mark
为元素设置拍照。可规定于任何 <rule> 元素的后代元素,
除了 <nest> 元素。
 
5
style
style_definition
行内的样式定义。
4
5
tabindex
number
设置元素的 tab 顺序。
4
5
template
urlorelementID
引用应该应用到该元素的另一个文档或本文档上另一个位置
 
5
title
tooltip_text
显示在工具提示中的文本。
4
5

异常处理

HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比,HTML 5给出了解析的详细规则,力图让不同的浏览器即使在发生语法错误时也能返回相同的结果

优势

HTML5可以提供:
1.提高可用性和改进用户的友好体验;
2.有几个新的标签,这将有助开发人员定义重要的内容;
3.可以给站点带来更多的多媒体元素(视频和音频);
4.可以很好的替代FLASH和Silverlight;
5.当涉及到网站的抓取和索引的时候,对于SEO很友好;
6.将被大量应用于移动应用程序和游戏。
谷歌和HTML5
2010年5月22日,谷歌创建了一个涂鸦来纪念Pac Man的视频游戏。这个涂鸦是一个动画,同时也是一个可以玩的Pac Man的游戏。这个涂鸦就是谷歌通过使用HTML5标准制作的,当然谷歌也提供一个FLASH版本来支持不兼容HTML5的浏览器。我敢打赌,这是大多数 互联网网民第一次和HTML5的接触。对于个人来说,这是一个兴奋的消息。以我的观点,这个涂鸦提供了一个机会可以窥视未来互联网、网页、移动应用软件和游戏等发展趋势。对于搜索引擎优化,他开辟了我更多的想象,它让我思考HTML5在SEO领域的潜力。网站转移到HTML5标准对于SEO有什么优势?
HTML 5开发领域的领军人物包括Sencha,Adobe,Appcelerator,appMobi及Facebook,亚马逊,Google三大巨头。不管你是想开发出新型视频应用的开发商如Brightcover还是想开发新型音频应用的开发商如Soundcloud,不论是桌面应用还是移动应用,HTML 5都是创新的主旋律。
HTML5与SEO
一:使搜索引擎更加容易抓取和索引
对于一些网站,特别是那些严重依赖于FLASH的网站HTML5是一个大福音。如果你有一个都是FLASH的站点,你就一定会看到切换到HTML5的 好处。首先,搜索引擎的蜘蛛将能够抓取你的站点和索引你的内容。所有嵌入到动画中的内容将全部可以被搜索引擎读取。在搜索引擎优化的基本理论中,这一方面将会驱动你的网站获得更多的右击流量。
二:提供更多的功能,提高用户的友好体验
使用HTML5的另一个好处就是它可以增加更多的功能。对于HTML5的功能性问题,我们从全球几个主流站点对它的青睐就可以看出。社交网络大亨Facebook已经推出他们期待已久的基于HTML5的iPad应用平台,潘多拉也推出他们基于HTML5的音乐播放器的新版本。游戏平台 Zynga也在推出了三款新的在移动设备浏览器上运行的基于HTML5的游戏等等。每天都有不断的基于HTML5的网站和HTML5特性的网站被推 出。保持站点处于新技术的前沿,也可以很好的提高用户的友好体验。
三:可用性的提高,提高用户的友好体验
最后我们可以从可用性的角度上看,HTML5可以更好的促进用户于网站间的互动情况。多媒体网站可以获得更多的改进,特别是在移动平台上的应用,使用 HTML5可以提供更多高质量的视频和音频流。到目前为止,事实就是iPhone和iPad将不会支持FLASH,同时ADOBE公司也公开声明将 停止FLASH基于移动平台的开发,可以这么说——移动平台日后视频音频是HTML5的天下!
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

杂项:HTML5-3/3-技术要点的更多相关文章

  1. HTML5技术要点

    HTML5技术要点 1.HTML5视频 <!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg ...

  2. 吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

  3. React.js 常用技术要点

    最近在公司的一个移动端WEB产品中使用了React这个框架(并不是React-Native),记录一下在开发过程中遇到的各种问题以及对应的解决方法,希望能对读者有所帮助. React原则 React不 ...

  4. K2 Blackpearl开发技术要点(Part2)

    转:http://www.cnblogs.com/dannyli/archive/2012/09/14/2685282.html K2 Blackpearl开发技术要点(Part2)  

  5. K2 Blackpearl开发技术要点(Part1)

    转:http://www.cnblogs.com/dannyli/archive/2012/09/14/2685260.html K2 Blackpearl开发技术要点(Part1) 预知后事如何,请 ...

  6. R语言统计分析技术研究 特征值选择技术要点

    特征值选择技术要点                          作者:王立敏 文章来源:  网络 1.特征值 特征值是线性代数中的一个重要概念.在数学,物理学,化学,计算机等领域有着广泛的应用. ...

  7. Excel阅读模式/单元格行列指示/聚光灯开发 技术要点再分享

    1. 引言 文题中所谓技术要点再分享,本意是想在大神Charltsing Liu的博文“简单介绍Excel单元格行列指示的实现原理(俗称聚光灯功能)”的基础上写一点个人开发体会.写本文的初衷有三点,一 ...

  8. 【转】vue项目重构技术要点和总结

    vue数据更新, 视图未更新 这个问题我们经常会遇到,一般是vue数据赋值的时候,vue数据变化了,但是视图没有更新.这个不算是项目重构的技术要点,也和大家分享一下vue2.0通常的解决方案吧! 解决 ...

  9. iOS开发ARC机制下的内存管理技术要点

    转载一篇: iOS开发ARC内存管理技术要点.ARC内存管理原则总结.iOS ARC内存管理总结 ARC内存管理机制 (一)ARC的判断准则: 只要没有任何一个强指针指向该对象,该对象就会被释放. ( ...

  10. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

随机推荐

  1. springcloud- FeginClient 调用统一拦截添加请求头 RequestInterceptor ,被调用服务获取请求头

    使用场景: 在springcloud中通过Fegin调用远端RestApi的时候,经常需要传递一些参数信息到被调用服务中去,比如从A服务调用B服务的时候, 需要将当前用户信息传递到B调用的服务中去,我 ...

  2. Java线程的五种状态详解

    状态转换图 1.new状态:通过new关键字创建了Thread或其子类的对象 2.Runnable状态:即就绪状态.可从三种状态到达,new状态的Thread对象调用start()方法,Running ...

  3. C++设计模式之-外观模式

    意图: 为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一系统更加容易使用. 适用性: 1.在设计初期阶段,应该要有意识的将不同的两个层分离,比如经典的三层架构,就需要 ...

  4. Redis数据库的学习及与python的交互

    1. 数据库简介: 当前主要使用两种类型的数据库:关系型数据库(RDBMS).非关系型数据库(NoSQL); (1). 关系型数据库RDBMS: 是建立在关系模型基础上的数据库,借助于集合代数等数学概 ...

  5. python marshal 对象序列化和反序列化

    有时候,要把内存中的一个对象持久化保存到磁盘上,或者序列化成二进制流通过网络发送到远程主机上.Python中有很多模块提供了序列化与反序列化的功能,如:marshal, pickle, cPickle ...

  6. jQuery AJAX 与 jQuery 事件

    jQuery 本身即是为事件处理而特别设计的,jQuery 事件处理方法是 jQuery 中的核心函数. $(function() { ... }); 是如下格式的缩写: $(document).re ...

  7. allow-hotplug eth0 allow-hotplug error

    /********************************************************************* * allow-hotplug eth0 error * ...

  8. Python3 移动文件——合集

    文件/文件夹操作头文件 import os import shutil 参考 Python3批量移动指定文件到指定文件夹

  9. 一个简单的程序,统计文本文档中的单词和汉字数,逆序排列(出现频率高的排在最前面)。python实现。

    仅简单统计英文. from collections import Counter f = open('1') c = Counter() for line in f: g = (x for x in ...

  10. Loj 2028 随机序列

    Loj 2028 随机序列 连续的乘号会将序列分成若干个块,块与块之间用加减号连接: \[ (a_1*a_2*...a_i)\pm(a_{i+1}*a_{i+2}*...a_j)\pm... \] 除 ...