HTML5#
大纲#
新增的属性#
- placeholder
- Calendar, date, time, email, url, search
- ContentEditable
- Draggable
- Hidden
- Content-menu
- Data-Val(自定义属性)
新增的标签#
- 语义化标签
- canvas
- svg
- Audio(声音播放)
- Video(视频播放)
API#
- 移动端网页开发一般指的是 h5
- 定位（需要地理位置的功能）
- 重力感应（手机里面的陀螺仪（微信摇一摇，赛车转弯））
- request-animation-frame（动画优化）
- History 历史界面（控制当前页面的历史记录）
- LocalStorage（本地存储，电脑/浏览器关闭都会保留）；SessionStorage，（会话存储：窗口关闭就消失）。 都是存储信息（比如历史最高记录）
- WebSocket（在线聊天，聊天室）
- FileReader(文件读取，预览图)
- WebWoker（文件的异步，提升性能，提升交互体验）
- Fetch（传说中要替代 AJAX 的东西）
属性篇_input 新增 type#
1.placeholder#
1<input type="text" placeholder="用户名/手机/邮箱" />
2<input type="password" placeholder="请输入密码" />2.input 新增 type#
以前学的
1<input type="radio" />
2<input type="checkbox" />
3<input type="file" />input 新增 type
1<form>
2 <!-- Calendar类 -->
3 <input type="date" /><!-- 不常用原因之一：chrome支持，Safari,IE不支持 -->
4 <input type="time" /><!-- 不常用原因之一：chrome支持，Safari,IE不支持 -->
5 <input
6 type="week"
7 /><!-- 第几周 不常用原因之一：chrome支持，Safari,IE不支持 -->
8 <input
9 type="datetime-local"
10 /><!-- 不常用原因之一：chrome支持，Safari,IE不支持 -->
11 <br />
12 <input
13 type="number"
14 /><!-- 限制输入，仅数字可以。不常用原因之一：chrome支持，Safari,IE不支持-->
15 <input
16 type="email"
17 /><!-- 邮箱格式 不常用原因之一：chrome，火狐支持，Safari,IE不支持-->
18 <input
19 type="color"
20 /><!-- 颜色选择器 不常用原因之一：chrome支持，Safari,IE不支持-->
21 <input
22 type="range"
23 min="1"
24 max="100"
25 name="range"
26 /><!-- chrome,Safar支持 ，火狐，IE不支持-->
27 <input
28 type="search"
29 name="search"
30 /><!-- 自动提示历史搜索.chrome支持,Safar支持一点,IE不支持 -->
31 <input type="url" /><!-- chrome，火狐支持,Safar,IE不支持 -->
32
33 <input type="submit" />
34</form>ContentEditable#
1<div>Panda</div>想修改内容 原生方法：增加点击事件修改 新方法
1<div contenteditable="true">Panda</div>默认值 false,没有兼容性问题,可以继承(包裹的子元素),可以覆盖(后来设置的覆盖前面设置的) 常见误区：
1<div contenteditable="true">
2 <span contenteditable="false">姓名：</span>Panda<br />
3 <span contenteditable="false">姓别：</span>男<br />
4 <!-- 会导致删除br等标签 -->
5</div>总结：实战开发可用属性:contenteditable, placeholder
标签篇_语义化标签#
全是 div，只是语义化
1<header></header>
2<footer></footer>
3<nav></nav>
4<article></article>
5<!--文章，可以直接被引用拿走的-->
6<section></section>
7<!--段落结构，一般section放在article里面-->
8<aside></aside>
9<!--侧边栏-->audio 与 video 播放器#
1<audio src="" controls></audio> <video src="" controls></video>以上：太丑，不同浏览器不统一
视频播放器#
加载不出来https://blog.csdn.net/qq_40340478/article/details/108309492
只有 http 协议中视频资源带有 Content-Range 属性，才能设置时间进行跳转
1var express = require("express"); var app = new express();
2app.use(express.static('./')); app.listen(12306); // 如果不能改变进度条
3就用第36节的黑科技 访问127.0.0.1：12306/test.htmlgeolocation#
1<script>
2 // 获取地理信息
3 // 一些系统，不支持这个功能
4 // GPS定位。台式机几乎都没有GPS，笔记本大多数没有GPS，智能手机几乎都有GPS
5 // 网络定位 来粗略估计地理位置
6 window.navigator.geolocation.getCurrentPosition(
7 function (position) {
8 console.log("======"); //成功的回调函数
9 console.log(position);
10 },
11 function () {
12 //失败的回调函数
13 console.log("++++++");
14 }
15 );
16 //可以访问的方式：https协议，file协议，http协议下不能获取
17 // 经度最大值180，纬度最大值90
18</script>https 还是不能访问：
- 谷歌浏览器打开谷歌地图，无法定位
- 利用翻墙可以实现
四行写个服务器#
手机访问电脑 sever.js npm init npm i express
1var express = require('express');
2var app = new express();
3app.use(express.static("./page"));
4app.listen(12306);//端口号大于8000或者等于80
5// 默认访问80端口，express默认访问index.html
6想访问里面的hello.html
7127.0.0.1:12306
8127.0.0.1:12306/hello.htmltest.7z 命令框或者 vscode 客户端，进入项目路径，node server.js
deviceorientation#
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>document</title>
6 <link rel="stylesheet" href="" />
7 </head>
8 <body>
9 <div id="main"></div>
10 <script>
11 // 陀螺仪,只有支持陀螺仪的设备才支持体感
12 // 苹果设备的页面只有在https协议下，才能使用这些接口
13 // 11.1.X以及之前，可以使用。微信的浏览器
14
15 // alpha:指北(指南针) [0,360) 当为0的时候指北。180指南
16 // beta:平放的时候beta值为0。当手机立起来(短边接触桌面)，直立的时候beta为90；
17 // gamma:平放的时候gamma值为零。手机立起来(长边接触桌面)，直立的时候gamma值为90
18
19 window.addEventListener("deviceorientation", function (event) {
20 // console.log(event);
21 document.getElementById("main").innerHTML =
22 "alpha:" +
23 event.alpha +
24 "<br/>" +
25 "beta:" +
26 event.beta +
27 "<br/>" +
28 "gamma:" +
29 event.gamma;
30 });
31 </script>
32 </body>
33</html>手机访问电脑#
1.手机和电脑在同一个局域网下 2.获取电脑的 IP 地址 windows 获取 ip：终端输入 ipconfig 3.在手机上输入相应的 IP 和端口进行访问
devicemotion#
1<script>
2 // 摇一摇
3 window.addEventListener("devicemotion", function (event) {
4 document.getElementById("main").innerHTML =
5 event.accelertion.x +
6 "<br/>" +
7 event.accelertion.y +
8 "<br/>" +
9 event.accelertion.z;
10 if (
11 Math.abs(event.accelertion.x) > 9 ||
12 Math.abs(event.accelertion.y) > 9 ||
13 Math.abs(event.accelertion.z) > 9
14 ) {
15 alert("在晃");
16 }
17 });
18</script>requestAnimationFrame#
1/*
2 function move(){
3 var square = document.getElementById("main");
4 if(square.offsetLeft > 700){
5 return;
6 }
7 square.style.left = square.offsetLeft + 20 +"px";
8 }
9 setInterval(move, 10);
10 */
11// 屏幕刷新频率：每秒60次
12// 如果变化一秒超过60次，就会有动画针会被丢掉
13
14// 实现均匀移动,用requestAnimationFrame,是每秒60针
15// 将计就计setInterval(move, 1000/60);会实现同样效果吗
16// 1针少于1/60秒，requestAnimationFrame可以准时执行每一帧的
17// requestAnimationFrame(move);//移动一次
18var timer = null;
19function move() {
20 var square = document.getElementById("main");
21 if (square.offsetLeft > 700) {
22 cancelAnimationFrame(timer);
23 return;
24 }
25 square.style.left = square.offsetLeft + 20 + "px";
26 timer = requestAnimationFrame(move);
27}
28move();
29// cancelAnimationFrame基本相当于clearTimeout
30// requestAnimationFrame兼容性极差兼容性极差还想使用咋办？
1window.cancelAnimationFrame = (function () {
2 return (
3 window.cancelAnimationFrame ||
4 window.webkitCancelAnimationFrame ||
5 window.mozCancelAnimationFrame ||
6 function (id) {
7 window.clearTimeOut(id);
8 }
9 );
10})();
11
12window.requestAnimationFrame = (function () {
13 return (
14 window.requestAnimationFrame ||
15 window.webkitRequestAnimationFrame ||
16 window.mozRequestAnimationFrame ||
17 function (id) {
18 window.setTimeOut(id, 1000 / 60);
19 }
20 );
21})();localStrorage#
cookie:每次请求都有可能传送许多无用的信息到后端 localStroage:长期存放在浏览器，无论窗口是否关闭
1localStorage.name = "panda";
2// localStroage.arr = [1, 2, 3];
3// console.log(localStroage.arr);
4// localStroage只能存储字符串，
5
6要想存储数组;
7localStorage.arr = JSON.stringify([1, 2, 3]);
8// console.log(localStorage.arr);
9console.log(JSON.parse(localStorage.arr));
10
11localStorage.obj = JSON.stringify({
12 name: "panda",
13 age: 18,
14});
15console.log(JSON.parse(localStorage.obj));sessionStroage:这次回话临时需要存储时的变量。每次窗口关闭的时候，seccionStroage 自动清空
1sessionStorage.name = "panda";localStorage 与 cookie
1.localStorage 在发送请求的时候不会把数据发出去，cookie 会把所有数据带出去 2.cookie 存储的内容比较(4k) ，localStroage 可以存放较多内容(5M)
另一种写法
1localStorage.setItem("name", "monkey"); localStorage.getItem("name");
2localStorage.removeItem("name");相同协议，相同域名，相同端口称为一个域
注意：
www.baidu.com不是一个域。 http://www.baidu.com https://www.baidu.com,是域。这是不同域
history#
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>document</title>
6 <style type="text/css"></style>
7 <script>
8 // A -> B - C
9 // 为了网页的性能，单页面操作
10 var data = [
11 {
12 name: "HTML",
13 },
14 {
15 name: "CSS",
16 },
17 {
18 name: "JS",
19 },
20 {
21 name: "panda",
22 },
23 {
24 name: "dengge",
25 },
26 ];
27 function search() {
28 var value = document.getElementById("search").value;
29 var result = data.filter(function (obj) {
30 if (obj.name.indexOf(value) > -1) {
31 return obj;
32 }
33 });
34 render(result);
35 history.pushState({ inpVal: value }, null, "#" + value);
36 }
37 function render(renderData) {
38 var content = "";
39 for (var i = 0; i < renderData.length; i++) {
40 content += "<div>" + renderData[i].name + "</div>";
41 }
42 document.getElementById("main").innerHTML = content;
43 }
44 window.addEventListener("popstate", function (e) {
45 // console.log(e);
46 document.getElementById("search").value = e.state.inpVal
47 ? e.state.inpVal
48 : "";
49 var value = document.getElementById("search").value;
50 var result = data.filter(function (obj) {
51 if (obj.name.indexOf(value) > -1) {
52 return obj;
53 }
54 });
55 render(result);
56 });
57 // 关于popstate和hashchange
58 // 只要url变了，就会触发popstate
59 // 锚点变了(hash值变了)，就会触发hashchange
60 window.addEventListener("hashchange", function (e) {
61 console.log(e);
62 });
63 </script>
64 </head>
65
66 <body>
67 <input type="text" id="search" /><button onclick="search()">搜索</button>
68 <div id="main"></div>
69 <script>
70 render(data);
71 </script>
72 </body>
73</html>worker#
1<script>
2 // js都是单线程的
3 // worker是多线程的, 真的多线程, 不是伪多线程
4 // worker不能操作DOM,没有window对象,不能读取本地文件。可以发ajax,可以计算
5 // 在worker中可以创建worker吗？
6 // 在理论上可以，但是没有一款浏览器支持
7 /*
8 console.log("=======");
9 console.log("=======");
10 var a = 1000;
11 var result = 0;
12 for (var i = 0; i < a; i++) {
13 result += i;
14 }
15 console.log(result);
16 console.log("=======");
17 console.log("=======");
18 */
19 // 后两个等号只有等待算完才执行
20
21 var beginTime = Data.now();
22 console.log("=======");
23 console.log("=======");
24 var a = 1000;
25 var worker = new Worker("./worker.js");
26 worker.postMessage({
27 num: a,
28 });
29 worker.onmessage = function (e) {
30 console.log(e.data);
31 };
32 console.log("=======");
33 console.log("=======");
34 var endTime = Data.now();
35 console.log(endTime - beginTime);
36 worker.terminate(); //停止
37 this.close(); //自己停止
38</script>worker.js
1this.onmessage = function (e) {
2 //接受消息
3 // console.log(e);
4 var result = 0;
5 for (var i = 0; i < e.data.num; i++) {
6 result += i;
7 }
8 this.postMessage(result);
9};worker.js 里面可以通过 importScripts("./index.js")引入外部 js 文件
目录