‘壹’ 什么HTML5最近好像挺火的
HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。
HTML的特性
A. 语义特性(Class:Semantic)
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。
B. 本地存储特性(Class: OFFLINE & STORAGE)
基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一) 和API说明文档。
C. 设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation 功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联
D. 连接特性(Class: CONNECTIVITY)
更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。
E. 网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。
F. 三维、图形及特效特性(Class: 3D, Graphics & Effects)
基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。
G. 性能与集成特性(Class: Performance & Integration)
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。
H. CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。
Html 5与Html 4的区别
A.简化的语法
更简单的doctype声明是HTML5里众多新特征之一。现在你只需要写,这就行了。HTML5的语法兼容HTML4和XHTML1,但不兼容SGML。
B. 一个替代Flash的新”canvas”标记
对于Web用户来说,Flash既是一个惊喜,也是一种痛苦。有很多的Web开发人员对HTML5对Flash产生的威胁很不满。但对于那些忍受着要花几年时间加载和运行的臃肿的Flash视频的人来说,用新的 “canvas” 标记生成视频的技术已经到来。
目前, “canvas” 标记并不能提供所有的Flash具有的功能,但假以时日,Flash必将从web上淘汰。我们拭目以待,因为很多人还并不认同这种观点。
C. 新的 “header” 和 “footer” 标记
HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么这些”header” 和”footer” 等新标记的出现,它们是专门为标志网站的这些部分设计的。在开发网站时,你不在需要用”div”标记来标注网页的这些部分。
D. 新的 “section” 和 “article” 标记
跟”header” 和 “footer”标记类似,HTML5中引入的新的”section” 和 “article” 标记可以让开发人员更好的标注页面上的这些区域。
据推测,除了让代码更有组织外,它也能改善SEO效果,能让搜索引擎更容易的分析你的页面。
E.新的 “menu” 和 “figure” 标记
新的”menu”标记可以被用作普通的菜单,也可以用在工具条和右键菜单上,虽然这些东西在页面上并不常用。类似的,新的 “figure” 标记是一种更专业的管理页面上文字和图像的方式。当然,你可以用样式表来控制文字和图像,但使用HTML5内置的这个标记更适合。
F. 新的 “audio” 和 “video” 标记
新的”audio” 和 “video” 标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称,它们是用来嵌入音频和视频文件的。
除此之外还有一些新的多媒体的标记和属性,例如”track”,它是用来提供跟踪视频的文字信息的。有了这些标记,HTML5使Web2.0特征变得越来越友好。问题在于,在HTML5还未被广泛的接受之前,Web2.0还是老的Web2.0。
G. 全新的表单设计
新的 “form” 和 “forminput” 标记对原有的表单元素进行的全新的修改,它们有很多的新属性(以及一些修改)。如果你经常的开发表单,你应该花时间更详细的研究一下。
H. 不再使用 “b” 和 “font” 标记
对我个人来说,这是一个让我不太理解的改动。我并不认为去除 “b” 和 “font”标记会带来多大的好处。我知道,官方的指导说这些标记可以通过CSS来做更好的处理,但这样一来,为了在文章一两个地方出现的这种标记,你就需要在独立的css和文本两个地方来实现这一的功能,岂不笨拙。也许我们以后会习惯这种方法。
i. 不再使用 “frame”, “center”, “big” 标记
事实上,我已经记不清曾经何时用过这些标记了,所以,我并不为去除这些标记感到悲哀。相同的原因,有更好的标记能实现它们的功能——这很好,任何作废的标记从标准中剔除都是受欢迎的。
改进与沿革
HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<audio>和<video>标记。
1.取消了一些过时的HTML4标记
其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。
HTML5 吸取了XHTML2 一些建议,包括一些用来改善文档结构的功能,比如,新的HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div。
2.将内容和展示分离
b 和 i 标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。
3.一些全新的表单输入对象
包括日期,URL,Email 地址,其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据,这一使用机器可以识别的标签标注内容的方法,使语义Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。
4.全新的,更合理的Tag
多媒体对象将不再全部绑定在 object 或 embed Tag 中,而是视频有视频的Tag,音频有音频的 Tag。
5.本地数据库
这个功能将内嵌一个本地的sql 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。
6.Canvas 对象
将给浏览器带来直接在上面绘制矢量图的能力,这意味着用户可以脱离Flash 和Silverlight,直接在浏览器中显示图形或动画。
7.浏览器中的真正程序
将提供 API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰Tag 将被剔除,而使用CSS。
8.Html5取代Flash在移动设备的地位。
重要标记
<video>标记
定义和用法:
<video> 标签定义视频,比如电影片段或其他视频流。
<audio> 标记
定义和用法
<audio> 标签定义声音,比如音乐或其他音频流。
实例:
一段简单的HTML 5 音频
<audio src="someaudio.wav">
您的浏览器不支持 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。
异常处理
HTML5 (text/html) 浏览器将在错误语法的处理上更加灵活。HTML5 在设计时保证旧的浏览器能够安全的忽略掉新的HTML5代码。与HTML4.01相比,HTML5 给出了解析的详细规则,力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。
‘贰’ 请教前辈,什么是HTML5啊要有什么基础吗
1,什么是HTML5
HTML5是HTML下一个主要的修订版本,现在仍处于发展阶段。目标是取代1999年所制定的HTML 4.01和XHTML 1.0 标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。
学到话主要是学html标记语言,css,js,canvas,dom以及特效实现等具体的话你可以看下【itch培训】,他们有专门的h5课程。
2,要有什么基础
html5就是学习更多网络知识的基础
最好不要把html5当成一种技术来学习,把它作为工具
html5涉及的领域很多,包括seo,javascript,css,xml,离线数据库等等
学习html5本身很简单但是深入学习其他技术才更重要
‘叁’ 用哪种离线数据库实现离线缓存比较好
端可以使用数据库,但是不使用数据库的方案通常也同样是最好、最恰当的方案。例如 Html5 标准的 localStorage 等,桌面端你可以序列化、反序列化内部对象,并且每隔几分钟就保存一次。等等。
在现在这个互联网、4G条件下,实际上联网是一个标准化的东西,不联网才是不标准化的。15年前根本没法比。而有些人的思维方式可能还是15年前的。
‘肆’ html5 的“本地存储”有什么作用,是用在什么地方的,还有。离线应用程序,都是用来做什么的!啊啊啊!!
html5的本地存储 就是一个轻量级的sqllite数据库
离线应用 是ApplicationCache 用于在断开网络连接的情况下 读取本地缓存
浏览器缓存 不安全
本地缓存 可以指定缓存页面 及文件
‘伍’ html5 的离线储存方式有哪些
localStorage - 永久存储
sessionStorage -关闭页面消失
还可以创建本地数据库 -没研究过
‘陆’ 离线操作数据库的流程有哪些
摘要 公司快速发展人员增加,因IT问题无法专注核心业务,糟糕的网络环境更是降低员工工作效率。选择上海芦洲应急服务,专职工程师3分钟响应、2小时内到场服务。
‘柒’ HTML5怎么连接数据库
HTML5属于前端,连接数据库的话需要一门后端语言,比如PHP,java一类。你可以用java去连接数据库。html5其实是html的一个版本,只不过在国内被扩大了范围,变成了html
+
css
+
javascript。数据库跟html5就像头与腿的关系,2者之间还隔着个身体(java,php,node等)
‘捌’ html5的优点
HTML5为什么如此受欢迎?主要因为它本身的优势。HTML5的主要优势如下:
1、基于HTML5强大的兼容性。因为HTML5提供了前所未有的数据与应用接入开放接口,使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联,就因为这种强大的兼容性,使得在当下开发界是如此的火,同样也是因为这强大的兼容性,使得手机应用软件,app更适合,也更方便。所以更适合手机app软件开发,正好补充了手机小巧的不足。
2、HTML5开发支持的手机系统有android、ios。
3、HTML5其突出的特点就是强化了web页的表现性,追加了本地数据库,可以用作离线应用的开发,离线应用就是把需要的资源先缓存到本地,下次再查看时无需联网。
4、HTML5开发能提供更快、更简便的服务,代码可高度重用,服务发布方便。
5、动画、游戏动态效果,地理定位等很多app应用正在崛起,而HTML5技术的强大优势就是这种让我们惊叹的效果。而未来采用HTML5开发app的,将会大量减少代码量,应用软件也会得到更高的用户体验,更好的视觉效果。
‘玖’ HTML5 Web SQL 数据库怎样实现多表查询
HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的。今天,我们一起来了解HTML 5的Web SQL Database API:openDatabase、transaction、executeSql。
Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持Web SQL Database。HTML5的Web SQL Databases的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的。今天,我们一起来了解HTML 5的Web SQL Database API。
下面将一一将介绍怎样创建打开数据库,创建表,添加数据,更新数据,删除数据,删除表 。
先介绍三个核心方法
1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction:这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql:这个方法用于执行真实的SQL查询。
第一步:打开连接并创建数据库
代码如下:
var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
if (!dataBase) {
alert("数据库创建失败!");
} else {
alert("数据库创建成功!");
}
解释一下openDatabase方法打开一个已经存在的数据库,如果数据库不存在,它还可以创建数据库。几个参数意义分别是:
1,数据库名称。
2,版本号 目前为1.0,不管他,写死就OK。
3,对数据库的描述。
4,设置数据的大小。
5,回调函数(可省略)。
初次调用时创建数据库,以后就是建立连接了。
创建的数据库就存在本地,路径如下:
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987 。
创建的是一个sqllite数据库,可以用SQLiteSpy打开文件,可以看到里面的数据。SQLiteSpy是一个绿色软件,可以网络一下下载地址或SQLiteSpy官方下载:SQLiteSpy。
第二步:创建数据表
代码如下:
this.createTable=function() {
dataBase.transaction( function(tx) {
tx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function(tx,result){ alert('创建stu表成功'); },
function(tx, error){ alert('创建stu表失败:' + error.message);
});
});
}
解释一下,
executeSql函数有四个参数,其意义分别是:
1)表示查询的字符串,使用的SQL语言是SQLite 3.6.19。
2)插入到查询中问号所在处的字符串数据。
3)成功时执行的回调函数。返回两个参数:tx和执行的结果。
4)一个失败时执行的回调函数。返回两个参数:tx和失败的错误信息。
第三步:执行增删改查
1)添加数据:
代码如下:
this.insert = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, '徐明祥'],
function () { alert('添加数据成功'); },
function (tx, error) { alert('添加数据失败: ' + error.message);
} );
});
2)查询数据
代码如下:
this.query = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"select * from stu", [],
function (tx, result) { //执行成功的回调函数
//在这里对result 做你想要做的事情吧...........
},
function (tx, error) {
alert('查询失败: ' + error.message);
} );
});
}
解释一下
上面代码中执行成功的回调函数有一参数result。
result:查询出来的数据集。其数据类型为 SQLResultSet ,就如同C#中的DataTable。
SQLResultSet 的定义为:
代码如下:
interface SQLResultSet {
readonly attribute long insertId;
readonly attribute long rowsAffected;
readonly attribute SQLResultSetRowList rows;
};
其中最重要的属性—SQLResultSetRowList 类型的 rows 是数据集的“行” 。
rows 有两个属性:length、item 。
故,获取查询结果的某一行某一列的值 :result.rows[i].item[fieldname] 。
3)更新数据
代码如下:
this.update = function (id, name) {
dataBase.transaction(function (tx) {
tx.executeSql(
"update stu set name = ? where id= ?",
[name, id],
function (tx, result) {
},
function (tx, error) {
alert('更新失败: ' + error.message);
});
});
}
4)删除数据
代码如下:
this.del = function (id) {
dataBase.transaction(function (tx) {
tx.executeSql(
"delete from stu where id= ?",
[id],
function (tx, result) {
},
function (tx, error) {
alert('删除失败: ' + error.message);
});
});
}
5)删除数据表
代码如下:
this.dropTable = function () {
dataBase.transaction(function (tx) {
tx.executeSql('drop table stu');
});
}