浏览器构成、H5语义化、新特性

浏览器页面有哪三层构成以及作用

构成	结构层	表示层	行为层
对应	HTML	CSS	JavaScript
作用	实现页面结构	完成页面的表现与风格	实现客户端的一些功能和业务

h5语义化

HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。语义化就是给标签添加语义，让合适的标签去做适合的事

常用语义化标签有：

title:页面头部信息 header:定义文档的页眉 footer:定义文档的尾部 nav:页面导航 canvas:绘制图像

main:规定文档的主要内容 address:定义文档或作者的联系信息 dialog:对话框或确认窗

aside:定义所处内容之外的内容，如文章的侧栏 section:定义文章中的节 figure:规定独立的流内容

mark:带有记号的文本 article:独立的自包含内容 details:描述文档的细节 h1~h6 ul ol

好处 :

1. 去掉或者丢失样式的时候能够让页面呈现出清晰解构
2. 有利于SEO(Search Engine Optimization 搜索引擎优化)
3. 方便其他设备解析（如：盲人阅读器）
4. 便于团队开发和维护，因为语义化更具有可读性，让阅读源码的人更容易将网站分块，便于理解和维护

• 什么是SEO？
  搜索引擎优化,在了解搜索引擎排名机制的基础上，对网站进行调整和优化，改进网站在搜索引擎中的关键词排名以获得更多的流量

h5十大新特性

1、canvas元素

<canvas></canvas>

canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，开发人员可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2、更加丰富强大的表单

增加了多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，主要内容如下。

<form>
    <label>数量 ：
        <input type="?" >
    </label>
</form>

①type=”email”
• 限制用户输入为邮箱类型。email提供邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交

②type=”url”
• 限制用户输入为网址，即输入内容必须含有 http:// 或者 https://,并且后面内容不能为空.提供了网址的合法格式验证。

③type=”number”
• 限制用户输入为数字类型,只能输入数字和小数点，不能输入其他字符，并且输入框最右边有上下调节按钮

④type=”range”
• 显示为滑动条，会以一个滑块形式表现，包含一定范围内数值输入域

⑤type=Date Pickers

• 日期选择器–Date pickers (date, month, week, time, datetime, datetime-local)

⑥type=”search”
• 作用：用于搜索域，比如站点搜索或 Google 搜索
• 渲染结果：显示为常规的文本域，在输入框输入文本后右边显示“x”，可以将输入的文本清除、

⑦type=”color”
• 颜色选择器，选择颜色的面板

⑧type=”tel”
• tel并不是来验证手机号码的，因为全球手机号码格式的标准不同。它的目的是能够在移动端打开数字键盘，而数字键盘就限制了用户只能填写数字而不能填写其他字符。

3、用于媒介的video和audio元素

<video>

• 视频格式:

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

• 标签属性

​ controls 属性供添加播放、暂停和音量控件。

​ video标签之间插入的内容是供不支持 video 元素的浏览器显示的

<audio>

• 音频格式 : Ogg Vorbis \ MP3 \ Wav

• 标签属性

control 属性供添加播放、暂停和音量控件。

​ audio标签 之间插入的内容是供不支持 audio 元素的浏览器显示的

4、地理定位

​ 用于获得用户的地理位置（鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息不可用）

​ 使用 getCurrentPosition()方法来获得用户的位置

5、拖放

​ （Drag 和 drop）: 抓取对象以后拖到另一个位置。拖放是标准的一部分，任何元素都能够拖放。

• 设置元素为可拖放, draggable 属性设置为 true

• 拖动什么 - ondragstart 和 setData()

​ (ondragstart 属性调用函数规定被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值)

• 放到何处 - ondragover

​ (ondragover 事件规定在何处放置被拖动的数据)

• 进行放置 - ondrop

​ (ondrop 属性调用了一个函数,放置被拖数据时发生 )

6、Web存储

提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储

• sessionStorage - 针对一个 session 的数据存储。当用户关闭浏览器窗口后，数据会被删除

7、应用程序缓存

优势：

• 离线浏览 - 用户可在应用离线时使用它们
• 速度 - 已缓存资源加载得更快
• 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

如需启用应用程序缓存，请在文档的 html 标签中包含manifest属性：

​ manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

​ 建议文件扩展名是.appcache

​ manifest 文件可分为三个部分：

​ CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

​ NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

​ FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

8、Web Workers

• 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

• web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容 等，而此时 web worker 在后台运行。

9、服务器发送事件

• Server-Sent 事件 : 单向消息传递。指的是网页自动获取来自服务器的更新。

• 以前也能做到这一点，前提是网页必须询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

  EventSource 对象用于接收服务器发送事件通知

10、WebSocket

• 在单个 TCP 连接上进行全双工通讯的协议。使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
• 在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。