HTML5学习笔记(一)-概述

toplchx

浏览: 341611 次
性别:
来自: 北京

最近访客更多访客>>

scj2cy

038580395

jiedushi

-惜帅-

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5

HTML5

最近在看《html5程序设计(第2版)》，在此做一些学习笔记。

书中的示例代码可以在http://www.apress.com/9781430238645 的“Source Code/Downloads”中下载

(一)HTML5的新功能

1、新的DOCTYPE和字符集

旧：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

新：

<!DOCTYPE html>

旧：

新：

2、新元素和旧元素

内容类型	描述
内嵌	向文档中添加其他类型的内容，例：audio、video、canvas和iframe
流	在文档和应用的body中使用的元素，例：form、h1和small
标题	段落标题，例：h1、h2、group等
交互	与用户交互的内容，例：音频和视频控件、button和textarea
元数据	通常出现在页面的head中，设置页面其他部分的表现和行为，例：script、style和title等
短语	文本和文本标记元素，例：mark、kbd、sub和sup等
片段	用于定义文档中片段的元素，例：article、aside和title等

上述所有类型的元素都可以通过CSS来设定样式。

3、语义化标记

元素名	描述
header	标记头部区域的内容(用于整个页面和页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或页面中的一块区域)
section	Web页面中的一块区域
article	独立的文章内容
aside	相关内容或引文
nav	导航类辅助内容

书中的例子的样式用了CSS3的一些新特性，比如圆角(border-radius)和旋转变换(transform:rotate();)。CSS3同HTML5一样也正在开发过程中，并且为了便于浏览器逐步支持，也采用了模块化的方式发布子规范，例如变换(transformation)、动画(animation)和过渡(transition)分别对应不同的子规范。为避免命名空间冲突，有些功能需要加上浏览器厂商前缀。要显示圆角、渐变(gradients)、阴影(shadows)和变形(transformations)的话，需要在生命的部分加上前缀：-moz-(Mozilla浏览器)、o-(Opera浏览器)和-webkit-(Safari和Chrome等基于WebKit核心的浏览器)。

最后说明，使用这些标签现阶段是有风险的。不是所用浏览器都支持或全面支持。如IE，因为IE需要将这些元素最为DOM的步步粉，所以要想在IE中看到这些元素，必须用变成的方式把他们插入DOM中，再以块元素(block element)的形式显示出来。实现此功能的脚本之一是html5shiv(http://code.google.com/p/html5shiv/)

4、使用Selector API简化选取操作

如果你熟悉CSS3或jquery的选取api，就应该对此不陌生了。

函数

描述

示例

结构

querySelector()

根据指定的选择规则，

返回在页面中找到的

第一个比配元素

quertSelector

("input.error")

返回第一个CSS类名为

"error"的文本输入框

querySelectorAll()

根据指定规则返回页面

中所有匹配的元素

querySelectorAll

("#results td")

返回id值为results的元素

下所有的单元格

Selectors API不仅是方便，在遍历DOM的时候，Selectors API通常会比以前的子节点搜索API更快。为了实现快速样式表，浏览器对选择器匹配惊醒了高度优化。

5、JavaScript日志和调试

严格说这不属于HTML5，而是浏览器的支持功能。

console.log API与alert的区别是前者不阻塞脚本的执行。

6、window.JSON

JSON变成了HTML5应用内部数据交换的实施标准。典型的JSON API包含两个函数，parse()和stringify()。在旧的浏览器中使用JSON，需要javascript库，但效率不高。新的浏览器原生支持JSON。

7、DOM Level 3

IE9之后，所有浏览器终于可以使用相同的代码来实现DOM操作和事件处理了。(万恶的IE和某些已IE为内核的国产浏览器)

8、JavaScript引擎

大多数浏览器都更新的javascript引擎，使之比以前快很多倍。（前端工程师，最厌恶的就是那些使用IE6的XP用户，哈哈。）

分享到：

HTML5学习笔记(二)-Canvas、SVG | 软件产品原型设计工具

2013-07-03 11:34
浏览 1344
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论