《HTML5揭秘》读书笔记(一)

一、HTML5的发展历程

+ html演变的几个版本: html2.0、html3.2、html4.0、html4.01、html5。

+ 其中在html4.01发布之后,还发布了xtml1.0,它是基于html4.01的,没有新增任何新的元素和属性;xhtml遵循更严格的语法规范,xhtml定义的新的MIME类型(内容类型)为application/xhtml+xml,但是xtml1.0版本的网页仍然可以以text/html类型来发布,xtml1.0就是一个xml风格的html;在xtml1.0之后就是xtml1.1,xtml1.1版本的网页只能通过application/xhtml+xml类型来发布,它好像就是一个货真价实的xml;随后的xtml2.0之后就是html5.

二、HTML5的新特性

+ 用于绘画的canvas

+ 用于媒介回放的video和audio

+ 对本地离线存储的更好的支持-localStorage数据永久存储,sessionStorage关闭浏览器之后数据自动删除.

+ 增加了一些语义化标签:header、footer、nav、aside、section、main、figure、template、data、time等

(https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list)

+ 对web表单的改进,新增表单功能,如新增type类型:color、datatime、email、number等

(https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-type)

+ 新增技术如:web workers(让浏览器在后台运行javascript)、web sockets(web应用程序可以实时的获取或推送信息)、      geolocation(使用地理位置定位)等

三、HTML5新标签的使用

+ HTML5新标签浏览器兼容问题

IE9以下的IE浏览器不支持HTML5,可以通过document.createElement来动态添加HTML5中特有的标签:

或是直接使用成熟的框架:

 <!--[if lt IE 9]>
        <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
     <![endif]-->

也有可能用户会禁用脚本,所以最好还是在上面的script标签下加一段noscript标签:

(更多可参见:http://www.cnblogs.com/pigtail/archive/2013/01/07/2849136.html)

+ HTML4中创建文档大纲的唯一方式是使用<h1>到<h6>元素,如果想让大纲中只有唯一一个根节点,代码中只能写一个<h1>;

HTML5中,每个节点都可以有自己的<h1>元素。(HTML5的大纲算法

四、文档类型

1、为什么HTML5只需写<!DOCTYPE html>?

+  html5不基于SGML(标准通用标记语言),不需要引用DTD,所以文档声明可以直接写成 <!DOCTYPE html>

+  html4.01基于SGML,所以<!DOCTYPE>(文档声明)中必须引用DTD,DTD规定了标记语言的规则,只有引用了它,浏览器才能正  确的呈现内容

2、DOCTYPE的作用

+ 告诉浏览器用什么文档类型来解析文档

3.HTML4.01和HTML5之间的差异

+  HTML4.01有三种文档声明(同xhtml的文档声明一样有三种:strict、transitional、frameset),HTML5只有一种。

HTML4.01的三种文档声明:

+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

五、浏览器的模式

1、标准模式和兼容模式(怪异模式)的区别:

+  标准模式下浏览器渲染页面有了统一的规范,兼容模式下不同浏览器有自己一套渲染页面的规范。

2、触发标准模式和兼容模式的方法:

2.1 浏览器以兼容模式渲染页面

+ 文档不指明doctype(没有写DOCTYPE或是DOCTYPE不是在第一行,DOCTYPE不在第一行浏览器会认为页面不具备DOCTYPE)

to be continued

时间: 2024-10-17 02:01:47

《HTML5揭秘》读书笔记(一)的相关文章

高性能javascript读书笔记(三.DOM 编程1)

第三章DOM Script DOM编程 读书笔记 访问和修改DOM元素 浏览器通常要求DOM实现和JavaScript保持相互独立. <!-- 例如IE中,被称为JScript的JavaScript实现位于库文件jscript.dll中,而DOM实现位于另一个库mshtml.dll(内 部代号Trident).这种分离技术允许其他技术和语言,如VBScript,受益于Trident所提供的DOM功能和渲染功能.Safari使用Webkit的WebCore处理DOM和渲染,具有一个分离的JavaS

数据访问---高性能JavaScript读书笔记(2)

对于任何一种编程语言来说,数据存储的位置关系到访问速度! 在JavaScript中的直接量包括字符串string.数字number.布尔值boolean.对象object.数组array.函数function.正则表达式regular expression.空值null.未定义数组undefined.而数组项则需要通过数组的数字索引来访问,对象通过字符串进行索引来访问其成员(这里顺便提一句因为数组项是通过数字进行索引.对象成员是通过字符串进行索引,所以这也就是为什么访问对象成员比访问数组项更慢的

加载和运行---高性能JavaScript读书笔记(1)

众所周知大多数浏览器是使用单进程处理UI更新和JavaScript运行等多个任务的,而同一时间只能有一个任务被执行,如此说来,JavaScript运行了多长时间就意味着用户得等待浏览器响应需要花多久时间. 从认知上来说,解析器解析一个界面的时候都是从上至下依次解析的,这就是说界面上出现多少个<script>标签(不管是内联还是外部文件),页面下载和解析必须停止等待脚本下载完成并运行完成(注意这里包括运行),这个过程当中,页面解析和用户交互是被完全阻塞的. Javascript第一条定律:将脚本

DOM访问---高性能JavaScript读书笔记(3)

在JavaScript高级程序设计第一章当中就把JavaScript分成三大部分 所以事实上DOM和BOM是两在独立的部分,它们之间的通信是通过相互之间的功能接口来实现的,这样说来两个独立的部分以功能接口必定会带来性能损耗.这也就是为什么大家一致都说尽量少去访问和修改DOM元素(注意我这里说的是访问和修改,为什么包括访问,请继续往下看  哈哈). 下面用一张图来说明它们各自的作用. 1.在修改DOM元素的时候,我们应该尽量使用innerHTML而不是CreateElement再AppendChi

高性能javascript读书笔记(三.DOM 编程2)

重绘和重排版 浏览器下载完所有的HTML标记,Javascript,CSS,图片之后,它解析文件并创建两个内部数据结构 DOM树 表示页面结构渲染树 表示DOM节点如何显示 渲染树中为每个需要显示的DOM树木=节点存放至少一个节点(隐藏DOM元素在选桉树中没有对应节点)渲染树上的节点称为"框"或者"盒",符合CSS模型的定义,将页面元素看作一个具有填充,边距,边框和位置的盒.一 旦DOM树和渲染树构造完毕,浏览器就可以显示(绘制)页面上的元素了. 当DOM改变影响到

Javascript读书笔记:函数定义和函数调用

定义函数 使用function关键字来定义函数,分为两种形式: 声明式函数定义: function add(m,n) { alert(m+n); } 这种方式等同于构造一个Function类的实例的方式: var add = new Function("m", "n", "alert(m+n);"); Function类构造方法的最后一个参数为函数体:"alert(m+n);",前面的都是函数的形参,参数必须是字符串形式的:&

Javascript读书笔记:字符串常用方法

concat() 连接多个字符串,返回合并后的字符串. 1 var s1="a"; 2 var s2="b"; 3 var s3="c"; 4 5 console.log(s1.concat(s2,s3));//abc 数组中的concat():将参数添加为数组的元素,返回新的数组. 1 var arr = [1, 2, 3]; 2 console.log(arr.concat(4, 5));//[1,2,3,4,5] indexOf() 查找子

高性能javascript学习笔记系列(1) -js的加载和执行

这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令的过程,这个过程就会带来一定的性能损耗,所以在js中做性能的优化是必须的 javascript的阻塞特性:浏览器在执行js代码的时候,不能做其他的任何事情,因为浏览器使用单一的进程来处理用户界面的刷新和javascript的脚本执行,也就是说什么时候执行js脚本影响着用户对页面的使用体验(之所以js

高性能javascript学习笔记系列(6) -ajax

参考 高性能javascript javascript高级程序设计 ajax基础  ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读取数据 var xhr = new XMLHttpRequest(); //只支持IE7以及更高的版本 xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if( (xhr.status >= 200 && xh

高性能javascript学习笔记系列(5) -快速响应的用户界面

参考高性能javascript 理解浏览器UI线程  用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程  UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 <button onclick="handleClick()">click</button> <script type="text/javascript"> function handleClick() { var div = do