HTML学习笔记（4）

一、背景相关样式

css 复制代码

background-image: url(); // 背景图片
background-repeat: repeat; // 背景图片是否平铺 no-repeat
background-size: 200px;  // 背景图片尺寸 cover把所在容器铺满
background-position:50px 10px; // 背景图片位置 距离左50px 上10px 也可以是单词center
background-attachment:fixed; // 背景图片不随浏览器的滚动而滚动

二、定位position

static：静态模式|常态模式。
relative：代表相对模式，随着浏览器的滚动而滚动，参考物是自己原来的位置，保留自己原来的空间。
absolute：代表绝对模式，随着浏览器的滚动而滚动，参考物是浏览器，会释放掉自己原来的空间。
fixed：代表绝对模式，不随着浏览器的滚动而滚动，参考物是浏览器，会释放掉自己原来的空间。

vh视口高度 wh视口宽度

默认position为static不动,测试如下:

css 复制代码

/*
html结构如下
<div class="demo">
    <div class="t1">top</div>
    <div class="m1">middle</div>
    <div class="b1">bottom</div>
</div>
*/

.t1 {
    width: 200px;
    height: 100px;
    background: palegreen;
}

.m1 {
    width: 200px;
    height: 100px;
    background: plum;
    position: static;
}
.b1 {
    width: 200px;
    height: 100px;
    background: skyblue;
}

position为relative不动,测试如下:

css 复制代码

/*
html结构如下
<div class="demo">
    <div class="t1">top</div>
    <div class="m1">middle</div>
    <div class="b1">bottom</div>
</div>
*/

.t1 {
    width: 200px;
    height: 100px;
    background: palegreen;
}

.m1 {
    width: 200px;
    height: 100px;
    background: plum;
    position: relative;
    top: 20px;
    left: 50px;
}
.b1 {
    width: 200px;
    height: 100px;
    background: skyblue;
}

我们发现相对模式，是相对静态时候，通过left，top控制与静态的相对位置，并且可以随浏览器滚动而滚动。

position为absolute不动,测试如下:

css 复制代码

/*
html结构如下
<div class="demo">
    <div class="t1">top</div>
    <div class="m1">middle</div>
    <div class="b1">bottom</div>
</div>
*/
.demo{
    height: 1100px;
}
.t1 {
    width: 200px;
    height: 100px;
    background: palegreen;
}

.m1 {
    width: 200px;
    height: 100px;
    background: plum;
    position: absolute;
    top: 20px;
    left: 50px;
}
.b1 {
    width: 200px;
    height: 100px;
    background: skyblue;
}

我们发现绝对模式，是相对浏览器，与原来静态位置无关，通过top,left调整在浏览器的位置，并且可以随浏览器滚动而滚动。

position为fixed不动,测试如下:

css 复制代码

/*
html结构如下
<div class="demo">
    <div class="t1">top</div>
    <div class="m1">middle</div>
    <div class="b1">bottom</div>
</div>
*/
.demo{
    height: 1100px;
}
.t1 {
    width: 200px;
    height: 100px;
    background: palegreen;
}

.m1 {
    width: 200px;
    height: 100px;
    background: plum;
    position: fixed;
    top: 20px;
    left: 50px;
}
.b1 {
    width: 200px;
    height: 100px;
    background: skyblue;
}

与absolute大致相同都是以浏览器为基础，但是不随浏览器的滚动而滚动，同样通过top等方位词控制位置。

三、javascript

两种使用方式

1、内嵌

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 内嵌 -->
     <script>
        alert(1);
     </script>
</head>
<body>
    
</body>
</html>

2、外引

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="js/javascript基础语法.js"></script>
</head>
<body>
    
</body>
</html>

js文件内容如下：

javascript 复制代码

alert("hello")

1、变量的定义

javascript 复制代码

// var 声明变量的关键字
var a = 3;
var b = "hello";
var c = 3.1415926;

2、数据类型

基本类型可以分为如下几类：

数字（小数、整数）
字符串（单引号，双引号索引的内容)
布尔类型（true,false)
undefined（声明变量但没赋值）
null 涉及一个量、但是这个量本身不存在

复合类型可以分为如下几类

1、数组

javascript 复制代码

var arr = [10, 5.3, true, undefined, null, "hhh", [10, 2]];

下标从0开始访问

2、对象

javascript 复制代码

var obj = {name:"张三", age:50, marry:true, play:['足球','篮球']};

类似于python的字典，C++的map容器，访问方式---------对象.属性

3、函数

javascript 复制代码

// 定义函数
function f(a, b) {
    console.log("函数已执行");
}

// 调用函数
f(a, b);

//匿名函数
var ff = function(a,b){
    console.log("函数已执行");
}

// 调用匿名函数
ff(a, b);

注：

javascript 复制代码

var f = function ff(a, b){}
// 调用方法
f(a, b);
// 不能用ff(a, b);

var a = {name:function(){}};
//调用方法
a.name();

var b = [function(){}] 
//调用方法
b[0]();

// 如果不传参，不耽误函数运行
// 如果不传参，就相当于函数内的变量为undefined

3、绑定事件

onclick点击
ondblclick双击
onmouseenter鼠标放上去
onmouseleave鼠标离开

javascript 复制代码

// 鼠标点击页面，出现弹窗1
document.onclick = function(){
    alert(1);
}

// 鼠标双击页面，出现弹窗2
document.ondblclick = function(){
    alert(2);
}

// 鼠标放页面上，出现弹窗3
document.onmouseenter = function(){
    alert(3);
}

// 鼠标离开页面上，出现弹窗4
document.onmouseleave = function(){
    alert(4);
}

小总结，如何利用js实现点击一次屏幕，背景换个随机颜色，代码如下：

javascript 复制代码

document.onclick = function(){
    var color = "";
    for(var i = 0; i < 6; i ++ )
    {
        var num = Math.round(Math.random() * 15);
        if(num == 10){
            num = 'a';
        } else if(num == 11) {
            num = 'b';
        } else if(num == 12) {
            num = 'c';
        } else if(num == 13) {
            num = 'd';
        } else if(num == 14) {
            num = 'e';
        } else if(num == 15) {
            num = 'f';
        }
        color = color + num;
    }
    document.body.style.background = "#" + color;
}

简单介绍这节用到的常用的测试函数

javascript 复制代码

console.log(x);  // 控制台打印x
console.dir(x);  //打印对象x的基本属性
alert(x); // 网页弹窗