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...













