前端HTML/HTML5总结

前端HTML/HTML5总结

HTML/HTML5涉及的东西说多不多，说少不少，关键在于如何记忆和使用，这是我的归纳。（看菜鸟网站目录抄的-.-）

分成两个部分，1：web页面的具体展示，2：底部的支撑。

web页面的具体展示：

我们所看到的的web页面，单纯的html无非就是

  1. 标签
  2. 属性
  3. 事件

标签组成了具体的页面，属性描述标签里面的内容如何展示，事件触发js事件，产生交互。
一、 标签的分类

1. 基础的标签
   ‘’ 定义文档类型；<‘html’>定义一个 HTML 文档；<'title>为文档定义一个标题；<'body>定义文档的主体；<'h1> to <'h6>定义 HTML 标题；<'p>定义一个段落；<'br>定义简单的折行；<‘hr>定义水平线；<’!–…-->定义一个注释。
2. 格式标签 https://www.runoob.com/tags/ref-byfunc.html
   如<'address><'b><'code><'del>等等，具体可参考手册。
3. 表单标签
   例如input、form、button等
4. 框架
   现在html5只支持iframe内联框架，所以记住这一个就可以了
5. 图像
   img、map、area、canvas、figcaption、figure
6. Audio/Video
   audio、video、source、track
7. 链接
   a、link、nav
8. 列表
   ul、ol、li、dir、dl、dt、dd、menu、command
9. 表格
   table、caption、tr、td、th、thead、tbody、tfoot、col、colgroup
10. 样式、节
    style、div、span、header、footer、section、article、aside、details、dialog、summary
11. 元信息
    head、meta、base、basefont
12. 程序
    script、noscript、applet、embed、object、param

二、属性

每种元素都能规定自己的属性，这种属性称为：局部属性。
属性还有另一种类型：全局属性。它们用来配置所有元素共有的行为。全局属性可以用在任何一个元素身上，不过这不一定会带来有意义或有用的行为改变。
< body bgcolor=“red”>中的bgcolor="red"就是标签的属性,是以"属性名=属性值"这种名值对的形式出现
HTML 全局属性
accesskey、class、contenteditable、contextmenu、data-*、dir、draggable、hidden、id、lang、spellcheck、style、tabindex、title、translate

三、事件

有以下分类

1. 窗口事件属性（Window Event Attributes），由窗口触发该事件 (适用于 标签):
2. 表单事件(Form Events)表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):
3. 键盘事件（Keyboard Events
4. 鼠标事件（Mouse Events）通过鼠标触发事件, 类似用户的行为:
5. 多媒体事件(Media Events)通过视频（videos），图像（images）或者音频（audio） 触发该事件，多应用于HTML媒体元素比如 audio, embed, img, object, 和video:
6. 其他事件
   onshow，目前只有 Firefox 浏览器支持 onshow 属性
   ontoggle，目前只有 Chrome, Safari 6+, 和 Opera 15+ 浏览器支持 details 元素和 ontoggle 属性。

四、 底部的支撑

颜色、字符集、ASCII、ISO-8859-1、符号、URL 编码、HTTP 状态消息、HTTP 方法、web存储、web sql、应用程序缓存、web workers、sse、websocket，我根据自己理解分类说明

1. 字符集、ASCII、ISO-8859-1、符号
   ASCII、ISO-8859-1、符号都算是字符集的一部分，如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集，这些则是基础

2. URL 编码
   URL 编码会将字符转换为可通过因特网传输的格式，Web 浏览器通过 URL 从 web 服务器请求页面。

3. HTTP 状态消息
   当浏览器从 web 服务器请求服务时，服务器会发出回应，而不同的消息，会反映在不同的HTTP状态上
   1xx: 信息； 2xx: 成功；3xx: 重定向；4xx: 客户端错误；5xx: 服务器错误

4. HTTP 方法
   两种最常用的 HTTP 方法是：GET 和 POST，GET - 从指定的资源请求数据，POST - 向指定的资源提交要被处理的数据。
   其他 HTTP 请求方法：HEAD、PUT、DELETE、OPTIONS、CONNECT

5. web存储
   
   使用HTML5本地存储用户的浏览数据。
   早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
   数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
   1）.localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
   2）.sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

6. HTML5 Web SQL 数据库
   Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程，了解更多数据库操作知识。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

7. HTML5 应用程序缓存
   使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。应用程序缓存为应用带来三个优势：
   1).离线浏览 - 用户可在应用离线时使用它们
   2).速度 - 已缓存资源加载得更快
   3).减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

8. HTML5 Web Workers
   web worker 是运行在后台的 JavaScript，不会影响页面的性能。
   Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建， 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序（反之亦然）。

9. HTML5 服务器发送事件SSE(Server-Sent Events)
   允许网页获得来自服务器的更新
   Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问 是否有可用的更新。通过服务器发送事件，更新能够自动到达。
   所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。

10. HTML5 WebSocket
    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
    现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
    HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。共同点就是，高实时性!