《HTML5 与CSS3 权威指南》（第四版 上册）学习笔记
目录
一.Web时代的变迁
（1）HTML5 的目标 ：
能够创建更简单的Web程序，书写出更简洁的HTML代码。提供很多API，使Web应用程序开发变得更容易；开发出了新的属性，新的元素，使HTML变得更简洁，文档结构更加清晰明确，容易阅读。
（2）可放心使用HTML5 的三个理由：
-
兼容性：
HTML5 在老版本浏览器上可以正常运行。由于浏览器间的 规范不统一，使得浏览器间兼容性很低，而HTML5中，这个问题得到解决，HTML5的使命是详细分析各Web浏览器所具有的功能，以此为基础，要求浏览器所有内部功能都要符合一个通用标准，围绕这个Web标准，重新定义了一套在现有HTML的语法，以便各浏览器在运行HTML的时候能够符合这个通用标准。
-
实用性：
HTML5内部并没有封装什么很复杂的，不切实际的功能，而只是封装了简单实用的功能。
-
非革命性的发展：
HTML5内部的功能不是革命性的，只是发展性的。
（3）HTML5要解决的三个问题：
-
Web浏览器之间的兼容性很低。
-
文档结构不够明确。
-
Web应用程序的功能受到限制。
二.HTML5和HTML4的区别点
（1）语法的改变
语法结构的变化，主要是因为提高浏览器兼容性。
标记方法：
-
文件声明：
<!DOCTYPE html> -
指定字符编码：
<meta charset="UTF-8">
HTML5确保的兼容性：
-
可省略标记的元素：
- 不允许写结束标记的元素：
ares,base,br,col,command,embed,hr,img,input,******,link,meta,param,source,track,wbr. - 可以省略结束标记的元素：
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th. - 可以省略全部标记的元素：
html,head,body,colgroup,tbody.
- 不允许写结束标记的元素：
-
具有boolean值的属性：
- 只写属性不写属性值，代表属性为true:
<input type="checkbox" checked> - 属性值=“属性名”，代表属性为true：
<input type="checkbox" checked="checked"> - 属性值=空字符串，代表属性为true：
<input type="checkbox" checked=""> - 不写属性代表属性为false:
<input type="checkbox"> - 省略引号：当属性值不包括空字符串，“
<”,">","=".单引号。双引号等字符时，属性值两边的引号可以省略。<input type="text"> = <input type='text'> = <input type=text>
- 只写属性不写属性值，代表属性为true:
（2）新增的元素和废除的元素
新增的结构元素：
section, article, aside, header, footer, nav, figure, main
新增的其他元素：
video, audio, embed, mark, progress, meter, time, ruby, rt, rp, wbr, canvas, details, datalist, datagrid, datagrid, output, source, dialog
新增的input元素的类型：
email, url, number, range,data, month, week, time, datatime datatime-local
废除的元素：
-
能使用CSS替代的元素：
basefont，big，center,font,s,strike,tt,u -
不再使用frame框架
-
只有部分浏览器支持的元素：
applet,bgsround,blink,marquee -
其他被废除的元素：
rb,acronym,dir,isindex,listing,xmp,nextid,plaintext
（3） 新增的属性和废除的属性：
新增的属性：
废除的属性：
（4）全局属性
-
contentEditable -
designMode -
hidden -
spellcheck -
tabindex
（5）新增的事件
-
windows对象，body元素：
beforeprint，afterprint,resize,error,affline,online,pageshow,beforeunload,hashchange -
任何元素：
mousewheel -
任何容器：
scroll -
input元素 ，textarea元素：
input -
form元素：
reset
三.HTML5的结构
（1）新增的主体结构元素：
article元素 ：
代表文档，页面或者应用程序中独立的，完整的，可以独自被外部引用的内容。
section元素：
用来对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容及其标题组成。
section使用禁忌：
-
不要将section元素用作设置样式的页面容器，因为那是div元素的工作。
-
如果article，aside，nav元素更符合状况，不要使用section元素。
-
不要为没有标题的内容区块使用section元素。
article元素强调独立性，而section元素强调分段或分块
nav元素：
可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其他部分。
aside元素：
用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用，侧边栏，广告，导航栏，以及其他雷士的有别于主要内容的部分。
主要有以下两种用法：
-
包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料，名词解释等。
-
在article之外元素使用，作为页面或站点的附属信息部分。
-
time元素
（2）新增的非主体结构性元素：
header元素：
具有引导和导航作用的结构元素。
header中可以包括至少一个或多个heading元素（h1-h6），也可以再包含1到多个header或footer
footer元素：
作为其上级父级内容区块或一个根区块的脚注。通常包括其相关区块的脚注信息，如作者，相关阅读链接以及版权信息等。
address元素：
用来在文档中呈现联系信息，包括文档作者或者文档维护者的名字，文档作者或文档维护者的网站链接，电子邮箱，真实地址，电话号码等
四.表单及其他新增和改良元素
（1）增强的scritp元素
新增了async和defer属性，它们的作用都是加快页面的加载速度，使脚本代码的读取不再妨碍页面上其他元素的加载。
在HTML5之前，当浏览器在加载页面时，如果页面上的某个script元素引用一个外部JavaScript脚本文件，则浏览器在读取该script元素时，将暂停页面的加载速度工作，发出一个下载该JavaScript脚本文件的请求。然后开始下载该脚本文件，当下载完毕后继续执行页面的加载工作。如果脚本文件比较大，则脚本文件的下载工作无疑会成为页面加载时的一个性能方面的瓶颈。
为解决这个性能瓶颈，HTML5为script元素新增了async和defer属性，代码如下：
<script async src="myAsyncScript.js" onload="myAsyncInit()"></script>
<script defer src="myDeferScript.js" onload="myDeferInit()"></script>
当使用这两个属性时，在浏览器发出下载脚本文件的请求，开始脚本文件的下载工作后，立即进行执行页面的加载工作。脚本文件下载完毕时触发一个onload事件，我们可以通过监听该事件及指定事件处理函数来指定当脚本文件下载完毕时需要执行的一段处理。
defer和async属性的区别：
在于何时执行onload事件处理函数，
-
当使用async属性时，脚本文件下载完毕后，立即执行事件处理函数，所以如果页面中使用多个外部脚本文件，且均为这些外部脚本文件使用async属性，则这些外部脚本文件的onload事件的处理函数的执行顺序并不与页面代码中这些外部脚本文件的引用顺序保持一致，一旦某个外部脚本文件下载完毕，立即执行脚本文件的onload事件处理函数。
-
当使用defer属性时，脚本文件下载完毕后，并不立即执行脚本文件的onload事件处理函数，而是等到页面全部加载完毕后，才执行该脚本文件的onload事件处理函数，所以如果页面中使用多个外部脚本文件，且均为这些外部脚本文件使用defer属性，则在页面加载完毕后按这些外部脚本文件的引用顺序来执行这些外部文件的onload事件处理函数。
-
另外，由于外部脚本文件的下载工作也属于整个页面的加载工作中的一部分，所以外部脚本文件的onload事件处理函数始终在浏览器窗口对象（window对象）的onload事件处理函数和页面的body元素事件处理函数之前首先被执行。
五. ECMAScript中新增功能
javaScript 是在1995年由当时Netscape Communications公司的Brendan Eich开发并在Web上推行的脚本语言。其后虽然被封装在Internet Explorer浏览器并被普及在Web平台中，但由于各浏览器厂商各自开发了众多扩展，所以其兼容性并不强。于是，就诞生了由ECMA从JavaScript中抽取出核心并标准化的ECMAScript。
ECMAScript是JavaScript语言的标准，JavaScript是ECMAScript的基础。
ECMAScript中还封装了其他语言，包括ActionScript与JScript。ECMAScript的第6个版本简称ECMAScript6，准确称呼为ECMAScript2015（简称ES-2015）,IT行业中很多场合也称其为ES6。
待更新…
下一篇： c语言学生信息管理系统
推荐阅读
-
HTML5与CSS3权威指南笔记案例1
-
js权威指南学习笔记（二）表达式与运算符
-
HTML5与CSS3权威指南笔记案例1
-
《css权威指南》与《html5与css3权威指南》那个更权威更先进？
-
《HTML5与CSS3基础教程》学习笔记 --Three Day_html/css_WEB-ITnose
-
《css权威指南》与《html5与css3权威指南》那个更权威更先进？
-
HTML5与CSS3基础教程第八版学习笔记16-21章 - 平凡世界平凡人
-
HTML5与CSS3基础教程第八版学习笔记11~15章_html/css_WEB-ITnose
-
HTML5与CSS3基础教程第八版学习笔记11~15章 - 平凡世界平凡人
-
《HTML5与CSS3基础教程》学习笔记 Three Day - 逆光飞翔23