标签：color 标签元素 html SE background var css 属性

前端基础

编辑器的vscode插件安装

Auto Rename Tag 自动修改标签对插件
Chinese Language Pack 汉化包
HTML CSS Support HTML CSS 支持
Intellij IDEA Keybindings IDEA快捷键支持
Live Server 实时加载功能的小型服务器
open in browser 通过浏览器打开当前文件的插件
Prettier-Code formatter 代码美化格式化插件
Vetur VScode中的Vue工具插件
vscode-icons 文件显示图标插件
Vue3 snipptes 生成VUE模板插件
Vue language Features Vue3语言特征插件

HTML常见标签

w3school在线帮助文档：http://www.w3school.com.cn。

标题标签

标题标签一般用于在页面上定义一些标题性的内容，如新闻标题、文章标题等，有h1到h6六级标题：

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

段落标签

段落标签一般用于定义一些在页面上要显示的大段文字，多个段落标签之间实现自动分段的效果：

<body>
    <p>记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。</p>
    <p>工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。</p>
    <p>近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。</p>
</body>

换行标签

单纯实现换行的标签是br，如果想添加分隔线，可以使用hr标签：

<body>
        截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。<br>
        国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。<hr>
        中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>

列表标签

有序列表，分条列项展示数据的标签，其每一项前面的符号带有顺序特征：

<ol>
    <li>JAVA</li>
    <li>前端</li>
    <li>大数据</li>
</ol>

无序列表，分条列项展示数据的标签，其每一项前面的符号不带有顺序特征：

<ul>
    <li>JAVASE</li>
    <li>JAVAEE</li>
    <li>数据库</li>
</ul>

自定义列表，分条列项展示数据的标签

<dl>
    <dt>蔡徐坤</dt> //标题
    <dd>唱</dd>    //描述标题
    <dd>跳</dd>
    <dd>rap</dd>
</dl>

嵌套列表，列表和列表之前可以嵌套，实现某一项内容详细展示：

<ol>
    <li>
        JAVA
        <ul>
            <li>JAVASE</li>
            <li>JAVAEE</li>
            <li>数据库</li>
        </ul>
    </li>
    <li>前端</li>
    <li>大数据</li>
</ol>

超链接标签

点击后跳转链接标签，也叫作a标签：

href属性用于定义链接地址：
- href中可以使用绝对路径，以/开头，始终以一个固定路径作为基准路径作为出发点；
- href中也可以使用相对路径，不以/开头，以当前文件所在路径为出发点，./开头表示当前路径 ../表示上一层路径；
- href中也可以使用完整的URL；
target用于定义链接打开的方式：
- _blank 在新窗口中打开目标资源；
- _self 在当前窗口中打开目标资源；

<body>
   <a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a> <br>
   <a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br>
   <a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br>
</body>

多媒体标签

img(重点) 图片标签，用于在页面上引入图片：

src属性用于定义图片的连接。
title属性用于定义鼠标悬停时显示的文字。
alt属性用于定义图片加载失败时显示的提示文字。

<img src="img/logo.png"  title="尚硅谷" alt="尚硅谷logo" />

audio 用于在页面上引入一段声音，video 用于在页面上引入一段视频：

src属性用于定义目标声音资源。
autoplay属性用于控制打开页面时是否自动播放。
controls属性用于控制是否展示控制面板。
loop属性用于控制是否进行循环播放。

<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />

表格标签(重点)

常规表格：

table标签代表表格；
thead标签代表表头，可以省略不写；
tbody标签代表表体，可以省略不写，浏览器解析DOM时会自动添加；
tfoot标签代表表尾，可以省略不写；
tr标签代表一行；
td标签代表行内的一格；
th标签自带加粗和居中效果的td；

单元格跨行：

通过td的rowspan属性实现上下跨行

单元格跨列：

通过td的colspan属性实现左右的跨列

表单标签(重点)

表单标签，可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据主要的方式之一

提交的数据是表单类元素用户输入或者选择的数据

形式是以键值对的形式去收集的

以元素的name属性值为键

以元素的value属性值为值组成键值对

form标签：表单标签，其内部用于定义可以让用户输入信息的表单项标签。
- action属性：用于定义信息提交的服务器的地址。
- method属性：用于定义信息的提交方式。
  - get值： get方式提交，数据会缀到url后，以?作为参数开始的标识，多个参数用&隔开。
  - post值： post方式提交，数据会通过请求体发送，不会在缀到url后。
input标签：主要的表单项标签，可以用于定义表单项。
- name属性：用于定义提交的参数名。
- type属性：用于定义表单项类型。
  - text 文本框
  - password 密码框
  - submit 提交按钮
  - reset 重置按钮

<form action="http://www.atguigu.com" method="get">
        用户名 <input type="text" name="username" /> <br>
        密  码 <input type="password" name="password" /> <br>
        <input type="submit"  value="登录" />
        <input type="reset"  value="重置" />
</form>

常见表单项标签(重点)

单行文本框：

个性签名：<input type="text" name="signal"/><br/>

1681198354039

密码框：

密码：<input type="password" name="secret"/><br/>

1681198393831

单选框：

你的性别是：
<input type="radio" name="sex" value="boy" />男
<input type="radio" name="sex" value="girl" checked="checked" />女

1681198448345

name属性相同的radio为一组，组内互斥；
当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器；
设置checked="checked"属性设置默认被选中的radio，如果属性名和属性值一样的话，可以省略属性值，只写checked即可；

复选框：

你喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利

1681198540737

下拉框：

你喜欢的运动是：
<select name="sport">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>

1681199376475

下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项；
name属性在select标签中设置，value属性在option标签中设置；
option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值；
通过在option标签中设置selected="selected"属性实现默认选中的效果；

按钮：

<button type="button">普通按钮</button>  或    <input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>   或    <input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>  或    <input type="submit" value="提交按钮"/>

1681199471712

普通按钮：点击后无效果，需要通过JavaScript绑定单击响应函数；
重置按钮：点击后将表单内的所有表单项都恢复为默认值；
提交按钮：点击后提交表单；

隐藏域：

<input type="hidden" name="userId" value="2233"/>

通过表单隐藏域设置的表单项不会显示到页面上，用户看不到，但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。

多行文本框：

自我介绍：<textarea name="desc"></textarea>

1681199589613

textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

文件标签：

头像:<input type="file" name="file"/>

1681199672580

布局相关标签

div标签：俗称"块"，主要用于划分页面结构，做页面布局。

span标签：俗称"层"，可以用于划分元素范围，配合CSS做页面元素样式的修饰。

    <div style="width: 500px; height: 400px;background-color: cadetblue;">
        <div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;">
            <span style="color: blueviolet;">页面开头部分</span>
        </div> 
        <div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;">
            <span style="color: blueviolet;">页面中间部分</span>
        </div> 
        <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;">
            <span style="color: blueviolet;">页面结尾部分</span>
        </div> 
    </div>

1681200198741

特殊字符

CSS的使用

CSS 层叠样式表(英文全称：(Cascading Style Sheets) ，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，简单来说，美化页面。

css常用属性

CSS 背景

/*opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：*/

/*background-color 属性指定元素的背景色。*/
background-color: green; /*设置背景颜色为绿色*/
background-color: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */

/* background-image 属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。*/
background-image: url("paper.gif");/*设置页面的背景图像*/

/* background-repeat 默认情况下，background-image 属性在水平和垂直方向上都重复图像。*/
background-repeat: repeat-x; /*图像仅在水平方向重复*/
background-repeat: repeat-y; /*图像仅在垂直方向重复*/
background-repeat: no-repeat; /*只显示一次背景图像*/

/* background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动） */
background-attachment: fixed; /* 指定应该固定背景图像 */
background-attachment: scroll; /* 指定背景图像应随页面的其余部分一起滚动 */

/*background-position 属性设置背景图像的起始位置。 默认值：0% 0% or 左上角是 0% 0% or 左上角是 0 0 
值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

x% y%

xpos ypos
*/
background-position: value;

CSS 边框属性

/*border 属性是以下各个边框属性的简写属性：
border-width
border-style（必需）
border-color*/
/* 实例 */
p {
  border: 5px solid red;
}
/*
border-style属性:
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。*/

/*border-radius 属性用于向元素添加圆角边框：
	length	定义圆角的形状。	
	  %	    以百分比定义圆角的形状。
*/
border-radius:25px;
border-radius:10%;

css文本属性

/*color 属性用于设置文本的颜色。颜色由以下值指定：
	颜色名 - 比如 "red"
	十六进制值 - 比如 "#ff0000"
	RGB 值 - 比如 "rgb(255,0,0)"*/
h1{
    color:red;
}
/* text-align 属性用于设置文本的水平对齐方式。
	文本可以左对齐或右对齐，或居中对齐。*/
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
/*垂直对齐
vertical-align 属性设置元素的垂直对齐方式。*/
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}
/*text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线*/
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
/*text-transform 属性用于指定文本中的大写和小写字母。*/
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
/*文字缩进 text-indent 属性用于指定文本第一行的缩进*/
p {
  text-indent: 50px;
}
/* 字母间距 letter-spacing 属性用于指定文本中字符之间的间距。*/
h1 {
  letter-spacing: 3px;
}
/* 行高 line-height 属性用于指定行之间的间距：*/
p.big {
  line-height: 1.8;
}
/*空白 white-space 属性指定元素内部空白的处理方式。*/
p {
  white-space: nowrap;
}
/*字间距 word-spacing 属性用于指定文本中单词之间的间距。*/
h1 {
  word-spacing: 10px;
}
/*text-shadow 属性为文本添加阴影。*/
h1 {
  text-shadow: 2px 2px 5px red;
}

CSS 动画

/*
@keyframes
animation-name   
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
*/

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

/*下面的例子将 "example" 动画绑定到 <div> 元素。动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从 "red" 逐渐改为 "yellow"：*/
/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;/*动画名称*/
  animation-duration: 4s; /*属性定义需要多长时间才能完成动画*/
}
OR
/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;  /*动画名称*/
  animation-duration: 4s;  /*属性定义需要多长时间才能完成动画*/
}

/*animation-delay 属性规定动画开始的延迟时间*/
animation-delay: 2s;

/*animation-iteration-count 属性指定动画应运行的次数*/
animation-iteration-count: 3;   /* 动画应运行3次 */
animation-iteration-count: infinite;  /*使用值 "infinite" 使动画永远持续*/

/*animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
 	normal - 动画正常播放（向前）。默认值
	reverse - 动画以反方向播放（向后）
	alternate - 动画先向前播放，然后向后
	alternate-reverse - 动画先向后播放，然后向前 */
animation-direction: reverse;

/*animation-timing-function 属性规定动画的速度曲线。
    ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
    linear - 规定从开始到结束的速度相同的动画
    ease-in - 规定慢速开始的动画
    ease-out - 规定慢速结束的动画
    ease-in-out - 指定开始和结束较慢的动画
    cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值*/
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

CSS引入方式

1、行内式：通过元素开始标签的style属性引入，语法为 style="样式名:样式值; 样式名:样式值;" ;

    <input 
        type="button" 
        value="按钮"
        style="
            display: block;     width: 60px; 
            height: 40px;       background-color: rgb(140, 235, 100); 
            color: white;       border: 3px solid green;
            font-size: 22px;    font-family: '隶书';
            line-height: 30px;  border-radius: 5px;
    "/>

缺点
- html代码和css样式代码交织在一起，增加阅读难度和维护成本；
- css样式代码仅对当前元素有效，代码重复量高，复用度低；

2、内嵌式：在head标签中通过style标签引入，这里要使用选择器确定样式的做作用位置：

<head>
    <meta charset="UTF-8">
    <style>
        /*选择器*/
        input {
            display: block;     width: 80px; 
            height: 40px;       background-color: rgb(140, 235, 100); 
            color: white;       border: 3px solid green;
            font-size: 22px;    font-family: '隶书';
            line-height: 30px;  border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮1"/> 
    <input type="button" value="按钮2"/> 
    <input type="button" value="按钮3"/> 
    <input type="button" value="按钮4"/> 
</body>

内嵌式样式需要在head标签中，通过一对style标签定义CSS样式；
CSS样式的作用范围控制要依赖选择器；
CSS的样式代码中注释的方式为 /* */；
缺点：
- 内嵌式虽然对样式代码做了抽取，但是CSS代码仍然在html文件中；
- 内嵌样式仅仅能作用于当前文件，代码复用度还是不够，不利于网站风格统一；

3、连接式/外部样式表：将CSS代码单独放入css样式文件，在head标签中通过link标签引入外部样式表：

可以在项目单独创建css样式文件，专门用于存放CSS样式代码。

在head标签中，通过link标签引入外部CSS样式即可。

<head>
    <meta charset="UTF-8">
    <link href="css/buttons.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <input type="button" value="按钮1"/> 
    <input type="button" value="按钮2"/> 
</body>

CSS样式代码从html文件中剥离，利于代码的维护。
CSS样式文件可以被多个不同的html引入，利于网站风格统一。

CSS选择器

1、元素选择器：

<head>
    <meta charset="UTF-8">
   <style>
    input {
        display: block;    width: 80px; 
        height: 40px;      background-color: rgb(140, 235, 100); 
        color: white;      border: 3px solid green;
        font-size: 22px;   font-family: '隶书';
        line-height: 30px; border-radius: 5px;
    }
   </style>
</head>
<body>
    <input type="button" value="按钮1"/> 
    <button>按钮5</button>
</body>

根据标签名确定样式的作用范围；
语法为： 元素名 {}；
样式只能作用到同名标签上，其他标签不可用；
相同的标签未必需要相同的样式，会造成样式的作用范围太大；

2、id选择器：

<head>
    <meta charset="UTF-8">
   <style>
    #btn1 {
        display: block;     width: 80px; 
        height: 40px;       background-color: rgb(140, 235, 100); 
        color: white;       border: 3px solid green;
        font-size: 22px;    font-family: '隶书';
        line-height: 30px;  border-radius: 5px;
    }
   </style>
</head>
<body>
    <input id="btn1" type="button" value="按钮1"/> 
    <input id="btn2" type="button" value="按钮2"/> 
    <input id="btn3" type="button" value="按钮3"/> 
    <input id="btn4" type="button" value="按钮4"/> 
    <button id="btn5">按钮5</button>
</body>

根据元素id属性的值确定样式的作用范围；
语法为： #id值 {}；
id属性的值在页面上具有唯一性，所有id选择器也只能影响一个元素的样式；
因为id属性值不够灵活，所以使用该选择器的情况较少；

3、class选择器：

<head>
    <meta charset="UTF-8">
   <style>
    .shapeClass {
        display: block;
        width: 80px; 
        height: 40px; 
        border-radius: 5px;
    }
    .colorClass{
        background-color: rgb(140, 235, 100); 
        color: white;
        border: 3px solid green;
    }
    .fontClass {
        font-size: 22px;
        font-family: '隶书';
        line-height: 30px;
    }
   </style>
</head>
<body>
    <input  class ="shapeClass colorClass fontClass"type="button" value="按钮1"/> 
    <input  class ="shapeClass colorClass" type="button" value="按钮2"/> 
    <input  class ="colorClass fontClass" type="button" value="按钮3"/> 
    <input  class ="fontClass" type="button" value="按钮4"/> 
    <button class="shapeClass colorClass fontClass" >按钮5</button>
</body>

根据元素class属性的值确定样式的作用范围；
语法为： .class值 {}；
class属性值可以有一个，也可以有多个，多个不同的标签也可以是使用相同的class值；
多个选择器的样式可以在同一个元素上进行叠加；
因为class选择器非常灵活，所以在CSS中，使用该选择器的情况较多；

4、后代选择器:

 /* 选择器1 选择器2组成的叫后代选择器  后期用的最多 */
    .container .list li{
      font-size: 40px;
    }
    .container .list .item{
      font-size: 60px;
    }

5、选择所有元素: *

/*选择所有元素 */
*{ 
    padding: 0;
    margin: 0;
}

6、子代选择器

/* 因为只能选择儿子，选其它的没有样式*/
.container>.son{
      border: 2px solid red;
}

7、选择 class 属性中同时有 name1 和 name2 的所有元素。

 /* 交集选择器 */
.container .list .item.single{
  background-color: skyblue;
}

8、并集选择器:选择并设置所有
样式和所有
元素的样式：

h1,p{ 
background-color:yellow;
}

伪类选择器

1.选择获得焦点的 input 元素。 :focus

2.选择活动链接。:active

3.选择鼠标指针位于其上的链接。:hover

4.选择所有未访问过的链接。:Link

a:active
{ 
background-color:yellow;
}
input:focus
{ 
background-color:yellow;
}
input:focus
{ 
background-color:yellow;
}
a:link
{ 
background-color:yellow;
}

CSS浮动

CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷。
文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

浮动的样式float常见值：

通过代码感受浮动的效果：

<head>
    <meta charset="UTF-8">
   <style>
    .outerDiv {
        width: 500px;
        height: 300px;
        border: 1px solid green;
        background-color: rgb(230, 224, 224);
    }
    .innerDiv{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        float: left;
    }
    .d1{
        background-color: greenyellow;
       /*  float: right; */
    }
    .d2{
        background-color: rgb(79, 230, 124);
         /*  float: right; */
    }
    .d3{
        background-color: rgb(26, 165, 208);
         /*  float: right; */
    }
   </style>
</head>
<body>
   <div class="outerDiv">
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
   </div> 
</body>

效果

flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局、行内元素也可以使用 Flex 布局。

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

.box{
  display: flex;
}
.box{
  display: inline-flex; /*行内元素/
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

flex属性默认值为`0 1 auto`

会根据flex指定的比例评分页面的宽

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

CSS定位

position 属性指定了元素的定位类型：

position 属性指定了元素的定位类型：

1、static 静态定位默认值
2、relative 相对定位相对的是盒子出生的位置左上角原点
3、absolute 绝对定位相对的是离他最近的定位的祖先级元素的左上角，如果一直没有找初始包含块
4、fixed 固定定位永远相对浏览器的视口的左上角

绝对定位(absolute)和固定定位(fixed) 都会完全脱离标准文档流
一旦完全脱离标准文档流，那么盒子就不再遵循标准文档流里面的规则了（块级行内行内块都是标准文档流的规则）
所有的盒子（元素）都可以设置宽高了，宽度也变为内容撑开的宽度

静态定位static，不设置的时候的默认值就是static，静态定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列：

<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: static;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

1681261602297

绝对定位 absolute ，通过 top left right bottom 指定元素在页面上的固定位置，定位后元素会让出原来位置，其他元素可以占用：

<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: absolute;
            left: 300px;
            top: 100px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

相对定位relative ，相对于自己原来的位置进行地位，定位后保留原来的站位，其他元素不会移动到该位置：

<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: relative;
            left: 30px;
            top: 30px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

固定定位fixed，始终在浏览器窗口固定位置，不会随着页面的上下移动而移动，元素定位后会让出原来的位置,其他元素可以占用：

<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: fixed;
            right: 30px;
            top: 30px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
        br*100+tab
</body>

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。

Margin(外边距) - 清除边框外的区域，外边距是透明的；
Border(边框) - 围绕在内边距和内容外的边框；
Padding(内边距) - 清除内容周围的区域，内边距是透明的；
Content(内容) - 盒子的内容，显示文本和图像；

1681262585852

    <head>
       <meta charset="UTF-8">
       <style>
        .outerDiv {
            width: 800px;
            height: 300px;
            border: 1px solid green;
            background-color: rgb(230, 224, 224);
            margin: 0px auto;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
            /* margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px;
            margin-left: 40px; */
            margin: 10px 20px 30px 40px;
           
        }
        .d1{
            background-color: greenyellow;
            /* padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px; */
            padding: 10px 20px 30px 40px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
       </style>
    </head>
    <body>
       <div class="outerDiv">
            <div class="innerDiv d1">框1</div>
            <div class="innerDiv d2">框2</div>
            <div class="innerDiv d3">框3</div>
       </div> 
    </body>

1681263265604

JavaScript

JS简介

JS起源

Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，遗留的速度问题，于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。ECMA-262 是正式的 JavaScript 标准。这个标准开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。这个标准由 ECMA 组织发展和维护。JavaScript 的正式名称是 "ECMAScript"。JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等。JS有如下特点：

脚本语言：JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释；
基于对象：JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言；
弱类型：JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型；
事件驱动：JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应；
跨平台性：JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持；

1.2 JS 组成部分

1681266220955

ECMA 及版本变化：

是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序语言,ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象；
ECMA-262第1版本质上跟网景的JavaScript 1.1相同；
ECMA-262第2版只是做了一些编校工作，并没有增减或改变任何特性；
ECMA-262第3版第一次真正对ECMAScript进行更新；
ECMA-262第4版是对这门语言的一次彻底修订；
ECMA-262第5版是ECMA-262第3版的小幅改进，于2009年12月3日正式发布；
ECMA-262第6版-ES6、于2015年6月发布。这一版包含了大概这个规范有史以来最重要的一批增强特性。但是并不是所有的浏览器都全面支持；
ECMA-262第7版也称为ES7或ES2016，于2016年6月发布；
ECMA-262第8版也称为ES8、ES2017，完成于2017年6月；
ECMA-262第9版也称为ES9、ES2018，发布于2018年6月；
ECMA-262第10版也称为ES10、ES2019，发布于2019年6月；
ECMA-262第11版，也成为ES11、ES2020，发布于2020年6月；
... ...

BOM编程：

BOM是Browser Object Model的简写，即浏览器对象模型；
BOM有一系列对象组成，是访问、控制、修改浏览器的属性和方法；
BOM没有统一的标准(每种客户端都可以自定标准)；
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象，通过各个对象的API操作组件行为的一种编程；

DOM编程：

简单来说，DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程；
document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在；
DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程；

JS的引入方式

1、内部脚本方式引入：

在页面中，通过一对script标签引入JS代码；
script代码放置位置有一定的随意性，一般放在head标签中；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小标题</title>
        <script>
            function suprise(){
                alert("Hello,我是惊喜")
            }
        </script>
    </head>
    <body>
        <button  onclick="suprise()">点我有惊喜</button>
    </body>
</html>

2、外部脚本方式引入：

内部脚本仅能在当前页面上使用，代码复用度不高；
可以将脚本放在独立的js文件中，通过script标签引入外部脚本文件；
一对script标签要么用于定义内部脚本，要么用于引入外部js文件，不能混用；
一个html文档中，可以有多个script标签；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小标题</title>
        <script src="js/button.js" type="text/javascript"></script>
    </head>
    <body>
        <button  onclick="suprise()">点我有惊喜</button>
    </body>
</html>

JS的数据类型和运算符

JS的数据类型

数值类型：数值类型统一为 number，不区分整数和浮点数。

var a = 1;
var b = 1.1;
var c = 3.6;

字符串类型：字符串类型为 string 和JAVA中的String相似，JS中不严格区分单双引号，都可以用于表示字符串。

var str1 = "abc";
var str2 = 'abc';

布尔类型：布尔类型为boolean 和Java中的boolean相似，但是在JS的if语句中，非空字符串会被转换为'真'，非零数字也会被认为是'真'。

var bool = true;
var bool = false;

引用数据类型：引用数据类型对象是Object类型，各种对象和数组在JS中都是Object类型。

//数组
int arrA = new Array[1,2,3,4,5,6];
int arrB = [1,2,3,4,5,6];

//对象
var obj = {
    name: 'chs',
    age: 21,
    gender: '男',
    eat:function(){
        console.log('吃饭');
    }
}
//对象
var objB = new Object( {
    name: 'chs',
    age: 21,
    gender: '男',
    eat:function(){
        console.log('吃饭');
    }
});

function类型：JS中的各种函数属于function数据类型。

function 方法名(形参表){
   // 方法体
}
//调用 -> 方法名(实参表)
var 方法名 = function(形参表){
    //方法体
}
//调用 -> 方法名(实参表)

//表达式：《变量与常量和运算符组成的式子》叫做表达式
//如果方法体内不写return 方法默认返回 undefined;

命名未赋值：js为弱类型语言，统一使用 var 声明对象和变量，在赋值时才确定真正的数据类型，变量如果只声明没有赋值的话,数据类型为undefined。

赋予NULL值：在JS中，如果给一个变量赋值为null，其数据类型是Object，可以通过typeof关键字判断数据类型。

JS的变量

JS中的变量具有如下特征：

1 、弱类型变量，可以统一声明成var；

2 、var声明的变量可以再次声明；

3 、变量可以使用不同的数据类型多次赋值；

4 、JS的语句可以以; 结尾，也可以不用;结尾；

5 、变量标识符严格区分大小写；

6 、标识符的命名规则参照JAVA；

7 、如果使用了一个没有声明的变量，那么运行时会报：uncaught ReferenceError: *** is not defined at index.html:行号:列号；

8 、如果一个变量只声明，没赋值，那么值是undefined；

9、js变量定义是有预解析的，实现效果变量提升；

10、定义的变量会作为window的属性对待；

JS的运算符

算数运算符： + - * / %

其中需要注意的是 / 和 %
- / 在除0时，结果是Infinity ，而不是报错；
- %在模0时，结果是NaN，意思为 not a number ，而不是报错；
NaN 不是一个数字但是它是一个数字

NaN六亲不认 NaN和任何东西运算都是NaN

NaN去做判断都是false

NaN去做判等都不等包括它自己

复合算数运算符： ++ -- += -= *= /= %=

符合算数运算符基本和JAVA一致,同样需要注意 /=和%=
- 在/=0时，结果是Infinity ，而不是报错；
- 在%=0时，结果是NaN，意思为 not a number ，而不是报错；

关系运算符： > < >= <= == === !=

需要注意的是 == 和 === 差别
- == 符号，如果两端的数据类型不一致，会尝试将两端的数据转换成number，再对比number大小。
  - '123' 这种字符串可以转换成数字；
  - true会被转换成1 ，false会被转换成0；
- === 符号，如果两端数据类型不一致，直接返回false，数据类型一致再比较是否相同。

逻辑运算符： || &&

几乎和JAVA中的一样，需要注意的是，这里直接就是短路的逻辑运算符，单个的 | 和 & 以及 ^ 是位运算符。

条件运算符：条件? 值1 : 值2

几乎和JAVA中的一样。

位运算符： | & ^ << >> >>>

和 java中的类似(了解)。

JS的流程控制和函数

JS分支结构

if结构：

这里的if结构几乎和JAVA中的一样，需要注意的是：
- if()中的非空字符串会被认为是true；空串是false
- if()中的非零数字会被认为是true；0和NaN都是false
- if()中如果是对象*（引用）数据默认就是true 即时是空的对象{} 也是true,只要是地址值
- if()中如果是null或者undefined 为false
- 如果==判断两个对象直接判断地址值地址值一样就是true,不一样就是false

if('false'){// 非空字符串 if判断为true
    console.log(true)
}else{
    console.log(false)
}
if(''){// 长度为0字符串 if判断为false
    console.log(true)
}else{
    console.log(false)
}
if(1){// 非零数字 if判断为true
    console.log(true)
}else{
    console.log(false)
}
if(0){
    console.log(true)
}else{
    console.log(false)
}

var obj = {}
if(obj){}

var a
if(a){}else{}

switch结构：

Scanner类
prompt输入的东西默认都是字符串

var monthStr=prompt("请输入月份","例如:10 ");
var month= Number.parseInt(monthStr)
switch(month){
    case 3:
    case 4:
    case 5:
        console.log("春季");
        break;
    case 6:
    case 7:
    case 8:
        console.log("夏季");
        break;
    case 9:
    case 10:
    case 11:
        console.log("秋季");
        break;
    case 1:
    case 2:
    case 12:
        console.log("冬季");
        break;
    default :
        console.log("月份有误")
}

JS循环结构

while结构：

/* 打印99 乘法表 */
var i = 1;
while(i <= 9){
    var j = 1;
    while(j <= i){
        document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
        j++;
    }
    document.write("<br/>");
    i++;
}

for循环：

/* 打印99 乘法表 */
for(  var i = 1;i <= 9; i++){
    for(var j = 1;j <= i;j++){
        document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
    }
    document.write("<br/>");
}

foreach循环：

迭代数组时，和java不一样。
- 括号中的临时变量表示的是元素的索引，不是元素的值。
- ()中也不在使用: 分隔，而是使用 in 关键字。

var cities =["北京","上海","深圳","武汉","西安","成都"]
document.write("<ul>")
for(var index in  cities){
    document.write("<li>"+cities[index]+"</li>")
}
document.write("</ul>")

JS函数声明

JS中的方法，多称为函数，函数的声明语法和JAVA中有较大区别。

函数说明
- 函数没有权限控制符。
- 不用声明函数的返回值类型，需要返回在函数体中直接return即可，也无需void关键字。
- 参数列表中，无需数据类型。
- 调用函数时，实参和形参的个数可以不一致。
- 声明函数时需要用function关键字。
- J函数没有异常列表。
代码

/* 语法1 ：function 函数名 (参数列表){函数体} */
function sum(a, b){
    return a+b;
}
var result =sum(10,20);
console.log(result)
/* 语法2 ： var 函数名 = function (参数列表){函数体}  */
var add = function(a, b){
    return a+b;
}
var result = add(1,2);
console.log(result);

JS的对象和JSON

/* json是一个数据格式 专门用于网络交互 
	之前json没出来 全部都是使用 xml 可扩展的标记语言（html）
    xml传递数据比较臃肿，而且占带宽，效率很低
    所以xml用于网络交互就给淘汰掉了*/
    /* xml后期就是用来做配置文件的 */

/*
    xml淘汰就是因为json的出现
    json本质上是一个字符串，字符串当中只有我们需要的数据，没有其它额外的杂质
    json的在前端的原型就是数组或者对象
    java当中json的原型就是集合或者对象/map 
*/

JS声明对象的语法

语法1，通过new Object()直接创建对象：

var person =new Object();
// 给对象添加属性并赋值
person.name="张小明";
person.age=10;
person.foods=["苹果","橘子","香蕉","葡萄"];
// 给对象添加功能函数
person.eat= function (){
    console.log(this.age+"岁的"+this.name+"喜欢吃:")
    for(var i = 0;i<this.foods.length;i++){
        console.log(this.foods[i])
    } 
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();

语法2，通过 {}形式创建对象：

var person ={
    "name":"张小明",
    "age":10,
    "foods":["苹果","香蕉","橘子","葡萄"],
    "eat":function (){
        console.log(this.age+"岁的"+this.name+"喜欢吃:")
        for(var i = 0;i<this.foods.length;i++){
            console.log(this.foods[i])
        } 
    }
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();

JSON格式

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。它基于ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率，简单来说,JSON 就是一种字符串格式，这种格式无论是在前端还是在后端，都可以很容易地和对象之间进行转换，所以常用于前后端数据传递。

JSON的语法：var str="{'属性名':'属性值','属性名':{'属性名':'属性值'},'属性名':['值1','值1','值3']}" ；
JSON字符串一般用于传递数据，一般都是用对象的属性表示数据，所以在此不研究对象的函数，只看对象的属性；
通过JSON.parse()方法可以将一个JSON串转换成对象；
通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串；

/* 定义一个对象 */
var person={
    'name':'张小明',
    'age':20,
    'girlFriend':{
        'name':'铁铃',
        'age':23
    },
    'foods':['苹果','香蕉','橘子','葡萄'],
    'pets':[
        {
            'petName':'大黄',
            'petType':'dog'
        },
        {
            'petName':'小花',
            'petType':'cat'
        }
    ]
}
/* 将对象转换成JSON字符串 */
var personStr =JSON.stringify(person)

/* 将一个JSON串转换为对象 */
var person =JSON.parse(personStr);

1681292306466

JS常见对象

数组

创建数组的四种方式：

new Array() 创建空数组
new Array(5) 创建数组时给定长度
new Array(ele1,ele2,ele3,... ... ,elen); 创建数组时指定元素值
[ele1,ele2,ele3,... ... ,elen]; 相当于第三种语法的简写

数组的常见API见： https://www.runoob.com/jsref/jsref-obj-array.html

Boolean对象

boolean常见API见：https://www.runoob.com/jsref/jsref-obj-boolean.html

Date对象

Date常见API见：https://www.runoob.com/jsref/jsref-obj-date.html

Math

Math常见API见：https://www.runoob.com/jsref/jsref-obj-math.html

Number

Number常见API见：https://www.runoob.com/jsref/jsref-obj-number.html

String

String常见API见：https://www.runoob.com/jsref/jsref-obj-string.html

事件的绑定

什么是事件

HTML 事件可以是浏览器行为，也可以是用户行为。当这些一些行为发生时，可以自动触发对应的JS函数的运行。JS的事件驱动指的就是行为触发代码运行的这种特点。

常见事件(***)

鼠标事件： https://www.runoob.com/jsref/dom-obj-event.html

键盘事件： https://www.runoob.com/jsref/dom-obj-event.html

表单事件： https://www.runoob.com/jsref/dom-obj-event.html

事件的绑定

通过属性绑定：

    <head>
        <meta charset="UTF-8">
        <title>小标题</title>      
        <script>
            function testDown1(){console.log("down1")}
            function testDown2(){console.log("down2")}
            function testFocus(){console.log("获得焦点")}
            function testBlur(){ console.log("失去焦点") }
            function testChange(input){console.log("内容改变");console.log(input.value);}
            function testMouseOver(){ console.log("鼠标悬停") }
            function testMouseLeave(){ console.log("鼠标离开")}
            function testMouseMove(){ console.log("鼠标移动")}
        </script>
    </head>

    <body>
        <input type="text" 
        onkeydown="testDown1(),testDown2()"
        onfocus="testFocus()" 
        onblur="testBlur()" 
        onchange="testChange(this)"
        onm ouseover="testMouseOver()" 
        onm ouseleave="testMouseLeave()" 
        onm ousemove="testMouseMove()" 
         />
    </body>

通过事件属性绑定函数，在行为发生时会自动执行函数。
一个事件可以同时绑定多个函数。
一个元素可以同时绑定多个事件。
方法中可以传入 this对象，代表当前元素。

事件的触发

行为触发：

发生行为时触发；

DOM编程触发：

通过DOM编程，用代码触发，执行某些代码相当于发生了某些行为。

    <head>
        <meta charset="UTF-8">
        <title>小标题</title>    
        <script>
            // 页面加载完毕事件,浏览器加载完整个文档行为
            window.onload=function(){
                var in1 =document.getElementById("in1");
                // 通过DOM编程绑定事件
                in1.onchange=testChange
            }
            function testChange(){
                console.log("内容改变")
                console.log(event.target.value);
            }
        </script>
    </head>
    <body>
        <input id="in1" type="text" />
    </body>

DOM编程

什么是DOM编程

简单来说：DOM(Document Object Model)编程就是使用document对象的API，完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程。

document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在；
根据HTML代码结构特点，document对象本身是一种树形结构的文档对象；

上面的代码生成的树如下：

DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程：

1681270260741

dom树中节点的类型：
- node 节点，所有结点的父类型：
  - element 元素节点，node的子类型之一，代表一个完整标签；
  - attribute 属性节点，node的子类型之一，代表元素的属性；
  - text 文本节点，node的子类型之一，代表双标签中间的文本；

获取页面元素的几种方式

在整个文档范围内查找元素结点

功能	API	返回值
根据id值查询	document.getElementById(“id值”)	元素节点
根据标签名查询	document.getElementsByTagName(“标签名”)	元素节点数组
根据name属性值查询	document.getElementsByName(“name值”)	元素节点数组
根据类名查询	document.getElementsByClassName("类名")	元素节点数组
指定 CSS 选择器查找 HTML 元素数组	document.querySelectorAll("css选择器")	元素节点数组
匹配指定 CSS 选择器的一个元素	document.querySelector()	元素节点

var listNode = document.getElementById("list")  //返回节点

var liNodes = document.getElementsByClassName("item") // .item  返回元素节点数组

var liNodes2 = document.getElementsByTagName("li")   //返回元素节点数组

var liNodes = document.querySelectorAll(".item")  //返回元素节点数组

var liNodes = document.querySelector("#box")  //#box 返回元素节点

在具体元素节点范围内查找子节点

功能	API	返回值
查找子标签	element.children	返回子标签数组
查找第一个子标签	element.firstElementChild	标签对象
查找最后一个子标签	element.lastElementChild	节点对象

console.log(listNode.children); //获取某个节点的所有子元素节点数组
console.log(listNode.firstElementChild);//获取某个节点的第一个子元素节点
console.log(listNode.lastElementChild);//获取某个节点的最后一个子元素节点

查找指定子元素节点的父节点

功能	API	返回值
查找指定元素节点的父标签	element.parentElement	标签对象

//parentElement 是当前节点的父元素。它永远是一个 DOM 元素 对象，或者 null

查找指定元素节点的兄弟节点

功能	API	返回值
查找前一个兄弟标签	node.previousElementSibling	标签对象
查找后一个兄弟标签	node.nextElementSibling	标签对象

var liNode1 = liNode2.previousElementSibling
var liNode3 = liNode2.nextElementSibling

操作元素属性值

属性操作

需求	操作方式
读取属性值	元素对象.属性名
修改属性值	元素对象.属性名=新的属性值

<body>
  <div class="container">
    <input type="text" name="name" id="name" />
  </div>
  <script>
    // 1. 获取元素
  var nameNode = document.querySelector('#name'); // 获取id为name的元素
  // 2. 给元素绑定事件
  nameNode.value = 'hello'; // 给元素赋值
  </script>
</body>

内部文本操作

需求	操作方式
获取或者设置标签体的文本内容	element.innerText
获取或者设置标签体的内容	element.innerHTML

liNode.innerHTML = "<h2>你好</h2>" //会识别HTML标签样式  -->     你好
liNode.innerText = "<h2>你好</h2>" //不会识别HTML标签样式 --> <h2>你好</h2>

增删元素

对页面的元素进行增删操作

API	功能
document.createElement(“标签名”)	创建元素节点并返回，但不会自动添加到文档中
document.createTextNode(“文本值”)	创建文本节点并返回，但不会自动添加到文档中
element.appendChild(ele)	将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle)	将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)	用新节点替换原有的旧子节点
element.remove()	删除某个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script>
    /* 
    1 获得document  dom树
        window.document
    2 从document中获取要操作的元素
        1）直接获取
            var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
            var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
            var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
            var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
        2）间接获取
            var cs=div01.children // 通过父元素获取全部的子元素
            var firstChild =div01.firstElementChild  // 通过父元素获取第一个子元素
            var lastChild = div01.lastElementChild   // 通过父元素获取最后一个子元素
            var parent = pinput.parentElement  // 通过子元素获取父元素
            var pElement = pinput.previousElementSibling // 获取前面的第一个元素
            var nElement = pinput.nextElementSibling // 获取后面的第一个元素
    3 对元素进行操作
        1）操作元素的属性   元素名.属性名=""
        2）操作元素的样式   元素名.style.样式名=""  样式名"-" 要进行驼峰转换
        3）操作元素的文本   元素名.innerText   只识别文本
                         元素名.innerHTML   同时可以识别html代码 
     	4）增删元素
            var element =document.createElement("元素名") // 创建元素
            父元素.appendChild(子元素)               // 在父元素中追加子元素
            父元素.insertBefore(新元素,参照元素)     // 在某个元素前增加元素
            父元素.replaceChild(新元素,被替换的元素) // 用新的元素替换某个子子元素
            元素.remove()                            // 删除当前元素
    */
   function addCs(){
        // 创建一个新的元素
        // 创建元素
        var csli =document.createElement("li") // <li></li>
        // 设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        // 将子元素放入父元素中
        var cityul =document.getElementById("city")
        // 在父元素中追加子元素
        cityul.appendChild(csli)
   }
   function addCsBeforeSz(){
        // 创建一个新的元素
        // 创建元素
        var csli =document.createElement("li") // <li></li>
        // 设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        // 将子元素放入父元素中
        var cityul =document.getElementById("city")
        // 在父元素中追加子元素
        //cityul.insertBefore(新元素,参照元素)
        var szli =document.getElementById("sz")
        cityul.insertBefore(csli,szli)
   }
   function replaceSz(){
        // 创建一个新的元素
        // 创建元素
        var csli =document.createElement("li") // <li></li>
        // 设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        // 将子元素放入父元素中
        var cityul =document.getElementById("city")
        // 在父元素中追加子元素
        //cityul.replaceChild(新元素,被替换的元素)
        var szli =document.getElementById("sz")
        cityul.replaceChild(csli,szli)
   }
   function removeSz(){
        var szli =document.getElementById("sz")
        // 哪个元素调用了remove该元素就会从dom树中移除
        szli.remove()
   }
   function clearCity(){      
        var cityul =document.getElementById("city")
        /* var fc =cityul.firstChild
        while(fc != null ){
            fc.remove()
            fc =cityul.firstChild
        } */
        cityul.innerHTML=""
        //cityul.remove()
   }   
   </script>
</head>
<body>
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="gz">广州</li>
    </ul>
    <hr>
    <!-- 目标1 在城市列表的最后添加一个子标签  <li id="cs">长沙</li>  -->
    <button onclick="addCs()">增加长沙</button>
    <!-- 目标2 在城市列表的深圳前添加一个子标签  <li id="cs">长沙</li>  -->
    <button onclick="addCsBeforeSz()">在深圳前插入长沙</button>
    <!-- 目标3  将城市列表的深圳替换为  <li id="cs">长沙</li>  -->
    <button onclick="replaceSz()">替换深圳</button>
    <!-- 目标4  将城市列表删除深圳  -->
    <button onclick="removeSz()">删除深圳</button>
    <!-- 目标5  清空城市列表  -->
    <button onclick="clearCity()">清空</button>
</body>
</html>

BOM编程

什么是BOM

BOM是Browser Object Model的简写，即浏览器对象模型；
BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法；
BOM没有统一的标准(每种客户端都可以自定标准)；
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象，通过各个对象的API操作组件行为的一种编程；
BOM编程的对象结构如下:
- window 顶级对象，代表整个浏览器窗口；
  - location属性，代表浏览器的地址栏；
  - history属性，代表浏览器的访问历史；
  - screen属性，代表屏幕；
  - navigator属性，代表浏览器软件本身；
  - document属性，代表浏览器窗口目前解析的html文档；
  - console属性，代表浏览器开发者工具的控制台；
  - localStorage属性，代表浏览器的本地数据持久化存储；
  - sessionStorage属性，代表浏览器的本地数据会话级存储；

window对象的常见属性(了解)

window对象常见属性见：https://www.runoob.com/jsref/obj-window.html

window对象的常见方法(了解)

window对象常见方法见：https://www.runoob.com/jsref/obj-window.html

通过BOM编程控制浏览器行为演示

三种弹窗方式：

    <head>
        <meta charset="UTF-8">
        <title>小标题</title>      
        <script>
           function testAlert(){
                //普通信息提示框
                window.alert("提示信息");
           }
           function testConfirm(){
                //确认框
                var con =confirm("确定要删除吗?");
                if(con){
                    alert("点击了确定")
                }else{
                    alert("点击了取消")
                }
           }
           function testPrompt(){
                //信息输入对话框
                var res =prompt("请输入昵称","例如:张三");
                alert("您输入的是:"+res)
           }
        </script>
    </head>

    <body>
        <input type="button" value="提示框" onclick="testAlert()"/> <br>
        <input type="button" value="确认框" onclick="testConfirm()"/> <br>
        <input type="button" value="对话框" onclick="testPrompt()"/> <br>
    </body>

页面跳转：

    <head>
        <meta charset="UTF-8">
        <title>小标题</title>
        <script>
           function goAtguigu(){
                var flag =confirm("即将跳转到尚硅谷官网,本页信息即将丢失,确定吗?")
                if(flag){
                    // 通过BOM编程地址栏url切换
                    window.location.href="http://www.atguigu.com"
                }
           }          
        </script>
    </head>
    <body>
        <input type="button" value="跳转到尚硅谷" onclick="goAtguigu()"/> <br>
    </body>

通过BOM编程实现会话级和持久级数据存储

会话级数据：内存型数据，是浏览器在内存上临时存储的数据，浏览器关闭后数据失去，通过window的sessionStorge实现；
持久级数据：磁盘型数据，是浏览器在磁盘上持久存储的数据，浏览器关闭后数据仍在，通过window的localStorge实现；
在F12开发者工具的应用程序栏，可以查看数据的状态；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function saveItem(){
            // 让浏览器存储一些会话级数据
            window.sessionStorage.setItem("sessionMsg","sessionValue")
            // 让浏览器存储一些持久级数据
            window.localStorage.setItem("localMsg","localValue")
            console.log("haha")
        }
        function removeItem(){
            // 删除数据
            sessionStorage.removeItem("sessionMsg")
            localStorage.removeItem("localMsg")
        }
        function readItem(){
            console.log("read")
            // 读取数据
            console.log("session:"+sessionStorage.getItem("sessionMsg"))
            console.log("local:"+localStorage.getItem("localMsg"))
        }
    </script>
</head>
<body>
    <button onclick="saveItem()">存储数据</button>
    <button onclick="removeItem()">删除数据</button>
    <button onclick="readItem()">读取数据</button>
</body>
</html>

正则表达式

正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

语法:

var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;   //modifiers是修饰符

修饰符：

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找数字、字母及下划线。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词：

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp对象方法：

方法	描述
compile	在 1.5 版本中已废弃。编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。
toString	返回正则表达式的字符串。

支持正则的String的方法：

方法	描述
search	检索与正则表达式相匹配的值。
match	找到一个或多个正则表达式的匹配。
replace	替换与正则表达式匹配的子串。
split	把字符串分割为字符串数组。

正则表达式使用

匹配

// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 在目标字符串中查找匹配的字符，返回匹配结果组成的数组
var resultArr = str.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 数组内容是o
console.log("resultArr[0]="+resultArr[0]);

替换

注意：这里是使用字符串对象来调用方法。

// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
var newStr = str.replace(reg,'@');
// 只有第一个o被替换了，说明我们这个正则表达式只能匹配第一个满足的字符串
console.log("str.replace(reg)="+newStr);//Hell@ World!
// 原字符串并没有变化，只是返回了一个新字符串
console.log("str="+str);//str=Hello World!

全文查找

// 目标字符串
var targetStr = 'Hello World!';
// 使用了全局匹配的正则表达式
var reg = /[A-Z]/g;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为2
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现可以获取到“H”和“W”
for(var i = 0; i < resultArr.length; i++){
  console.log("resultArr["+i+"]="+resultArr[i]);
}

忽略大小写

//目标字符串
var targetStr = 'Hello WORLD!';
//使用了忽略大小写的正则表达式
var reg = /o/gi;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为2
console.log("resultArr.length="+resultArr.length);
//遍历数组，得到'o'和'O'
for(var i = 0; i < resultArr.length; i++){
  console.log("resultArr["+i+"]="+resultArr[i]);
}

元字符使用

var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java开头
var reg = /^Java/g;
console.log('reg.test(str01)='+reg.test(str01)); // false
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // true

var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java结尾
var reg = /Java$/g;
console.log('reg.test(str01)='+reg.test(str01)); // true
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // false

字符集合的使用

//n位数字的正则
var targetStr="123456789";
var reg=/^[0-9]{1,}$/;
var reg=/^\d+$/;
//或者 ： var reg=/^\d*$/;
var b = reg.test(targetStr);//true

//数字+字母+下划线，6-16位
var targetStr="HelloWorld";
var reg=/^[a-z0-9A-Z_]{6,16}$/;
var reg = /^\w{6,16}$/

var b = reg.test(targetStr);//true

常用正则表达式

需求	正则表达式
用户名	/^[a-zA-Z ][a-zA-Z-0-9]{5,9}$/
密码	/^[a-zA-Z0-9 _-@#& *]{6,12}$/
前后空格	/^\s+\|\s+$/g
电子邮箱	/^[a-zA-Z0-9 _.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/

标签：color,标签,元素,html,SE,background,var,css,属性
From： https://www.cnblogs.com/21CHS/p/18370525

html+css+js -SE

前端基础

编辑器的vscode插件安装

HTML常见标签

标题标签

段落标签

换行标签

列表标签

超链接标签

多媒体标签

表格标签(重点)

表单标签(重点)

常见表单项标签(重点)

布局相关标签

特殊字符

CSS的使用

css常用属性

CSS 背景

CSS 边框属性

css文本属性

CSS 动画

@keyframes 规则

CSS引入方式

CSS选择器

样式和所有 元素的样式：

伪类选择器

CSS浮动

flex布局

容器的属性

flex-direction属性

flex-wrap属性

justify-content属性

align-items属性

align-content属性

flex属性 默认值为0 1 auto

align-self属性

CSS定位

CSS盒子模型

JavaScript

JS简介

JS起源

1.2 JS 组成部分

JS的引入方式

JS的数据类型和运算符

JS的数据类型

JS的变量

JS的运算符

JS的流程控制和函数

JS分支结构

JS循环结构

JS函数声明

JS的对象和JSON

JS声明对象的语法

JSON格式

JS常见对象

数组

Boolean对象

Date对象

Math

Number

String

事件的绑定

什么是事件

常见事件(***)

事件的绑定

事件的触发

DOM编程

什么是DOM编程

获取页面元素的几种方式

在整个文档范围内查找元素结点

在具体元素节点范围内查找子节点

查找指定子元素节点的父节点

查找指定元素节点的兄弟节点

操作元素属性值

属性操作

内部文本操作

增删元素

对页面的元素进行增删操作

BOM编程

什么是BOM

样式和所有
元素的样式：

flex属性默认值为`0 1 auto`