web

Posted 2020-10-31

1、浮动
1、清除浮动
元素一旦浮动起来之后，其后面的元素要上前占位，有可能被浮动元素压在底下。如果后面元素不想上前占位的话，则可以通过清除浮动影响的方式来解决问题

    1、语法
        属性：clear
        取值：
            1、none
                默认值，不做任何清除浮动操作的
            2、left
                清除当前元素前面元素左浮动带来的影响，即不会被前面元素左浮动压在底下
            3、right
                清除当前元素前面元素右浮动带来的影响，即不会被前面元素右浮动压在底下
            4、both
                清除情面元素任何一种浮动方式所带来的影响
2、浮动元素对父元素高度的影响
    由于浮动元素会脱离文档流，所以不占据页面空间的，那么也就不占父元素的空间。所以父元素的高度是以未浮动的子元素为准的。
    解决方案：
        1、为父元素设置高度
            弊端：不一定每次都清楚高度是多少
        2、让父元素也浮动
            弊端：会对父元素后面的元素产生位置影响
        3、设置父元素的overflow为hidden或auto
            弊端：有溢出要显示的元素也一同隐藏了
        4、在父元素中追加空块级子元素，并设置其clear属性为both

2、其他定位
1、相关属性
1、定位方式
属性：position
作用：改变元素的定位方式
取值：
1、static - 静态的，默认值
2、relative - 相对定位
3、absolute - 绝对定位
4、fixed - 固定定位
注意：将元素的position设置为 relative/absolute/fixed任意一种的话，那么该元素就称为 “已定位元素”
2、偏移属性(共4个)
作用：配合着已定位元素实现位置的移动
属性：top / right / bottom / left
取值：以 px 为单位的数字
top:以元素的上边为基准边移动元素
right:以元素的右边为基准边移动元素
bottom: ...
left: ...
2、定位方式 - 相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
2、语法
属性：position
取值：relative
配合着 偏移属性 实现元素位置的移动
练习：
创建一个 ul ，四个 li
每个li 左浮动 ，设置尺寸为 100*30，10px右外边距
1、使用相对定位的方式完成
鼠标悬停在li上时，li向左上角偏移10px
2、使用margin的方式完成上述操作
3、定位方式 - 绝对定位(难点)
1、什么是绝对定位 & 特点
1、绝对定位的元素会脱离文档流-不占据页面空间
2、绝对定位的元素会相对于离它最近的，已定位的，祖先元素去实现位置的初始化
3、如果元素没有最近的，已定位的祖先元素的话，那么则相对于body去实现位置的初始化
2、语法
属性：position
取值：absolute
配合着 偏移属性 实现位置的定位
3、注意
绝对定位的元素会变成块级元素
(一个行内元素做成绝对定位的话，可以直接修改尺寸)
4、堆叠顺序
1、什么是堆叠顺序
指定堆叠在一起的元素们的排列顺序
2、语法
属性：z-index
取值：无单位的数字，数字越大越靠前，默认值0
3、注意
1、如果堆叠顺序相同的话，则后来者居上
2、只有已定位元素才能使用z-index
relative/absolute/fixed
3、父子元素间，永远都是子压在父上，不受堆叠顺序影响的
5、定位方式 - 固定定位
1、语法
属性：position
取值：fixed
配合着 偏移属性 实现元素位置的固定
2、注意
1、固定定位的元素会变成块级
2、固定定位的元素永远都是相对于body去实现位置的初始化的

<div>
<p>
<span>
<b></b>
</span>
</p>
</div>

显示
1、显示方式
1、什么是显示方式
绝对了元素是以什么样的方式显示在页面中(块级/行内/行内块)
2、语法
属性：display
取值：
1、none
让元素不显示 - 隐藏
脱离文档流 - 不占据页面空间
2、block
让元素变为块级元素
3、inline
让元素变为行内元素
4、inline-block
让元素变为行内块元素
特点：
1、多个行内块元素与行内元素和文本能够在一行内显示的
2、行内块元素允许修改尺寸
2、显示效果
1、可见性属性
作用：控制元素的可见性
属性：visibility
取值：
1、visible
默认值，可见的
2、hidden
隐藏的，未脱离文档流，所以还占据页面空间
2、透明度属性
作用：改变元素的透明效果
属性：opacity
取值：0(完全透明) ~ 1(完全不透明)
3、垂直方向对齐属性
属性：vertical-align

        放在td中：相当于是 valign的效果
            取值为 top / middle / bottom , 其中middle是默认值
        放在图片和行内块元素中：
            设置元素两端的文本相对于元素的垂直对齐方式取值：
                top : 顶部对齐
                middle : 居中对齐
                bottom : 底部对齐
                baseline : 基线对齐(默认值)
        注意：
            有图片的时候，尽量将图片的vertical-align更改为baseline以外的其他值
3、光标
    作用：改变鼠标悬停在元素上时鼠标的样子
    属性：cursor
    取值：
        1、default
        2、pointer ：小手
        3、text ：I
        4、crosshair ：+
        5、wait ：等待
        6、help ：帮助
    练习：
        创建网页04-cursor.html
        创建一个div，内容随意
        鼠标悬停在元素上的时候，尝试上述的值

2、列表
1、list-style-type
取值：
1、none(不显示任何标识)
2、disc
3、circle
4、square
... ...

2、list-style
    属性：list-style
    取值：none

3、转换属性 - transform
1、什么是转换
改变元素在页面中的位置，尺寸，角度的一种方式
2、属性
1、转换属性
属性：transform
取值：
1、none
默认值，无任何转换效果
2、转换函数
如果有多个转换函数的话，中间用空格隔开
2、转换原点
1、什么是转换原点
转换操作所围绕着的一个点就是转换原点
2、语法
属性：transform-origin
取值：两个值，中间用空格隔开
1、以 px为单位的数字
2、以 % 为单位的数字
3、关键字
top / bottom / center / left / right
注意：默认的转换原点是在元素的中心位置处
3、转换效果
1、位移
1、作用
改变元素在页面上的位置
2、语法
属性：transform
取值(函数)：
1、translateX(x)
x表示元素在x轴上的位移距离(横向)
取值为正，元素右移
取值为负，元素左移
2、translateY(y)
y表示元素在y轴上的位移距离(纵向)
取值为正，元素下移
取值为负，元素上移
3、translate(x)
等同于 translateX(x)
4、translate(x,y)
同时在 x轴 和 y轴上做位移操作
2、缩放
1、作用
改变元素在页面上的尺寸
2、语法
属性：transform
取值(函数)：
1、scaleX(x)
x表示横向缩放比例
x默认值为1，即原始比例大小
大于1的数字 ：放大的比例
大于0小于1的数字 ：缩小的比例
小于0 ：物极必反
2、scaleY(y)
y表示纵向缩放比例
y默认值为1，原始比例大小
效果同 x
3、scale(value)
value表示水平和垂直方向的缩放比例是相同的
3、旋转
1、作用
改变元素在网页中的角度
2、语法
属性：transform
取值(函数)：
1、rotate(ndeg)
n取值为正，顺时针旋转
n取值为负，逆时针旋转
3、注意
1、转换原点会影响转换效果
2、旋转操作时，会连同坐标轴也一同跟着旋转。会影响旋转之后的位移

        练习：
            1、创建网页，创建一个圆形元素 200*200
            2、鼠标悬停在元素上的时候
                1、元素向右位移500px 并且 同时旋转3圈
                2、使用过渡效果体现上上述功能

==================================================
1、javascript 概述
1、什么是Javascript
JavaScript 简称为 JS，是一种专门运行于JS解释器 / 引擎中的解释型脚本语言
2、JS发展史
1、1992年Nombas开发了一款脚本语言，能够运行在网页中，名称为 CMM(c--),更名为 ScriptEase
2、1995年Netscape(网景)为自己的浏览器Navigtor2.0开发了另一款脚本语言 - LiveScript,后来更名为 JavaScript
3、1996年Microsoft，为自己的IE3.0开了一款JavaScript的克隆版本 JScript
4、1997年Netscape找到了ECMA(欧洲计算机制造商联合会)。Netscape将JavaScript的核心模块交给了ECMA，从此，JS的核心更名为 ECMA Script ，简称为 ES

    JS的组成：
        1、核心 - ECMAScript
            包含了JS中最基本的语法规范
        2、浏览器对象模型 - BOM
            Browser Object Model
            允许JS操作浏览器
        3、文档对象模型 - DOM
            Document Object Model
            允许JS操作HTML里的内容

JS的使用方式
1、在元素事件中编写JS代码
事件：用户在元素上所激发的一些行为操作
onclick:当用户点击元素时要做的操作
语法：
<ANY onclick="JS执行代码">
JS执行代码：
console.log("向控制台中输出一句话");
console.log(‘向控制台中输出一句话‘);
2、将代码嵌入在网页中的<script></script>里
语法：
在网页的任意位置处，均可嵌入<script></script>
<script>
JS可执行代码
</script>
特点：
网页加载时即执行

        document.write("向网页中输出的一句话");
        注意：如果将document.write()放在按钮中的话，在执行时，则会刷新网页中的内容

    练习：
        在一个按钮中，单击时，执行 document.write()
3、将JS执行代码编写在JS文件中
    1、创建一个js文件(xxx.js)，并编写JS代码
    2、在使用的网页上，对js文件进行引入
        <script src="JS文件路径"></script>
        注意：
            在引入的JS的标记中，不能编写js代码
            <script src="xxx.js">
                console.log();
            </script>
            以上写法是错误的!
    练习：
        1、使用元素事件方式，向控制台中输出一句话"我的第一个JS练习"
        2、使用<script></script>，向网页中输出一句话"我的第一个JS练习"
        3、使用外部JS文件的方式，在网页中弹出一句话 "我的第一个JS练习"

2、JS的基础语法
1、JS都是由语句来组成的
1、由运算符，关键字 或 表达式组成
2、JS中严格区分大小写
console.log(‘‘);
Console.log(""); //错误,C不能大写
3、每条语句必须以 ; 表示结束
2、注释
单行：//
多行：/ /
3、JS中的变量 和 常量
1、变量
1、声明变量
声明：var 变量名;
赋值：变量名 = 值;
声明并赋值：var 变量名=值;
var uname = "王小明";
console.log(uname);
2、注意
1、在声明变量时，尽量使用 var 关键字，如果省略，也可以，但容易出问题
2、声明变量如果未赋值的话，默认值为 undefined
3、变量名的命名规范
1、不能是JS中的关键字或保留关键字
2、由字母，数字，下划线()和$组成
var $ = 35;
var =46;
3、不能以数字开头
var 1=1; //错误
4、尽量不要重复
5、尽量要见名知意
var a;
var b;
var c;

            var age;
            var uname;
            var gender;
        6、如无特殊需求的话，尽量使用小驼峰命名法
            var age;
            var userName;

            var name = ""; //不能用
    4、变量的使用
        1、为变量赋值
            只要变量出现在赋值符号(=)的左边，一律是赋值操作
            var age = 35;
            var newAge = age;

        2、获取变量的值
            只要变量没出现在赋值符号的左边，一律都是取值
            var age = 35; //赋值
            console.log(age);//取值
            var newAge = age;//newAge：赋值，age：取值
            age = age + 35;
2、常量
    1、什么是常量
        一经声明就不允许被修改的数据就是常量
    2、语法
        const 常量名=值;
        注意：
            1、常量声明好之后是不允许修改的，所以一定要赋初始值
            2、常量名一般采用全大写形式
    练习：
        1、创建一个网页 04-const-exer.html
        2、声明一个常量PI，赋值为3.14
        3、声明一个变量r,表示一个圆的半径,随意赋值
        4、通过PI和r计算该圆的周长，并将结果保存在变量l中，并打印输出
        5、通过PI和r计算该圆的面积，并将结果保存在变量s中，并打印输出
        输出格式（控制台）
            半径为...的圆的周长是...
            半径为...的圆的面积是...
        保留到n位小数：
            var l = 3.1415926;
            l = l.toFixed(n);

4、数据类型
JS中的数据类型分为以下两大类：
1、基本数据类型
1、number类型
数字类型，可以表示32位(4字节)的整数以及64位(8字节)的浮点数
整数：
表示十进制，八进制，十六进制
十进制：var num = 10;
八进制：var num = 010;
十六进制：var num = 0x10;
小数：
小数点计数法：var num = 123.456;
指数计数法：var num = 1.8e2;
2、string类型
字符串类型
由Unicode字符，数字，标点组成
注意：字符串在使用时必须用""或‘‘引起来
1、查看字符的Unicode码
var str = "张";
var uCode=str.charCodeAt().toString(16);
2、如何将Unicode码转换成对应的字符？？
已知Unicode码：5f20
var str = "\u5f20";
console.log(str);
3、中文范围
"\u4e00" ~ "\u9fa5"
4、转义字符
\n : 换行
\t : 一个制表符
\" : "
\‘ : ‘
\ : \
3、boolean类型
布尔类型，只用于表示真(true)或假(false)
通常会表示条件的结果
注意：
boolean类型可以参与到数字运算的，true当成1去运算，false当成0去运算
var r = 1 + true; //结果为 2
var r = 3784 * false; // 结果为 0
var r = true + false; // 结果为 1
4、查看数据类型
使用 typeof() 或 typeof 查看变量的数据类型
2、引用数据类型
5、数据类型转换
1、隐式转换
大部分加法运算时，如果数据类型不一致的话可以进行隐式转换
1、数字 + 字符串 ：将数字转换为字符串
var num = 15; //number
var str = "18"; //string
var r = num + str; // 1518

        var r = "15"+18+15;//151815
        var r = "15"+(18+15);// 1533
        var r = 15+18+"15";//3315
    2、数字 + 布尔 ：将布尔类型转换为number
        var r = 35 + true ;  //36
    3、字符串 + 布尔 ：将布尔转换为字符串
        var result = "你好" + true;
        结果为：你好true
    4、布尔 + 布尔 ：将布尔转换成数字
        var r = true + true;
        结果：2
    注意：
        任何数据类型与字符串做"+"运算时，都是先转换成字符串再做拼接
2、强制转换(显示转换/转换函数)
    1、toString()
        将任意类型的数据转换成字符串，并返回转换后的结果
        var num = 15;
        var r = num.toString();

        var num = 15;
        var r = num + "";
    2、parseInt()
        作用：将任意类型的数据尽量转换成整数，如果实在无法转换的话，则返回 NaN(Not a Number)
        ex:
            1、
                var r = parseInt("13");
                r : 13
            2、
                var r = parseInt("13.5");
                r : 13
            3、
                var r = parseInt("13你好");
                r : 13
            4、
                var r = parseInt("你好13");
                r : NaN
    3、parseFloat()
        作用：尽量将任意类型的数据转换为小数
        1、
            var num = parseFloat("35.07");
            num : 35.07
        2、
            var num = parseFloat("35.7你好");
            num : 35.7
        3、
            var num = parseFloat("你好35.7");
            num : NaN
    4、Number()
        作用：将指定的数据转换成数字，只要包含非法字符的话，结果就为NaN
        1、
            var r = Number("35.5");
            r : 35.5
        2、
            var r = Number("35你好");
            r : NaN
        3、
            var r = Number("你好35);
            r : NaN

    练习：
        1、创建网页08-dataType-exer.html
        2、弹出一个输入提示框
            var input = window.prompt("提示文字：");
            input变量中，保存的就是用户输入的数据
        3、要求从输入提示框中输入一个数字
        4、将输入的数据 + 10，打印计算后的结果
        5、使用typeof函数查看输入数据的数据类型
        6、将输入的数据转换为数字，再 + 10查看结果

        注意：
            只要从网页中获取到的数据，永远都是string类型的