HTML+CSS+JS学习笔记

彭于晏689

已于 2023-06-02 14:27:18 修改

阅读量204

点赞数

分类专栏： HTML+CSS 文章标签： css html javascript

于 2023-06-02 11:23:48 首次发布

本文链接：https://blog.csdn.net/qq_63140630/article/details/131003316

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1.HTML
2.CSS
3.CSS高级
4.HTML5新特性
5.CSS3新特性
6.JavaScript
7.JS进阶

1.HTML

1.语法规范

1.HTML注释

    <!-- 这是注释 -->
    <!-- 这是注释，对代码的 -->

2.HTML标签

开始标签+包裹内容+结束标签

结构说明：

标签由<、>、/、英文单词或字母组成，并且把标签中<>包括起来的英文单词或字母称为标签名
常见的标签由两部分组成，我们称之为：双标签
少数的标签由一部分组成，我们称之为：单标签

标签与标签之间的关系：

父子关系
```
<head>
    <title></title>
</head>
```
兄弟关系
```
<head></head>
<body></body>
```

3.标题与段落

h系列标签，从1-6级标题，重要程度依次递减

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

<p>我是一段文字</p>

特点：

段落之间存在间隙
独占一行

4.换行标签

场景：让文字强制换行显示

<body>
    IT之家了解到<br>，电影《流浪地球 2》的故事围绕《流浪地球》前作展开，讲述了危机刚刚降临，地球开始“流浪”之前，世界陷入一片恐慌之中，万座行星发动机正在建造，人类面临末日灾难的严峻挑战。影片由郭帆导演，刘慈欣监制，吴京、李雪健、沙溢、宁理、王智、朱颜曼滋领衔主演，刘德华先生特别演出，即将于 2023 年大年初一全国上映。
</body>

5.水平分割线

<body>
    <h1>这是文章标题</h1><hr>
    IT之家了解到<br>，电影《流浪地球 2》的故事围绕《流浪地球》前作展开，讲述了危机刚刚降临，地球开始“流浪”之前，世界陷入一片恐慌之中，万座行星发动机正在建造，人类面临末日灾难的严峻挑战。影片由郭帆导演，刘慈欣监制，吴京、李雪健、沙溢、宁理、王智、朱颜曼滋领衔主演，刘德华先生特别演出，即将于 2023 年大年初一全国上映。
</body>

6.文本格式化标签

场景：需要让文字加粗、下划线、倾斜、删除线效果等

代码：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线
strong	加粗
ins	下划线
em	倾斜
del	删除线

<body>
    
    <b>加粗</b>
    <strong>加粗</strong>

    <u>下划线</u>
    <ins>下划线</ins>

    <i>倾斜</i>
    <em>倾斜</em>

    <s>删除线</s>
    <del>删除线</del>
</body>

7.图片标签

场景：在网页中显示图片

代码：

特点：

单标签
img标签需要展示对应的效果，需要借助标签属性进行设置

图片标签的alt属性

属性值：替换文本

当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本

<body>
    <img src="img.jpg" alt="我是替换文本">
</body>

图片标签的width和height属性

属性值：宽度与高度

注意点：

如果只设置width和height中的一个，另一个没设置的会自动等比例缩放
如果同时设置了width和height两个，若设置不当此时图片可能会变形

<body>
    <img src="img.jpg" alt="我是替换文本" width="200" height="200">
</body>

图片的相对路径

相对路径：从当前路径出发找目标文件的过程

相对路径分类：

同级目录：当前文件和目标文件在同一目录中
- 代码步骤：
  - 方法一：
  - 方法二：
下级目录：目标文件在下级目录中
- 代码步骤：
  - 文件夹名字/目标文件名字
上级目录：目标文件在上级目录中
- 代码步骤：
  - 先出当前文件夹，到上一级目录…/
  - 看到目标文件

8.音频标签

场景：在页面中插入音频

代码：

<audio src="./music.mp3" controls></audio>

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

9.视频标签

场景：在页面中插入视频

代码：

<video src="./video.mp4" controls></video>

常见属性：

属性名	功能
src	视频路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器需要配合muted实现静音播放）
loop	循环播放

10.链接标签

场景：点击之后，从一个页面跳转到另一个页面

代码：

  <a href="./目标网页.html">超链接</a>

2.基础

1.列表标签

1.无序列表

标签组成：

标签名
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

显示特点：

列表的每一项前默认显示圆点标识
li标签可以包含任意内容

    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
    </ul>

2.有序列表

标签组成：

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

显示特点：

列表的每一项前默认显示序号标识

注意点：

ol标签中只允许包含li标签
li标签可以包含任意标签

    <ol>
        <li>张三：100</li>
        <li>李四：99</li>
        <li>王五：80</li>
    </ol>

3.自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现。

标签组成：

标签名	说明
dl	表示自定义列表的整体，用于包裹dt、dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

显示特点：

dd前会默认是缩进效果

注意点：

dl标签中只允许包含dt、dd标签
dt、dd标签可以包含任意内容

    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>     
    </dl>

2.表格标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

基本标签：

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

注意点：

标签的嵌套关系：table>tr>td

表格相关属性：

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

实际开发时推荐用CSS设置

表格标题和表头单元格：

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部剧中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：

caption：标签书写在table标签内部
th标签书写在tr标签内部

<body>
    <table border="1">
        <caption>学生成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>

        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅</td>
        </tr>

        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真漂亮</td>
        </tr>
    </table>
</body>

表格的结构标签：

场景：让表格的内容结构分组，突出表格的不同部分（头部，主题，底部），使语义更加清晰

结构标签：

标签名	名称
thead	表格头部
tbody	表格主题
tfoot	表格底部

注意点：

表格结构标签内部用于包裹tr标签
表格结构标签可以省略

<body>
    <table border="1">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
       
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td>100分</td>
                <td>小哥哥真帅</td>
            </tr>     
            <tr>
                <td>小姐姐</td>
                <td>100分</td>
                <td>小姐姐真漂亮</td>
            </tr>
        </tbody>
      

        <tfoot>
            <tr>
                <td>总结</td>
                <td>郎才女貌</td>
                <td>郎才女貌</td>
            </tr>
        </tfoot>
    </table>
</body>

合并单元格：

场景：将水平或者垂直多个单元格合并成一个单元格

合并单元格步骤：

明确合并哪几个单元格
通过左上原则，确定保留谁删除谁
- 上下合并，只保留最上的，删除其他
- 左右合并，只保留最左的，删除其他
给保留的单元格设置：跨行合并或者跨列合并

属性名	属性值	说明
rowspan	合并单元格个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格个数	跨列合并，将多列的单元格水平合并

注意点：只有同一结构标签中的单元格才能合并，不能跨结构标签合并

<body>
    <table border="1">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
       
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td rowspan="2">100分</td>
                <td>小哥哥真帅</td>
            </tr>     
   
            <tr>
                <td>小姐姐</td>
                <td>小姐姐真漂亮</td>
            </tr>
        </tbody>
      

        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
       
            </tr>
        </tfoot>
    </table>
</body>

3.表单标签

1.input标签

场景：在网页显示收集用户信息的表单效果

标签名：

input标签可以通过type属性值的不同，展示不同的效果

type属性值：

type属性值	说明
text	文本框，用于输入单行文本
password	密码框，用于输入密码
radio	单选框，用于多选一
checkbox	多选框，用于多选多
file	文件选择，用于之后上传文件
submit	提交按钮，用于提交
reset	重置按钮，用于重置
button	普通按钮，默认无功能，之后配合js添加功能

文本框

场景：在网页中显示输入单行文本的表单控件

type属性值：text

常用属性：

属性名	说明
placeholder	占位符，提示用户输入内容的文本

单选框

场景：在网页中显示多选一的单选表单控件

常用属性：

属性名	说明
name	分组，有相同name属性的单选框为一组，一组中同时只能有一个被选中
checked	默认选中

注意点：

name属性对于单选框有分组功能
由i相同name属性值的单选框为一组，一组中只能同时有一个被选中

 单选框：<input type="radio" name="hobby" checked>敲代码  
 	    <input type="radio" name="hobby">打球  
	    <input type="radio" name="hobby">追剧

文件选择

场景：在网页显示文件选择的表单控件

type属性值：file

常用属性：

属性名	说明
multiple	多文件选择

按钮

场景：在网页中显示不同功能的按钮的表单控件

type属性值：

标签名	type属性值	说明
input	submit	提交按钮，点击之后提交数据给后端服务器
input	reset	重置按钮，点击之后恢复表单默认值
input	button	普通按钮。默认武功呢，之后配合js添加功能

注意点：

如果需要实现以上按钮功能，需要配合form标签使用
form使用方法，用form标签把表单标签一起包裹起来即可

2.button标签

场景：在网页中显示用户点击的按钮

标签名：button

type属性值：同input的按钮系列

注意点：

谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等

    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>

3.select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

常用属性：

selected：下拉菜单的默认选中

<form>
        <select>
            <option selected>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深证</option>
        </select>
    </form>

4.textarea文本域标签

场景：在网页中提供可以输入多行文本的表单控件

标签名：textarea

常见属性：

cols：规定了文本域可见宽度
rows：规定了文本域可见行数

注意点：

右下角拖拽改变大小
实际开发针对样式效果推荐使用CSS设置

    <textarea cols="60" rows="30"></textarea>

5.label标签

场景：常用于绑定内容与表单标签的关系

标签名：label

使用方法一：

使用label标签把内容包裹起来
在表单上添加id属性
在label标签的for属性中设置对应的id属性

使用方法二：

直接使用label标签把内容和表单标签一起包裹起来
需要把label标签for属性删除即可

  性别：
    <input type="radio" name="sex" id="man"><label for="man">男</label>
    <input type="radio" name="sex" id="woman"><label for="woman">女</label> 

    性别：
    <label><input type="radio" name="sex">男</label>
    <label><input type="radio" name="sex">女</label>

4.语义化标签

1.没有语义的标签

场景：实际开发网页时会大量频繁的使用div和span这两个没有语义的布局标签、

div标签：一行只显示一个
span标签：一行可以显示多个

<body>
    普通文字
    <div>这是div标签</div>
    <div>这是div标签</div>

    <span>这是span标签</span>
    <span>这是span标签</span>
</body>

2.有语义的标签

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

标签：

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

5.字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文

常见字符实体：…

3.综合案例

1.学生信息表

<body>
    <table border="1">
        <caption>优秀学生信息表格</caption>
        <thead>
            <tr>
                <th>年级</th>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th rowspan="2">高三</th>
                <th>张三</th>
                <th>110</th>
                <th>三年三班</th>
            </tr>
            
            <tr>
                <th>赵四</th>
                <th>120</th>
                <th>三年二班</th>
            </tr>
        </tbody>


        <tfoot>
            <tr>
                <th>评语</th>
                <th colspan="3">你们都很优秀</th>
            </tr>
        </tfoot>
    </table>
</body>

2.表单综合案例

<body>
    <h1>青春不常在，抓紧谈恋爱</h1><hr>
    
    <form>
        昵称：<input type="text" placeholder="请输入昵称"><br>
        性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
        所在城市：
        <select>
            <option selected>上海</option>
            <option>北京</option>
        </select>
        <br>

        婚姻状况：<input type="radio" name="marry">未婚 <input type="radio" name="marry">已婚 <input type="radio" name="marry">保密
        <br>

        喜欢类型:<input type="checkbox" name="hobby">可爱
        <input type="checkbox" name="hobby">性感
        <input type="checkbox" name="hobby">御姐
        <input type="checkbox" name="hobby">萝莉
        <input type="checkbox" name="hobby">小鲜肉
        <input type="checkbox" name="hobby">大叔

        <br>

        个人介绍：<br>
        <textarea cols="30" rows="10"></textarea>

        <br>
        <h3>我承诺</h3>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚修女找另一半</li>
        </ul>

        <input type="checkbox">我同意所有条款<br>

        <button type="submit">免费注册</button>
        <button type="reset">重置</button>
    </form>
</body>

2.CSS

1.CSS基础

1.CSS引入方式

内嵌式：CSS写在style标签中

提示：style标签虽然写在页面任意位置，但是通常约定写在head标签中

外联式：CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

行内式：CSS写在标签的style属性中

提示：不推荐使用

2.基础选择器

1.标签选择器

结构：标签名{ css属性名：属性值；}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

标签选择器选择的是这一类标签，而不是单独一个
标签选择器无论嵌套关系多深，都能找到对应的标签

2.类选择器

结构：.类名{css属性：属性值；}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

所有标签上都有class属性，class属性的属性值称为类名
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以选中多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        .hhh {
            color: red;
            font-size: larger;
        }
    </style>
</head>
<body>
    <p class="hhh">红红火火恍恍惚惚</p>
</body>
</html>

3.id选择器

结构：#id{css属性名：属性值；}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选择一个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #blue {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="blue">这个div文字是蓝色的</div>
</body>
</html>

4.通配符选择器

结构：*{css属性名：属性值；}

作用：找到页面中所有的标签，设置样式

注意点：

开发中使用极少，只会在极特殊的情况下才会用到

3.字体

1.字体大小

属性名：font-size

取值：数字+px

注意点：

谷歌默认16px
需要设置单位

2.字体粗细

属性名：font-weight

取值：

关键字

正常 normal
加粗 bold
纯数字

正常 400
加粗 700

正常	normal
加粗	bold

正常	400
加粗	700

3.字体样式

属性名：font-style

取值：

正常（默认值）：normal
倾斜：italic

4.字体相关属性连写

属性名：font（符合属性）

取值：

font：style weight size family

省略要求：

只能省略前两个，如果省略了相当于设置了默认值

4.文本样式

1.文本缩进

属性名：text-indent

取值：

数字+px
数字+em

    <style>
        P {
            /* 首行缩进两个*/
            text-indent: 2em;
        }
    </style>

2.文本水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意：

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

   <style>
      h1 {
        text-align: center;
      }
    </style>

text-align：center可以让哪些元素居中？

文本
span标签、a标签
input标签、img标签

注意：

如果需要让以上元素水平居中，text-align：center需要给以上元素父元素设置

3.文本修饰

属性名：text-decoration

取值：

属性值	效果
underline	下划线（常用）
line-through	删除线
overline	上划线
none	无装饰线（常用）

注意点：

开发中会使用text-decoration:none；清楚a标签默认的下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-decoration: underline;
        }

        p {
            text-decoration: line-through;
        }

        h2 {
            text-decoration: overline;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>ppppp</p>
    <h2>h2</h2>
    <a href="#">超链接</a>
</body>
</html>

4.行高

作用：控制一行的上下行间距

属性名：line-height

取值：

数字+px
倍数（当前标签font-size的倍数）

行高与font连写注意点：

如果同时设置了行高和font连写，注意覆盖问题

5.标签水平居中方法

如果需要让div、p、h水平居中？

可以通过margin:0 auto;

注意点：

如果需要让div、p、h水平居中，直接给当前元素本身设置即可
margin：0 auto;一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素宽度

5.综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }

    
        h1 {
            text-align: center;
        }

        #p1 {
            text-align: center;
        }
        #span1 {
            color: #808080;
        }

        #span2 {
            color: #87ceeb;
        }

        #a1 {
            text-decoration: none;
        }

        .pp1 {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1>刘慈欣科幻小说《三体》搬上荧屏</h1>

        <p id="p1"> <span id="span1">2021年1月1日</span>
        <span id="span2">新浪微博</span>
        <a href="#" id="a1">收藏本文</a></p>
       
        <hr>

        <p class="pp1">该剧由张鲁一、于和伟、陈瑾、王子文、林永健、李小冉领衔主演，讲述了纳米科学家汪淼被警官史强带到联合作战中心，并潜入“科学边界”组织协助调查。众人齐心协力、坚定信念，一起面对即将来临的人类危机。</p>
    
        <p class="pp1">作为世界科幻大奖“雨果奖”获奖作品，《三体》以恢弘的笔触描绘了地球人类文明和三体文明在宇宙中的兴衰历程，被誉为中国科幻文学的里程碑。近年来，《三体》系列小说已被译成多种语言文字版本，在全球出版发行，其影视化进程备受各方关注。</p>

        <p class="pp1">“希望最大限度保持原著味道，尊重科学，用影视化语言讲述《三体》，展现人类文明与外星文明首次正面交锋，即使力量悬殊人类也从未放弃。”该剧总导演杨磊表示，拍摄期间，制作团队与相关领域科学专家进行了密切交流，并在相关科研单位的支持下，前往多个科学场景实景拍摄，以期能为大众奉上一部国产科幻诚意之作。</p>


    </div>
</body>
</html>

2.CSS进阶

1.选择器进阶

1.后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法：选择器1 选择器2 {css}

结果：

在选择器1所找到标签的后代中，找到满足选择器2的标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>

    <div>
        <p>这是div的儿子<p></p>
    </div>
</body>
</html>

2.子代选择器：>

作用：根据HTML标签的嵌套关系，选择父关系子代中满足条件的元素

选择器语法：选择器1>选择器2{css}

结果：

在选择器1所找到的标签的子代中，找到满足选择器2的标签，设置样式

注意点：

子代只包括儿子
子代选择器中，选择器与选择器之间通过>隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div > a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>

3.并集选择器：，

作用：同时选择多组标签，设置相同的样式

选择器语法：选择器1，选择器2{css}

结果：

找到选择器1和选择器2选中的标签，设置样式

注意点：

并集选择器中的每组选择器之间通过，分隔
并集选择其中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,div,span,h1 {
            color: red;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
</body>
</html>

4.交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p.box {
            color: red;
        }
    </style>
</head>
<body>
    <p class="box">这是p标签：box</p>
    <p>ppppppppp</p>
    <div class="box">这是div标签：box</div>
</body>
</html>

5.hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器：hover{css}

注意点：

伪类选择器选中的元素的某种状态

 <style>
        a:hover {

            color: red;
            background-color: green;
        }
    </style>

2.背景相关属性

1.背景颜色

属性名：background-color(bgc)

属性值：

颜色取值：关键字、rgb表示法、rgba表示法、十六进制

注意点：

背景颜色默认是透明：rgba(0,0,0,0)、transparent
背景颜色不会影响盒子的大小，还能看清盒子的大小和位置

2.背景图片

属性名：background-image（bgi）

属性值：background-image:url(‘图片路径’)

注意点：

背景图片中的url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3.背景平铺

属性名：background-repeat

属性值：

取值	效果
repeat	（默认）水平和垂直都平铺
no-repeat	不平铺
repeat-x	沿着水平方向平铺
repeat-y	沿着垂直方向平铺

4.背景位置

属性名：background-position

属性值：background-position:水平方向位置垂直方向位置

5.背景相关属性连写

属性名：background

属性值：

单个属性值的合写，取值之间以空格隔开

书写顺序：

推荐：background:color image repeat position

3.元素显示模式

1.块级元素

显示特点：

独占一行
宽度默认是父元素的宽度，高度默认是由内容撑开
可以设置宽高

2.行内元素

显示特点：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

代表标签：a、span、b、u、i、s…

    /*  不生效 */
        span {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

3.行内块元素

显示特点：

一行可以显示多个
可以设置宽高

代表标签：

input、textarea、button、select…

4.元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline-block	转换为行内块元素	较多
display:inline	转换成行内元素	较少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            display: block;
        }
    </style>
</head>
<body>
    <img src="../HTML/img.jpg" alt="">
    <img src="../HTML/img.jpg" alt="">
</body>
</html>

5.HTML嵌套规范注意

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素…
- 但是：p标签不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
- 但是：a标签不能嵌套a标签

4.CSS特性

1.继承性

特性：子元素有默认继承父元素样式的特点

可以继承的常见属性（文字控制属性都可以继承）

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
…

2.层叠性

特性：

给同一个标签设置不同的样式->此时样式会层叠叠加->会共同作用在标签上
给同一个标签设置相同的样式->此时样式会层叠覆盖->最终写在最后的样式会生效

注意点：

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            color: red; 
            color:green;
       }

       .box {
        font-size: 30px;
       }

    </style>
</head>
<body>
    <div class="box">
        这是div里面的文字
    </div>
</body>
</html>

3.优先级

特性：不同的选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级：

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注意点：

!important写在属性值的后面，分号的前面
!important不能提升继承的优先级，只要是继承优先级最低
实际开发中不建议使用!important

4.权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式：（每一级之间不存在进位）（0，0，0，0）

行内样式个数，id选择器的个数，类选择器的个数，标签选择器的个数

比较规则：

先比较第一级数字，如果比较出来了，之后的统统不看
如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后就统统不看
…
如果最终所有数字都相同，表示优先级相同，则比较层叠性

注意：!important如果不是继承，则权重最高

5.综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        a {
            text-decoration: none;
            width: 100px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        a:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

3.CSS盒子模型

1.盒子模型介绍

概念
1. 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
2. 浏览器在渲染网页时，会将网页中的元素看作是一个个矩形区域，我们也形象的称之为盒子
盒子模型
- CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线 */
            border: 1px solid #000;
            /* 内边距 内容和盒子边缘之间*/
            padding: 20px;
            /* 外边距 两个盒子之间，盒子外面*/
            margin: 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div>内容电脑</div>
</body>
</html>

2.宽度和高度

作用：利用width和height属性默认设置盒子内容

属性：width和height

常见取值：数字+px

3.边框（border）

属性名：border

属性值：单个取值的连写，取值之间以空格隔开

如：border：10px solid red;

快捷键：bd+tab

/* solid 实线*/
/* dashed 虚线*/
/* dotted 点线*/

单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border-方位名词

属性值：连写的取值

边框的单个属性

作用：给设置边框的粗细、边框样式、边框颜色效果

单个属性：

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线dashed、点线dotted
边框颜色	border-color	颜色取值

4.综合案例-新浪导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        .box a {
            display: inline-block;
            width: 80px;
            height: 40px;
            text-decoration: none;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            color: #4c4c4c;
        }
        
        a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }

    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
</body>
</html>

5.内边距（padding）

padding属于用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合写法

值的个数	表达意思
padding:5px	上下左右都有5像素的内边距
padding:5px 10px;	上下内边距都是5像素，左右内边距都是10像素
padding:5px 10px 20px;	上内边距5像素、左右内边距10像素、下内边距20像素
padding:5px 10px 20px 30px;	上是5像素、右10像素、下20像素、左30像素，顺时针

当我们给盒子指定padding值之后1，发生了两件事：

内容和边框有了距离，添加了内边距
padding影响盒子实际的大小

解决方案：如果保证盒子跟效果图的大小保持一致，则让width/height减去多出来的内边距的大小即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding-left: 10px;
            padding-top: 20px; */
            padding: 10px;
        }

    </style>
</head>
<body>

    <div>
        padding内边距
    </div>
    
</body>
</html>

padding应用—新浪导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
            
        }


        .nav a {
            /* a属于行内元素 此时必须转换为行内块元素 */
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }



    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">支付宝</a>
    </div>

</body>
</html>

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

6.外边距（margin）

margin属性用于设置外边距，即控制盒子与盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写的方式与padding一样

外边距的典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度
盒子左右的外边距都设置为auto

以下三种写法均可以实现：

margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {
            width: 200px;
            height: 200px;
            background-color:pink;
            margin: 100px auto;
        }

    </style>
</head>
<body>
    <div class="header"></div>
</body>
</html>

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

嵌套块元素垂直外边距塌陷，解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

7.清楚内外边距

网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致，因此在布局前，首先要先清楚下网页元素的内外边距

    * {
            margin: 0;
            padding: 0;
        }

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素即可。

8.综合案例-快报模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快报模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            /* 去掉li前面小圆点 */
            list-style: none;
        }
        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;
        }

        .box ul {
            margin-top: 7px;
        }
        .box ul li a {
            font-size: 12px;
            text-decoration: none;
            color: #666;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }
        
        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>品优购快报</h3>

        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低质5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>
</html>

9.圆角边框

在CSS3中，新增圆角边框样式，这样盒子就可以变成圆角

border-radius属性用于设置元素的外边框圆角

    div {
            width: 300px;
            height: 150px;
            background-color: pink;
            border-radius: 10px;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z9ODOkoZ-1685675509715)(%E5%9B%BE%E7%89%87/image-20230416094551100.png)]

参数值可以是数值，也可以是百分比
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
如果是一个矩形，设置为高度的一半就可以
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
            background-color: pink;
        }

        .radius {
            width: 200px;
            height: 200px;
            border-radius: 10px 20px 30px 40px;
            background-color: pink;
        }

    </style>
</head>
<body>
    1.圆形的做法
    <div class="yuanxing"></div>

    2.圆角矩形的做法
    <div class="juxing"></div>

    1.可以设置不同的圆角
    <div class="radius"></div>
</body>
</html>

10.盒子阴影

我们可以使用box-shadow属性为盒子添加阴影

值	描述
h-shadow	必需，水平阴影的位置，允许负值。
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

注意：

默认的是外阴影，但是不可以写这个单词，否则阴影无效
盒子阴影不占用控件，不会影响其它盒子排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;

        }
        /* 原先盒子没有影子，当鼠标经过添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px 10px rgb(0,0,0,.3);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

11.文字阴影

在CSS3中，可以收用text-shadow属性将阴影设置到文字

4.浮动

1.传统网页布局三种方式

网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应的位置

CSS提供了三种传统布局方式

普通流（标准流）
浮动
定位

标准流：就是标签按照规定好的默认方式排列

块级元素会独占一行，从上向下顺序排列

常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

常用元素：span、a、i、em等

2.浮动

float属性用于擦黄健浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的现象

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素像右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left,.right {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>
</html>

3.浮动特性

设置浮动的元素最重要的特性

脱离标准普通流的控制移动到指定位置，俗称脱标
浮动的盒子不再保留原先的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>
</html>

如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列

浮动元素会具有行内块元素特性

浮动元素经过和标准流父元素搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }

        /* 这里必须写.box .last 要注意权重的问题 */
        .box .last {
            margin-right: 0px;
        }

    </style>
</head>
<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>
</html>

4.浮动练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左青龙</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>
</html>

5.常见的网页布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            height: 300px;
            margin: 0 auto;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }


        .box .last {
            margin-right: 0;
        }

        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <lu>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </lu>
    </div>
    <div class="footer">footer</div>
</body>
</html>

6.清理浮动

所有的父盒子都必须有高度吗？

理想中状态，让子盒子撑开父盒子。

由于父级盒子很多情况下，不方便给高度，但是滋贺子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

清除浮动的本质：清除浮动元素造成的影响

清除浮动的方法：

额外标签法也称为隔墙法，是W3C推荐的做法
父级添加overflow属性
- 其属性值为hidden、auto、scroll
- 无法显示溢出的部分
父级添加after伪元素
父级添加双伪元素

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧的浮动

实际工作中，几乎只用clear:both

7.学成在线案例

导航栏注意点：实际开发中，不会直接使用链接a，而是用li包含链接li+a的做法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="style.css">


</head>
<body>
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <img src="images/学成在线.png" alt="">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索模块 -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="images/user.png" alt="">
            qq-lilei
        </div>
    </div>

    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发<span>&gt;</span></a></li>
                    <li><a href="#">后端开发<span>&gt;</span></a></li>
                    <li><a href="#">移动开发<span>&gt;</span></a></li>
                    <li><a href="#">人工智能<span>&gt;</span></a></li>
                    <li><a href="#">商业预测<span>&gt;</span></a></li>
                    <li><a href="#">云计算&大数据<span>&gt;</span></a></li>
                    <li><a href="#">运维&从测试<span>&gt;</span></a></li>
                    <li><a href="#">UI设计<span>&gt;</span></a></li>
                    <li><a href="#">产品<span>&gt;</span></a></li>
                </ul>
            </div>

            <div class="course">
                <h2>我的课程表</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>

                    <a href="#" class="more">全部课程</a>
                </div>
            </div>

        </div>
        


    </div>


    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">javaWeb</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">javaWeb</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>

    

    <!-- box核心内容区域 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>

        <div class="box-bd">
            <ul class="clearfix">
                <li>
                  <img src="images/pic.png" alt="">
                  <h4>Think PHP 5.0 博客系统实战项目演练</h4>  
                     <div class="info">
                     <span>高级</span> —— 1125人正在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>  
                       <div class="info">
                       <span>高级</span> —— 1125人正在学习
                      </div>
                  </li>
                  <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>  
                       <div class="info">
                       <span>高级</span> —— 1125人正在学习
                      </div>
                  </li>
                  <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>  
                       <div class="info">
                       <span>高级</span> —— 1125人正在学习
                      </div>
                  </li>
                  <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>  
                       <div class="info">
                       <span>高级</span> —— 1125人正在学习
                      </div>
                  </li>
                  <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>  
                       <div class="info">
                       <span>高级</span> —— 1125人正在学习
                      </div>
                  </li>
                  <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>  
                       <div class="info">
                       <span>高级</span> —— 1125人正在学习
                      </div>
                  </li>
                  <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>  
                       <div class="info">
                       <span>高级</span> —— 1125人正在学习
                      </div>
                  </li>
                  <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>  
                       <div class="info">
                       <span>高级</span> —— 1125人正在学习
                      </div>
                  </li>
                  <li>
                    <img src="images/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>  
                       <div class="info">
                       <span>高级</span> —— 1125人正在学习
                      </div>
                  </li>
                  
            </ul>
        </div>
    </div>

    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它和中国一流大学和机构合作提供在线课程</p>
                <a href="#" class="app">下载app</a>
            </div>


            <div class="links">
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div>

</body>
</html>

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
a {
    text-decoration: none;
}
.w {
    width: 1200px;
    margin: auto;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }   
body {
    background-color: #f3f5f7;
}
.header {
    height: 42px;
    margin: 30px auto;
    background-color: pink;
}

.logo {
    float: left;
    width: 198px;
    height: 42px;
    background-color: purple;
}

.nav {
    float: left;
    margin-left: 60px;
}

.nav ul li {
    float: left;
    margin: 0 15px;
}

.nav ul li a{
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color:#050505
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
}

.search {
    float: left;
    width: 412px;
    height: 42px;
    background-color: skyblue;
    margin-left: 70px;
}

.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;
    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;
}

.search button {
    float: left;
    width: 50px;
    height: 42px;
    background: url(images/btn.png);
    border: 0;

}

.user {
    float: left;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}

.banner {
    height: 421px;
    background-color: #1c036c;
}

.banner .w {
    height: 421px;
    background: url(images/banner2.png) no-repeat top center;
}

.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background-color: rgba(0,0,0,0.3);
}
.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}
.subnav ul li a {
    font-size: 14px;
    color:#fff
}

.subnav ul li a:hover {
    color: #00a4ff;
}
.subnav ul li a span {
    float: right;
}


.course {
    float: right;
    width:230px;
    height: 300px;
    background-color: pink;
    margin-top: 50px;
}


.course h2 {
    height: 48px;
    background-color: #9bceea;
    font-size: 18px;
    line-height: 48px;
    text-align: center;
    color: #fff;
}

.bd {
    padding: 0 20px;
}

.bd ul li {
    padding: 15px 0;
    border-bottom: 1px solid #000;
}
.bd ul li h4 {
    font-size: 16px;
    color: #4e4e4e;

}

.bd ul li p {
    font-size: 12px;
    color: #a5a5a5;
}

.bd .more {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-top: 5px;
    line-height: 38px;
    color: #fff;
}

.goods {
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);
    margin-top: 10px;
    /* 行高会继承 */
    line-height: 60px;
}

.goods h3 {
    float: left;
    margin-left: 30px;
    color: #00a4ff;
    font-size: 16px;
}

.goods ul {
    float: left;
    margin-left: 30px;
}
.goods li {
    float: left;
}

.goods ul li a {
    padding: 0 30px;
    color: #050505;
    font-size: 16px;
    border-left: 1px solid #ccc;
}

.mod {
    float: right;
    margin-right: 30px;
    color: #00a4ff;
    font-size: 14px;
}

.box {
    margin-top: 30px;

}
.box-hd {
    height: 45px;
}

.box-hd h3{
    float: left;
    font-size: 20px;
    color: #494949;
}

.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-right: 30px;
    margin-top: 10px;
}

.box-bd ul li {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 228px;
    height: 270px;
    background-color: pink;

}


.box-bd ul {
    width: 1225px;
}


.box-bd ul li img {
    width: 100%;
}

.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
    

}

.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #494949;
}


.box-bd .info span {
    color: #ff7c2d;
}

.footer {
    height: 415px;
    background-color: #fff;

}

.footer .w {
    padding-top: 35px;
}

.copyright {
    float: left;
}
.copyright p{
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
}
.links {
    float:right;
}

.copyright .app {
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 33px;
    font-size: 16px;
    color: #00a4ff;
}
.links dl {
    float: left;
    margin-left: 100px
}

.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.links dl dt a {
    color: #333;
    font-size: 12px;
}

5.CSS定位

为什么需要定位？

定位是可以让盒子自由的在某个盒子内移动的位置或者固定屏幕中的某个位置，并且可以压住其它盒子。

1.定位的组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则据欸的那个了该元素的最终位置

定位模式决定元素的定位方式，通过CSS的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移就是定位的盒子移动到的最终位置，有四个属性：

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

2.静态定位

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器 {position : static}

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

3.相对定位

相对定位是元素在移动位置时，是相对它原来的位置来说的。

语法：

选择器 {position : relative}

相对定位的特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照自己原来的位置）
原来的标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它

4.绝对定位

absolute（重要）

绝对定位是元素在移动位置时，是相对于它祖先元素来说的

语法：

选择器 {position : absolute}

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
绝对定位不再占有原先的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yeyeye {
            position: relative;
            width: 500px;
            height:500px;
            background-color: brown;
        }

        .father {
   
            width: 400px;
            height: 400px;
            background-color: blue;
        }
        .son {
            position: absolute;
            top: 300px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="yeyeye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>


</body>
</html>

5.子绝父相

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其它兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位

6.固定定位

固定定位是元素固定于浏览器的可视化区的位置。主要应用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器 {position : fixed}

以浏览器的可视化窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动
固定定位不在占有原先的位置

固定定位也是脱标的，其它固定定位也可以看做是一种特殊的绝对定位

7.定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制合资的前后次序。

语法：

选择器 { z-index : 1}

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有有定位的盒子才有z-index属性

8.绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto实现水平居中，但是可以通过以下计算方法实现水平和垂直居中。

left：50% 让盒子的左侧移动到父级元素的水平中心位置
margin-left：-100px 让盒子向左移动自身宽度的一半、

9.定位特殊性

绝对定位和固定定位也和浮动类似

行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容大小

绝对定位（固定定位）会完全压住盒子

浮动的元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字

6.元素显示与隐藏

类似于网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。

本质：让一个元素在页面中隐藏或者显示出来

1.display

display属性用于设置一个元素应如何显示

diaplay : none 隐藏对象
display : block 除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素之后，不再占有原来的位置

2.visibility

visibility属性用于指定一个元素应可见还是隐藏

visibility : visible 元素可视
visibility : hidden 元素隐藏

visibility隐藏元素之后，继续占有原来的位置

3.overflow

overflow属性指定了如果内容溢出一个元素的框（超过指定高度及宽度）时，会发生什么

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

4.综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }


        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.4) url(arr.png) no-repeat center;
        }

        /* 鼠标经过时显示 */
        .tudou:hover .mask{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="tudou.jpg" alt="">
    </div>
</body>
</html>

3.CSS高级

1.精灵图

为了有效的减少服务器接受和发送请求的次数，提高网页的加载速度，出现了CSS精灵技术

使用精灵技术核心：

精灵技术主要针对背景图片使用，就是把多个小背景图片整合到一张大图片中
这个大图片也称为sprites精灵图片或者雪碧图
移动背景图片位置，此时可以使用background-position
移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
因为一般情况下都是往上往左移动，所以数值是负数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            background: url(sprites.png);
            background-position: -182px 0;
            margin: 100px auto;
        }
        .box2 {
            width: 27px;
            height: 25px;
            background: url(sprites.png);
            margin: 200px;
            background-position: -155px -106px;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    
</body>
</html>

2.字体图标

字体图标使用场景：主要用于显示网页中通用的、常用的一些小图标

轻量级：一个图标字体要比一系列图像要小，一旦字体加载，图标就会马上渲染出来，减少服务器请求

灵活性：本质就是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标
如果遇到一些结构和样式复杂一点的小图片，就用精灵图

推荐下载网站

icomoon字库
阿里iconfont字库

3.CSS三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            border-top: 50px solid pink;
            border-right: 50px solid red;
            border-bottom: 50px solid blue;
            border-left: 50px solid yellow;
        }

        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top: black;
            margin: 100px auto;
        }

        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;

        }

        .jd span {
            position: absolute;
            width: 0;
            height: 0;
            right: 15px;
            top: -10px;
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

    <div class="jd">
        <span></span>
    </div>
</body>
</html>

4.CSS用户界面样式

所谓的样式界面，就是更改一些用户操作样式，以便提高更好的用户体验

更改用户的鼠标样式

li {cursor : pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统定义的光标形状

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

   <ul>
        <li style="cursor: default;">默认小白鼠标样式</li>
        <li style="cursor: pointer;">鼠标小手样式</li>
        <li style="cursor: move;">鼠标移动样式</li>
        <li style="cursor: text;">鼠标文本样式</li>
        <li style="cursor: not-allowed;">鼠标禁止样式</li>
    </ul>

表单轮廓

给表单添加outline:0或者outline:none样式之后，就可以去掉默认的蓝色边框
```
 input {
            outline: none;
        }
```

防止表单域拖拽

  textarea {
            resize: none;
        }

5.vertical-align属性应用

CSS的vertical-align属性使用场景：经常设置图片或者表单（行内块元素）和文字垂直对齐

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶部对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

6.溢出文字省略号显示

单行文本溢出显示省略号

先强制一行内显示文本
```
white-space : nowrap;
```
超出部分隐藏
```
overflow : hidden;
```
文本用省略号替代超出的部分
```
text-overflow : ellipsis;
```

   div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 如果文字显示不开默认换行 */
            /* white-space: normal; */
            white-space: nowrap;
            /* 溢出部分隐藏起来 */
            overflow: hidden;
            /* 文本用省略号代替隐藏的部分 */
            text-overflow: ellipsis;

        }

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大的兼容性。

7.常见布局技巧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 100px auto;
            text-align: center;
        }


        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        .box .prev,.box .next {
            width: 85px;
        }

        .box .current,.box .elp {
            background-color: #fff;
            border: none;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text" name="" id="">
        页
        <button>确定</button>
    </div>
</body>
</html>

4.HTML5新特性

1.语义化标签

<header>头部标签
<nav>导航标签
<article>内容标签
<section>定义文档的某个区域
<aside>侧边栏标签
<footer>尾部标签

这种语义化标准主要是针对搜索引擎
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换成块级元素

2.多媒体标签

新增的多媒体标签主要包含：

音频标签<audio>
视频标签<video>

视频常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放
controls	controls	向用户显示播放控件
width	pixel	设置播放器宽度
height	pixel	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频) none(不应加载视频)	规定是否预加载视频
src	url	视频url地址
poster	imgurl	加载等待的画面动画
muted	muted	静音播放

音频标签与视频标签使用方法基本一致

3.input表单

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

4.表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示1文本	表单的提示信息，存在默认值将不再显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
multiple	multiple	可以多选文件提交

5.CSS3新特性

1.新增选择器

1.属性选择器

属性选择器可以根据元素特定的属性来选择元素，这样就不用借助类或者id选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 必须是input,同时具有value属性 */
        /* input[value] {
            color: pink;
        } */

        input[type=text] {
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2.属性选择器还可以选择属性=值的某些属性 -->
    <input type="text">
    <input type="password">
    
</body>
</html>

2.结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型的第n个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.选择ul里面的第一个孩子 */
        /* ul后面需要加空格 */
        ul :first-child {
            background-color: pink;
       }

       /* 2.选择ul里面最后一个孩子 */
       ul :last-child {
        background-color: pink;
       }

       /* 3.选择ul里面第二个孩子 */
       ul :nth-child(2) {
        background-color: burlywood;
       }
    </style>
</head>
<body>
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <li>第6个孩子</li>
    </ul>
</body>
</html>

nth-child(n)选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面的数字从1开始…
n可以是关键字：even偶数，odd奇数
n可以是公式：常见的公式如下

     ul li:nth-child(even) {
        background-color: bisque;
       }

       ul li:nth-child(odd) {
        background-color: aqua;
       }

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15…
n+5	从第五个开始到最后
-n+5	前五个

注意：

nth-child对父元素里面所有的孩子排序（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找到第n个孩子

3.伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签，则不需要HTML标签，从而简化HTML结果

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档中是找不到的，所以我们称为伪元素
语法：element::before{}
before和after必须有content属性
伪元素选择器和标签选择器一样，权重为1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }


        div::before {
            /* 这个content是必须要写的 */
            content: "哈哈哈";
        }

        div::after {
            content: "呵呵呵";
        }
    </style>
</head>
<body>
    <div>
        伪元素
    </div>
</body>
</html>

2.盒子模型

CSS3中可以通过box-sizing来指定盒子模型，有两个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分为两种情况：

box-sizing：content-box盒子大小为width+padding+border
box-sizing：border-box盒子大小为width

3.CSS过渡

transition:要过渡的属性 花费时间 运动曲线 何时开始;

属性：想要变化的CSS属性，宽度高度背景颜色内外边距都可以
花费时间：单位是秒
运动曲线：默认是ease
何时开始：单位是秒，可以设置延迟触发时间

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: width 1s;
        }

        div:hover {
            width: 400px;
        }
    </style>

进度条案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 6px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            transition: all 0.7s;
            border-radius: 6px;
        }

        .bar:hover .bar_in {
            width: 100%;

        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in">

        </div>
    </div>
</body>
</html>

6.JavaScript

JS组成：JavaScript、DOM、BOM

1.JS基础

1.JS书写位置

内部JavaScript

直接写在html文件里，用script标签包住

外部JavaScript

代码写在.js结尾的文件里

语法：通过Script标签，引入到html页面中

内联JavaScript

代码写在标签内部

注意：此处作为了解，但是后面vue框架会用这种模式

2.注释和结束符

单行注释
- 符号：//
- 作用：//右边这一行代码将被忽略
- 快捷键：ctrl+/
块注释
- 符号：/* */
- 作用：在/* */之间的所有内容都会被忽略
- 快捷键：shift+alt+a
结束符
- 作用：使用英文的；代表语句结束
- 实际开发中，可写可不写

3.输入和输出语法

输出语法

document.write('输出内容')

作用：想body内输出内容
注意：如果输出的内容写的是标签，也会被解析成网页元素

 <!-- 1.文档输出 -->
    <script>
        document.write('输出内容')
    </script>

alert('输出内容')	//页面弹出警示框

console.log('控制台打印')

输入语法

prompt('请输入你的姓名')

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入的文字

    <script>
        prompt('请输入你的姓名')
    </script>

4.变量

语法：

let 变量名

变量的声明有两部分构成：声明关键字、变量名
let即关键字
let不允许多次声明一个变量

案例：弹出姓名

  <script>
        let name
        name = prompt('请输入你的姓名')
        document.write(name)
    </script>

案例：交换变量的值

    <script>
        let num1 = 10,num2 = 20
        let tmp = num1
        num1 = num2
        num2 = tmp
        console.log(num1,num2)
    </script>

内存：计算机中存储数据的地方，相当于一个空间

变量本质：是程序在内存中申请的一块用来存放数据的小空间

变量的命名规则与规范

规则
- 不能用关键词
- 只能用下划线、字母、数字等组成，且数字不能开头
- 字母严格区分大小
规范
- 起名要有意义
- 遵守驼峰命名发

案例：输出用户信息

    <script>
        let name = prompt('请输入姓名')
        let age = prompt('请输入年龄')
        let gender = prompt('请输入性别')
        document.write(name+","+age+","+gender)
    </script>

5.数组

一种将一组数据存储在单个变量下的优雅方式

let arr = []

    <script>
        let arr = [10,20,30,40]
        let name = ['张三','王五','老四']
        console.log(arr)
        console.log(name)

		// 索引
        console.log(arr[0])
        console.log(name[0])
    </script>

数组是按顺序保存的，每个数据都有自己的编号
计算机中的编号是从0开始的

6.常量

使用const声明的变量称为常量
当某个变量永远不会改变时，就可以使用const来声明，而不是let

const G = 9.8

常量不允许重新赋值，声明的时候必须赋值

    <script>
        const name = 'xiaoming'
        console.log(name);
    </script>

7.数据类型

基本数据类型

number数字型
string字符串型
boolean布尔型
undefined未定义型
numm空类型

引用数据类型

object对象

number数字型

let age = 18
let price = 9.99

js中国的整数、正数、小数等统称为数字类型

js是弱数据类型，变量到底属于哪种，需要赋值之后，才能确定

string字符串类型

使用单引号、双引号、反引号包裹的都叫字符串

 <script>
        let str = 'pink'
        let str1 = "pink"
        // 字符串拼接 +
        console.log('pink'+'老师');

        let age = 18
        document.write('我今年'+age+'岁')
    </script>

模板字符串

语法

反引号``
内容拼接变量时，用${}包住变量

  <script>
        let age = 18
        document.write(`我今年${age}岁了`)
    </script>

布尔类型

表示肯定或否定时在计算机中对应的布尔类型数据

它有两个固定的值true和false

let isCool = true
console.log(isCool)

未定义类型

只声明变量，不赋值的情况下，变量的默认值为undefined

使用场景：如果我们不知道这个数据是否传递过来，我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传过来

null空类型

null仅仅是一个代表无、空、值未知的特殊值

undefined表示没有赋值
null表示赋值了，但是内容为空

通过typeof关键字检测数据类型

        let num = 10
        let name = 'asd'
        let flag = true
        console.log(typeof(num))
        console.log(typeof(name))
        console.log(typeof(flag))

8.类型转换

使用表单、prompt获取过来的数据默认是字符串类型，此时不能直接简单的进行加法运算

隐式转换

规则

+号两边只要有一个是字符串，都会把另一个转成字符串
除了+以外的算术运算符，比如-*/等会把数据转成数字类型

小技巧

+号作为正号解析可以转成数字型
任何数据和字符串相加结果都是字符串

显示转换

    	let str = '123'
        console.log(Number(str))
        console.log(Number('pink'))

        let num = Number(prompt('输入薪资'))
        console.log(num)

转换为数字型

Number(数据)
- 转成数字类型
- 如果字符串内容有非数字，转换失败结果为NaN
- NaN也是number类型的数据，代表非数字
parseInt(数据)
- 只保留整数
parseFloat(数据)
- 可以保留小数

案例：计算两个数的和，打印到页面中

        let num1 = parseFloat(prompt('请输入第一个数'))
        let num2 = parseFloat(prompt('请输入第二个数'))
        let num3 = num1 + num2
        document.write(num3)

9.综合案例

用户输入商品价格和商品数量，以及收获地址，可以自动打印订单信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
        }

        table {
            height: 80px;
            margin: 0 auto;
            /* 合并相邻边框 */
            border-collapse: collapse;
            text-align: center;
        }
        table,th,td {
            border: 1px solid black;
        }

        th {
            padding: 5px 30px;
        }
    </style>
</head>
<body>
    <h1>订单确认</h1>
    

    <script>
        let price = +prompt('请输入商品的价格：')
        let num = +prompt('请输入商品的数量：')
        let address = prompt('请输入收货地址：')

        let total = price * num
        document.write(`
        <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>小米13pro</td>
            <td>${price}</td>
            <td>${num}</td>
            <td>${total}</td>
            <td>${address}</td>
        </tr>
    </table>
        `)

    </script>
</body>
</html>

10.赋值运算符

对变量进行赋值的运算符

11.自增运算符

//前置自增
let num = 1
++num

//后置自增
let num = 1
num++

12.比较运算符

===：左右两边是否类型和值都相等
!==：左右两边是否不全等
字符串的比较，是比较的字符对应的ASCII码

13.逻辑运算符

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为true，结果才为true	一假则假
\|\|	逻辑或	或者	符号两边有一个true即为true	一真则真
！	逻辑非	取反	true变false，false变true	真变假，假变真

14.if语句

if语句有三种使用：单分支、双分支、多分支

单分支用法：

if(条件){
	满足条件要执行的代码
}

多分支用法

if(条件){
	代码1
}else if(条件2){
	代码2
}else if(条件3){
	代码3
}

  let score = +prompt('请输入你的分数')

        if(score >= 90){
            alert('成绩优秀')
        }else if(score >= 70){
            alert('成绩良好')
        }else if(score >= 60){
            alert('成绩及格')
        }else {
            alert('不及格')
        }

15.三元运算符

符号：？与：搭配使用

语法：

条件 ？ 满足条件执行的代码 ： 不满足条件执行的代码

      let num = 3 > 5 ? 3 :5
        alert(num)

数字补0案例

 let num = +prompt('请输入一个数字')
 num < 10 ? alert('0'+num ): alert(num)
 alert(num)

16.switch分支

switch(数据){
	case 值1：
		代码1
		break
	case 值2：
		代码2
		break
	default：
		代码3
		break
}

switch case语句一般用于等值判断，不适用于区间判断
switch case一般需要配合break关键字使用，没有break会造成穿透

17.while循环

while(循环条件){
	要重复执行的代码（循环体）
}

while循环需要具备三要素：

变量起始值
终止条件
变量变化量

     let num = 1
        while(num <= 5){
            document.write('哈哈哈')
            num++
        }

退出循环

break：退出循环
continue：结束本次循环，继续下次循环

18.for循环

for(变量起始值；终止条件；变量变化量){
	//循环体
}

     span {
            display: inline-block;
            padding: 5px 10px;
            border: 1px solid pink;
            margin: 2px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(252, 212, 218, 0.4);
        }
  <script>
        for(let i = 1;i <= 9 ;i++){
            for(let j = 1;j <=i; j++){
                let num = i * j
                document.write(`<span>${i}X${j}=${num}</span>`)
            }
            document.write('<br>')
        }
    </script>

19.数组操作

新增

数组.push()方法将一个或多个元素添加到数组末尾，并返回数组的新长度

let arr = ['red','green','yellow']
arr.push('pink')

arr.unshift(新增)方法将一个或多个元素添加到数组的开头，并返回数组的长度

删除

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值
数组.shift()方法删除数组第一个元素
数组.splice()方法删除指定元素
```
arr.splice(start,deleteCount)
```

20.冒泡排序

      let arr = [1,32,34,11,8,10,0]
        for(let i = 0;i < arr.length-1;i++){
            for(let j = 0;j<arr.length-i-1;j++){
                if(arr[j]>arr[j+1]){
                    let tmp = arr[j]
                    arr[j] = arr[j+1]
                    arr[j+1] = tmp
                }
                
            }
        }

        alert(arr)

21.函数使用

函数的语法：

function 函数名(){
	函数体
}

22.函数传参

 function addTwoNum(a,b){
            return a+b
        }

        let a = +prompt('num1')
        let b = +prompt('num2')

        
        alert(addTwoNum(a,b))

形参：声明函数时写在函数右边小括号里的叫形参
实参：调用函数时写在函数右边小括号里的叫实参

23.匿名函数

没有名字的函数，无法直接使用

使用方式：

函数表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们称之为函数表达式

let fn = function(){
	//函数体
}

  let fn = function(x,y){
            console.log(x+y);
        }
   fn(1,2)

立即执行函数

避免全局变量之间的污染

  (function(x,y){
            console.log(x+y)
        })(1,2)

24.综合案例

用户输入秒数，可以自动转换为时分秒

   let second = prompt('请输入秒数：')
        function getTime(t){
            h = parseInt(t/60/60%24)
            m = parseInt(t/60%60)
            s = parseInt(t%60)

            h = h < 10 ? '0'+ h : h
            m = m < 10 ? '0'+ m : m
            s = s < 10 ? '0'+ s : s

            return `转换完之后时${h}小时${m}分${s}秒`
        }
        let str = getTime(second)
        document.write(str)

25.对象

对象：JavaScript里的一种数据类型

可以理解为是一种无序的数据集合，注意数组是有序的数据集合

  let pink = {
            name:'pink',
            age:26,
            gender:'男'
        }

26.遍历对象

        let obj = {
            uname:'pink',
            age:18,
            gender:'男'
        }

        for(let key in obj){
            console.log(key)//'uname','age','gender'
            console.log(obj[key])
        }

一般不用这种方法遍历数组，主要是遍历对象
for in语法中的k是一个变量，在循环的过程中依次代表对象的属性名

27.数学内置对象

Math对象包含的方法有：

random：随机数
ceil：向上取整
floor：向下取整
max：最大数
min：最小数
pow：幂运算
abs：绝对值

  		//向上取整
        console.log(Math.ceil(1.98))
        //向下取整
        console.log(Math.floor(1.32));
        //四舍五入
        console.log(Math.round(8.55));

 //左闭右开 能取到0 但是取不到1 中间的一个随机小数
        console.log(Math.random());

        //生成0-10之间随机数
        console.log(Math.floor(Math.random()*(10+1)));

        let arr = ['red','yellow','biue']
        let random = Math.floor(Math.random()*arr.length)
        console.log(arr[random]);

        //生成5-10之间随机数
        console.log(Math.floor(Math.random()*(5+1))+5)

        //生成N-M之间随机数
        let N = 9
        let M = 18
        console.log(Math.floor(Math.random()*(M-N+1))+N)

2.APIs

1.DOM树和DOM对象

DOM是用来呈现以及与任意HTML或XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能
作用：开发网页内容特效实现用户交互

DOM树：

将HTML文档以树状结构直观的表现出来
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmBnni3o-1685675509730)(%E5%9B%BE%E7%89%87/image-20230419092605292.png)]

DOM对象：

浏览器根据HTML标签生产JS对象
所以标签属性都可以在这个对象上找到
修改这个对象的属性会自动映射到标签身上

2.获取DOM对象

根据CSS选择器获取DOM元素

1.选择匹配的第一个元素

语法：

document.querySelector('选择器')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <p id="nav">3</p>

    <ul>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>

    <script>
        //1.获取匹配的第一个元素
        //const box = document.querySelector('div')
        const box = document.querySelector('.box')

        const nav = document.querySelector('#nav')

        const li = document.querySelector('ul li:first-child')
    </script>
</body>
</html>

参数：包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象

2.选择匹配的多个元素

document.querySelectorAll('css选择器')

const lis = document.querySelectorAll('ul li')

参数：包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的ModeList对象集合

得到的是一个伪数组

有长度索引的数组
但是没有pop()、push()等数组方法

3.DOM修改元素属性

操作元素的常用属性

还可以通过JS设置/修改标签元素的属性，比如通过src更换图片
最常见的属性比如：href、title、src
语法：
```
对象.属性 = 值
```

  <img src="../html+css/sprites.png" alt="">
    
    <script>
        //1.获取图片元素
        const img = document.querySelector('img')
        //2.修改属性
        img.src = "../html+css/tudou.jpg"
        img.title = '图片'
    </script>

案例：点击更新随机更换图片

 <img src="../html+css/1.jpg" alt="">
    <script>
        //获取N-M随机数
        function getRandom(N,M){
            return Math.floor(Math.random()*(M-N+1))+N
        }

        //1.获取图片对象
        const img = document.querySelector('img')
        const random = getRandom(1,4)

        img.src = `../html+css/${random}.jpg`
    </script>

操作元素样式属性

1.通过style属性操作CSS

语法：

对象.style.样式属性 = 值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>


    <script>
        const box = document.querySelector('.box')
        //修改样式属性 别忘了跟单位
        box.style.width = '300px'
        //短横线采取小驼峰命名法
        box.style.backgroundColor = 'red'
        box.style.border = '2px solid blue'
        box.style.borderTop = '2px solid black'
    </script>
</body>
</html>

2.通过类名修改样式

如果修改的样式比较多，直接通过style属性修改比较繁琐，可以通过借助于css类名的形式
语法：
```
元素.className = 'active'
```

注意：

由于class是关键字，所以使用className去代替
clssName是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box {
            width: 300px;
            height: 600px;
            margin: 100px auto;
            border: 3px solid red;

        }
    </style>
</head>
<body>
    <div>

    </div>
    <script>
        //1.获取元素
        const div = document.querySelector('div')
        div.className = 'box'
    </script>
</body>
</html>

使用className好处

可以同时修改多个样式

3.通过classList操作类控制CSS

为了解决className容易覆盖以前的类名，可以通过classList方式追加和删除类名

语法：

//添加
元素.classList.add('类名')
//删除
元素.classList.remove('类名')
//切换
元素.classList.toggle('类名')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .active {
            color: blue;
        }

    </style>
</head>
<body>
    <div class="box">
        哈哈哈哈
    </div>
    <script>
        //通过classList添加
        //1.获取元素
        const box = document.querySelector('.box')
        //2.修改样式    add() 类名不加点. 并且是字符串
        // box.classList.add('active')
        //删除类
        box.classList.remove('box')

        //切换类 toggle() 有就删掉，没有就加上
        box.classList.toggle('active')
    </script>
</body>
</html>

操作表单元素属性

表单很多情况下，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的跟其他标签属性没有任何区别

获取：DOM对象.属性名

设置：DOM对象.属性名 = 新值

表单.value = '用户名'
表单.type = 'password'

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果是false代表移除该属性
比如：disabled、checked、selected

 <!-- <input type="text" value="电脑"> -->
    <input type="checkbox">

    <script>
        //1.获取元素
        // const uname = document.querySelector('input')
        //2.获取值  获取表单的值用的是 表单.value
        // console.log(uname.value);

        const ipt = document.querySelector('input')
        ipt.checked = true
        console.log(ipt.checked)
    </script>

自定义属性

在html5中推出的专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

    <div data-id="1" data-spm="不知道">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <div data-id="4">4</div>
    <div data-id="5">5</div>

    <script>
        const one = document.querySelector('div')
        console.log(one.dataset.id);
        console.log(one.dataset.spm);
    </script>

4.定时器-间歇函数

目标：能够使用定时器函数重复执行代码

定时器函数可以开启和关闭定时器

1.开启定时器

setInterval(函数，间隔时间)

作用：每隔一段时间调用函数
间隔单位是毫秒

    setInterval(function(){
            console.log('哈哈哈');
        },1000)

注意：

函数名字不需要加括号
定时器返回的是一个id数字

2.关闭定时器

     function fn(){
            console.log('一秒执行一次');
        }

        let n = setInterval(fn,1000)
        console.log(n);

        //关闭定时器
        clearInterval(n)

5.定时轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          box-sizing: border-box;
        }
     
        .slider {
          width: 560px;
          height: 400px;
          overflow: hidden;
        }
     
        .slider-wrapper {
          width: 100%;
          height: 320px;
        }
     
        .slider-wrapper img {
          width: 100%;
          height: 100%;
          display: block;
        }
     
        .slider-footer {
          height: 80px;
          background-color: rgb(100, 67, 68);
          padding: 12px 12px 0 12px;
          position: relative;
        }
     
        .slider-footer .toggle {
          position: absolute;
          right: 0;
          top: 12px;
          display: flex;
        }
     
        .slider-footer .toggle button {
          margin-right: 12px;
          width: 28px;
          height: 28px;
          appearance: none;
          border: none;
          background: rgba(255, 255, 255, 0.1);
          color: #fff;
          border-radius: 4px;
          cursor: pointer;
        }
     
        .slider-footer .toggle button:hover {
          background: rgba(255, 255, 255, 0.2);
        }
     
        .slider-footer p {
          margin: 0;
          color: #fff;
          font-size: 18px;
          margin-bottom: 10px;
        }
     
        .slider-indicator {
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          align-items: center;
        }
     
        .slider-indicator li {
          width: 8px;
          height: 8px;
          margin: 4px;
          border-radius: 50%;
          background: #fff;
          opacity: 0.4;
          cursor: pointer;
        }
     
        .slider-indicator li.active {
          width: 12px;
          height: 12px;
          opacity: 1;
        }
      </style>
</head>
<body>
    <div class="slider">
        <div class="slider-wrapper">
          <img src="./images/slider01.jpg" alt="" />
        </div>
        <div class="slider-footer">
          <p>对人类来说会不会太超前了？</p>
          <ul class="slider-indicator">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <div class="toggle">
            <button class="prev"><</button>
            <button class="next">></button>
          </div>
        </div>
      </div>
    <script>
          // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
 
    //1.获取元素
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    let i = 0
    //2.设置定时器
    // console.log(sliderData[i]);
    setInterval(function(){
        i++
        //无缝斜街
        if(i>=sliderData.length){
            i=0
        }
        // console.log(sliderData[i]);
        //更换图片路径
        img.src = sliderData[i].url
        //更换标题
        p.innerHTML = sliderData[i].title
        //小圆点
        //先删除之前的
        document.querySelector(`.slider-indicator .active`).classList.remove('active')
        //设置现在的
        document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')

        
    },1000)
    </script>
</body>
</html>

6.事件监听

事件是在编程时系统内发生的动作或者发生的事
比如用户在页面上点击一个按钮

语法：

元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素：

事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标点击click、鼠标经过mouseover等
事件调用的函数：要做什么事

const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            alert('讨厌')
        })

注意：

事件类型要加引号
函数是点击之后再执行，每次点击都会执行一次

事件监听的类型

click
mouseenter鼠标经过
mouseleave鼠标离开

7.随机点名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        h2 {
            text-align: center;
        }
 
        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }
 
        .qs {
 
            width: 450px;
            height: 40px;
            color: red;
 
        }
 
        .btns {
            text-align: center;
        }
 
        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>



</head>
<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>
 
    <script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']

        //开始按钮模块
        const start = document.querySelector('.start')
        const qs = document.querySelector('.qs')

        //定时器的全局变量
        let timeId = 0
        let random = 0

        start.addEventListener('click',function(){
            timeId = setInterval(function(){
                random = parseInt(Math.random()*arr.length)
                qs.innerHTML = arr[random]
            },35)

            //如果数组只剩一个值
            if(arr.length==1){
                start.disabled =end.disabled = true
            }
        })
 
        const end = document.querySelector('.end')
        end.addEventListener('click',function(){

            clearInterval(timeId)
            arr.splice(random,1)
        })
    </script>
</body>
</html>

8.焦点事件

focus 获取焦点
blur 失去焦点

  <input type="text" name="" id="">

    <script>
        const input = document.querySelector('input')
        input.addEventListener('focus',function(){
            console.log('有焦点触发');
        })

        input.addEventListener('blur',function(){
            console.log('没有焦点触发');
        })

    </script>

小米搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        ul {
 
            list-style: none;
        }
 
        .mi {
            position: relative;
            width: 223px;
            margin: 100px auto;
        }
 
        .mi input {
            width: 223px;
            height: 48px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            border: 1px solid #e0e0e0;
            outline: none;
        }
 
        .mi .search {
            border: 1px solid #ff6700;
        }
 
        .result-list {
            display: none;
            position: absolute;
            left: 0;
            top: 48px;
            width: 223px;
            border: 1px solid #ff6700;
            border-top: 0;
            background: #fff;
        }
 
        .result-list a {
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;
        }
 
        .result-list a:hover {
            background-color: #eee;
        }
    </style>
    </style>
</head>
<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
    </div>
    <script>
        //1.获取元素
        const input = document.querySelector('[type=search]')
        const ul = document.querySelector('.result-list')
        //监听事件
        input.addEventListener('focus',function(){
            ul.style.display = 'block'
            input.classList.add('search')
        })
        //失去焦点
        input.addEventListener('blur',function(){
            ul.style.display = 'none'
            input.classList.remove('search')
        })

    </script>
</body>
</html>

9.键盘事件

keydown 键盘按下
keyup 键盘抬起触发

   const input = document.querySelector('input')
        input.addEventListener('keydown',function(){
            console.log('键盘按下')
        })

        input.addEventListener('keyup',function(){
            console.log('键盘抬起')
        })

10.事件对象

事件对象是什么
- 也是给对象，这个对象里有事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景
- 可以判断用户按下了哪个键，比如按下回车键就可以发布新闻
- 可以判断鼠标点击了那个元素，从而做出相应

获取事件对象

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

元素.addEventListener('click',function(e){
	
})

事件对象常用的属性

type：获取当前事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘的值

11.环境对象

环境对象：指的是函数内部特殊的变量this，它代表当前函数运行时所处的环境

作用：弄清楚this的指向，可以让我们的代码更简洁

函数的调用方式不同，this指代的对象也不同
谁调用，this就是谁

 const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            // btn.style.color = 'red'
            this.style.color = 'red'
        })

12.回调函数

如果将函数A作为参数传递给函数B时，称函数A为回调函数

  function fn(){
            console.log('一秒执行一次');
   }
  //fn为回调函数
  let n = setInterval(fn,1000)

13.综合案例-tab栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
     
        .tab {
          width: 590px;
          height: 340px;
          margin: 20px;
          border: 1px solid #e4e4e4;
        }
     
        .tab-nav {
          width: 100%;
          height: 60px;
          line-height: 60px;
          display: flex;
          justify-content: space-between;
        }
     
        .tab-nav h3 {
          font-size: 24px;
          font-weight: normal;
          margin-left: 20px;
        }
     
        .tab-nav ul {
          list-style: none;
          display: flex;
          justify-content: flex-end;
        }
     
        .tab-nav ul li {
          margin: 0 20px;
          font-size: 14px;
        }
     
        .tab-nav ul li a {
          text-decoration: none;
          border-bottom: 2px solid transparent;
          color: #333;
        }
     
        .tab-nav ul li a.active {
          border-color: #e1251b;
          color: #e1251b;
        }
     
        .tab-content {
          padding: 0 16px;
        }
     
        .tab-content .item {
          display: none;
        }
     
        .tab-content .item.active {
          display: block;
        }
      </style>
</head>
<body>
    <div class="tab">
        <div class="tab-nav">
          <h3>每日特价</h3>
          <ul>
            <li><a class="active" href="javascript:;">精选</a></li>
            <li><a href="javascript:;">美食</a></li>
            <li><a href="javascript:;">百货</a></li>
            <li><a href="javascript:;">个护</a></li>
            <li><a href="javascript:;">预告</a></li>
          </ul>
        </div>
        <div class="tab-content">
          <div class="item active"><img src="./images/tab00.png" alt="" /></div>
          <div class="item"><img src="./images/tab01.png" alt="" /></div>
          <div class="item"><img src="./images/tab02.png" alt="" /></div>
          <div class="item"><img src="./images/tab03.png" alt="" /></div>
          <div class="item"><img src="./images/tab04.png" alt="" /></div>
        </div>
      </div>
 <script>
    //1.a模块制作 给乌五个链接绑定鼠标经过事件
    const as = document.querySelectorAll('.tab-nav a')
    for(let i = 0; i <as.length;i++){
        as[i].addEventListener('mouseenter',function(){
            // console.log('鼠标经过');
            // 排他思想
            document.querySelector('.tab-nav .active').classList.remove('active')
            
            this.classList.add('active')

            document.querySelector('.tab-content .active').classList.remove('active')
            //对应序号的那个item 显示添加active类
            document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')
        })
    }
 </script>    
</body>
</html>

14.综合案例-全选文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
     
        table {
          border-collapse: collapse;
          border-spacing: 0;
          border: 1px solid #c0c0c0;
          width: 500px;
          margin: 100px auto;
          text-align: center;
        }
     
        th {
          background-color: #09c;
          font: bold 16px "微软雅黑";
          color: #fff;
          height: 24px;
        }
     
        td {
          border: 1px solid #d0d0d0;
          color: #404060;
          padding: 10px;
        }
        .ck:checked {
            width: 20px;
            height: 20px;
        }
     
        .allCheck {
          width: 80px;
        }
      </style>
</head>
<body>
    <table>
        <tr>
          <th class="allCheck">
            <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
          </th>
          <th>商品</th>
          <th>商家</th>
          <th>价格</th>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米手机</td>
          <td>小米</td>
          <td>￥1999</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米净水器</td>
          <td>小米</td>
          <td>￥4999</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米电视</td>
          <td>小米</td>
          <td>￥5999</td>
        </tr>
      </table>
      <script>
        //1.获取大复选框
        const checkAll = document.querySelector('#checkAll')
        //2.获取所有的小的复选框
        const cks = document.querySelectorAll('.ck')
        //3.点击大复选框
        checkAll.addEventListener('click',function(){
            //得到当前大复选框的选中状态
            // console.log(this.checked)
            for(let i=0;i<cks.length;i++){
                cks[i].checked = this.checked
            }
        })

        // 小复选框控制大复选框
        for(let i=0;i<cks.length;i++){
            cks[i].addEventListener('click',function(){
                //判断选中的小复选框是不是等于总的小复选框数
                checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
            })
        }
      </script>
</body>
</html>

15.事件流

事件流指的是事件完整执行过程中的流动路径

说明：假设页面有个div，当触发时间时，会经历两个阶段，分别是捕获阶段、冒泡阶段

简单来说：捕获阶段是从父到子冒泡阶段是从子到父

事件捕获概念：从DOM的根元素开始去执行对应的事件

事件捕获需要写对应的代码才能看到效果

代码：

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

说明：

addEventListener第三个参数传入true代表的是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false

事件冒泡概念：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次触发

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

事件冒泡是默认存在的

阻止冒泡

事件对象.stopPropagation()

注意：此方法可以阻断事件流动传播，不光在冒泡阶段，捕获阶段也有效

16.解绑事件

  const btn = document.querySelector('button')
        btn.onclick = function(){
            alert('点击')
        }
        // 解绑事件
        btn.onclick = null

    const btn = document.querySelector('button')
       
        function fn(){
            alert('点击')
        }

        btn.addEventListener('click',fn)
        btn.removeEventListener('click',fn)

匿名函数无法被解绑

鼠标经过事件的区别

mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .dad {
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .baby {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>

    <div class="dad">
        <div class="baby"></div>
    </div>
    <script>
        const dad = document.querySelector('.dad')
        const baby = document.querySelector('.baby')
        dad.addEventListener('mouseenter',function(){
            alert('鼠标经过')
        })
        dad.addEventListener('mouseleave',function(){
            alert('鼠标离开')
        })

    </script>
</body>
</html>

17.事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点：减少注册次数，可以提高程序的性能
原理：事件委托其实是利用事件冒泡的特点，给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
实现：事件对象.target.tagName可以获得真正触发事件的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <p>不需要变色</p>
    </ul>
    <script>
        //点击每个小li 当前li的文字变为红色
        //按照事件委托的方式

        const ul = document.querySelector('ul')
        ul.addEventListener('click',function(e){
            // alert('1')
            if(e.target.tagName === 'LI'){
                e.target.style.color = 'red'
            }
        })


    </script>
</body>
</html>

18.页面加载事件

加载外部资源（如图片、外联CSS、JavaScript）加载完毕时触发的事件

为什么要学？

有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把script写在head中，这时候直接找dom元素找不到

时间名：load

监听页面所有资源加载完毕

给window添加load事件

window.addEventListener('load',function(){})

注意：不光可以监听整个页面的资源加载完毕，也可以针对某个资源绑定load事件

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded

监听页面DOM加载完毕：

给document添加DOMContentLoaded事件

document.addEventListener('DOMContentLoaded',function(){
            
        })

19.页面滚动事件

滚动条在滚动的时候持续触发的事件

为什么要学？

很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

事件名：scroll

监听整个页面滚动：

window.addEventListener('scroll',function(){

        })

scrollLeft和scrollTop属性
- 获取被卷去的大小
- 获取元素内容往左、往上滚出去看不到的距离
- 这两个值是可读的

开发中，经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

20.页面尺寸事件

会在窗口尺寸改变的时候触发

 window.document('resize',function(){
            //要执行的代码
        })

获取宽高

获取元素的可见部分的宽高（不包含边框、margin、滚动条等）
clientWidth和clientHeight

       const div = document.querySelector('div')
        console.log(div.clientWidth)

21.元素尺寸于位置

获取宽高：

获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值

获取位置：

获取元素距离自己定位父级元素的左、上个距离
offsetLLeft和offsetTop注意只读属性

22.仿新浪固定头部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        .content {
            overflow: hidden;
            width: 1000px;
            height: 3000px;
            background-color: pink;
            margin: 0 auto;
        }
 
        .backtop {
            display: none;
            width: 50px;
            left: 50%;
            margin: 0 0 0 505px;
            position: fixed;
            bottom: 60px;
            z-index: 100;
        }
 
        .backtop a {
            height: 50px;
            width: 50px;
            background: url(./images/bg2.png) 0 -600px no-repeat;
            opacity: 0.35;
            overflow: hidden;
            display: block;
            text-indent: -999em;
            cursor: pointer;
        }
 
        .header {
            position: fixed;
            top: -80px;
            left: 0;
            width: 100%;
            height: 80px;
            background-color: purple;
            text-align: center;
            color: #fff;
            line-height: 80px;
            font-size: 30px;
            transition: all .3s;
        }
 
        .sk {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin-top: 500px;
        }
    </style>
</head>
<body>
    <div class="header">我是顶部导航栏</div>
    <div class="content">
        <div class="sk">秒杀模块</div>
    </div>
    <div class="backtop">
        <img src="./images/close2.png" alt="">
        <a href="javascript:;"></a>
    </div>
    <script>
        const sk = document.querySelector('.sk')
        const header = document.querySelector('.header')
        //页面滚动事件
        window.addEventListener('scroll',function(){
            //当页面滚动到秒杀模块的时候就改变头部的top值
            const n = document.documentElement.scrollTop

            // if(n>=sk.offsetTop){
            //     header.style.top = 0
            // }else{
            //     header.style.top = '-80px'
            // }

            header.style.top = n >= sk.offsetTop ? 0 : '-80px'
        })
    </script>
</body>
</html>

23.日期对象

作用：得到当前系统的时间

在代码中发现new关键字，一般将这个操作称为实例化

创建一个事件对象并获取时间

获取当前时间
```
const date = new Date()
```
获取指定时间
```
const date = new Date('2008-8-8')
```

日期对象方法

使用场景：因为日期对象返回的数据我们不能直接使用，需要转换成实际开发中常用的格式

  		const date = new Date()
        console.log(date.getFullYear());
        console.log(date.getMonth()+1);//月份+1
        console.log(date.getDate());
        console.log(date.getDay()+1);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 40px;
            border:1px solid pink;
            text-align: center;
            line-height: 40px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <script>
       
        const div = document.querySelector('div')
        function getMyDate(){
             const date = new Date()
             let h = date.getHours()
             let m = date.getMinutes()
             let s = date.getSeconds()
             h = h < 10 ? '0' + h : h
             m = m < 10 ? '0' + m : m
             s = s < 10 ? '0' + s : s
             return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日
             ${h}:${m}:${s}`
        }

        div.innerHTML = getMyDate()
        setInterval(function(){       
             div.innerHTML = getMyDate()
            },1000)
    </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N44LoGwl-1685675509737)(%E5%9B%BE%E7%89%87/image-20230422153924076.png)]

24.时间戳

使用场景：如果计算倒计时效果，前面无法直接计算，需要借助事件戳完成

时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数

三种方式获取时间戳：

使用getTime()方法
简写+new Date()
使用Date.now()

 		//1.getTime()
        const date = new Date()
        console.log(date.getTime());

        //2.+new Date()
        console.log(+new Date());

        //3.Date.now()
        console.log(Date.now());

		//指定时间时间戳
		console.log(+new Date('2008-11-12 !8:30:00'));

25.DOM节点

DOM树里每一个内容都称为节点

节点类型：

元素节点：所有标签比如body、div，html是根节点
属性节点：所有属性比如href
文本节点：所有文本
其他

26.查找节点

父节点查找

parentNode 属性
返回最近一级的父节点找不到返回null

子元素.parentNode

  <div class="yeye">
        <div class="dad">
            <div class="baby">x</div>
        </div>
    </div>
    
    <script>
        const baby = document.querySelector('.baby')
        console.log(baby);
        console.log(baby.parentNode);
        console.log(baby.parentNode.parentNode);
    </script>

子节点查找

childNodes：获得所有子节点，包括文本节点（空格、换行）、注释节点等
children属性
- 仅获得所有元素节点
- 返回的还是一个伪数组

父元素.children

兄弟关系查找：

下一个兄弟节点
- nextElementSibling属性
上一个兄弟节点
- previousElementSibling属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        // const ul = document.querySelector('ul')
        // console.log(ul.children);   //得到伪数组 选择的是亲儿子
        const li2 = document.querySelector('ul li:nth-child(2)')
        console.log(li2.previousElementSibling);
        console.log(li2.nextElementSibling);
    </script>
</body>
</html>

27.增加节点

很多情况下，我们需要在页面中增加元素

比如：点击发布按钮，可以新增一条信息

一般情况下，我们新增节点，按照如下操作：

创建一个新的节点
把创建的新的节点放入到指定的元素内部

创建节点

创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点的方法：

追加节点

要想在界面中看到，还得插入到某个父元素中

插入到父元素的最后一个子元素

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素，在那个元素前面)

    	//1.创建节点
        const div = document.createElement('div')
        // console.log(div);
        // document.body.appendChild(div)

        const ul = document.querySelector('ul')
        const li = document.createElement('li')
        li.innerHTML = '我是老二'
        // ul.appendChild(li)
        ul.insertBefore(li,ul.children[0])

28.学成在线重构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学车在线首页</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">

            </ul>
        </div>
    </div>
    <script>
        // 1. 重构  
        let data = [
            {
                src: 'images/course01.png',
                title: 'Think PHP 5.0 博客系统实战项目演练',
                num: 1125
            },
            {
                src: 'images/course02.png',
                title: 'Android 网络动态图片加载实战',
                num: 357
            },
            {
                src: 'images/course03.png',
                title: 'Angular2 大前端商城实战项目演练',
                num: 22250
            },
            {
                src: 'images/course04.png',
                title: 'Android APP 实战项目演练',
                num: 389
            },
            {
                src: 'images/course05.png',
                title: 'UGUI 源码深度分析案例',
                num: 124
            },
            {
                src: 'images/course06.png',
                title: 'Kami2首页界面切换效果实战演练',
                num: 432
            },
            {
                src: 'images/course07.png',
                title: 'UNITY 从入门到精通实战案例',
                num: 888
            },
            {
                src: 'images/course08.png',
                title: 'Cocos 深度学习你不会错过的实战',
                num: 590
            },
        ]
        const ul = document.querySelector('.box-bd ul')
        // 1. 根据数据的个数，创建 对应的小li
        for (let i = 0; i < data.length; i++) {
            // 2. 创建新的小li
            const li = document.createElement('li')
            // 把内容给li
            li.innerHTML = `
                <a href="#">
                    <img src=${data[i].src} alt="">
                    <h4>
                        ${data[i].title}
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>${data[i].num}</span>人在学习
                    </div>
                </a>
            `
            // 3. ul追加小li
            ul.appendChild(li)
        }
    </script>
</body>

</html>

29.克隆节点

特殊情况下，我们新增节点，按照如下操作：

复制一个原有的节点
把复制的节点放入到指定的元素内部

克隆节点：

元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原来标签一样的元素，括号内传入布尔值

若为true，则代表克隆时包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false

  		const ul = document.querySelector('ul')
        // 1 克隆节点  元素.cloneNode(true)
        // const li1 = ul.children[0].cloneNode(true)
        // console.log(li1)
        // 2. 追加
        ul.appendChild(ul.children[0].cloneNode(true))

30.删除节点

若一个节点在页面中已不需要时，可以删除它

在JS元素DOM操作中，要删除元素必须通过父元素删除

父元素.removeChild(要删除的元素)

注意：

如不存在的父子关系则删除失败

    <ul>
        <li>没用</li>
    </ul>

    <script>
        const ul = document.querySelector('ul')
        ul.removeChild(ul.children[0])
    </script>

31.BOM

BOM:浏览器对象模型

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候忽略window

32.定时器-延时函数

用来让代码延迟的函数，叫setTimeout

语法：

setTimeout(回调函数，等待的毫秒数)

setTimeout仅仅只执行一次，就是把一段代码延迟执行

setTimeout(function(){
            console.log('延迟函数');
        },2000)

清除延时函数

  let timer = setTimeout(function(){
            console.log('延迟函数');
        },2000)

        clearTimeout(timer)

延时器需要等待，所以让后面的代码先执行
每一次调用延时器都会产生一个新的延时器

33.JS执行机制

同步任务

同步任务都在主线程上执行，形成一个执行线

异步任务

JS的异步是通过回调函数实现的

一般而言，异步任务有以下三种类型：

普通事件，如click、resize等
资源加载，如load、error等
定时器，包括setInterval、setTimeout等

异步任务相关添加到任务队列中（任务队列也叫消息队列）

先执行执行栈中的同步任务
异步任务放入任务队列中
一旦执行战中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环

34.location对象

location的数据类型是对象，它拆分了并保存URL地址的各个组成成分

    //1.href 经常用href 利用JS的方法去跳转页面
    location.href = 'http://www.baidu.com'

案例：五秒钟实现自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
    
    <a href="http://www.itcast.cn">支付成功<span>5</span>秒钟后跳转首页</a>

    <script>
        const a = document.querySelector('a')

        let num = 5
        let timer = setInterval(function(){
            num--
            a.innerHTML = `支付成功<span>${num}</span>秒钟后跳转首页`

            if(num ==0){
                clearInterval(timer)
                location.href = 'http://www.itcast.cn'
            }
        },1000)
    </script>
</body>
</html>

常用属性和方法：

search属性获取地址中携带的参数，符号？后面部分
hash属性获取地址中的哈希值，符号#后面的部分
reload方法用来刷新当前页面，传入参数true表示强制刷新

const reload = document.querySelector('.reload')
reload.addEventListener('click',function(){
    location.reload()
})

35.navigator对象

navigator的数据类型是对象，该对象记录了浏览器自身的相关信息

常用属性和方法

通过userAgent检测浏览器的版本及平台

36.history对象

history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

常用属性：

history	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能

 <button>后退</button>
    <button>前进</button>
    <script>
        const back = document.querySelector('button:first-child')
        const forward = back.nextElementSibling

        back.addEventListener('click',function(){
            history.back()
        })

        forward.addEventListener('click',function(){
            history.forward()
        })
    </script>

37.本地存储

数据存储在用户的浏览器中

设置、读取方便、甚至页面刷新不丢失数据

容量较大，sessionStorage和localStorage约5M左右

作用：可以将数据永久存储在本地，除非手动删除，否则关闭页面也会存在

特性：

可以多窗口页面共享
以键值对的形式存储使用

语法：

存储数据

localStorage.setItem(key,value)

localStorage.setItem('uname','彭于晏')

获取数据：

localStorage.getItem(key)

localStorage.getItem('uname')

删除数据：()

localStorage.removeItem(key)

localStorage.removeItem('uname')

SessionStorage

特性：

生命周期为关闭浏览器窗口
在同一个窗口下数据可以共享
以键值对的形式存储使用
用法跟localStorage基本相同

38.存储复杂数据类型

需要将复杂数据类型转换成JSON字符串，再存储到本地

语法：JSON.stringify(复杂数据类型)

const obj = {
            uname:'pink',
            age: 20,
            gender:'女'
}

localStorage.setItem('obj',JSON.stringify(obj))

39.正则表达式

正则表达式适用于匹配字符串中字符组合的模式，在JS中，正则表达式也是对象

通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式

语法：

const 变量名 = /表达式/

判断是否有符合规则的字符串

test()方法用来查看正则表达式与指定的字符串是否匹配

const str = '我们在学习前端，希望高薪毕业'
//1.定义规则
const reg = /前端/
//2.是否匹配
reg.test(str)
console.log(reg.test(str));

40.元字符

一些具有特殊含义的字符，极大提高了灵活性和强大的匹配功能

比如规定用户只能输入英文26个英文字母，普通字符的话abcdefghijklm……

但是换成元字符写法：[a-z]

为了方便记忆和学习，我们对元字符进行分类：

边界符
量词
字符类

边界符

正则表达式中的边界符用来提示字符所处的位置，主要有两个字符

量词

用来设定某个模式出现的次数

字符类

[ ]匹配字符集合
[ ]中间加上-字符
[ ]里面加上取反符号

41.修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

语法：

/表达式/修饰符

i是单词ignore的缩写，正则匹配时字母不区分大小写
g是单词global的缩写，匹配所有满足正则表达式的结果

 console.log(/a/i.test('a'))

replace()替换

语法：

字符串.replace(/正则表达式/,'替换文本')

const str = 'java是一门编程语言'
const re = str.replace(/java/i,'前端')
console.log(re);

7.JS进阶

1.作用域

1.局部作用域

局部作用域分为函数作用域和块作用域

函数作用域

在函数内部声明的变量只能在函数内部被访问，外部无法直接访问

总结：

函数内部声明的变量，在函数外部无法被访问
函数的参数也是函数内部的局部变量
不同函数内部声明的变量无法互相访问
函数执行完毕后，函数内部的变量实际被清空了

块作用域

在JavaScript中使用的{ }包裹的代码称为代码块，代码块内部声明的变量外部将有可能无法访问

let声明的变量会产生块作用域，var不会产生块作用域
const声明的常量也会产生块作用域
不同代码块之间的变量无法互相访问
推荐使用let和const

  for(let i=0;i<=6;i++){
      console.log(i);
 }
 console.log(i);//报错，超出作用域

2.全局作用域

```

3.foreach方法

用于调用数组的每个元素，并将元素传递给回调函数

主要使用场景：遍历数组的每个元素

语法：

被遍历的数组.foreach(function(当前数组元素，当前元素索引号){
			//函数体
})

const arr = ['red','green','pink']
arr.forEach(function(item,index){
    console.log(item);
    console.log(index);
})

4.深入对象

1.创建对象三种方式

利用对象字面量创建对象
利用new Object创建对象
利用构造函数创建对象


        //1.利用对象字面量创建对象
        const o = {
            name:'pink老师'
        }

        //2.利用new Object创建对象
        // const obj = new Object()
        // console.log(obj);
        // obj.uname = 'pink'

        const obj = new Object({uname:'pink'})

2.构造函数

一种特殊的函数，主要用来初始化对象


        function Pig(name,age,gender){
            this.name = name
            this.age = age
            this.gender = gender
        }

        const Mom = new Pig('猪妈妈',32,'女')
        const fa = new Pig('猪爸爸',34,'男')

说明：

使用new 关键字调用函数的行为称为实例化
实例化构造函数时没有参数可以省略（）
构造函数内部无需写return，返回值即为创建的新对象
构造函数内部的return返回的值无效，所以不要写return
new Object() newDate()也是实例化构造函数

实例化执行过程：

创建新对象
构造函数this指向新对象
执行构造函数代码，修改this，添加新的属性
返回新对象

3.实例化成员&静态成员

通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员


        function Pig(name){
            this.name = name
        }

        const peiqi = new Pig('佩奇')
        const qiaozhi = new Pig('乔治')

静态成员

构造函数的属性和方法


        Pig.name = 'pink'
        Pig.sayHi = function(){
            console.log(this);
        }

5.内置构造函数

1.Object

Object是内置的构造函数，用于创建普通的对象

const user = new Object({name:'小米',age:19})

推荐使用字面量方式声明对象，而不是Object构造函数

学习三个常用的静态方法（静态方法就是只有构造函数Object可以调用）

作用：Object.keys静态方法获取对象中所有属性（键）

语法：

       const o = {uname:'pink',age:19}

        //获取所有属性名
        console.log(Object.keys(o));
        //获取所有属性值
        console.log(Object.values(o));

Object.assign方法用于对象拷贝

        //对象拷贝
        const oo = {}
        Object.assign(oo,o)
        console.log(oo);

        Object.assign(o,{gender:'女'})
        console.log(o);

2.Array

Array是内置的构造函数，用于创建数组

const arr = new Array(3,5)
console.log(arr)

创建数组建议使用字面量创建，不用Array构造函数创建

数组常见实例方法

方法	作用	说明
foreach	遍历数组	不返回数组，经常用于查找遍历数组元素
filter	过滤数组	返回新数组，返回的是筛选满足条件的数组元素
map	迭代数组	返回新数组，返回的是处理之后的数组元素，想要使用返回的新数组
reduce	累计器	返回累计处理的结果，经常用于求和

       const arr = [1,5,8]
        //没有初始值
        const total = arr.reduce(function(prev,current){
            return prev+current
        })
        console.log(total);

        //有初始值
        const total1 = arr.reduce(function(prev,current){
            return prev+current
        },10)
        console.log(total1);


        //箭头函数
        const total2 = arr.reduce((prev,current)=>prev+current,10)
        console.log(total2);

计算薪资案例

        const arr = [{
              name: '张三',
              salary: 10000
            	}, {
              name: '李四',
              salary: 10000
            	}, {
              name: '王五',
              salary: 20000
            	},
    ]

    const total = arr.reduce((prev,current)=>{
        return prev+current.salary
    },0)
    console.log(total);

Array常用方法

  const arr = ['red', 'blue', 'green']
    const re = arr.find(function (item) {
      return item === 'blue'
    })
    console.log(re)
 
    const arr1 = [
      {
        name: '小米',
        price: 1999
      },
      {
        name: '华为',
        price: 3999
      },
    ]
    // 找小米 这个对象，并且返回这个对象
    const mi = arr1.find(function (item) {
      // console.log(item)  //
      // console.log(item.name)  //
      console.log(111)
      return item.name === '华为'
    })
    // 1. find 查找
    // const mi = arr.find(item => item.name === '小米')
    // console.log(mi)
    // 2. every 每一个是否都符合条件，如果都符合返回 true ，否则返回false
    const arr2 = [10, 20, 30]
    const flag = arr1.every(item => item >= 20)
    console.log(flag)

案例：

   const spec = {size:'40cm*40cm',color:'黑色'}
        console.log(Object.values(spec));
        
        Object.values(spec).join('/')
        document.querySelector('div').innerHTML = Object.values(spec).join('/')

伪数组转化成真数组

静态方法Array.from()

  const lis = document.querySelectorAll('ul li')
  console.log(lis);

  //伪数组没有pop方法
  // lis.pop(2)

  const liss = Array.from(lis)
  console.log(liss);

3.String

   const str = 'pink,red,blue'
   const arr = str.split(',')
   console.log(arr);

 //字符串截取
 const str = '今天天气真好'
 console.log(str.substring(1,3));//天天[1,3)

const str = 'pink老师上课呢'
console.log(str.startsWith('pink'));

const str = '我是pink老师'
console.log(str.includes('pink'));

 const gift = '50g的茶叶,清洗球'
    // 1. 把字符串拆分为数组
    // console.log(gift.split(',')) [,]
    // 2. 根据数组元素的个数，生成 对应 span标签
    // const str = gift.split(',').map(function (item) {
    //   return `<span>【赠品】 ${item}</span> <br>`
    // }).join('')
 
    // // console.log(str)
    // document.querySelector('div').innerHTML = str
document.querySelector('div').innerHTML = gift.split(',').map(item => `<span>【赠品】 ${item}</span> <br>`).join('')

6.原型

1.原型对象

构造函数通过原型分配的函数是所有对象共享的

JS规定，每一个构造函数都有一个prototype属性，指向另一个对象，所以我们也称为原型对象

这个对象可以挂载函数，对象实例不会多次创建原型上的函数，节约内存

我们可以把那些不变的方法，直接定义在prototype对象上，这样所有的对象实例就可以共享这些方法

构造函数和原型对象中的this都指向实例化的对象

 function Star(uname,age){
            this.uname = uname
            this.age = age
        }

        Star.prototype.sing = function(){
            console.log('唱歌');
        }

        const ldh = new Start('刘德华',55)
        ldh.sing()//调用

2.constructor属性

该属性指向该原型对象的构造函数，简单理解，就是指向我的爸爸，我是有爸爸的孩子

使用场景：如果有多个对象的方法，我们可以给原型对象采取对象形式赋值。但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor就不再指向当前构造函数了此时，我们可以在修改后的原型对象中，添加一个constructor 指向原来的构造函数。

 function Star(name){
            this.name = name
        }

        Star.prototype.sing = function(){
            console.log('唱歌');
        }

        Star.prototype.dance = function(){
            console.log('跳舞');
        }

        Star.prototype = {
            constructor:Star,
            sing:function(){
                console.log('唱歌');
            },
            dance:function(){
                console.log('跳舞');
            }
        }

3.对象原型

对象都会有一个_proto_指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有_proto_原型的存在

4.原型继承

        const People = {
            eyes:2,
            head:1
        }
        function Woman(){
        
        }
        Woman.prototype = People
        Woman.prototype.constructor = Woman

        const red = new Woman()
        console.log(red);


        function Man(){

        }
        Man.prototype = People
        Man.prototype.constructor = Man
        
        const pink = new Man()
        console.log(pink);

    // 继续抽取   公共的部分放到原型上
    // const Person1 = {
    //   eyes: 2,
    //   head: 1
    // }
    // const Person2 = {
    //   eyes: 2,
    //   head: 1
    // }
    // 构造函数  new 出来的对象 结构一样，但是对象不一样
    function Person() {
      this.eyes = 2
      this.head = 1
    }
    // console.log(new Person)
    // 女人  构造函数   继承  想要 继承 Person
    function Woman() {
 
    }
    // Woman 通过原型来继承 Person
    // 父构造函数（父类）   子构造函数（子类）
    // 子类的原型 =  new 父类  
    Woman.prototype = new Person()   // {eyes: 2, head: 1} 
    // 指回原来的构造函数
    Woman.prototype.constructor = Woman
 
    // 给女人添加一个方法  生孩子
    Woman.prototype.baby = function () {
      console.log('宝贝')
    }
    const red = new Woman()
    console.log(red)
    // console.log(Woman.prototype)
    // 男人 构造函数  继承  想要 继承 Person
    function Man() {
 
    }
    // 通过 原型继承 Person
    Man.prototype = new Person()
    Man.prototype.constructor = Man
    const pink = new Man()
    console.log(pink)

5.原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链

查找规则：

当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性
如果没有就查找它的原型（也就是__proto__指向的prototype 原型对象）
如果还没有就查找原型对象的原型（Object的原型对象）
依此类推一直找到Object 为止（null）
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上
eturn返回的值无效，所以不要写return
new Object() newDate()也是实例化构造函数

实例化执行过程：

创建新对象
构造函数this指向新对象
执行构造函数代码，修改this，添加新的属性
返回新对象

3.实例化成员&静态成员

通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员


        function Pig(name){
            this.name = name
        }

        const peiqi = new Pig('佩奇')
        const qiaozhi = new Pig('乔治')

静态成员

构造函数的属性和方法


        Pig.name = 'pink'
        Pig.sayHi = function(){
            console.log(this);
        }

5.内置构造函数

1.Object

Object是内置的构造函数，用于创建普通的对象

const user = new Object({name:'小米',age:19})

推荐使用字面量方式声明对象，而不是Object构造函数

学习三个常用的静态方法（静态方法就是只有构造函数Object可以调用）

作用：Object.keys静态方法获取对象中所有属性（键）

语法：

       const o = {uname:'pink',age:19}

        //获取所有属性名
        console.log(Object.keys(o));
        //获取所有属性值
        console.log(Object.values(o));

Object.assign方法用于对象拷贝

        //对象拷贝
        const oo = {}
        Object.assign(oo,o)
        console.log(oo);

        Object.assign(o,{gender:'女'})
        console.log(o);

2.Array

Array是内置的构造函数，用于创建数组

const arr = new Array(3,5)
console.log(arr)

创建数组建议使用字面量创建，不用Array构造函数创建

数组常见实例方法

方法	作用	说明
foreach	遍历数组	不返回数组，经常用于查找遍历数组元素
filter	过滤数组	返回新数组，返回的是筛选满足条件的数组元素
map	迭代数组	返回新数组，返回的是处理之后的数组元素，想要使用返回的新数组
reduce	累计器	返回累计处理的结果，经常用于求和

       const arr = [1,5,8]
        //没有初始值
        const total = arr.reduce(function(prev,current){
            return prev+current
        })
        console.log(total);

        //有初始值
        const total1 = arr.reduce(function(prev,current){
            return prev+current
        },10)
        console.log(total1);


        //箭头函数
        const total2 = arr.reduce((prev,current)=>prev+current,10)
        console.log(total2);

计算薪资案例

        const arr = [{
              name: '张三',
              salary: 10000
            	}, {
              name: '李四',
              salary: 10000
            	}, {
              name: '王五',
              salary: 20000
            	},
    ]

    const total = arr.reduce((prev,current)=>{
        return prev+current.salary
    },0)
    console.log(total);

Array常用方法

  const arr = ['red', 'blue', 'green']
    const re = arr.find(function (item) {
      return item === 'blue'
    })
    console.log(re)
 
    const arr1 = [
      {
        name: '小米',
        price: 1999
      },
      {
        name: '华为',
        price: 3999
      },
    ]
    // 找小米 这个对象，并且返回这个对象
    const mi = arr1.find(function (item) {
      // console.log(item)  //
      // console.log(item.name)  //
      console.log(111)
      return item.name === '华为'
    })
    // 1. find 查找
    // const mi = arr.find(item => item.name === '小米')
    // console.log(mi)
    // 2. every 每一个是否都符合条件，如果都符合返回 true ，否则返回false
    const arr2 = [10, 20, 30]
    const flag = arr1.every(item => item >= 20)
    console.log(flag)

案例：

   const spec = {size:'40cm*40cm',color:'黑色'}
        console.log(Object.values(spec));
        
        Object.values(spec).join('/')
        document.querySelector('div').innerHTML = Object.values(spec).join('/')

伪数组转化成真数组

静态方法Array.from()

  const lis = document.querySelectorAll('ul li')
  console.log(lis);

  //伪数组没有pop方法
  // lis.pop(2)

  const liss = Array.from(lis)
  console.log(liss);

3.String

   const str = 'pink,red,blue'
   const arr = str.split(',')
   console.log(arr);

 //字符串截取
 const str = '今天天气真好'
 console.log(str.substring(1,3));//天天[1,3)

const str = 'pink老师上课呢'
console.log(str.startsWith('pink'));

const str = '我是pink老师'
console.log(str.includes('pink'));

 const gift = '50g的茶叶,清洗球'
    // 1. 把字符串拆分为数组
    // console.log(gift.split(',')) [,]
    // 2. 根据数组元素的个数，生成 对应 span标签
    // const str = gift.split(',').map(function (item) {
    //   return `<span>【赠品】 ${item}</span> <br>`
    // }).join('')
 
    // // console.log(str)
    // document.querySelector('div').innerHTML = str
document.querySelector('div').innerHTML = gift.split(',').map(item => `<span>【赠品】 ${item}</span> <br>`).join('')

6.原型

1.原型对象

构造函数通过原型分配的函数是所有对象共享的

JS规定，每一个构造函数都有一个prototype属性，指向另一个对象，所以我们也称为原型对象

这个对象可以挂载函数，对象实例不会多次创建原型上的函数，节约内存

我们可以把那些不变的方法，直接定义在prototype对象上，这样所有的对象实例就可以共享这些方法

构造函数和原型对象中的this都指向实例化的对象

 function Star(uname,age){
            this.uname = uname
            this.age = age
        }

        Star.prototype.sing = function(){
            console.log('唱歌');
        }

        const ldh = new Start('刘德华',55)
        ldh.sing()//调用

2.constructor属性

该属性指向该原型对象的构造函数，简单理解，就是指向我的爸爸，我是有爸爸的孩子

 function Star(name){
            this.name = name
        }

        Star.prototype.sing = function(){
            console.log('唱歌');
        }

        Star.prototype.dance = function(){
            console.log('跳舞');
        }

        Star.prototype = {
            constructor:Star,
            sing:function(){
                console.log('唱歌');
            },
            dance:function(){
                console.log('跳舞');
            }
        }

3.对象原型

4.原型继承

        const People = {
            eyes:2,
            head:1
        }
        function Woman(){
        
        }
        Woman.prototype = People
        Woman.prototype.constructor = Woman

        const red = new Woman()
        console.log(red);


        function Man(){

        }
        Man.prototype = People
        Man.prototype.constructor = Man
        
        const pink = new Man()
        console.log(pink);

    // 继续抽取   公共的部分放到原型上
    // const Person1 = {
    //   eyes: 2,
    //   head: 1
    // }
    // const Person2 = {
    //   eyes: 2,
    //   head: 1
    // }
    // 构造函数  new 出来的对象 结构一样，但是对象不一样
    function Person() {
      this.eyes = 2
      this.head = 1
    }
    // console.log(new Person)
    // 女人  构造函数   继承  想要 继承 Person
    function Woman() {
 
    }
    // Woman 通过原型来继承 Person
    // 父构造函数（父类）   子构造函数（子类）
    // 子类的原型 =  new 父类  
    Woman.prototype = new Person()   // {eyes: 2, head: 1} 
    // 指回原来的构造函数
    Woman.prototype.constructor = Woman
 
    // 给女人添加一个方法  生孩子
    Woman.prototype.baby = function () {
      console.log('宝贝')
    }
    const red = new Woman()
    console.log(red)
    // console.log(Woman.prototype)
    // 男人 构造函数  继承  想要 继承 Person
    function Man() {
 
    }
    // 通过 原型继承 Person
    Man.prototype = new Person()
    Man.prototype.constructor = Man
    const pink = new Man()
    console.log(pink)