前端HTML/HTML5总结
HTML/HTML5涉及的东西说多不多,说少不少,关键在于如何记忆和使用,这是我的归纳。(看菜鸟网站目录抄的-.-)
分成两个部分,1:web页面的具体展示,2:底部的支撑。
web页面的具体展示:
我们所看到的的web页面,单纯的html无非就是
1. 标签
2. 属性
3. 事件
标签组成了具体的页面,属性描述标签里面的内容如何展示,事件触发js事件,产生交互。
一、 标签的分类
- 基础的标签
‘<!DOCTYPE>’ 定义文档类型;<‘html’>定义一个 HTML 文档;<'title>为文档定义一个标题;<'body>定义文档的主体;<'h1> to <'h6>定义 HTML 标题;<'p>定义一个段落;<'br>定义简单的折行;<‘hr>定义水平线;<’!–…-->定义一个注释。 - 格式标签 https://www.runoob.com/tags/ref-byfunc.html
如<'address><'b><'code><'del>等等,具体可参考手册。 - 表单标签
例如input、form、button等 - 框架
现在html5只支持iframe内联框架,所以记住这一个就可以了 - 图像
img、map、area、canvas、figcaption、figure - Audio/Video
audio、video、source、track - 链接
a、link、nav - 列表
ul、ol、li、dir、dl、dt、dd、menu、command - 表格
table、caption、tr、td、th、thead、tbody、tfoot、col、colgroup - 样式、节
style、div、span、header、footer、section、article、aside、details、dialog、summary - 元信息
head、meta、base、basefont - 程序
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
三、事件
有以下分类
- 窗口事件属性(Window Event Attributes),由窗口触发该事件 (适用于 标签):
- 表单事件(Form Events)表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):
- 键盘事件(Keyboard Events
- 鼠标事件(Mouse Events)通过鼠标触发事件, 类似用户的行为:
- 多媒体事件(Media Events)通过视频(videos),图像(images)或者音频(audio) 触发该事件,多应用于HTML媒体元素比如 audio, embed, img, object, 和video:
- 其他事件
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,我根据自己理解分类说明
-
字符集、ASCII、ISO-8859-1、符号
ASCII、ISO-8859-1、符号都算是字符集的一部分,如需正确地显示 HTML 页面,浏览器必须知道使用何种字符集,这些则是基础 -
URL 编码
URL 编码会将字符转换为可通过因特网传输的格式,Web 浏览器通过 URL 从 web 服务器请求页面。 -
HTTP 状态消息
当浏览器从 web 服务器请求服务时,服务器会发出回应,而不同的消息,会反映在不同的HTTP状态上
1xx: 信息; 2xx: 成功;3xx: 重定向;4xx: 客户端错误;5xx: 服务器错误 -
HTTP 方法
两种最常用的 HTTP 方法是:GET 和 POST,GET - 从指定的资源请求数据,POST - 向指定的资源提交要被处理的数据。
其他 HTTP 请求方法:HEAD、PUT、DELETE、OPTIONS、CONNECT -
web存储
使用HTML5本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
1).localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
2).sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 -
HTML5 Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程,了解更多数据库操作知识。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。 -
HTML5 应用程序缓存
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。应用程序缓存为应用带来三个优势:
1).离线浏览 - 用户可在应用离线时使用它们
2).速度 - 已缓存资源加载得更快
3).减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。 -
HTML5 Web Workers
web worker 是运行在后台的 JavaScript,不会影响页面的性能。
Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外,他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建, 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序(反之亦然)。 -
HTML5 服务器发送事件SSE(Server-Sent Events)
允许网页获得来自服务器的更新
Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到这一点,前提是网页不得不询问 是否有可用的更新。通过服务器发送事件,更新能够自动到达。
所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。 -
HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。共同点就是,高实时性!