夜猫子的知识栈
夜猫子
2022-06-26
目录

html5

# HTML5

使低版本的IE浏览器支持HTML5新元素
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
1
2
3
4

# 新增元素(大块，用于代替div以实现更好的语义化）

# 结构元素

<header></header>元素一般用于3个地方：页面头部、文章头部（article元素）和区块头部（section元素)
<nav></nav>元素一般用于3个地方：顶部导航、侧栏导航和分页导航。
<article></artcile>元素一般只会用于一个地方：文章内容部分。
<aside></aside>元素一般用于表示跟周围区块相关的内容。
<section></section>元素一般用于某一个需要标题内容的区块。如果页面某个区块不需要标题，直接使用div元素就可以了。
<footer></footer>元素一般用于两个地方：一个是“页面底部”，另一个是“文章底部”。
1
2
3
4
5
6

# 表单元素

# input类型值

# 验证型属性值
# 1.email;邮件格式
# 2.tel;电话格式
# 3.url；url类型
<p><lable>邮件名：<input typle="email"/></lable></p>
<input type="submit" value="提交"/>
1
2
# 取值型属性值
# 1.range

当type属性取值为“range”时，我们可以通过拖动滑动条获取某一个范围内的数字。

<input type="range" min="最小值" max="最大值" step="间隔数"/>
1
# 2.number

当type属性取值为“number”时，我们可以通过使用微调按钮来获取某一个范围的数字。

<input type="number" min="最小值" max="最大值" step="间隔数"/>
1
# 3.color

当type属性取值为“color”时，我们可以直接使用浏览器自带的取色工具来获取颜色值。

<input type="color" value=""/>	<!--value属性用于设置颜色初始值，格式必须是十六进制颜色值如#F1F1F1，不能是关键字（如black）和rgba颜色。如rgba(255, 255, 255, 0.5)
1
# 4.date

当type属性取值为“date”时，我们可以直接使用浏览器自带的日历工具来获取日期（年、月、日）。

<input type="date" value=""/>	<!--value属性用于设置日期初始值，格式必须如“2018-05-20”。
1
# 5.time

当type属性取值为“time”时，我们可以直接使用浏览器自带的工具来获取时间（时、分）。

<input type="time" value=""/>	<!--value属性用于设置时间初始值，格式必须如“08:04”
1
# 6.month

当type属性取值为“month”时，我们可以使用浏览器自带的工具来获取“月数”。

<input type="month" value=""/>	<!--<input type="date" value=""/> value属性用于设置初始值，格式必须如“2018-08”。
1
# 7.week

当type属性取值为“week”时，我们可以使用浏览器自带的工具来获取“周数”。

<input type="week" value=""/>	<!-- value属性用于设置初始值，格式必须如“2018-W04”。其中，“W”是“week”的缩写。
1

# 新增其他表单元素

# 1.output

我们可以使用 output 元素来定义表单元素的输出结果或计算结果。

<output></output>	<!--output元素是一个行内元素，只不过它比span元素更具有语义化,output元素一般放在form元素内部，并且配合其他表单元素（如文本框等）来使用。
1

# 2.datalist

我们可以使用 datalist 元素来为文本框提供一个可选的列表。

<datalist id="list名">	<!--如果想要把datalist绑定到某个文本框，需要设置该文本框的list属性值等于datalist的id值。-->
    <option lable="" value=""></option>
    <option lable="" value=""></option>
</datalist>
1
2
3
4

# 其他新增元素

# 1.addres

我们可以使用更具有语义化的 address 元素来为“整个页面”或者“某一个article元素”添加地址信息（电子邮件或真实地址）。

<address>地址信息</address>
1

# 2.time

我们可以使用更具有语义化的 time 元素来显示页面中的日期时间信息。

<time>"日期描述"</time>    <!--想要显示一段有意义的日期时间，用<time></time>括起来就可以了。
1

# 3.progress

我们可以使用 progress 元素以进度条的形式来显示某一个任务的完成度，如上传文件、下载文件等。

<progress max="最大值" value="当前值"></progress>
1

# 4.meter

我们可以使用进度条的形式来显示数据所占的比例。

<meter min="最小值" max="最大值" value="当前值"></meter>
meter元素跟progress元素非常相似，都是以进度条形式来显示数据比例。不过，两者在语义上有很大的区别：
▶ meter元素一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。
▶ progress元素一般用于显示动态数据比例。所谓“动态数据”，指的是会不断改变的数据，例如下载文件的进度。
1
2
3
4

# 5.fieldset和legend(“图片+图注”)

使用 fieldset 和 legend 有两个作用：增强表单的语义；定义 fieldset 元素的 disabled 属性来禁用整个组中的表单元素。

<fieldset>
    <legend>表单组标题</legend>
    <p><lable for="name">账号:</lable><input id="name" type="text"/></p>
    <p><lable for="pwd">账号:</lable><input id="pwd" type="password"/></p>
</fieldset>
1
2
3
4
5

# 6.a元素（download属性）

download 属性用于为文件取一个新的文件名。如果 download 属性值省略，则表示使用旧的文件名。

<a href="xxx/xxx.png(图片地址)" download="yyy.png(新文件名)">下载图片</a>	<!--点击下载图片后图片会被自动下载然后图片名字被换成新的文件名
1

# 7.small

我们可以使用更具有语义化的 small 元素来表示“小字印刷体”的文字。 small 元素一般用于网站底部的免责声明、版权声明等。

<small>内容</small>
1

# 8.script

script元素新增了两个属性：defer (英文为推迟）和 async（英文异步）。这两个属性的作用都是加快页面的加载速度，两者区别如下。 ▶ defer属性用于异步加载外部 JavaScript 文件，当异步加载完成后，该外部 JavaScript文件不会立即执行，而是等到整个HTML文档加载完成才会执行。 ▶ async属性用于异步加载外部 JavaScript 文件，当异步加载完成后，该外部 JavaScript文件会立即执行，即使整个HTML文档还没有加载完成。（更符合开发要求）

<head><script src="js/async.js" async></script></head>
<body><script></script>console.log("内部脚本")</body>
<!--其中，async.js文件代码如下：console.log("外部脚本")；	console为控制板的意思
1
2
3

在正常情况下，输出顺序应该是：“外部脚本→内部脚本”。但是由于 async 属性用于异步加载外部 JavaScript文件，当异步加载完成后，该外部 JavaScript 文件会立即执行，即使整个HTML文档还没有加载完成，因此输出顺序为：“内部脚本→外部脚本”。

# 新增属性

# 新增通用属性

# 1.hidden

隐藏元素内容

<element hidden></element>	/*其中，element是一个元素。
1

# 2.draggable

我们可以使用 draggable 属性来定义某一个元素是否可以被拖动,鼠标放开后会还原。

<element draggable="true"or"false"></element>	<!--draggable有两个属性值：true和false。默认值为false。当取值为true时，表示元素可以被拖动；当取值为false时，表示元素不可以被拖动。
1

# 3.contenteditable

我们可以使用 contenteditable 属性来定义某个元素的内容是否可以被编辑。

<element contenteditable="true"or"false"></element>	<!--当取值为true时，表示元素可以被编辑；当取值为false时，表示元素不可以被编辑。
1

# 4.data-*

我们可以使用data-*属性来为元素实现自定义属性。“data-”只是一个前缀，后面接一个小写的字符串，例如data-color、data-article-title等。

<element data-color="red">颜色变成了红色</element>
1

dom运用

▶ 如果是data-xxx格式，则应该写成obj.dataset.xxx。例如data-color应该写成obj.dataset.color，而data-content应该写成obj.dataset.content。 ▶ 如果是data-xxx-yyy格式，则应该写成obj.dataset.xxxYyy。例如data-fruit-price应该写成obj.dataset.fruitPrice，而data-animal-type应该写成obj.dataset.animalType。 同样自定义属性可以通过js创建，如obj.setAttribute("自定义名字"，值)；

obj.getAttribute("attr")        //获取值
obj.setAttribute("attr","值")    //设置值
obj.removeAttribute（"attr"）	//删除值
1
2
3

想要获取自定义属性的集合也可以通过.dataset.index来获取，但兼容性不太好

# input框新增属性

<form method="post"><input type=""/></form>
1

浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。

# 1.autocomplete

我们可以使用 autocomplete 属性来实现文本框的自动提示功能。

<input type="text" autocomplete="on"或"false">    
<!--autocomplete属性有两个属性值：on和off。on表示开启，off表示关闭。-->
<!--autocomplete属性一般都是结合datalist元素(下拉容器)来实现自动提示功能。-->
<!--autocomplete属性适用于所有文本框型的input元素，包括text、password、email、url、tel等。-->
1
2
3
4

# 2.auto

我们可以使用autofocus属性来实现文本框自动获取焦点。

<input type="text"autofocus />	
<!--autofocus属性也适用于所有文本框型的input元素，包括text、password、email、url、tel等。-->
1
2

# 3.placeholder

我们可以使用placeholder属性为文本框添加提示内容类似百度搜索。

<input type="text" placeholder="提示内容">
1

# 4.required

我们可以使用 required 属性来定义文本框输入内容不能为空。如果文本框为空，则不允许提交。

<input type="text" required />	
 <!--required属性适用于所有文本框型的input元素，包括text、password、email、url、tel等。-->
1
2

# 5.pattern

我们可以使用 pattern 属性来为文本框添加验证功能。

<input type="text" pattern="正则表达式" title="输入不合规范时提示的额外内容">	
 <!--此外，email、url、tel这3个类型的input元素，本质上都内置了pattern属性，因此它们会自动进行相关匹配验证。-->
1
2

# form元素的新增属性

# 1.novalidate

我们可以使用 novalidate 属性来禁用form元素的所有文本框内置的验证功能。

<form novalidate></form>
1

email、tel、url等类型的input元素中内置的验证机制默认会自动执行。但是在某些情况下，我们需要使用JavaScript来创建更为复杂且健全的验证，我们为form元素添加了novalidate属性，因此当点击按钮提交表单时，form元素内的文本框就不会采用浏览器内置的验证机制，然后我们就可以使用JavaScript来创建新的验证规则。

# 元素拖放

# 1.draggable

我们只需要给元素添加一个draggable属性，然后设置该属性值为true，就能实现元素的拖放。拖放，指的是“拖曳”和“释放”。在页面中进行一次拖放操作，我们必须先弄清楚两个元素：“源元素”和“目标元素”。“源元素”指的是被拖曳的那个元素，“目标元素”指的是源元素最终被释放到的那个元素。

<element draggable="true"or"false"></element>	<!--如果仅给元素设置draggable="true"，则该元素只具备可拖曳的特点，并不能改变元素的位置。如果想要拖动改变元素的位置，我们还需要结合元素拖放触发的事件来操作。-->
源元素触发事件
1.ondragstart		开始拖放
2.ondrag			拖放过程
3.ondragend			结束拖放
目标元素触发事件
1.ondragenter		当拖放元素进入本元素时
2.ondragover		当被拖放的元素在本元素中移动时
3.ondragleave		当被拖放的元素离开本元素时
4.ondrop			当源元素释放到本元素时
1
2
3
4
5
6
7
8
9
10

# 2.dataTransfer(应用非常广泛）

如果想要在元素拖放中实现数据传递，我们需要使用dataTransfer对象。dataTransfer对象主要用于在“源元素”与“目标元素”之间传递数据。 具体操作是这样的：开始拖放源元素时（ondragstart事件），调用setData()方法保存数据；然后在放入目标元素时（ondrop事件），调用getData()方法读取数据。

DataTransfer.files属性：

包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表。

  • # set Data()

保存数据。常见的数据格式如下表所示。

数据格式 说明
text/plain 文本文字格式
text/html html格式
text/xml xml字符格式
text/url-list url列表格式
sourseObj.ondragstart=function(e){e.dataTransfer.setData("text/plain",e.target.id);};
1
  • # get Data()

读取数据。

destObj.ondrap=function(){e.dataTransfer.getData("text/plain");};
1

实例

 <script>
    window.onload = function () {
      var olist = document.getElementById("list");
      var oli = olist.getElementsByTagName("li");
      var obox = document.getElementById("box");
      for (i = 0; i < oli.length; i++) {
        oli[i].ondragstart = function (e) {//源元素开始拖放时保存数据，此处获取了源元素id
          e.dataTransfer.setData("text/plain", e.target.id
          ); };}
       /*e.preventDefault()也是用于屏蔽元素的默认行为*/
        obox.ondragover = function (e) {//源元素进入本元素并在移动时取消本元素的事件（防止触发本元素的事件）
          e.preventDefault();//取消事件并阻止默认行为
        }
        obox.ondrop = function (e) {          
          var sv = e.dataTransfer.getData("text/plain");//读取数据
          var obj= document.getElementById(sv); //获取拖放元素并插入本元素中
          obox.appendChild(obj);
        };
    }
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 文件操作

# 文件上传

文件上传input元素有两个重要属性：multiple和accept。

# multiple属性

表示“是否选择多个文件”。

<input type="file" multiple/>
1
# accept属性

用于设置文件的过滤类型（MIME类型），常见的accept属性取值如表

值 描述
audio/* 接受所有的声音文件。
video/* 接受所有的视频文件。
image/* 接受所有的图像文件。
MIME_type 一个有效的 MIME 类型，不带参数。请参阅 IANA MIME 类型 (opens new window)，获得标准 MIME 类型的完整列表。
后缀名       MIME名称
*.3gpp    audio/3gpp, video/3gpp
*.ac3    	audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    
*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
<input type="file"  accept="image/jpeg,image/png" multiple/>	/*可添加多个，中间用逗号隔开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

想要对file类型元素进行美化，我们都是这样处理的：首先使用opacity: 0;将表单设置为透明，然后使用绝对定位在表单原来的位置上面定义一个label就可以了。然后用css对其进行调整。使用了opacity:0;之后，虽然表单看不见了，但它并没有消失，还占据着原来的位置，因此，我们点击原来的位置，还可以继续使用表单的功能。

html:

<a href="javascript:;" class="file">选择文件
    <input type="file" name="" id="file2">
</a>
1
2
3

css：

.file input {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;/*关键点*/
  filter: alpha(opacity=0);/*兼容ie*/
  font-size: 100px;/* 增大不同浏览器的可点击区域 */
  cursor: pointer;
}
1
2
3
4
5
6
7
8
9

# file对象（获取文件信息）

在文件上传元素中，将会产生一个FileList对象，它是一个类数组对象，表示所有文件的集合。其中，每一个文件就是一个File对象。以下是file对象的四个属性值。

当我们点击【选择文件】按钮，选择一张本地图片后，此时在浏览器控制台(console)中会输出图片的名称、大小、类型以及修改时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			window.onload = function() { //获取FileList对象
				var oFile = document.getElementById("file");
				oFile.onchange = function() { //获取第1个文件,即File对象
					var file = oFile.files[0];
					console.log("图片名称为:" + file.name);
					console.log("图片大小为:" + file.size + "B");
					console.log("图片类型为:" + file.type);
					console.log("修改时间为:" + file.lastModifiedDate);
				}
			}
		</script>
	</head>
	<body><input id="file" type="file" accept="image/*" multiple /> </body>
</html>

<script>
    // 转换文件大小的单位
	window.onload = function() {
			var oFile = document.getElementById("file");
			oFile.onchange = function() {
					//获取第1个文件
					var file = oFile.files[0];
					//将单位"B"转化为"KB"
					var size = file.size / 1024
					var unitArr = ["KB", "MB", "GB", "TB"];
					//转化单位
					for (var i = 0; size > 1; i++) {
						var filesizeString = size.toFixed(2) + unitArr[i];
						size /= 1024; //toFixed(2)表示四舍五入取两位有效小数
						//输出结果
						console.log("图片大小为: " + fileSizeString);
					}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# FileReader

在HTML5中，专门提供了一个文件操作的API，即FileReader对象。我们通过FileReader对象可以很方便地读取文件中的数据。 FileReader对象有5个方法，其中4个用来读取文件数据，另外1个用于中断读取操作，如表所示

方法 说明
readAsText() 将文件读取为“文本”
readAsDataUrl() 将文件读取为“DataUrl”
readAsBinaryString() 将文件读取为“二进制编码”
readAsArrayBuffer() 将文件读取为一个“ArrayBuffer”对象
abort() 中止读取操作

FileReader对象提供了6个事件，用于检测文件的读取状态

事件 说明
onloadstart 开始读取
onprogress 正在读取
onload 成功读取
onloadend 读取完成（无论有没有成功）
onabort 中断
onerror 出错

语法：

var reader=new FillReader();
reader.readAsDataURL(file,编码);
reader.onload=function(){/*成功读取后的操作}
1
2
3

读取txt文本文件，以gbk编码方式输出

<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        window.onload = function () {
            var oFile = document.getElementById("file");
            oFile.onchange = function () {
                //获取第1个文件
                var file = oFile.files[0];
           //读取本地文件，以gbk编码方式输出
            var reader = new FileReader();
            reader.readAsText(file, "gbk");
            reader.onload = function () {
                console.log(this.result);	
            //表示一旦开始读取文件，无论成功或失败，实例的result属性（即this.result）都会被填充。
            //如果读取成功，则this.result的值就是当前文件的内容；如果读取失败，则this.result的值为null。
            };
        };
    }
  </script>
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在线预览图片使用创建新标签（readAsDataURL()方法）

 <script>
        window.onload = function () {
            var oFile = document.getElementById("file");
            oFile.onchange = function () {
            //获取第1个文件
            var file = oFile.files[0];           
            //将图片转换为base64
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                //添加图片到页面中
                var oImg = document.createElement("img");
                oImg.src = this.result;
                document.body.appendChild(oImg);
            };
        };
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在线预览图片使用拖放api（readAsDataURL()方法）

<html><head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #box
        {
            width:150px;
            height:150px;
            border:1px solid silver;
        }
    </style>
    <script>
        window.onload = function () {
            var oBox = document.getElementById("box");
            var oContent = document.getElementById("content");
         	 //拖放元素移动时阻止默认行为
            oBox.ondragover = function (e) {
                e.preventDefault();
            };
     		//添加ondrop事件，被拖放的元素在oBox中释放时
            oBox.ondrop = function (e) {
                e.preventDefault();
   				//获取拖放的File对象
                var file = e.dataTransfer.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
			    reader.onload = function () {
                    var oImg = document.createElement("img");
                    //设置图片src为this.result
                    oImg.src = this.result;
                    oImg.style.width = "150px";
                    oImg.style.height = "150px";
                    oBox.appendChild(oImg);
                };
            }
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# Blob对象

在HTML5中，还新增了一个Blob对象，用于代表原始二进制数据。实际上，前面介绍的File对象也继承于Blob对象。 语法

var blob=new Blob(dataArray,type);
1

Blob()构造函数有两个参数，这两个参数都是可选参数，而并非必选参数。第1个参数dataArray是一个数组，数组中的元素可以是以下类型的对象。 ▶ String对象（即字符串） ▶ Blob对象（即其他Blob对象） ▶ ArrayBuffer对象 ▶ ArrayBufferView对象 第2个参数type是一个字符串，表示Blob对象的MIME类型。 创建并下载文本链接 （如果想要创建及下载HTML文件，只需要把var blob = new Blob([text],{type:"text/plain"});改为var blob = new Blob([text],{type: "text/html"});就可以了。）

<html><head>
    <meta charset="utf-8">
    <title></title>
    <script>
        window.onload = function () {
            var oTxt = document.getElementById("txt");
            var oBtn = document.getElementById("btn");
            var oDiv = document.getElementById("container");
            oBtn.onclick = function () {
            var text = oTxt.value;
            //创建一个装填text对象的blob对象
            var blob = new Blob([text], { type: "text/plain" });
            //通过createObjectURL()方法创建文字链接
            oDiv.innerHTML = '<a download href="' + window.URL.createObjectURL(blob) + '" target="_blank">下载文件</a>';
        };
    }
</script>
</head>
<body>
    <textarea id="txt" cols="30" rows="10"></textarea><br>
    <input id="btn" type="button" value="创建链接">
    <div id="container"></div>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

创建并下载txt文件（改进版，不额外创建链接，而是直接点击按钮就能实现下载）

<html><head>
<meta charset="utf-8">
<title></title>
<script>
    window.onload = function () {
        var oTxt = document.getElementById("txt");
        var oBtn = document.getElementById("btn");
        var oDiv = document.getElementById("container");
        oBtn.onclick = function () {
            //Blob中数据为“文字”，默认编码为“utf-8”
            var text = oTxt.value;
            var blob = new Blob([text], { type: 'text/plain' });
            //通过createObjectURL()方法创建文字链接
            var oA = document.createElement("a");
            var url = window.URL.createObjectURL(blob);
            oA.download = "download";
            oA.href = url;
            //添加元素
            document.body.appendChild(oA);
            //触发点击
            oA.click();
            //移除元素
            document.body.removeChild(oA);
        };
    }
</script>
</head>
<body>
    <textarea id="txt" cols="30" rows="10" style="margin: 0px; width: 530px; height: 146px;"></textarea><br>
    <input id="btn" type="button" value="下载文件">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 本地存储

原始 cookie 存储太小且有数量限制 为了解决 Cookie 这种方式的限制， HTML5 新增了3种全新的数据存储方式：localStorage、sessionStorage 和 indexedDB 。localStorage 用于永久保存客户端的少量数据 sessionStorage 用于临时保存客户端的少量数据，而 indexedDB用于永久保存客户端的大量数据。 如果要储存的是一个对象，就先把这个对象通过JSON.stringify(obj)的方法将其转化为 JSON 字符串格式，想要读取出来也可以通过 JSON.parse(string) 将其解析还原

# localStorage

localStorage对象的常用方法有5种，如表所示

方法 说明
setItem(key,value) 创建数据
getItem(key） 获取数据
removeItem(key) 删除某个数据
clear() 清除所有数据
key(n) 获取第n个值，其中n为整数

举例：简易留言板

  <html><head>
    <meta charset="utf-8">
    <title></title>
    <script>
       window.onload = function () {
            var oList = document.getElementById("list");
            var oTxt = document.getElementById("txt");
            var oBtn = document.getElementById("btn");
            var oBtnClear = document.getElementById("btnClear");     
       oBtn.onclick = function () {
            //生成随机4位数，作为key
            var strKey = "";
            for (var i = 0; i < 4; i++) {
                strKey += Math.floor(Math.random() * (9 + 1));
            }

            //获取文本框的值，作为value
            var strValue = oTxt.value;
            //调用setItem()设置数据
            localStorage.setItem(strKey, strValue);

            //插入数据到ul中
            var oLi = document.createElement("li");
            var oLiTxt = document.createTextNode(strKey + "：" + strValue);
            oLi.appendChild(oLiTxt);
            oList.appendChild(oLi);
        };

        oBtnClear.onclick = function () {
            localStorage.clear();
            oList.innerHTML = "";
        };

        //页面载入时，读取数据，并添加到页面中
        for (var i = 0; i < localStorage.length; i++) {
            var strKey = localStorage.key(i);
            var strValue = localStorage.getItem(strKey);
            var oLi = document.createElement("li");
            var oLiTxt = document.createTextNode(strKey + "：" + strValue);
            oLi.appendChild(oLiTxt);
            oList.appendChild(oLi);
        }
    }
</script>
</head>
<body>
    <ul id="list"></ul>
    <textarea id="txt" cols="30" rows="10"></textarea><br>
    <input id="btn" type="button" value="发表">
    <input id="btnClear" type="button" value="清空">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# sessionStroage（回话储存）

方法同上，只不过其储存会随浏览器关闭而删除

# indexedDB

IndexedDB 具有以下特点。

（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以“键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制。 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大。 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

indexedDB //有些类似于数据库，有着很多的强大的api
1

# 视频

video常用属性

属性 说明
autoplay 是否自动播放
controls 是否显示控件
loop 是否循环播放
preload 是否预加载

其中 preload 的取值可以为 auto （预加载，默认值）； metadata 只预加载元数据（即媒体字节数、第一帧、播放列表等）；none(不预加载) 其中在谷歌浏览器中自动播放被禁用来需要加上muted才行

注：metadata（元数据）用来描述数据的数据

<video width:30px height:50px src="文件路径" autoplay controls loop></video>
1

对视频元素的操作

video 元素的 DOM 属性

属性 说明
volume 音量(秒)
currentTime 当前播放时间(秒)
startTime 设置播放时间也就是从哪开始播放(秒)
duration 总的播放时间(秒)
playbackRate 当前播放速率，默认值为1
muted 是否禁音，默认false
paused 是否处于暂停，(flag)
end 是否播放完毕(flag)

video 元素的 DOM 方法

方法 说明
play() 播放
pause() 暂停

video 元素的 DOM 事件

事件 说明
timeupdate 视频时间改变时触发

# 音频

<audio></audio>其属性与操作方法与<video>相同
1

小技巧：若要将音频作为背景音乐则隐藏控件即不设置controls

# 离线应用

1.在浏览器中访问应该使用地址 http://localhost/text/text.html (opens new window) 来访问

2.鼠标左键点击桌面右下角的WampServer图标，在管理面板中找到Apache选项中的httpd.conf，如图8-4所示。然后在httpd.conf文件最底部加入下面这一句代码（特别注意空格），添加后记得重启一下服务器：AddType text/cache-manifest .manifest

3.在html文件页面头部前加入<html mainifest="cache.manifest">

4.在www文件目录下放入4个文件：cache.html、cache.css、cache.js、cache.png

5.在www文件目录下添加一个cache.manifest文件。

CACHE MANIFEST
CACHE：
cache.html
cache.css
cache.js
cache.png
1
2
3
4
5
6
编辑 (opens new window)
上次更新: 2023/7/11 18:57:41
html常用代码

html常用代码→

最近更新
01
IoC 解决了什么痛点问题？
03-10
02
如何调试 Nest 项目
03-10
03
Provider注入对象
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License