web-storage
在开发 Web 应用时，开发人员有时需要在本地存储数据。当前浏览器支持 cookie 存储，但其大小有 4KB 的限制。 HTML5 中新引入了 Web Storage 机制，通过使用键值对在客户端保存数据，并且提供了更大容量的存储空间。 HTML5 中的 Web 存储对象有两种类型： sessionStorage 对象负责存储一个会话的数据。如果用户关闭了页面或浏览器，则会销毁数据。 localStorage 对象负责存储没有到期的数据。当 Web 页面或浏览器关闭时，仍会保持数据的存储，当然这还取决于为此用户的浏览器设置的存储量。 这两种存储对象具有相同的方法和属性。 **值得注意的是：**Web 存储并不比 cookies 安全。所以不要在客户端存储敏感信息，比如密码或信用卡信息。 官方规范资料地址：https://html.spec.whatwg.org/multipage/webstorage.html sessionStorge浏览器支持性检查1234567//sessionStorage if(window.sessionStorage){ ...
web-workers
基础内容什么是 Web Workers 能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。 上句话是 MDN 对象 Web Workers 的简单描述。 Web Workers 是可以在后台（页面端）运行的任务，它能够被轻松的创建，还能向它的创建者发送消息。 Web Workers 的三大主要特征：能够长时间运行（响应），理想的启动性能以及理想的内存消耗。 两种 Web WorkersWeb Workers 可以分为两种类型：Dedicated Web Worker（专用线程）和 Shared Web Worker（共享线程）。 a. Dedicated Web Worker目前绝大多数的应用场景所使用的是 Dedicated Web Worker（专用线程）。Dedicated Web Worker随着 HTML 页面关闭而被终止，这就意味着 Dedicated Web Worker 只能被创建它的 HTML 页面所访问。 在 JavaScript 代码中，Work 类型代表 Dedicated Web Worker。 b. Sh...
video-and-audio
视频处理基础内容a. 目前实现网页视频播放的技术 - Flash Flash并不是浏览器原生支持(第三方组件) Flash的性能并不好 移动端不支持Flash技术 b. HTML 5 提供的视频处理技术 - <video> 提供了相对应的基本处理方式 提供了高级编程自定义方式 c. <video>元素所支持的视频格式 视频格式 类型 描述 MP4格式 .mp4 目前最主流的视频格式。 OGV格式 .ogv WEBM格式 .webm 是由Google公司推出的，目前唯一一个支持超高清的视频格式。 如何使用<video>元素a. 引入单个视频格式<video> 标签的编写结构如下： 123<video src="视频文件的路径" autoplay> 浏览器不支持的提示内容</video> 例如以下示例代码： 123<video src="../DATA/oceans-clip.mp4" autoplay width="640px...
first-html
示例代码123456789<html> <head> <title>01_helloworld.html</title> </head> <body> <!-- 这是第一个页面 helloworld --> <font color="red">hello world!</font> </body></html> 示例代码说明: html 标签: 定义 HTML 文档，HTML 文档的根标签。 head 标签: 定义关于文档的基本信息。 body 标签: 定义文档的主体，运行 HTML 文档时显示的内容。 title 标签: 定义文档的标题。在运行网页时，页面顶端显示的内容。 font 标签: 定义文字的字体、尺寸和颜色。 HTML元素（标签）HTML 标记标签通常被称为 HTML 标签，”HTML 标签” 和”HTML 元素” 通常都是描述同样的意思。（一个 HTML 元素包含了开始标签与结束标签） HTML 标签是...
html-basics-element
示例代码1234567891011121314151617<!DOCTYPE html><html> <head> <title>06_基本元素实例.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h1 align="center">春晓</h1> <hr align="center" width="30%"> <p align="center"> 春眠不觉晓， <br> 处处闻啼鸟。<br> 夜来风雨声，<br> 花落知多少。<br> </p> </body></h...
html-form
<form> 表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 属性名 值 描述 action URL 规定当提交表单时向何处发送表单数据。 method get/post 规定用于发送表单数据的 HTTP 方法。 name text 规定表单的名称。 文本框文本框通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本框。 <input> 元素是空的,它只包含标签属性。 你可以使用 <label> 元素来定义 <input> 元素的标注。 表单本身并不可见。同时，在大多数浏览器中，文本框的缺省宽度是 20 个字符。 <input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。 属性名 值 描述 typ...
html-introduce
什么是 HTMLHTML 的全称为 Hyper Text Markup Language，译为超文本标记语言。 超文本，就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。 发展历史1980年，蒂姆·伯纳斯-李为使世界各地的物理学家能够方便的进行合作研究，创建了使用于其系统的 HTML。Tim Berners-Lee 设计的 HTML 以纯文字格式为基础，可以使用任何文本编辑器处理，最初仅有少量标记（TAG）而易于掌握运用。随着 HTML 使用率的增加，人们不满足只能看到文字。 1993年，还是大学生的马克·安德生在他的 Mosaic 浏览器加入 <img> 标记，从此可以在 Web 页面上浏览图片。但人们认为仅有图片还是不够，希望可将任何形式的媒体加到网页上。因此 HTML 不断地扩充和发展。 标准的版本历史 超文本标记语言（第一版）—— 在 1993 年 ...
html-table
基本表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 HTML表格元素: 标签 属性 <table> 定义表格 <th> 定义表格的表头 <tr> 定义表格的行 <td> 定义表格单元 <caption> 定义表格标题 <thead> 定义表格的页眉 <tbody> 定义表格的主体 <tfoot> 定义表格的页脚 示例代码一: 1234567891011121314151617181920<!DOCTYPE html><html> <head> <title>17_基本表格.html</title> <me...
link-element
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 在标签 <a> 中使用了href属性来描述链接的地址。 值得注意的是: 如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。 通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。 请使用 CSS 来改变链接的样式。 <a> 元素的属性列表: 属性名 值 描述 href URL 规定链接的目标 URL。 target _blank/_parent/_self 规定在何处打开目标 URL。仅在 href 属性存在时使用。 123456789101112131415<!DOCTYPE html><html> ...
html-list
有序列表有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。 <ol> 标签定义了一个有序列表. 列表排序以数字来显示。 属性名 值 描述 start number **HTML5不支持，不赞成使用。**请使用样式取代它。 规定列表中的起始点。 type 1 A a I i 规定列表的类型。 <li> 标签定义列表项目。 属性名 值 描述 value number **HTML5不支持，不赞成使用。**请使用样式取代它。 规定列表项目的数字。 type 1 A a I i 规定列表的类型。 12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html><html> <head> <title>13_有序列表.html</tit...
