HTML5和CSS3权威指南-读书笔记（H5部分）

程序员文章站 2024-03-17 13:25:28

...

接到了银联的面试通知，在慌忙准备面试的过程中感觉到，H5和CSS3是前端面试的重点考察对象，这段时间一直在恶补前端基础知识，css.html方面的书也看了好几本，这本书看完有段时间了，今天来总结一下，这样才能在脑子里留下东西。

一. H5与H4的区别

1. H5要解决的三个问题
- 1.web浏览器之间的兼容性低
- 2.文档结构不够明确
- 3.web应用程序的功能受到了限制
2. H5和H4的区别
- 1.DOCTYPE声明的改变
- 2.指导字符编码可写为<meta charset=UTF-8>
3. H5新增的元素
- 3.1.新增的结构元素：
  - header，nav , hgroup, section，article， aside ,
    footer,figure(表示一段独立的流内容)
- 3.2.新增的其他元素：
  - video, audio,canvas，
  - embed(用于插入各种多媒体)，
  - mark(高亮显示文字)，
  - progress（表示运行中的进程），
  - time（表示时间日期），
  - ruby（表示ruby注释中午注音或字符），
  - rt元素（表示字符的解释或发音），
  - wbr(软换行)，
  - command（命令按钮，如单选，多选或按钮），
  - details（细节信息），
  - datalist（可选数据列表），
  - ******（生成密匙），
  - output(表示不同类型的输出)，
  - menu（菜单列表）
- 3.3.新增的input元素类型：
  - email，url, number,
  - range(表示输入一定范围内数字值的文本输入框) ,
  - color，file，
  - Date Pickers（date,month,week,time,datatime,datetime-local）
4 . H5废除的元素
- 1.能使用css替代的元素：basefont，big，center，font，s, strike,tt,u
- 2.不再使用frame框架（包括frameset，frame，noframe），只支持iframe框架
- 3.只有部分浏览器支持的元素：bgsound,applet,blink,marquee
- 4.其他元素 : rb,dir ………
5 . 新增的属性
- 1.表单相关的属性：autofocus，placeholder，form(可对表单元素指定form属性，表明它属于哪个表单)，
- 表单验证属性：required,pattern，min,max,step(值增加或减少的步幅)，novalidate(取消验证)，setCustomValidity(自定义错误信息)
- 2.链接相关属性：media,size….
- 3.其他属性：为ol增加了reversed,meta增加了charset,style增加了scoped, html增加了manifest,iframe增加了sandbox,seamless,srcdoc;
6 . 全局属性

contentEditable(允许编辑)，designMode（指定整个页面是否可编辑），hidden,spellcheck(拼写检查针对input和textarea),tabindex(敲击tab键让控件获得焦点)

二. H5的结构

1.新增的主体元素
- article元素
- section元素（通常由内容及其标题组成，H5轮廓工具可以检查页面中是否有没有标题的section）测试section,不要将section用作设置样式的页面容器，那是div的工作。
- aside元素
- nav元素
- time元素与微格式（微格式是利用HTML的css给网页添加附加信息的方法，例如时间，日期，个人电话，企业邮箱等），由于日期和时间在机器编码上出现了一些问题所以后来用time
- pubdate:网页发布日期
2.新增的非主体结构元素
- header元素
- hgroup元素（将标题及其子标题进行分组）
- footer元素（脚注信息）
- address元素（呈现联系信息）
3.大纲（文档中各内容区块的结构编排）
- 显示编排：明确使用section等元素创建文档结构
- 隐式编排：不明确使用section等元素，而是根据页面的各级标题吧内容区块自动创建出来。
三. API

1.文件 API
- Filelist对象与file对象：Filelist对象表示用户选择的文件列表
- Blob对象：表示二进制原始数据，file对象继承了Blob对象
- FileReader接口：主要用来把文件读入内存，并读取文件中的数据。
2.拖放 API
- 个人认为这里写的比较有逻辑H5拖放
- mouse事件模拟了拖放
3.canvas

由于canvas的篇幅较长我另外写了一篇博客H5-canvas

四. 多媒体播放

1.H5页面中播放视频音频的方法

1.1播放音频

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video> `

  1.2播放视频

<audio src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</audio>

2.多媒体播放几种常见属性

1.src:在该属性中指定媒体数据的URL地址
2.autoplay：是否在页面加载后自动播放
3.preload：指定该视频或音频是否预加载
4.loop：是否循环播放
5.controls:是否添加浏览器自带的播放用的控制条
6.error：正常情况下为null，出现错误则返回一个MediaError对象
7.currentSrc:读取播放中的媒体数据的URL地址
8.played，paused,ended属性（三者为只读）

3.多媒体播放几种常用方法

1.play方法（播放）
2.pause方法（暂停）
3.load方法（重新载入媒体进行播放）
4.canPlayType方法（测试浏览器是否支持指定的媒体类型）

4.多媒体常用事件

1.play（即将开始播放）
2.pause（播放暂停）
3.seeking（seeking属性变为true浏览器正在请求数据）
4.ended(播放结束后停止播放)

5.多媒体参考手册

这里很详细HTML5音频/视频参考手册

五. 本地存储

这篇博客总结的挺好的我偷一下懒HTML5 - Web存储使用详解（本地存储、会话存储）

六.离线web应用程序

6.1离线web缓存基础：这里写得不错HTML 5 应用程序缓存

6.2浏览器与服务器的交互过程

首次访问http：//todayfightin网站时，他们的交互过程如下：

1).浏览器请求访问http：//todayfightin
2)服务器返回index.html网页
3)浏览器解析index.html网页，请求网页上所有资源文件，包括html文件，图像文件，css文件，js脚本文件，以及manifest文件。
4)服务器返回所有的资源文件
5)浏览器处理manifest文件,请求manifest中所要求的本地缓存文件，包括index.html本身，即使刚才已经请求过这些文件。
6)服务器返回所有要求本地缓存的文件。
7)浏览器对本地缓存进行更新，存入包括页面本身在内的所有要求本地缓存的资源文件，并且触发一个事件，通知本地缓存被更新。

若再次打开浏览器访问http：//todayfightin网站，而且manifest文件没有被修改过，他们的交互过程如下：

1)浏览器再次请求访问http：//todayfightin
2)浏览器发现这个页面被本地缓存，于是使用本地缓存中的Index.html
3)浏览器解析index.html页面，使用所有本地缓存的资源文件
- 4)浏览器向服务器请求manifest文件
5)服务器返回一个304代码，通知浏览器manifest文件没有发生变化

若再次打开浏览器访问http：//todayfightin网站，manifest文件被修改过，他们的交互过程如下：

1)浏览器再次请求访问http：//todayfightin
2)浏览器发现这个页面被本地缓存，于是使用本地缓存中的Index.html
3)浏览器解析index.html页面，使用所有本地缓存的资源文件
4)浏览器向服务器请求manifest文件
5)浏览器返回更新过的manifest文件
6)浏览器处理manifest文件,请求manifest中所要求的本地缓存文件，包括index.html本身，即使刚才已经请求过这些文件。
7)服务器返回所有要求本地缓存的文件。
8)浏览器对本地缓存进行更新，存入包括页面本身在内的所有要求本地缓存的资源文件，并且触发一个事件，通知本地缓存被更新。

6.3 applicationCache对象

1.swapCache方法：用来手工执行本地缓存更新，他只能在applicationCache对象的updateReady事件被触发时调用，若调用swapCache方法的话，本地缓存将被立即更新。因此你可以使用confirm方法让用户选择更新的时机。

七.通信API

h5新增的通信API主要分为两种跨文档消息传输，和webSockets通信

7.1 跨文档消息传输

1.问：什么是跨文档消息传输？

答：跨文档消息传输即可以在不同的网页文档，不同端口，不同域之间进行消息的传递。

2.问：如何实现跨文档消息传输？

答：既然是通信那么肯定分为两部，一方发送，另一方接收，我们可以通过postMessage方法发送消息，通过监听事件message接收消息，示例如下：

//接收消息
window.addEventListener('message', function(e){
  // 忽略指定URL地址之外的页面传来的消息
  if(e.origin != 'http://ww.blue-butterfly.net'){
    return false
  }
  // 显示消息
  alert('从'+e.origin+'那里传来的消息：\n\"'+e.data+"\"")
},false);
// 发送消息
function hello(){
  var iframe = window.frame[0];
  iframe.postMessage('你好','http://www.blue-butterfly.net/test/')
}

3.问：对message事件监听时，我们可以获取到哪些数据？

答：通过访问message事件的origin属性获取消息的发送源，通过访问message事件的data属性可以取得消息内容

7.2 WebSocket通信

1.问：什么是WebSocket通信

2.答：WebSockets 是HTML5提供的在web应用程序中客户端与服务器端之间进行的非HTTP的通信机制，它实现了用HTTP通信不容易实现的服务器端的数据推送等智能通信技术，因此受到了高度关注。

2.问: 如何使用WebSocket API

答：

1）建立通信连接：WebSocket API本身很简单，将URL字符串作为参数，然后调用WebSocket的构造器来建立与服务器之间的通信连接
var webSocket = new WebSocket('ws://localhost:8005/sockt');
2）通信连接建立好之后就可以进行客户端和服务器端的双向通信了，使用send方法对服务器发送数据，只能发送文本数据，可以使用json对象把js对象转换成文本数据后进行发送`webSocket.send(‘data’);
3)发送完数据就该接收服务器传回的数据了，通过获取onmessage时间句柄来接收服务器传过来的数据

webSocket.onmessage=function(event){
  var data = event.data
  ....
}

4)通过获取onopen事件句柄来监听socket的打开事件

webSocket.onopen=function(event){
  //开始通信时的处理
}

5）通过获取onclose事件句柄来监听socket的关闭事件

webSocket.onclose=function(event){
  //通信结束时的处理
}

6）最后就是断开连接啦，通过close方法来关闭socket，切断通信连接。

webSocket.close();

另外可以通过读取readyState的属性值来获取webSocket对象的状态。

八使用Web Workers处理线程

1.问：Web Workers的作用是什么？

答： Web Workers用来实现web平台上的多线程处理功能，你可以创建一个不会影响前台处理的后台线程，并且在这个后台线程中创建多个子线程，通过 Web Workers，你可以将耗时较长的处理交给后台去运行，从而解决H5之前因为某个处理耗时较长而跳出一个提示用户脚本运行时间过长，导致用户不得不结束这个处理的尴尬状况。

2.问如何使用Web Workers创建后台线程？

答：
1）创建后台线程的步骤很简单，只用在Worker类的构造器中，将需要在后台线程中执行的脚本文件的URL地址作为参数，然后创建Worker对象就可以了。var worker = new Worker("worker.js")注意：在后台线程中是不能访问页面或窗口对象的。
2）可以通过发送和接收消息来与后台线程相互传递数据。通过对Worker对象的onmessage事件句柄的获取可以在后台线程之中接收消息

worker.onmessage=function(event){
  // 处理收到的消息
}

3）使用worker对象的postMessage方法对后台线程发送消息

worker.postMessage(message)//与websocket类似

3.问：线程中有哪些可用的变量，类函数？

答：self,postMessage,onmessage,importScript(urls),navigator,sessionStorage/localStorage,XMLHttpRequest,Web Workers,setTimeout()/setInterval(),close,eval(),isNaN(),escape()等，object,WebSockets

4.嵌套线程

九、获取地理位置信息

之前一直觉得这节很难，只是自己不如安逸看罢了，这一节的主要方法就是getCurrentPosition()方法来获得用户的位置。该方法可传入三个参数
getCurrentPosition(onSuccess, onError, option),第一个参数是执行成功的回调函数，第二个是失败执行的回调函数，第三个是一些可选的属性列表。这里写的比较详细

上一篇：编程挑战-进制转换

下一篇：编程练习之栈篇：进制转换

HTML5和CSS3权威指南-读书笔记（H5部分）

一. H5与H4的区别

1. H5要解决的三个问题

2. H5和H4的区别

3. H5新增的元素

4 . H5废除的元素

5 . 新增的属性

6 . 全局属性

二. H5的结构

1.新增的主体元素

2.新增的非主体结构元素

3.大纲（文档中各内容区块的结构编排）

三. API

1.文件 API

2.拖放 API

3.canvas

四. 多媒体播放

1.H5页面中播放视频音频的方法