最近在看《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>
旧：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
新：
<meta charset="utf-8">
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用户，哈哈。）
相关推荐
Odoo owl学习笔记之七--模板（前端核心内容） 内容 概述 指令 QWeb 模板参考 白色空间 表达评估 静态 html 节点 输出数据 设置变量 条件句 动态属性 动态类属性 动态标签名称 循环 子模板 动态子模板 调试 碎片 ...
SQL server2019 学习笔记之 第一章数据库系统概述（上） 第一节 掌握数据库系统的相关知识 1.数据库系统的组成 在这里插入图片描述在这里插入图片描述 具体关系，如图所示： 在这里插入图片描述
SQL server2019 学习笔记之 第一章数据库系统概述（下） 第三节 数据库的体系结构 1.数据库三级模式结构（管理系统角度） 在这里插入图片描述【注意】 （1）模式，可以细分为逻辑模式和概念模式 （2）一个数据库、...
Java/JavaEE 学习笔记 作者在杰普学习时的学习笔记，是J2ee初学者必备手册，是大家学习J2EE开发的很好的参考笔记。 Java/JavaEE 学习笔记 内容目录: Unix 学习笔记..........7 一、Unix前言............7 二、...
HTML&JavaScript学习笔记.....................198 HTML: 超文本标记语言.......................198 1、html简介...........198 2、动态网页开发技术......................199 3、html的基本构成....................
第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择...
Odoo owl 学习笔记之11—slots 目录 插槽..... 1 概述... 1 命名槽... 2 渲染上下文... 3 默认插槽... 3 默认内容... 4 动态插槽... 5 插槽和道具... 5 插槽参数... 5 插槽范围... 7 单个插槽 | 默认插槽...
概述 1.输出工具： [removed]()—可以是html alert()—字符串 prompt(text,defaultText) text—可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。 defaultText—可选。默认的输入...
新的HTML5对目前的Web表单进行了全面的提升，HTML5 的一个重要的特性就是对表单的改进。过去，需要编写 JavaScript 以增强表单行为——例如，要求访问者提交表单之前必须填写某个字段。HTML5 通过引入新的表单元素、...
也远比一般人想象中的要复杂强大的多，在我自己学习的过程中，曾经有过多次震撼，只是常常没有过多久，很多美轮美奂的用法就又模糊起来，希望通过对JavaScript高级程序设计（第3版）的专题学习笔记，能够较为系统的...
#ionic学习笔记 (ionic中文版教程) ##ionic 概述 ionic是一个强大的混合式/hybrid app移动开发框架。可以帮助您使用 Web 技术，比如 HTML、 CSS 和Javascript 构建接近原生体验的移动应用程序。目前已发布正式版本。...
学习笔记：在项目开发过程中，我记录了大量的学习笔记和心得体会。这些笔记不仅有助于理解项目的开发过程，还能为学习前端技术提供宝贵的参考资料。 适用人群： 这份作业合集适用于所有对网页设计、前端开发感兴趣...
1.1 概述 JavaScript是一门世界上最流行的脚本语言 一个合格的后端人员，必须要精通JavaScript 1.2 历史 （JavaScript历史） ECMAScript它可以理解为是JavaScript的一个标准 最新版本已经到了es6版本~ 但是大部分...
学习笔记：在项目开发过程中，我记录了大量的学习笔记和心得体会。这些笔记不仅有助于理解项目的开发过程，还能为学习前端技术提供宝贵的参考资料。 适用人群： 这份作业合集适用于所有对网页设计、前端开发感兴趣...
JS 垃圾回收机制简单概述 js azure storage blob 上传 vue vue-页面之间传多个参数 微信公众号扫一扫兼容问题（vue） vue 父子组件的生命周期渲染顺序 vue组件通信 React React 生命周期的理解 React 代理 小程序 小...
十六进制数，零x开头 0x55(十六进制)＝5*16+5(十进制) 类型：数据都必须有类型 boolean (8bit,不定的)只有true和false两个值 char 16bit, 0~2^16-1 (2^16=6万6) byte 8bit, -2^7~2^7-1 (2^7=128； 注意：两个 ...
学习笔记：在项目开发过程中，我记录了大量的学习笔记和心得体会。这些笔记不仅有助于理解项目的开发过程，还能为学习前端技术提供宝贵的参考资料。 适用人群： 这份资源适用于所有对前端开发感兴趣的人，无论你是...
学习笔记：在项目开发过程中，我记录了大量的学习笔记和心得体会。这些笔记不仅有助于理解项目的开发过程，还能为学习前端技术提供宝贵的参考资料。 适用人群： 这份作业合集适用于所有对网页设计、前端开发感兴趣...
项目概述：本项目是一个基于Flask框架开发的简易博客系统，共包含42个文件，其中： - HTML文件：14个，构成了博客的前端页面； - Python编译文件（pyc）：8个，存储了编译后的Python代码，提高了执行效率； - ...