html5+css3学习笔记

最新推荐文章于 2022-11-02 00:15:27 发布

小幽艾

最新推荐文章于 2022-11-02 00:15:27 发布

阅读量428

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/loisandyu/article/details/84949780

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

html5:

1.geolocation---定位

2.video,audio

3.LocalStorage

cookie: 小 4k 浏览器和服务器共享

LocalStorage：大 5m 浏览器独享

4.WebWorker 多进程

5.WebSQL,IndexDB----存在安全隐患 W3C删除了

6.文件操作和拖拽

7.canvas---画图(位图，放大失真）

8.mainfest文件，前台控制缓存，曾被称为本地应用

9.css3

geolocation---定位

1.定位原理：

PC：通过ip地址定位定位精度差，需要ip库，chrome需要向googel来要ip地址，ie找微软要ip地址

移动：通过GPS定位定位精度高

geolocation3个常用函数

1.getCurrentPosition(成功，失败，参数)

成功状态使用的函数：coords（坐标），包含以下7个值:

accuracy: 精确度
altitude: 海拔高度
altitudeAccuracy: 海拔高度精确度
heading: 朝向（0-359）
latitude:纬度
longitude: 经度
speed: 地面速度

2.clearWatch

3.watchPosition:不断获取位置信息

geolocation使用例子（定位.html）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>geolocation定位</title>
    <style>.bmap {width: 600px;height: 600px;border: 1px solid black;}</style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script>
        window.onload = function() {
            let oBtn = document.getElementById('btn1');
            oBtn.onclick = function() {
                //getCurrentPosition(成功，失败，参数)
                navigator.geolocation.getCurrentPosition(res => {
                    alert('成功');
                    console.log(res.coords); //坐标

                    // 创建和初始化地图函数
                    function initMap() {
                        createMap(); //创建地图
                        setMapEvent(); //设置地图事件
                        addMapControl(); //向地图添加控件
                        addMapOverlay(); //向地图添加覆盖物
                    }

                    function createMap() {
                        map = new BMap.Map("bmap");
                        map.centerAndZoom(new BMap.Point(res.coords.longitude, res.coords.latitude), 15);
                    }

                    function setMapEvent() {
                        map.enableScrollWheelZoom();
                        map.enableKeyboard();
                        map.enableDragging();
                        map.enableDoubleClickZoom();
                    }

                    function addMapControl(target, window) {
                        target.addEventListener("click", function() {
                            target.openInfoWindow(window);
                        })
                    }

                    function addClickHandler(target, window) {
                        target.addEventListener("click", function() {
                            target.openInfoWindow(window);
                        });
                    }

                    function addMapOverlay() {
                        var markers = [{
                            content: "来找我啊",
                            title: "我的位置",
                            imageOffset: {
                                width: 0,
                                height: 3
                            },
                            position: {
                                lat: res.coords.latitude,
                                lng: res.coords.longitude
                            }
                        }];
                        for (var index = 0; index < markers.length; index++) {
                            var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
                            var marker = new BMap.Marker(point, {
                                icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
                                    imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
                                })
                            });
                            var label = new BMap.Label(markers[index].title, {
                                offset: new BMap.Size(25, 5)
                            });
                            var opts = {
                                width: 200,
                                title: markers[index].title,
                                enableMessage: false
                            };
                            var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
                            marker.setLabel(label);
                            addClickHandler(marker, infoWindow);
                            map.addOverlay(marker);
                        };
                    }
                    //向地图添加控件
                    function addMapControl() {
                        var scaleControl = new BMap.ScaleControl({
                            anchor: BMAP_ANCHOR_BOTTOM_LEFT
                        });
                        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
                        map.addControl(scaleControl);
                        var navControl = new BMap.NavigationControl({
                            anchor: BMAP_ANCHOR_TOP_LEFT,
                            type: BMAP_NAVIGATION_CONTROL_LARGE
                        });
                        map.addControl(navControl);
                        var overviewControl = new BMap.OverviewMapControl({
                            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                            isOpen: true
                        });
                        map.addControl(overviewControl);
                    }
                    var map;
                    initMap();
                }, err => {
                    alert('失败');
                });
            }
        }
    </script>
</head>

<body>
    <input type="button" value="定位" id="btn1">
    <div class="bmap" id="bmap"></div>
</body>

</html>

运行结果：

LocalStorage

1.每个域名有5m，涉及到跨域

2.使用起来方便，永久存储

3.用途：记录用户名，保存草稿

sessionStorage:会话期间存储，浏览器关闭即删除

LocalStorage 使用例子（LocalStorage.html,需搭配appserve使用）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>LocalStorage</title>
    <script>
        localStorage.a = 12; //存
        console.log(localStorage.a); //取
        localStorage.b = 123; //存
        localStorage.c = 132; //存
        localStorage.d = 1122; //存

        //遍历
        for (let i = 0; i < localStorage.length; i++) {
            let key = localStorage.key(i);
            console.log(`${key}: ${localStorage[key]}`);
        }

        // 删除
        delete localStorage.a;
        delete localStorage.b;
        delete localStorage.c;
        delete localStorage.d;


        // 保存草稿：
        window.onload = function() {
            let oTxt = document.getElementById('txt1');
            let oBtn = document.getElementById('btn1');
            oTxt.innerText = localStorage.tmp_txt;
            oTxt.oninput = function() {
                localStorage.tmp_txt = oTxt.value;
            }
            oBtn.onclick = function() {
                alert('发送完成');
                delete localStorage.tmp_txt;
            }

        }
    </script>
</head>

<body>
    <textarea id="txt1" cols="10" rows="10"></textarea>
    <input type="button" value="发送" id="btn1">
</body>

</html>

运行结果：

WebWorker---web多进程

对于前端来说：1.主进程---UI进程 2.子进程---工作进程

WebWorker：

1.不能控制UI的东西，但是数据交互可以

2.子进程不能创建子进程，每个webworker子进程必须新建一个js文件

3.涉及到跨域

多线程：共享存储空间---多个进程之间发送数据，传引用实现

多进程：各自独享存储空间----多个进程间发送数据，复制实现（document对象不能复制）----复制造成性能不高

多进程可以更加充分的发挥计算机CPU资源，但一般来说基本不使用多进程

例（webworker.js+webworker.html）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>webworker</title>
    <script>
        let oW = new Worker("webworker.js"); //新创建一个工作进程
        oW.postMessage({n1: 10,n2: 4});

        oW.onmessage = function(ev) {
            console.log(ev.data);
        }
    </script>
</head>
<body></body>
</html>

this.onmessage = function(ev) {
    let { n1, n2 } = ev.data;
    console.log(n1 + n2);
    this.postMessage(n1 + n2);
}

运行结果（也需要配合appserve）：

canvas---画图，位图，放大失真，可用来做图表应用、游戏、滤镜

SVG，矢量图，可无限缩放，不是html5的一部分，是一个独立标准

VML，矢量图，可无限缩放，ie的矢量图，出现的非常早（ie5的年代）

canvas使用：

1.路径操作，类似ps的选区，还需后续操作

闭合---一定要用closePath

2.边线：stroke();

3.填充：fill()

线宽：lineWidth

线色：strokeStyle= 'blue';

填充色：fillStyle= 'yellow';

例子（canvas.html）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        body {text-align: center;}
        #c1 { background-color: pink; }
    </style>
    <script>
        window.onload = function() {
            let oc = document.getElementById("c1");
            let gd = oc.getContext('2d'); //图形上下文--一个接口，用于获取所以的绘图方法和属性

            // 路径操作，类似ps的选区
            gd.moveTo(470, 81); //走到起点
            gd.lineTo(778, 236);
            gd.lineTo(532, 411);
            gd.lineTo(312, 259);
            // gd.lineTo(470, 81);闭合方法一，有缺口
            gd.closePath(); //闭合方法二，可完美闭合
            gd.strokeStyle = 'green';
            gd.lineWidth = 5;
            gd.stroke(); //绘制
            gd.fillStyle = 'yellow';
            gd.fill(); //填充

        }
    </script>
</head>

<body><canvas id="c1" width="800" height="600"></canvas></body>

</html>

运行结果：

css3样式(兼容性要求ie10+，不改变盒模型（物体占据的空间），不改变物体宽高，设置css3特性不会影响邻近物体位置（比如把旁边的div挤到下一行），不引起重排和重绘)：

1.圆角 border-radius

值写法：10px, 10px/50px(横向x轴长/纵向y轴长), 50%（最大是50%）,

10px (左上右下为10px) 20px (左下右上为20px),

10px (左上为10px) 20px (左下右上为20px) 50px(右下为50px),

10px (左上为10px) 20px (右上为20px) 50px(右下为50px) 50px(左下为50px),----顺时针

2.阴影 text-shadow、box-shadow

text-shadow参数：横向偏移，纵向偏移，阴影大小（程度），阴影颜色

text-shadow: 10px 50px 3px red;

box-shadow参数:横向偏移，纵向偏移，阴影大小（程度），阴影颜色，扩展范围，内阴影，

box-shadow:10px 50px 3px 10px pink;

没加inset: 加了inset: 加了拓展范围(50px-10px)，没加inset：

3.渐变 linear、radial

渐变不是颜色，而是图片

linear：线性渐变

渐变可指定多种颜色：background-image: -webkit-linear-gradient(blue,yellow, black, pink)

颜色可指定位置：background-image: -webkit-linear-gradient(blue 50%, pink)（从50%开始渐变）

radial：镜像渐变

4.rgba

只改变背景透明度，不改变其中的文字透明度，background: rgba(0, 0, 0, 0.5);

5.transform（使用时一定要加上初始值）

1.rotate 旋转：transform: rotate(90deg);

2.scale 缩放：transform: scale(2);

3.translate 平移（移动端喜欢用）:transform: translate(20px,20px);

4.skew 倾斜：transform: skew(5deg, 45deg);

transform高级：

1.可以多个变换一起用---看到的结果，顺序是“反的”，比如下面的例子，第一个先scale再rotate，看似是反的，其实是正的：矩阵乘法的原因

transform: rotate(45deg) scale(2, 1) transform: scale(2, 1) rotate(45deg)

2.3D变换

2d 3d

rotate rotateX/rotateY/rotateZ

例：transform: perspective(200px) rotateY(60deg); transform: perspective(200px) rotateX(60deg);

perspective：景深/透视，值越小，3d感觉越明显

translate translateX/translateY/translateZ

6.动画 transition、animation

transition：简单、容易、方便简单动画制作,数字相关的都可以变

transition: 1.时间 2.样式 3.形式

transition: 1s all ease; transition: 1s width ease; transition: 1s height ease;

transition: 1s height ease-in(加速)/linear(匀速)/ ease-out(减速)/ease-in-out(先加后减=ease);

animation：强大、麻烦复杂的链式动画制作

animation：1.定义 2.调用

animation-name: aaa;名字

animation-duration: 10s;//时长

animation-timing-function: ease;

animation-fill-mode:

backwards(最后回到起始状态)/both(走一次停终点，走两次停起点)/forwards(停在变化后状态)/none ;

animation-delay:2s;//延迟

animation-direction:alternate;//和animation-iteration-count搭配使用

animation-play-state:paused/running ;

animation-iteration-count:5/infinite；//重复几次

跟js配合---主要就是加个class

transform---3d盒子：

x轴，正方向向右，y轴正方向向下，z轴正方向从盒子里面往外戳（想象下你在盒子面前，z轴就向你戳过来）,总的来说，顺时针是正方向。

对于屏幕前的我们来讲：x轴，正方向为盒子顶部向里面走（看起来顶部在远离你），往上面跳，y轴正方向为盒子右部向里面走（看起来右部在远离你），往下边走，z轴正方向从盒子里面往外戳（想象下你在盒子面前，z轴就向你戳过来）

代码（css3.html）：

perspective:对自己起作用，使用时，只给最外层加上就好了，其他的层都可以达到效果

preserve-3d:对子元素起作用，对子元素的子元素不会起作用，子元素可以脱离父级，使用时，每个需要子级出来的父元素都要加

skew 3d变换：

transform---3d应用---翻书效果.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>翻书效果</title>
    <style>
        .box {
            width: 600px;  height: 400px;  margin: 100px auto 0;  position: relative;
            transform-style: preserve-3d;  transform: perspective(700px) rotateX(20deg);/* 让书变成一个倾斜的效果 */
        }

        .box .page {
            width: 298px;  height: 398px;  background-color: white;  border: 1px solid black;
            position: absolute;  top: 0;}
        
        .box .page4 { right: 0; }
        
        .child {
            width: 300px;  height: 400px;  position: absolute; left: 50%; top: 0;
            transform-style: preserve-3d; transform-origin: left; /* 沿着最左边翻页 */
            transition: 5s all ease; transform: rotateY(0px);
        }
        
        .box .page2 {transform: translateZ(1px);}
        
        .box .page3 { transform: translateZ(-1px) scaleX(-1);}
        
        .box:active .child { transform: rotateY(-180deg);}
    </style>
</head>

<body>
    <div class="box">
        <div class="page page1">page1pae1pagpage1page1</div>
        <div class="child">
            <div class="page page2">222222222222222222</div>
            <div class="page page3">33333333333</div>
        </div>
        <div class="page page4">44444444444444</div>
    </div>
</body>

</html>

结果：

css3其他所有代码：（css3.html）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>css3</title>
    <style>
        .box { width: 100px;   height: 100px;   margin: 90px;  }
        
        .box1 { border: 1px solid black;  text-shadow: 10px 50px 3px red;
            box-shadow: 10px 50px 3px 10px pink;  border-radius: 10px 20px 30px 40px; }
        
        .box2 {  border: 1px solid black;  border-radius: 10px 20px 30px 40px;
            text-shadow: 10px 50px 3px red;  box-shadow: inset 10px 50px 3px 10px pink;}
        
        .box3 {background-image: -webkit-radial-gradient(left top, 20px 20px, blue, pink);}
        
        .box4 {background: rgba(0, 0, 0, 0.5);  color: white;}
        
        .box5 { transition: 1s all ease;  transform: rotate(0deg); background-color: pink; }
        .box5:active {transform: rotate(90deg);}
        
        .box6 { transition: 1s all ease; transform: scale(1);  background-color: pink;}
        .box6:active {transform: scale(2);}
        
        .box7 { transition: 1s all ease; transform: skew(0, 0);  background-color: pink;}
        .box7:active {transform: skew(5deg, 45deg); }
        
        .box8 { transition: 1s all ease; transform: translate(0px, 0px); background-color: pink; }
        .box8:active {transform: translate(20px, 20px);}
        
        .box9 {transition: 1s all linear; background-color: pink;}
        .box9:hover { width: 200px; height: 200px;  background-color: red; }
        
        @keyframes aaa {
            0% {width: 100px; font-size: 14px;  background-color: pink; transform: rotate(0); }
            25% {width: 400px;  background-color: pink; font-size: 14px;/* 其他值必须要写全，不然宽还没变完，字体大小和背景就开始变化了 */  }
            50% {
                /* 需要把改完的宽加上，不然会变回去 */
                width: 400px;  font-size: 20px;  background-color: pink; transform: rotate(20deg);}
            100% {  width: 400px;  font-size: 20px;  background-color: red; }
        }
        
        .box10 {  animation-name: aaa; animation-duration: 10s;
                  animation-timing-function: ease;  animation-fill-mode: backwards;
                  animation-delay: 2s; animation-direction: alternate;  animation-iteration-count: 2; }
        .box10:active { animation-name: aaa;   animation-play-state: paused; }
        
        .box11:active {  background-color: red;  transform: scale(2, 1) rotate(45deg)/* 先scale再rotate */ }
        
        .box12 { background-color: red; transition: 1s all ease;  transform: perspective(200px) rotateY(0); }
        .box12:active { transform: perspective(200px) rotateY(60deg); /* perspective透视,值越小，3d感觉越明显 */ }
        
        .box13 {  background-color: pink; border: 1px solid black;
            transform: perspective(700px) rotateX(60deg) rotateZ(40deg);
            transform-style: preserve-3d; /* 默认值为flat--平面，会导致看不到rotateZ(40deg)的效果 */ }
        
        .box13 .child { width: 100%;  height: 100%; background-color: blue; transform: translateZ(0px);  }
        .box13 .child:active {  transform: translateZ(-100px);   }
        
        .box14 { width: 200px;  position: relative;  transition: 5s all ease;
            transform: perspective(700px) rotateX(0) rotateY(0) rotateZ(0);
            transform-style: preserve-3d;}
        
        .box14:active {  transform: perspective(700px) rotateX(360deg) rotateY(180deg) rotatey(270deg); }
        
        .box14 div,
        .box15 div {  width: 198px;  height: 198px;  /* background-color: pink; */
            border: 1px solid black; position: absolute;  left: 0;  top: 0; }
        
        .box14 .font {  transform: translateZ(100px);  }
        
        .box14 .back { transform: translateZ(-100px);  background-color: pink;  }
        
        .box14 .left { transform: rotateY(-90deg) translateZ(100px); background-color: orange;  }
        
        .box14 .right {  transform: rotateY(90deg) translateZ(100px); background-color: blueviolet;  }
        
        .box14 .top { transform: rotateX(90deg) translateZ(100px); background-color: gold;  }
        
        .box14 .down {  transform: rotateX(-90deg) translateZ(100px); background-color: gainsboro; }
        
        .box15 { position: relative; transform-style: preserve-3d;
            transition: 1s all ease;  transform: perspective(700px) rotateY(0); }
        
        .box15:active {  transform: perspective(700px) rotateY(180deg);}
        
        .box15 .font { transform: translateZ(10px);}
        
        .box15 .back {  transform: translateZ(-10px) scaleX(-1);  background-color: pink;}
    </style>
    <script>
        window.onload = function() {
            let box9 = document.getElementsByClassName("box9")[0];
            box9.onclick = function() {this.style.width = '300px';}
        }
    </script>
</head>

<body>
    <div class="box box1">fiwhwehiovhrohgrw</div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4">rgb使用</div>
    <div class="box box5">transform--rotate使用</div>
    <div class="box box6">transform--scale使用</div>
    <div class="box box7">transform--skew使用</div>
    <div class="box box8">transform--translate使用</div>
    <div class="box box9">transition使用</div>
    <div class="box box10">animation使用</div>
    <div class="box box11">transform--高级使用--多个变换一起用</div>
    <div class="box box12">transform--高级使用--3d-perspective使用</div>
    <div class="box box13">
        <div class="child">transform--高级使用--3d-transform-style使用</div>
    </div>
    <div class="box box14">
        <div class="front">前</div>
        <div class="back">后</div>
        <div class="top">上</div>
        <div class="down">下</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
    <div class="box box15">
        <div class="front">前</div>
        <div class="back">后</div>
    </div>

</body>

</html>

小幽艾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5+css3学习笔记

html5:1.geolocation---定位2.video,audio3.LocalStoragecookie: 小 4k 浏览器和服务器共享LocalStorage：大 5m 浏览器独享4.WebWorker 多进程5.WebSQL,IndexDB----存在安全隐患 W3C删除了6.文件操作和拖拽7.canvas---画...
复制链接

扫一扫