前端三件套知识点

admin管理员组

文章数量:1547217

html

常用插件

文件比较

常用快捷键

ctrl +f 查找当前页面的内容

!后按table 或者 html:5 代码模板快捷键

alt+b调试快捷键

ctrl+k ctrl+t改颜色主题

alt+shift+a注释快捷键

html基础概念

一、 WEB标准的概念及组成

WEB标准不是某一个标准，而是一系列标准的集合。

网页主要由三部分组成：结构、表现和行为。

结构：html
表现：css
行为：script

html------hyper text markup language 超 文本 标记 语言
css----cascading style sheet 层叠 样式 表
js-----javascript 第二阶段

对应的标准也分三方面：

结构化标准语言主要包括HTML(超文本标记语言)和XML（可扩展标记语言，主要用于传输数据），
hyper text markup language

表现标准语言主要包括CSS，

行为标准主要包括文档对象模型DOM、ECMAScript等。

W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C（ World Wide Web Consortium 万维网联盟）制定的结构和表现的标准;

结构：(html)

表现：(css)

ECMA（欧洲电脑场商联合会）制定的行为的标准;

行为 （DOM ,ECMAScript）

二、 HTML及相关概念的介绍

​ HTML 指的是 超文本标记语言 (Hyper Text Markup Language)

​ XHTML 指可扩展超文本标记语言（EXtensible HyperText Markup Language）。

​ 并没有引入任何新标签或属性，唯一得区别是语法，XHTML有着更严格语法
​ （比如：不允许大写字母，标签必须闭合等严格规范。）

​ XHTML2 不向前兼容，乃至不兼容之前得 HTML。
​ 它是一种全新得语言，赤条条来去无牵挂。这着实是一场灾祸

​ 超文本应用技术事变组（WHATWG）。

​ WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

​ HTML5 指的是HTML的第五次重大修改（第5个版本）
​ 2004年提出草案，2008年正式发布；
​ HTML5 既支持疏松语法，也支持 XHTML 1.0 版本的严格语法。

html结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pygILHJ6-1649006857347)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220221144316227.png)]

所有标签在body里面写 有开始和结束标签

html语法

1.写在<>中的第一个单词叫做标记，标签，元素。

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”内。

3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

4.空标记没有结束标签,但是必须关闭，用“/”代替。

5.一个属性可以有多个属性值，多个属性值之间用空格隔开，不分先后顺序。

例如

叫标记，也叫标签，也叫元素
class 属性/类

标签

常规标记（双标记） （标签 标记 元素）

<标签 属性=“属性值” 属性=“属性值 属性值”></标签>

空标记（单标记）

<标签 属性=“属性值” 属性=“属性值”/>

标题标签

段落标签

* 段落§

段落文本内容

标识一个段落(段落与段落之间有段间距) 语义化标签

斜体标签

空格标签

* 空格 ( ) 
（所占位置没有一个确定的值,这与当前字体字号浏览器都有关系）

加粗标签

行内标签

  <!-- <span>我们的displa值inline 并且不能设置宽高 由字体大小 长度决定 只能
       设置左右margin 和左右padding</span> -->

超链接标签

超链接锚点

<!-- 超链接锚点 -->
    <a href="#one">星期一</a>
    <a href="#two">星期二</a>
    <a href="#three">星期三</a>
    <a href="#four">星期四</a>
    <a href="#five">星期五</a>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <a name="one">锅包肉</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="two">红烧肉</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="three">红烧排骨</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="four">小鸡炖蘑菇</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a name="five">火锅</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

9）超链接的应用

语法：

<a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片</a>

属性：target 页面打开方式
属性值：_blank 新窗口打开 ；  _self 当前窗口打开

<a href="#" target="_blank">新页面打开</a> 
<a href="#">链接</a>   空链接

拓展：

定义书签：<a href="#box">第一处</a>
                 <a name="box">我在这^_^</a>
邮箱跳转：<a href="mailto:906823104@qq">906823104@qq</a>

其他标签

<hr/>一条横线

<br/>强制换行

小结1

一、 WEB标准的概念及组成

WEB标准不是某一个标准，而是一系列标准的集合。

网页主要由三部分组成：结构、表现和行为。

html------hyper  text   markup   language    超 文本 标记 语言
css----cascading   style   sheet    层叠  样式  表
js-----javascript   第二阶段

对应的标准也分三方面：

结构化标准语言主要包括HTML(超文本标记语言)和XML（可扩展标记语言，主要用于传输数据），
hyper   text   markup   language

表现标准语言主要包括CSS，

行为标准主要包括文档对象模型DOM、ECMAScript等。

W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C（ World Wide Web Consortium 万维网联盟）制定的结构和表现的标准;

结构：(html)

表现：(css)

ECMA（欧洲电脑场商联合会）制定的行为的标准;

行为 （DOM ,ECMAScript）  

二、 HTML及相关概念的介绍

 HTML 指的是 超文本标记语言 (Hyper Text Markup Language)

 XHTML  指可扩展超文本标记语言（EXtensible HyperText Markup Language）。

 并没有引入任何新标签或属性，唯一得区别是语法，XHTML有着更严格语法
（比如：不允许大写字母，标签必须闭合等严格规范。）

 XHTML2  不向前兼容，乃至不兼容之前得 HTML。
 它是一种全新得语言，赤条条来去无牵挂。这着实是一场灾祸

 超文本应用技术事变组（WHATWG）。

 WHATWG网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

 HTML5 指的是HTML的第五次重大修改（第5个版本）
 2004年提出草案，2008年正式发布；
 HTML5 既支持疏松语法，也支持 XHTML 1.0 版本的严格语法。

三、拓展：

补充快捷键知识： 
1）方向键加shift可选中文本
2）复制Ctrl+c
3) 粘贴Ctrl+v
4) 剪切Ctrl+x
5) 关闭ctrl+w
6) delete向后删除
7）撤销Ctrl+z  
8) 输入法的切换：Ctrl+空格 
9) F2 重命名

四、 调试工具 -浏览器

1）PC端调试工具的使用 -浏览器

   测试浏览器(chrome,firefox)

   先了解，后期我们写页面了会经常使用，边用边学。

五、HTML5 基本结构 （新建一个html文件时默认有的那些代码）

<!DOCTYPE html>   文档类型声明头，DOCTYPE大小写均可
<html>  开始html文件的书写
	<head>  头部
		<meta charset="utf-8" />  字符编码	
		<title></title>  页面标题
	</head>
	<body></body>  网页主体
</html>

六、 HTML基本语法

常规标记（双标记） （标签 标记 元素）

<标签 属性=“属性值” 属性=“属性值    属性值”></标签>

空标记（单标记）

<标签 属性=“属性值” 属性=“属性值”/>

说明：

1.写在<>中的第一个单词叫做标记，标签，元素。

2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”内。

3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。

4.空标记没有结束标签,但是必须关闭，用“/”代替。 <meta     />

5.一个属性可以有多个属性值，多个属性值之间用空格隔开，不分先后顺序。

七、 HTML常用标记

1）文本标题（h1-h6）

<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6> 
2） 段落(p)

<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距) 
语义
3）空格 ( )
&nbsp;（所占位置没有一个确定的值,这与当前字体字号浏览器都有关系）
4）换行(br)
<br /> 换行是一个空标记(强制换行)
5）加粗
加粗有两个标记
1.<b>加粗内容</b>    bold
2.<strong>加粗内容</strong>  有突出强调之意
6）倾斜
倾斜标记
1.<em></em>
2.<i></i>        图标icon   italic

插入图片

在网上复制图片

8）插入图片
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
注:所要插入的的图片必须放在站点下 
路径：绝对路径、相对路径；
绝对路径：不需要参照物，放哪里都能找到，可以跨盘符（本地的图片不可跨电脑）；---本地，网络
相对路径：当前文件为参照物，从当前文件出发去寻找目标文件，不可跨盘符；
*相对路径的写法：
1)当 当前文件与目标文件在同一目录下，直接书写  目标文件（文件名+扩展名）；
2)当 当前文件与目标文件所处的文件夹在同一目录下，写法如下：
     文件夹名/目标文件全称+扩展名； 
3)当 当前文件所处的文件夹和目标文件在同一目录下，写法如下：
      ../目标文件文件名+扩展名；
../../  出两层的情况
title的作用: 在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，
HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的
alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，
它会直接输出在原本加载图片的地方。
width  图片宽度  height  图片高度
为了保证图片不发生变形，width和height最好只写一个；

当图片加载不出来时，显示alt的属性值

列表

三种：有序ol,无序ul,自定义dl

无序ul

属性type=“square（实心方块）/circle(空心圆）/disc(实心圆）”

有序ol

属性type=“1/a/A/i/I” start=“数字”

自定义dl

dt最好只写一个 类似于名词

dd类似于解释

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2mdUqP7H-1649006857365)(https://s2.loli/2022/02/22/oRfJvUeAjOQdGmS.png)]

表格

bgcolor="表格的背景色"
cellspacing="单元格与单元格之间的间距"
cellpadding="单元格与内容之间的间距"
水平对齐方式：align="left/center/right"

快捷方式 table>tr*2>td*2

 <table width="200" height="200" border="1">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

<table width="200" height="200" border="1" cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

<table width="200" height="200" border="1" cellpadding="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

<table width="200" height="200" border="1" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <td align="right">1</td>
            <td bgcolor="pink">2</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

行列合并

合并行

<p>合并行</p>
    <p>rowspan="所要合并的单元格的行数"合并行 上下合并</p>
    <table width="200" height="200" border="1" cellspacing="0" cellpadding="0">
        <tr align="center">
            <td rowspan="2">1</td>
            <td>2</td>
        </tr>
        <tr align="center">
            <td>4</td>
        </tr>
    </table>

合并列

<p>合并列</p>
    <p>colspan="所要合并的单元格的列数"合并列 左右合并</p>
    <table width="200" height="200" border="1" cellspacing="0" cellpadding="0">
        <tr align="center">
            <td colspan="2">1</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

表单

placeholder 给文本框提示 html5新增 把字放在框里 删不掉
value 给文本框定义值 删的掉
checked 默认
disabled 禁用

<body>
    <form action="">
        <!-- 用户名:<input type="text"> -->
        <label for="userName">用户名</label>
        <input name="userName" id="userName" type="text" placeholder="请输入用户名">
        <!-- placeholder 给文本框提示 html5新增 把字放在框里 删不掉-->
        <!-- value 给文本框定义值 删的掉-->

        <label for="password">密码</label>
        <input name="password" id="password" type="password">

        <br />

        <!-- 单选按钮 -->
        <label for="sex">性别</label>
        <input type="radio" name="sex" id="sex" checked>男
        <input type="radio" name="sex" id="sex">女

        <!-- 
        checked 默认
        disabled 禁用
        -->

        <br />

        <!-- 复选按钮 -->
        <label for="hobby">爱好：</label>
        <input type="checkbox" name="hobby" id="hobby" checked>吃饭
        <input type="checkbox" name="hobby" id="hobby" checked>睡觉
        <input type="checkbox" name="hobby" id="hobby" disabled>打游戏
        <input type="checkbox" name="hobby" id="hobby">敲代码
        <input type="checkbox" name="hobby" id="hobby">篮球赛

        <br />

        <input type="button" value="按钮">
        <br />
        <input type="reset" value="重置按钮">
        <br />
        <input type="submit" value="提交按钮">
        <br />
        <button>我是按钮</button>
        <br />
        <!-- 下拉菜单 -->
        <select>
            <option selected>宁波</option>
            <option>大连</option>
            <option>北京</option>
            <option>上海</option>
        </select>

        <br />
        <!-- 文本域 -->
        <!-- style="resize: none;"禁止拖动 -->
        <textarea cols="20" rows="5" style="resize: none;" placeholder="备注"></textarea>
    </form>
</body>

小结2

8）插入图片
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
注:所要插入的的图片必须放在站点下 
路径：绝对路径、相对路径；
绝对路径：不需要参照物，放哪里都能找到，可以跨盘符（本地的图片不可跨电脑）；---本地，网络
相对路径：当前文件为参照物，从当前文件出发去寻找目标文件，不可跨盘符；
*相对路径的写法：
1)当 当前文件与目标文件在同一目录下，直接书写  目标文件（文件名+扩展名）；
2)当 当前文件与目标文件所处的文件夹在同一目录下，写法如下：
     文件夹名/目标文件全称+扩展名； 
3)当 当前文件所处的文件夹和目标文件在同一目录下，写法如下：
      ../目标文件文件名+扩展名；
../../  出两层的情况
title的作用: 在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，
HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的
alt的作用:alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，
它会直接输出在原本加载图片的地方。
width  图片宽度  height  图片高度
为了保证图片不发生变形，width和height最好只写一个；


9）超链接的应用

语法：

<a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片</a>

属性：target 页面打开方式
属性值：_blank 新窗口打开 ；  _self 当前窗口打开

<a href="#" target="_blank">新页面打开</a> 
<a href="#">链接</a>   空链接

拓展：

定义书签：<a href="#box">第一处</a>
                 <a name="box">我在这^_^</a>
邮箱跳转：<a href="mailto:1342802646@qq">1342802646@qq</a>


10）列表(ul,ol,dl)
HTML中有三种列表，分别是：无序列表，有序列表，自定义列表
*无序列表
无序列表组成：
<ul>
<li></li>
<li></li>
．．．．．．
</ul>
属性 type="square(实心方块)/circle（空心圆）/disc（实心圆）" 
*有序列表
有序列表组成：
<ol>
<li></li>
<li></li>
．．．．．．
</ol>
属性 type="1/a/A/i/I"   start="数字"
*自定义列表
<dl>
     <dt>名词</dt>
     <dd>解释</dd>
     ．．．．．．
</dl>
一个dl里面只能有一个dt，可以有多个dd；
多应用于图文混排；



11） 数据表格的作用及组成
 作用：显示数据
<table  width="value"  height="value"  border="value"  bgcolor="value" cellspacing="value"  cellpadding="value">
<tr>
    <td></td>
    <td></td>
</tr>
</table>
注：1个tr表示一行;一个td表示一列(一个单元格)
*数据表格的相关属性

1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bgcolor="表格的背景色"
5）cellspacing="单元格与单元格之间的间距"
6）cellpadding="单元格与内容之间的间距" 
7）水平对齐方式：align="left/center/right";（写在td身上）

8)合并单元格属性：
colspan=“所要合并的单元格的列数"合并列;
rowspan=“所要合并单元格的行数”合并行;


12）表单
作用：收录用户信息
form 表单框
<form  name="biaodan1"  method="get/post"></form>
1）文本框
<input type="text" value="默认值" name="表单名"/>
2)密码框
<input type="password"  placeholder=“占位符” />
3）单选框/单选按钮
<input type="radio" name="ral" />男
<input type="radio" name="ral" checked="checked" />女(默认选中)
4）复选框/复选按钮
<input type="checkbox" name="like" />游泳
<input type="checkbox" name="like" disabled="disabled" />敲代码 (禁用)
当属性值与属性名相同时，属性值可以省略不写
5）按钮
<input type="reset" value="重置"/>
<input type=" submit" value="提交"/>
<input type=" button" value="普通按钮"/>
6）下拉菜单
<select>
<option></option>
<option selected></option>
</select>
7）多行文本域<textarea  cols="20"   rows="5"  style="resize:none;"></textarea>

html5新增 表单

	<form>    
		<p>html5新增</p>

        <!-- 在提交表单时，会自动验证邮箱地址 -->
        <input type="email" name="" id="">
        <button type="submit">提交</button>

        <br />

        <!-- 在提交表单时，会自动验证url域的值 -->
        <input type="url" name="user_url">
        <button type="submit">提交</button>

        <br />

        <!-- number类型用于应该包含数值的输入域 -->
        <input type="number" name="points" min="1" max="30" step="5">

        <br />
    </form>

<form>
    	<!-- date - 选取日、月、年
        month - 选取月、年
        week - 选取周和年
        time - 选取时间（小时和分钟）
        datetime-local - 选取时间、日、月、年（本地时间） -->
     	Date:<input type="date" /><br />
        month:<input type="month" /><br />
        week:<input type="week" /><br />
        time:<input type="time" /><br />
        datetime-local:<input type="datetime-local" /><br />

        <!-- search 类型用于搜索域，比如站点搜索或 Google 搜索。 -->
    	<input type="search" name="" id=""><br />
</form>

作业要点

th 头部

css

css简介
cascading style sheets 层叠样式表
WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
用来表现XHTML或者XML等样式文件的计算机语言。
1998年5月21日由W3C正式推出的css2.0
目前推荐遵循的是W3C发布的CSS3.0

/*选择符{声明；声明；}*/
/*选择符{属性：属性值；属性：属性值；}*/
/* 说明：
1）每个CSS样式由两部分组成，即选择符(选择器)和声明，声明又分为属性和属性值；
2）声明必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。  
5）在书写样式过程中，空格、换行等操作不影响属性显示。 --> */

样式建立

样式建立-外部样式

外部样式的建立及调用

<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即 
<head>与</head>之间。

样式建立-内部样式

内部样式：
    语法：
    <style type="text/css">
        /*css语句*/
    </style>
    注：使用style标记创建样式时，最好将该标记写在<head></head>标签内;

样式建立-内联样式

样式表的优先级

!important 优先级永远最高的
内联样式的优先级高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高 （覆盖的原理）。

css选择器

选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素

常用的选择符有八种：

1.基本选择符：类型选择符div{},id选择符#id{},class选择符.class{}

2.复合选择符：通配符，群组选择符，包含选择符，指定选择符，伪类选择符

基本选择符

类型选择符

id选择符

class选择符

复合选择符

通配符

群组选择符

包含选择符

指定选择符

伪类选择符

伪类选择器(伪类选择符)

语法 ：

​ a:link{属性：属性值;}超链接的初始状态;
​ a:visited{属性：属性值;}超链接被访问后的状态;
​ a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
​ a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;

说明：

​ 1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，推荐顺序为：
​ a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效（覆盖问题）；

​ 2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color:red;} a:hover{color:green;}
表示超链接的三种状态都相同，只有鼠标划过变颜色。

鼠标划过：

链接四种状态：

总结1

1、css简介

cascading style sheets    层叠样式表
WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
用来表现XHTML或者XML等样式文件的计算机语言。
1998年5月21日由W3C正式推出的css2.0
目前推荐遵循的是W3C发布的CSS3.0

2、样式的建立:内部样式 外部样式 和 内联样式
实例化三属性：width  height  background
 
3、CSS语法

选择符{属性：属性值；属性：属性值;} 
div{width:200px;}

说明：
1）每个CSS样式由两部分组成，即选择符(选择器)和声明，声明又分为属性和属性值；
2）声明必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。  
5）在书写样式过程中，空格、换行等操作不影响属性显示。 
 
内部样式：

语法：
 
<style type="text/css">
	/*css语句*/
</style>

注：使用style标记创建样式时，最好将该标记写在<head></head>标签内;


4、外部样式的建立及调用

a:外部样式表的创建.
b:外部样式表的导入

<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。 

3) 内联样式表（行间样式，行内样式，嵌入式样式）

语法：<标签  style="属性：属性值; 属性:属性值;"></标签>

5、样式表的优先级

内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高 （覆盖的原理）。

6、CSS选择符（选择器）

选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.
常用的选择符有八种：
基本选择符：类型选择符（div{}），id选择符#id{}，class选择符.class{}，
复合选择符：通配符，群组选择符，包含选择符，指定选择符，伪类选择符。

1） 元素选择符/类型选择符（element 选择器)

语法：元素名称{属性：属性值；} 
说明：
a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。
b)所有的页面元素都可以作为选择符;
body,html

用法：
a) 如果想改变某个元素得默认样式时，可以使用类型选择符；
b) 当统一文档某个元素的显示效果时，可以使用类型选择符；

2) id选择器

语法：#id名{属性：属性值;} 
说明：
a）当我们使用id选择符时，应该为每个元素定义一个id属性，
如：<div id="box"></div>
b）id选择符的语法格式是“#”加上自定义的id名
如：#box{width:300px; height:300px;}
c)  起名时要取英文名，不能用关键字：(所有的标记div p  span html head 和属性 type  name  id  class都是关键字)
如：head标记
d）一个id名称只能对应文档中一个具体的元素对象，
因为id只能定义页面中某一个唯一的元素对象。
e) 最大的用处：创建网页的外围结构。

3）class选择器（类选择符/选择器）
语法：.class名{属性：属性值;}
说明：
a）当我们使用类选择符时，应先为每个元素定义一个类名称，
b）类选择符的语法格式是："如：<div class="top"></div>   .top
c)当一个标签有多个class名时，用一个class属性即可，名字之间用空格隔开，不分先后顺序

用法：class选择符更适合定义一类样式；

4)*通配符
语法：*{属性：属性值；}
说明：通配符的写法是“*”，其含义就是所有html元素。
用法：常用来重置样式(清空默认样式、间距)。

5）群组选择器（并集）
语法：选择符1，选择符2，选择符3{属性：属性值;}
#top,#news,div,#bottom,.nav{width:960px; margin:0 auto;}
说明：当有多个选择符应用相同的样式时，可以使用群组选择符。
居中：群组选择符{margin:0 auto;}
清间距：p,h1,h2,h3,a,img,input{ padding:0; margin:0;}

6） 包含选择器（子集）
语法：选择符1  选择符2{属性：属性值;}
#nav .box{background:black; height:60px;}
.box  div{}    .box  #nav{}     div  p{}    div  .box{}     div   #nav{}
说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;

7）指定选择符（交集）
语法：div.box{width:200px;}
class名为box的div标签
说明：相当于交集，同时满足两个条件才会被选中；

8） 伪类选择器(伪类选择符)
语法 ：
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;

说明：
1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，推荐顺序为：
a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效（覆盖问题）；
2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color:red;}     a:hover{color:green;} 
      表示超链接的三种状态都相同，只有鼠标划过变颜色。 

选择符权重

选择符的权重

​ css中用四位数字表示权重，权重的表达方式如：0，0，0，0
​ 类型选择符的权重为 0001
​ class选择符的权重为 0010
​ id选择符的权重为 0100
​ 内联样式的权重为 1000
​ 伪类选择符的权重为 0010 a:hover{} 10
​ 包含选择符的权重：为各选择符的权中之和（仅用于包含选择符之间的比较）
​ #header div .box{} 100+1+10=111

列表

list-style 列表符号

list-style:none;  去掉列表符号

ul{list-style-type:square/circle/disc/none;}  

ul{list-style-position:inside/outside;}    li的里和外

li{ list-style-image:url(images/list.jpg);}

background

关于背景的css声明
1、背景颜色
语法：选择符{background-color:颜色值;}
2、背景图片的设置
语法：background-image：url(背景图片的路径及全称)；
说明：
网页上有两种图片形式：插入图片、背景图；
插入图片：属于网页内容，也就是结构，以内容的形式呈递。
背景图：属于网页的表现，主要用来装饰页面。
3、背景图片的显示原则
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满容器；
3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。
4、背景图片平铺属性
语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }
no-repeat:不平铺 repeat：平铺（默认值）repeat-x：横向平铺 repeat-y ：纵向平铺
5、背景图片的位置
语法：选择符{background-position:水平方向 垂直方向;}
水平方向上的对齐方式（left/center/right）或具体数值
垂直方向上的对齐方式(top/center/bottom)或具体数值
用英文关键字时，方向可以对调；top right。只要有数字就不能对调。
只写一个值，第二个默认是center。

例1

例2

简写

背景属性的缩写语法：background:属性值1 属性值2 属性值3；
背景缩写：background:#f60 url（背景图片的路径及全称） no-repeat center top；
注意：背景定位的两个值要挨着，并且顺序不能颠倒。

背景固定

background-attachment: fixed;

文字大小

CSS font-family字体大合集

二、CSS核心属性 

A、关于文本的css声明
1、文本大小：{font-size:value;}
　　例：div{font-size：12px；}
  div{font-size：14px；}


说明：
1） 属性值为数值时，必须给属性值加单位，属性值为0时除外。
拓展：
2） 单位还可以是pt，pt是绝对单位，在dpi是96的情况下，9pt=12px,12pt=16px。
3） 单位还可以是em，1em叫一个字节,默认情况下，1em=16px,0.75em=12px;


px
px是pixel缩写，是基于像素的单位.在浏览网页过程中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768下，则只占约1/10。所以如果在定义字体大小时，使用px作为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变“小”（自然长度单位），甚至会看不清，影响浏览。 

em
em：即％，是相对单位，是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。，一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小。
在一个页面上给定了一个父元素的字体大小,这样就可以通过调整一个元素来成比例的改变所有元素大小.它可以自由缩放,比如用来制作可伸缩的样式表。

pt
PT是point(磅)缩写，是一种固定长度的度量单位,大小为1/72英寸。如果在web上使用pt做单位的文字，字体的大小在不同屏幕（同样分辨率）下一样，这样可能会对排版有影响，但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时，pt作为一个自然长度单位就方便实用了：比如Word中普通的文档都用“宋体 9pt”，标题用“黑体 16pt”等等，无论电脑怎么设置，打印出来永远就是这么大。


4)使用关键字(不是绝对相等的)
xx-small   =  9px
x-small    =  11px
small       =  13px
medium     =  16px  
large      =  19px
x-large    =  23px
xx-large   =  27px


以 medium 作为基础参照，
xx-small：相当于medium 3/5 ，
x-small: 相当于medium 3/4        (h6)，
small: 相当于medium 8/9           (h5)，
medium: 相当于medium 1         (h4)，
large: 相当于medium 6/5           (h3)，
x-large: 相当于medium 3/2        (h2)，
xx-large: 相当于medium 2/1      (h1)

谷歌浏览器识别最小字体为12px;

2、文本颜色：{color:颜色值;}

#f7f7f7-------背景
#3e3e3e-----正文
#909090-----浅色文本
#999
#ccc------边框
#eee------背景

3、文本字体：{font-family:"中文字体1"，字体2，字体3；}

说明：浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字
体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；

当字体是中文字体时，需加双引号；
当英文字体中有空格时，需加双引号如（“Times New Roman”）
当英文字体只有一个单词组成是不加双引号；如：（Arial）；

Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.

系统字体所在位置：C:\Windows\Fonts

4、加粗：{font-weight:bolder(更粗)、lighter（更细）/bold（加粗）/normal（常规）/100-900;} 

说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的
字体变形，

一般
500常规字体
600-900加粗字体
100-400变细（常规）
bold  加粗
100  变细

h1-h6{font-weight:normal}


5、倾斜：font-style：italic(倾斜)/normal（常规显示）;
   i,em{ font-style:normal;}

文字简写

10、文字属性简写：font:12px（字号）/100px（行高） “宋体”;

​ font属性的简写：

​ 说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)

​ 顺序: font-style font-weight font-size / line-height font-family

​ (1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。

​ (2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时

​ 才起作用,你没有设定font-weight , font-style,他们会使用缺省值（默认值）。

​ 11、字间距{letter-spacing:value;}控制英文字母和汉字的字距。（英文字母和字母）

​ 12、词间距{word-spacing:value;}控制英文单词词距。（通用于英文词和词之间的间距）

首行缩进：{text-indent:value;}

说明：text-indent:2em;

1）text-indent可以取负值；

2）text-indent属性只对第一行起作用。

文本与行高

行高 line-height

说明：

1）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；

2. 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直方向居中对齐以上任意位置的定位；

3. 当单行文本的行高大于容器高时，可实现单行文本在容器中垂直方向居中对齐以下任意位置的定位。
   （IE6及以下版本存在浏览器兼容问题）

倍行高：{line-height:2;} 2倍 ，{line-height:1.5;}1.5倍；

注：当使用倍行高时，不加PX，指的是当前文字字号的倍数；

文本对齐方式

水平对齐方式{text-align:left/right/center/justify(两端对齐，存在一定的兼容性问题);}

垂直对齐

垂直对齐方式{vertical-align:top/bottom/middle;}

 vertical-align对    单元格显示方式：table-cell  的元素才会起作用.

 要实现上下垂直居中对齐，可以采用如下样式

display（元素类型的转换）:table-cell; /*按照单元格的样式显示元素*/

vertical-align:middle;   /*垂直居中对齐*/

垂直居中的两种方式

1.行高和容器高相等

height=line-height

2.上下垂直居中，按照单元格显示方式

display: table-cell;

vertical-align: middle; 

文本修饰

文本修饰：text-decoration:none/underline/overline/line-through/blink.(网景浏览器支持blink属性)
说明：
none:没有修饰

underline:添加下划线

overline:添加上划线

line-through:添加删除线

blink：闪烁

盒模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含：  外边距、边框、内边距、内容区，这就是盒模型。
        margin  border  padding  content(width  height)

1） padding的使用方法
  内边距：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。
  也称补白、填充。
  用法：
  1、用来调整内容在容器中的位置关系
  2、用来调整子元素在父元素中的位置关系。
  3、padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding值。（width height-----容积
  4、支持背景

 属性值的4种方式：
 	四值法：上   右   下   左 {padding:10px   20px   30px    40px;}
    三值法：上    右左    下  {padding:10px   20px   30px ;}
    二值法：上下    右左      {padding:10px   20px  ;}
    一值法：四个方向     padding:2px;/*定义元素四周填充为2px*/
    说明：可单独设置一方向填充（内边距），
    如：padding-top:10px; 
        padding-right:10px;
        padding-bottom:10px;
        padding-left:10px;

2） margin的使用方法
    边界：margin,在元素外边的空白区域，被称为外边距。
      
    属性值的4种方式： 
    四个值：上 右 下 左
    三个值：上 左右 下
    二个值：上下 左右
    一个值：四个方向 
      
    margin:0 auto;     /*定义元素上、下边界为0px，在浏览器中横向居中。
        
    说明：可单独设置单一方向边界，
    如： margin-top:10px;
        margin-right:10px;
        margin-bottom:10px;
        margin-left:10px;

border

border的使用方法 border:3px solid red; (1px solid #ccc)

边框border:线型（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;

solid:实线，dashed:线状虚线，dotted:点状虚线，double:双线(至少3px)，

border按功能分：

边框大小  border-width;

边框类型  border-style;

边框颜色  border-color;

border按方向分：

右边框 border-right；

左边框 border-left；

上边框 border-top；

下边框 border-bottom:

border 练习

浮动

float : left / rigth /none;

一直向左或向右，直到遇到父盒子边缘或者浮动盒子的边缘为止

浮动练习

清浮动

clear:both;清除浮动 （放在不想被浮动影响的盒子身上）

浮动练习2

继承

继承性是指指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性

定位

position 定位属性
一、语法：position：static /relative(相对)/absolute/fixed
取值：
1、static：默认值，无特殊定位，对象遵循HTML原则（标准流）；
2、relative ：相对定位，将依据right，top，left，bottom（相对自己定位）等属性在正常文档流中偏移位置；
3、absolute：绝对定位，将对象从文档流中脱离出来，使用left/right/top/bottom等属性相对其 相对定位（绝对定位）的父盒子 进行定位；如果不存在这样的父对象，则依据body对象；
4、fixed：固定定位，相对窗口定位；


各个定位的特点:

相对定位——相对自身（标准流里的位置）定位，跟父盒子毫无关系

绝对定位——
           子绝父相，
           如果父盒子没有相对定位，那么就相对body定位  

固定定位——相对窗口定位（如：返回顶部，定位在上方的导航）

标准流 —— static  默认

相对定位

相对自身（标准流里的位置）定位，跟父盒子毫无关系

绝对定位

子绝父相，

如果父盒子没有相对定位，那么就相对body定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xAM0f9eN-1649006857418)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220225111141997.png)]

固定定位

固定在上方中间

width: 1000px;
position: fixed;
top: 0;
left: 50%;
margin-left: -500px;/* width的一半 */

导航栏固定在上方，不会随页面下拉而改变位置

z-index

二、定位元素层叠属性：

z-index : auto |
表示一个元素在叠加顺序上的上下立体关系。
auto：默认值。遵从其父对象
number:无单位的整数值。可为负数
说明：
1）z-index值较大的元素将叠加在值小的元素之上，对于未指定此属性的定位元素，z-index值为正数的对象会在其之上，而z-index值为负数的对象在其之下。
2）这个属性适用于定位元素，用来确定定位元素在垂直于显示屏方向的层叠顺序，也就是说如果元素没有定位，设置这个属性是无效的。
3）如果两个元素z-index相同，那么按文档流顺序，后面的覆盖前面的。
4）如果两个元素没有设置z-index，一个定位一个没定位，那么定位的覆盖不定位的。
5）如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父盒子上方，
即使子元素的z-index比父盒子的小，也会在父盒子上方，如果父元素的z-index失效，那么子元素生效。

过渡

二、过渡  IE10+

transition：过渡属性  过渡所需时间   过渡动画函数  过渡延迟时间； 
transition：property  duration     timing-function   delay;

各个属性可以分开写，一次可以过渡多个属性：
-webkit-transition-property:background,width,height;
-webkit-transition-duration:1s,1s,1s;
-webkit-transition-timing-function:linear,linear,linear;
-webkit-transition-delay:1s,0s,2s;

-moz-transition-property:background,width,height;
-moz-transition-duration:1s,1s,1s;
-moz-transition-timing-function:linear,linear,linear;
-moz-transition-delay:1s,0s,2s;

-ms-transition-property:background,width,height;
-ms-transition-duration:1s,1s,1s;
-ms-transition-timing-function:linear,linear,linear;
-ms-transition-delay:1s,0s,2s;

-o-transition-property:background,width,height;
-o-transition-duration:1s,1s,1s;
-o-transition-timing-function:linear,linear,linear;
-o-transition-delay:1s,0s,2s;

transition-property:background,width,height;
transition-duration:1s,1s,1s;
transition-timing-function:linear,linear,linear;
transition-delay:1s,0s,2s;

过渡动画函数timing-function
ease  先快后慢，逐渐变慢
linear  匀速
ease-in  速度越来越快，称为渐显效果
ease-out  速度越来越慢，称为渐隐效果
ease-in-out  先加速再减速，称为渐显渐隐效果
cubic-bezier(.61,.17,.92,.1)  三次贝塞尔曲线
    
关于浏览器（内核） 前缀：
firefox(gecko)       -moz-
chrome(webkit)    -webkit-
IE(trident)             -ms-
opera(presto)       -o-

溢出

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值，内容不会被修剪，会出现在元素框外

hidden:内容会被修剪，并且其余内容不可见

scroll:内容会被修剪，但是浏览器会显示滚动条，以便查看其余内容

auto:如果内容会被修剪，则浏览器会显示滚动条，以便查看其余内容

inherit:规定应该从父元素继承overflow属性

文本溢出显示省略号

文本溢出：text-overflow:clip/ellipsis

clip:不显示省略号（...），而是简单的裁切

ellipsis:当对象内文本溢出时，显示省略标记

text-overflow属性仅是...，当文本溢出时是否显示省略标记，

并不具备其他的样式属性定义，要实现溢出时产生省略号的效果还需定义

1、容器宽度:width.value;

2、强制文本在一行内显示：white-space:nowrap;

3、溢出内容为隐藏:overflow:hidden;

4、溢出文本显示省略号:text-overflow:ellipsis

高度塌陷

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，

父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，

此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动

未设置浮动时 被撑开

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。

当为子元素设置浮动以后，子元素会完全脱离文档流，

此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动

解决办法

给父元素设置高度

或父盒子属性加上overflow: hidden;

万能的overflow

https://blog.csdn/qq_41638795/article/details/83304388

里面的小方块设置了margin-top: 20px; 发现整体下移了

为了只让小方块下移 增加overflow: hidden;

display

 1.inline 行内元素 元素会在一行内显示，超出屏幕宽度自动换行，
    不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
    如果要设置margin和padding属性,只能设置左右,不能设置上下
	可设置padding-bottom	
    示例元素：span,b,i,a,u,sub,sup,strong,em
    

2.block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，
    可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
    示例元素：div,h1-h6,ul,ol,dl,p


3、inline-block 行内块元素 与行内元素一样可以再一行内显示，而且可以设置宽高，
    可以设置margin和padding。
     示例元素：input,button,img


4.none 此元素不会被显示

透明度

opacity: 0.5; 数字范围0-1

filter: alpha(opacity = number);IE写法 数字1-100

结构伪类

结构伪类      IE9+ 

   E:first-child     作为父元素的第一个子元素的元素E
   E:last-child     作为父元素的最后一个子元素的元素E
   E:root     选择匹配元素E所在文档的根元素（多只html）
   E   F:nth-child(n)    选择父元素E的第n个子元素F
   E   F:nth-last-child(n)    选择元素E的倒数第n个元素F
   E:nth-of-type(n)    选择父元素内具有指定类型的第n个E元素
   E:nth-last-of-type(n)   选择父元素内具有指定类型的倒数第n个E元素
   E:first-of-type     选择父元素内具有指定类型的第1个E元素
   E:last-of-type     选择父元素内具有指定类型的最后一个E元素
   E:only-child     选择父元素内只包含一个子元素，且匹配为E元素
   E:only-of-type      选择父元素只包含一个同类型的子元素，且匹配为E元素
   E:empty    选择没有子元素的元素，而且该元素也不包含任何文本节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xZOT71Rr-1649006857432)(https://s2.loli/2022/02/28/K43PzsNxl12HEcR.png)]

正方体

https://wwwblogs/le220/p/7923210.html

三、3D变形：

一）浏览器支持情况：
Internet Explorer 10 和 Firefox 支持 3D 变形。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 变形（它只支持 2D 变形）。


二）变形类型：transform-style:preserve-3d

实现一些3D效果的时候，transform-style: preserve-3d是少不了的。
一般而言，该声明应用在3D变换的兄弟元素们的父元素上。

preserve-3d 放到父元素
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;


三）perspective：透视，视角，景深

写到父元素（舞台）
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
perspective: 1200px;


四）3D变形

3D位移
transform: translate3d(30px,30px,800px)
transform:translateZ(800px) translateX(30px) translateY(30px);
transform:translateZ(800px) translate(30px,30px);


3D旋转
transform：rotate3d（x,y,z,a）; 
 
transform：rotate3d（1,0,0,45deg）;
transform：rotateX（45deg）;

transform：rotate3d（0,1,0,45deg）;
transform：rotateY（45deg）;

transform：rotate3d（0,0,1,45deg）;
transform：rotateZ（45deg）;




3D缩放
scale3d 不能自己单独使用，需要配合其他变形一起使用才会有效果。
transform：scaleZ（5） rotateX（45deg）; ——是轴在缩放
transform：scale3d（1,1,5） rotateX（45deg）;

<!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>
        .all{
            height: 600px;
            background-color: pink;
            perspective: 2000px;/* 景深 */
            overflow: hidden;
        }
        .box{
            transform-style: preserve-3d;
            width: 200px;
            height: 300px;
            position: relative;
            margin: 100px auto;
            transition: all 2s linear 0s;
        }
        .all:hover .box{
            transform: rotate3d(1,0,1,360deg);
        }
        .box div{
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            color: white;
            position: absolute;
            top: 0;
            left: 0;
        }
        .box div:nth-child(1){
            background-color: lightblue;
            transform: rotateX(90deg) translateZ(100px);
        }
        .box div:nth-child(2){
            background-color: lightcoral;
            transform: rotateX(-90deg) translateZ(100px);
        }
        .box div:nth-child(3){
            background-color: lightgray;
            transform: rotateY(90deg) translateZ(100px);
        }
        .box div:nth-child(4){
            background-color: lightgreen;
            transform: rotateY(-90deg) translateZ(100px);
        }
        .box div:nth-child(5){
            background-color: lightslategray;
            transform: translateZ(100px);
        }
        .box div:nth-child(6){
            background-color: lightseagreen;
            transform: rotateY(180deg) translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="box">
            <div>上</div>
            <div>下</div>
            <div>左</div>
            <div>右</div>
            <div>前</div>
            <div>后</div>
        </div>
    </div>
</body>
</html>

盒子阴影

盒子阴影box-shadow

语法：
box-shadow:none | inset(阴影类型，内阴影，不写就是外阴影 x-offset（阴影水平偏移量） y-offset（阴影垂直偏移量） blur-radius（阴影模糊半径） spread-radius（阴影扩展半径） color（阴影颜色）)

翻转

五）、隐藏背面
backface-visibility: hidden;

层级选择符

层级选择符
1、后代选择器（E F） 包含选择器
2、子代选择器（E > F）其中E为父元素，F为子元素，一定是父子元素
3、相邻兄弟选择器（E+F） E和F是兄弟是同辈，F在E后面，并且相邻
4、通用选择器（E~F） E后面所有兄弟F 不包括E

渐变

一、渐变  IE10+

线性渐变linear-gradient
background-image：linear-gradient（方向，起始颜色，结束颜色）

处理兼容：
background-image：-webkit-linear-gradient（to top，red，yellow）
background-image：-moz-linear-gradient（to top，red，yellow）
background-image：-o-linear-gradient（to top，red，yellow）
background-image：-ms-linear-gradient（to top，red，yellow）
background-image：linear-gradient（to top，red，yellow）

方向可以使用角度（30deg）也可以使用关键字（to right等）；


多色线性渐变，只需在后面添加更多的颜色即可；
background-image：linear-gradient（to top，red，yellow，blue，green，orange）

自定义线性渐变
background-image：linear-gradient(
  to top,
  rgba(255,206,0,.5) 0%,
  rgba(255,255,0,.4) 10%,
  rgba(255,104,0,.6) 15%,
  rgba(255,0,255,.5) 20%,
  rgba(255,0,206,.8) 40%,
  rgba(255,0,200,.5) 50%,
  rgba(255,0,222,.9) 60%,
  rgba(255,123,0,.2) 80%,
  rgba(255,108,0,.5) 100%
  )




重复线性渐变
background-image：repeating-linear-gradient(
  to top,
  rgba(255,206,0,.5) 40px,
  rgba(255,255,0,.4) 80px
  )

径向渐变radial-gradient
background-image：radial-gradient（形状  at  圆心坐标，颜色）

background-image:radial-gradient(主要半径 次要半径 at 水平 垂直,red,yellow)
background-image:radial-gradient(50px 100px at 200px 250px,red,yellow)

background-image:radial-gradient(主次半径相等就是圆 at 水平 垂直,red,yellow)
background-image:radial-gradient(circle at right bottom,red,yellow)

background-image:radial-gradient(主次半径不相等是椭圆 at 水平 垂直,red,yellow)
background-image:radial-gradient(ellipse at top,red,yellow)

background-image:radial-gradient(圆心与中心重合,red,yellow)
background-image:radial-gradient(circle,red,yellow)

重复径向渐变
background-image：repeating-radial-gradient(
  to top,
  rgba(255,206,0,.5) 40px,
  rgba(255,255,0,.4) 80px
  )

动画

animation：动画名称 动画所需时间 动画播放方式 动画开始时间 循环次数 播放方向 播放状态 动画时间外属性

animation-name动画名称
    animation-duration动画所需时间---完成0%-100%动画所需时间
    animation-timing-function动画播放方式---同过渡
    step-start马上跳到动画每一结束帧的状态
animation-delay等待动画的时间
animation-iteration-count循环次数---默认为1，infinite循环播放
animation-direction:播放方向----默认normal，向前播放；alternate，播放次
数为偶数则向前播放，为奇数时向反方向播放；
animation-play-state:播放状态-----running播放和pause暂停
animation-fill-mode:动画时间外属性----forwards动画结束后保持最后状态；
backforwards会向元素应用动画样式时迅速应用动画初始值。

动画练习 跑步的小女孩

border-radius

二）圆角边框

border-radius
border-radius：20px;      
               四个角的圆角是一样的
border-radius：20px 30px;      
               top-left和bottom-right相等并取第一个值；
               top-right和bottom-left相等并取第二个值；
border-radius：20px 30px 40px;
         	   第一个值取top-left，
               第二个值top-right和bottom-left，
               第三个值bottom-right            
border-radius：20px 20px 30px 40px;
               第一个值取top-left，
               第二个值top-right，
               第三个值bottom-right，
               第四个值bottom-left 

默认值none，表示元素没有圆角；
如果要重置元素没有圆角，取值none并无效果，需要设置为0；

由于各浏览器厂商对border-radius的子属性解析不一样，造成了各浏览器下的派生子属性写法有所区别。



1)gecko内核
-moz-border-radius-topleft  左上角
-moz-border-radius-topright  右上角
-moz-border-radius-bottomright  右下角
-moz-border-radius-bottomleft  左下角
2）webkit内核
-webkit-border-top-left-radius  左上角
-webkit-border-top-right-radius  右上角
-webkit-border-bottom-right-radius  右下角
-webkit-border-bottom-left-radius  左下角
3）presto和trident内核
border-top-left-radius  左上角
border-top-right-radius  右上角
border-bottom-right-radius  右下角
border-bottom-left-radius  左下角

border-radius 的取值：
border-radius:水平圆角半径/垂直圆角半径；
只取一个值代表垂直水平相同；

border-radius:60px 40px 30px 20px / 30px 20px 10px 5px;
元素左上角是一个水平半径60px，垂直半径30px的不规则圆角；
右上角是一个水平半径40px，垂直半径20px的不规则圆角；
右下角是一个水平半径30px，垂直半径10px的不规则圆角；
左下角是一个水平半径20px，垂直半径5px的不规则圆角；


但分开设置元素各个顶角的圆角的水平和垂直半径圆角效果时，不需要“/”:
border-top-left-radius:10px 50px;
border-top-right-radius:20px 60px;

加上反而是一种错误的写法：
 border-top-left-radius:10px / 50px;
 border-top-right-radius:20px / 60px;



单个圆角：
border-radius:50px 0 0 0;
效果等同于：
-moz-border-radius-topleft:50px;
-webkit-border-top-left-radius:50px;
border-top-left-radius:50px;

html5

常用布局元素

<!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>
        section,header,nav,article,aside,footer{
            margin: 0;
            padding: 0;
        }
        section{
            width: 800px;
            height: 470px;
            background-color: lightgoldenrodyellow;
            margin: 0 auto;
        }
        header{
            width: 800px;
            height: 60px;
            background-color: yellow;
            line-height: 60px;
            text-align: center;
        }
        nav{
            width: 800px;
            height: 50px;
            background-color: pink;
            line-height: 50px;
            text-align: center;
        }
        article{
            width: 600px;
            height: 300px;
            background-color: orange;
            line-height: 300px;
            text-align: center;
            float: left;
        }
        aside{
            width: 200px;
            height: 300px;
            background-color: chartreuse;
            line-height: 300px;
            text-align: center;
            float: left;
        }
        footer{
            width: 800px;
            height: 60px;
            background-color: gray;
            line-height: 60px;
            text-align: center;
            clear: both;/* 清除浮动 */
        }
    </style>
</head>
<body>
    <section>
        <header>头部</header>
        <nav>导航</nav>
        <article>左边文章</article>
        <aside>侧边栏</aside>
        <footer>版权部分</footer>
    </section>
</body>
</html>

flex布局

https://www.runoob/w3cnote/flex-grammar.html

1 flex-direction属性

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

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

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2 flex-wrap属性

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

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

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

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

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

3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4 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：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5 align-items

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

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

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

6 align-content属性

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

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

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

项目的属性

以下6个属性设置在项目上

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

js

标签引入

<script type="text/javascript" src="js/firstjs.js"></script>

<div id="div1"></div>
<script type="text/javascript">
	alert("aaaa");
</script>

js显示输出

js语句

JavaScript语句是发给浏览器的命令

这些命令的作用是告诉浏览器要做的事情

js注释

单行 //

多行/**/

变量的命名

命名规则

1、Camel（骆驼）标记法  girlFriends

2、Pascal（帕斯卡）标记法  GirlFriends

3、匈牙利类型标记法  oGirlFriends



1、变量的命名，只能用数字、字母和下划线，且第一个不能是数字

2、JS是大小写敏感的，所以变量的命名是区分大小写

3、关键字和保留字也不要用在起名上

4、可以使用“$”和“_” 

变量

描述：

​ 变量就是一个符号，用来代表一个或一组数据

​ 特点：

​ 松散类型的，就是可以用来保存任何类型的数据

​ 注意：声明变量但是没有给他赋值的，返回undefind;

​ 变量名重新声明（变量名相同）后面会覆盖前面的

数据类型

1、undefined

​ 取值：undefined

​ 含义：当声明了变量，没有对变量进行赋值

​ 注意：包含了undefined值的变量与尚未定义的变量还是不一样的

2、null类型

​ 取值：null

​ 含义:表示一个空对象指针，因此如果定义了一个变量，想让这个变量将来用来保存对象，

​ 那么最好初始化为null

3、boolean类型

​ 取值：true，false

​ 含义：是或者不是*/

4、string类型 字符串

​ 取值：由0,1或者多个字符组成的“串”

​ 含义：代表一组字符

​ 用单引号【‘ ’】或者双引号【“ ”】表示string类型

​ 说明：单引号和双引号可以相互嵌套，例如：

​ 下面字符串是有效地*/

说明：（1）只使用字符的字符串，单引号和双引号没有区别

​ （2）在单引号包括的字符串中可以直接使用双引号

​ 在双引号包括的字符串中可以直接用单引号

​ （3）如果在双引号包括的字符串中用双引号，需要用反斜杠转义，注意是“\” ；

​ 同样在单引号包括的字符串中用单引号，也需要转义“\”

5、number类型

​ 取值：整数、浮点数（小数）、NaN、Infinity

​ 含义：代表一个有意义或者无意义的数字

​ 取值范围：

​ typeof 判断数据类型

NaN:

​ 含义：NaN=“Not-a-Number”，是数字类型，但不是一个数字

​ 任何两个NaN都是不相同的，所以“NaN==NaN”返回false

​ 判断方法：Number.isNaN() 判断一个数字是不是NaN

产生：将其他类型向Number类型转换时

​ Infinity：

​ 含义：无穷大

​ 判断方法：

​ Number.isFinite() 判断是否为有穷

​ === Infinity

​ 产生：超出 1.7976931348623157E+103088 的数值即为Infinity，

​ 小于 -1.7976931348623157E+103088 的数值为无穷小。

​ Infinity 有正负

//例如 ：

​ //Number.isFinite(Infinity); // false

​ // Number.isFinite(NaN); // false

​ // Number.isFinite(-Infinity); // false

​ // Number.isFinite(0); // true

​ // Number.isFinite(2e64); // true

​ // Number.isFinite(‘0’); // false,

​ //全局函数 isFinite(‘0’) 会返回 true

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sfi3l7Xi-1649006857458)(https://s2.loli/2022/03/03/SZHNtJQElk2hXIF.png)]

引用数据类型

引用数据类型

​ 一、object类型

​ 含义：ECMAScript中的对象，其实就是一组数据（属性）和功能（方法）的集合

​ 创建方法：属性和方法，都称为对象的成员

​ 定义一个空对象：

​ // var person={}; //字面量定义对象

​ // var person_1=new Object(); //通过new Object创建对象

二、数组（array）

​ 1、使用new Array创建数组：var arr=new Array（10）；//创建一个包含10

​ 2、使用数组字面量表示法：var arr1=[10];

​ 区别：[]和new array()在语法上唯一的区别是 new array可以直接设置

三、函数（Function)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X3M4fvUb-1649006857461)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220303135606276.png)]

函数

使用function来声明

​ functionName函数名（可选）

​ param1、param2参数列表

​

​ 形参和实参

​ 形参：定义函数时，规定的参数 （a,b）

​ 实参：函数调用时，传递的参数 （2,3）

​ 在函数调用时，实际上是把实参的值复制了一个副本给形参

​ 函数调用时传递的参数个数，不是必须与函数定义时传递的参数个数一致

函数调用时传递的参数个数，不是必须与函数定义时传递的参数个数一致

运算符

用于字符串的 + 运算符

+运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

如果字符串和数值类型相加，结果是将数值类型转换成字符串，然后显示

逻辑运算

&& 与

​ 表达式两边都是true，返回值是true，否则返回false

|| 或

​ 表达式两边都都是false 才返回false ，否则都返回true

！非 取反

三目运算

​ "?"前面的表达式符合条件返回true，返回“:”前面的值，否则会返回“:”后面的

条件语句

选择结构 
if (condition1) {
    操作1
} else if (condition2) {
    操作2
} else if (condition3) {
    操作3
} else {
    操作4
}

switch语句
        switch(表达式){
            case n:
            代码块
            break;
            case n:
            代码块
             break;
             default:
             默认代码块
        }

字符串对象

通过[index]获取对应位置的字符，第一个字符的index为0

通过charAt(index)获取对应位置的字符，第一个字符的index为0

通过charCodeAt(index)获取对应位置的字符编码(ASCII码)，第一个字符的index为0

字符串查找
indexOf
功能：从前向后在字符串中查找一个字符串
参数：substr表示想要查找的字符串
start表示查找的开始位置索引
返回值：如果找到，返回第一个匹配字符在原字符串中的索引，如果没有找到，返回-1

concat()将一个或多个字符串拼接起来，返回拼接得到新的字符串

slice(a,b)字符串截取
从索引a(包含)截取到索引b(不包含)，不改变原有字符串

substring()字符串截取
1、substring（a，b）输出一个字符串，
当其中只有一个参数时，会输出从a开始到结尾的string
两个参数的时候也是a(包含),b(不包含)
2、另外当a>b的情况时，系统会自动调整a,b的位置并输出
3、如b是负值，则直接输出为a之前的字符串

substr(index,length) 截取字符并返回，参数1，要截取的索引，参数2，截取的长度

trim()会创建一个字符串副本，删除前置以及后缀的所有空格

replace() 替换

​ 表达式不加入g(全局),则只替换第一个匹配，如果加入g，则替换所有匹配

match()用于原字符串是否匹配给定的字符串或者正则表达式，返回一个数组

search()返回到匹配第一个字符串的缩影，如果没有则返回-1

split()将字符串隔开

<!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>
</head>

<body>
    <script>
        //通过[index]获取对应位置的字符，第一个字符的index为0
        var strIndex = "hello";
        console.log(strIndex[4]); //o

        //通过charAt(index)获取对应位置的字符，第一个字符的index为0
        var aStr = "word";
        console.log(aStr.charAt(2)); //r

        //通过charCodeAt(index)获取对应位置的字符编码(ASCII码)，第一个字符的index为0
        var s = "hello";
        console.log(s.charCodeAt(4)); //o的ASCII编码111

        //字符串查找
        /* indexOf
        功能：从前向后在字符串中查找一个字符串
        参数：substr表示想要查找的字符串
        start表示查找的开始位置索引
        返回值：如果找到，返回第一个匹配字符在原字符串中的索引，如果没有找到，返回-1 */
        var s1 = "hello world";
        console.log(s1.indexOf("w")); //6
        console.log(s1.indexOf("D")); //-1

        //concat()将一个或多个字符串拼接起来，返回拼接得到新的字符串
        var s2 = "aaa";
        var s3 = "bbb";
        var s4 = "ccc";
        console.log(s2.concat(s3, s4)); //aaabbbccc

        //slice(a,b)字符串截取
        /* 从索引a(包含)截取到索引b(不包含)，不改变原有字符串 */
        var s5 = "hello";
        console.log(s5.slice(2, 4)); //ll

        //substring()字符串截取
        /* 1、substring（a，b）输出一个字符串，
        当其中只有一个参数时，会输出从a开始到结尾的string
        两个参数的时候也是a(包含),b(不包含)
        2、另外当a>b的情况时，系统会自动调整a,b的位置并输出
        3、如b是负值，则直接输出为a之前的字符串 */
        console.log(s5.substring(2)); //llo
        console.log(s5.substring(1, 3)); //el
        console.log(s5.substring(3, 1)); //el
        console.log(s5.substring(1, -1)); //h

        //substr(index,length) 截取字符并返回，参数1，要截取的索引，参数2，截取的长度
        var s6 = "abcdefg";
        console.log(s6.substr(0, 5)); //abcde

        //trim()会创建一个字符串副本，删除前置以及后缀的所有空格
        var s7 = "    abcd    ";
        console.log(s7); //    abcd    有空格
        console.log(s7.trim()); //abcd  没有空格

        //replace() 替换
        var s8 = "hello 1234world 12345678";
        console.log(s8.replace(/world/, "xiaoming")); //hello 1234xiaoming 12345678
        //表达式不加入g(全局),则只替换第一个匹配，如果加入g，则替换所有匹配
        console.log(s8.replace(/[0-9]+/, "xiaohua")); //hello xiaohuaworld 12345678
        console.log(s8.replace(/[0-9]+/g, "xiaohua")); //hello xiaohuaworld xiaohua

        //match()用于原字符串是否匹配给定的字符串或者正则表达式，返回一个数组   
        var s9 = "hello 1234world1234567";
        console.log(s9.match(/[0-9]+/g)); //['1234', '1234567']  
        /* 0: "1234"
        1: "1234567"
        length: 2 */

        //search()返回到匹配第一个字符串的缩影，如果没有则返回-1
        var s10 = "hello 123456789world123456789";
        console.log(s10.search(/[0-9]+/g)); //6

        //split()将字符串隔开
        var s11 = "11 22 33 44 55"
        console.log(s11.split(",")); //['11 22 33 44 55']
        /* 0: "11 22 33 44 55"
        length: 1 */
    </script>
</body>

</html>

循环语句

1、语法
        do{
            //循环体
            //操作
        }while(循环条件)
        特点：
        无论条件是否满足，都会先执行一次操作语句
2、while(循环条件){循环体} 
        while会先判断执行条件，满足后在执行
3、for(循环条件) {循环体}
4.for(变量 in 对象){
      语句
  }
5.forEach
		for in总是得到对象的key 或数组，字符串下标
        forEach 直接得到值

<body>
    <script type="text/javaScript">
        /*  1、语法
        do{
            //循环体
            //操作
        }while(循环条件)
        特点：
        无论条件是否满足，都会先执行一次操作语句 */

        //100以内所有奇数的和
        var num=0;
        var sum=0;
        /* debugger; */
        do{
            if(num%2!==0){
                sum=sum+num;
            }
            num++;
        }while(num<=100)
        console.log(sum);//2500

        /* 2、while(循环条件){循环体} 
        while会先判断执行条件，满足后在执行 */

        //输出1-10的数字
        var num1=1;
        /* debugger; */
        while(num1<=10){
            console.log(num1);
            num1++;
        }

        //3.for(循环条件) {循环体}

        //打印100-200之间所有能被3或7整除的数
        for(i=100;i<=200;i++){
            if(i%3==0 || i%7==0){
                console.log(i);
            }
        }
        //用for循环数组
        var arr=[1,2,3,4,5,6,7]
        for(var i=0;i<arr.length;i++){
            console.log(i,arr[i]);
        }
        
        /* 4.for(变量 in 对象){
             语句
            } */

        //用for in循环数组
        var arr1=[1,2,3,4,5,6];
        var idx;
        for(idx in arr1){
            console.log(idx,arr1[idx]);
        }
        //用for in循环对象
        var obj={
            name:"abcd",
            age:20,
            hobby:"sing"
        }
        var person;
        for(person in obj){
            console.log(obj[person]);
        }
        /* for in总是得到对象的key 或数组，字符串下标
        forEach 直接得到值 */
        var arr2=[3,4,5,7,9,6];
        arr2.forEach(function(value,index) {
            console.log(value,index);
        });
        arr2.forEach(element => {
            console.log(element);
        });
    </script>
</body>

作用域

JavaScript 局部作用域
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。
局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁

JavaScript 全局变量
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

日期对象案例

getFullYear();获取当前年份
getMonth() 获取当前月份 使用的使用要+1，因为月份是从0开始的。
getDate() 获取当前日期
getDay() 星期几
getHours() 获取小时
getMinutes() 获取分钟
getSeconds() 获取秒数

<!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>
</head>
<body>
    
    <script type="text/javascript">
        // getFullYear();获取当前年份
        // getMonth() 获取当前月份 使用的使用要+1，因为月份是从0开始的。
        // getDate() 获取当前日期
        // getDay()  星期几 
        // getHours()  获取小时
        // getMinutes() 获取分钟
        // getSeconds() 获取秒数
        function mydate(shuru,line){
            myInput=new Date(shuru);
            var year=myInput.getFullYear();
            var mon=myInput.getMonth()+1;
            var day=myInput.getDate();
            if(mon<10){
                mon="0"+mon;
            }
            if(day<10){
                day="0"+day;
            }
            return year+line+mon+line+day;
        }
        document.write(mydate(new Date(),"-"));
    </script>
</body>
</html>

数组

push()返回数组中元素的个数，向数组尾部增加元素，有多少加多少
pop()从数组的尾部删除一个元素，返回删除后的元素，不接收参数
unshift()返回数组中元素的个数向数组的头部增加元素，括号中有多少就加多少
shift()从数组的头部删除一个元素，返回这个删除的元素，不接收参数
slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组，包括前面，不包括后面
splice()一个参数，从起始的位置开始，直到数组结束， 两个参数从下标为0开始，第二个参数截取长度
添加
替换 第一个参数下标 第二个参数要替换的长度 第3，4个参数是要替换的元素
reverse()数组翻转，该方法会改变原来的数组，而刽创建新的数组
sort() 无参数默认从小到大排序，判断方法：按位判断

//sort() 从大到小

​ x.sort(function(a,b){

​ return a<b?1:-1;

​ })
join(‘-’)将数组转换为字符串，以括号内的拼接

<body>
    <script type="text/javascript">
        //push()返回数组中元素的个数，向数组尾部增加元素，有多少加多少 
        var a=[1,2,3,4,5];
        var b=a.push(6,7);//[1, 2, 3, 4, 5, 6, 7]
        console.log(a);

        //pop()从数组的尾部删除一个元素，返回删除后的元素，不接收参数
        var a1=[1,2,3,4,5,6];
        var b=a1.pop();//[1, 2, 3, 4, 5]
        console.log(a1);

        //unshift()返回数组中元素的个数向数组的头部增加元素，括号中有多少就加多少
        var a2=[1,2,3,4,5];
        var b=a2.unshift(0,-1,-2);//[0, -1, -2, 1, 2, 3, 4, 5]
        console.log(a2);

        //shift()从数组的头部删除一个元素，返回这个删除的元素，不接收参数
        var a3=[1,2,3,4,5];
        var b=a3.shift();
        console.log(a3);//[2, 3, 4, 5]

        //slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组
        var a4=[1,2,3,4,5];
        var b=a4.slice(1,3);//包括前面，不包括后面
        console.log(b);//[2, 3]

        /* splice()一个参数，从起始的位置开始，直到数组结束
        两个参数从下标为0开始，第二个参数截取长度 */
        var a5=[1,2,3,4,5];
        var b=a5.splice(2);
        console.log(a5);//[1, 2]
        console.log(b);//[3, 4, 5]

        var a6=[1,2,3,4,5];
        var b=a.splice(2,1);
        console.log(a6);//[1, 2, 3, 4, 5]
        console.log(b);//[3] 从下标2开始截取一个 包括自己

        //添加
        var a6=[1,2,3,4,5];
        var b=a6.splice(2,0,6,7);//下标为2前添加6,7
        console.log(a6);//[1, 2, 6, 7, 3, 4, 5]

        //替换
        //第一个参数下标  第二个参数要替换的长度  第3，4个参数是要替换的元素
        var a7=[1,2,3,4,5];
        var b=a7.splice(2,3,6,7);
        console.log(a7);//[1, 2, 6, 7]

        //reverse()数组翻转，该方法会改变原来的数组，而不会创建新的数组
        var a8=[1,2,3,4,5];
        var b=a8.reverse();
        console.log(b);//[5, 4, 3, 2, 1]
        
        //sort() 无参数默认从小到大排序，判断方法：按位判断
        var x=[1,5,3,4,2];
        var y=x.sort();
        console.log(y);//[1, 2, 3, 4, 5]

        //sort() 从大到小
        x.sort(function(a,b){
            return a<b?1:-1;
        })
        console.log(x);//[5, 4, 3, 2, 1]
        
        //join('-')将数组转换为字符串，以括号内的拼接
        var a9=[1,2,3,4,5];
        var b9=a9.join("-");
        console.log(b9);//1-2-3-4-5
    </script>
</body>

DOM 文档对象模型

节点(父级、子、兄弟、创建、添加、删除、复制)

getElementById

getElementsByTagName

getElementsByClassName

querySelector

querySelectorAll

匹配指定 CSS 选择器,返回所有的元素

getElementsByName

getElementsByName 查找name的表单元素

添加节点

element.appendChild()为元素添加一个子节点

removeChild() 从父元素中删除子元素

insertBefore 插入结点

事件对象

<body>

    <!-- 事件就是用户或浏览器自身执行的某种动作，他通过web浏览器
    通知应用程序发生了什么事情 -->

     <!-- 1.点击事件  onclick -->
    <button onclick="myFunction()">点我</button>
    <p id="demo"></p>

    <script>
        function myFunction(){
            var demo=document.getElementById("demo");
            demo.innerHTML="点击事件";
        }
    </script>

    <!-- 2.双击事件 ondblclick -->
    <button ondblclick="myFunction1()">双击点我</button>
    <p id="demo1"></p>
    <script>
        function myFunction1(){
            var demo1=document.getElementById("demo1");
            demo1.innerHTML="双击事件";
        }
    </script>

    <!-- 3.鼠标按钮抬起，按下  onmouseup  onmousedown -->
    <p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">单击</P>
    <script>
        function myFunction(elem,isColor){
            console.log(elem);
            elem.style.color=isColor;
        }
    </script>
    
    <!-- 4.鼠标移入 移出  onmouseenter  onmouseleave -->
    <img src="../cat2.jpg" alt="" onmouseenter="bigImg(this)" onmouseleave="normalImg(this)" width="100px" height="100px">
    <script>
        function bigImg(a){
            a.style.width="300px";
            a.style.height="300px";
        }
        function normalImg(a){
            a.style.width="100px"
            a.style.height="100px";
        }
    </script>
    
    <!-- 5.onkeydown 键盘按下事件 -->
    <p>当你在输入框内按下一个按键时函数被触发</p>
    <input type="text" onkeydown="myFunction()">
    <script>
        function myFunction(){
            alert("我按下键盘了")
        }
    </script>

     <!-- 6.某个键盘键被松开onkeyup -->
    <p>当用户在输入字段释放一个按键时触发函数，函数将字符转换为大写</p>
    输入你的名称：<input type="text" id="fname" onkeyup="myFunction()">
    
    <script>
        function myFunction(){
            /* var myinput=document.getElementById("fname");
            myinput.value=myinput.value.toUpperCase("fname"); */
            var myinput=document.getElementById("fname");//toUpperCase(); //将字符转为大写
            myinput.value=myinput.value.toLocaleLowerCase("fname");//toLocaleLowerCase() 将字符转为小写
        }
    </script>

    <!-- 7.某个键盘按下并松开  onkeypress -->
    <p>当用户在输入框内按下一个按键时函数被触发</p>
    <input type="text" onkeypress="myFunction()">
    <script>
        function myFunction(){
            alert("你在输入框内按下一个按键");
        }
    </script>
</body>

冒泡 捕获

false 冒泡 从最底层层层向上
true 捕获 从最外层层层向下
e.stopPropagation(); 只显示当前这一层 阻住冒泡和捕获

事件委托

事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件

事件委托技术可以避免对每个子元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。

当子元素有很多，需要对子元素的时间进行监听的时候

var target=e.target || e.srcElement;//可以捕获当前事件作用的对象

阻止默认事件

e.preventDefault();

小手

cursor: pointer;

DOM案例

<!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>dom 案例</title>
    <style>
        ul{
            list-style: none;
        }
        ul li{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            float: left;
            text-align: center;
            line-height: 100px;
            margin: 10px 30px;
            font-size: 30px;
        }
        div{
            width: 1400px;
        
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>DOM</h2>
        <ul class="mylist">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
    
    <button>1.改变h2和第一个li的HTML和CSS</button>
    <button>2.在h2中显示li的下一个兄弟</button>
    <button>3.在h2中显示li的下一个兄弟节点名称</button>
    <button>4.点击第四个li的上一个兄弟元素增加背景颜色</button>
    <button>5.在最后添加新的li</button>
    <button>6.删除第三个li</button>
    <button>7.删除最后一个li</button>
    <button>8.复制ul ，包括ul的子元素</button>

    <div id="clo"></div>

    <script type="text/javascript">
        var box=document.querySelector("div");//匹配第一个元素
        var btn=document.getElementsByTagName("button");
        var isul=document.getElementsByClassName("mylist")[0];
        var ish2=document.getElementsByTagName("h2")[0];
        var isli=document.querySelectorAll("li");

        btn[0].onclick=function(){
            isli[0].innerHTML="*";
            isli[0].style.borderColor="red";
            ish2.innerHTML="第一个li的边框已<em>更改</em>";
            ish2.style.cssText="color:white;background:red";
        }
        
         // nodeType 
            // 返回以数字值返回指定节点的节点类型。
            // 如果节点是元素节点，则 nodeType 属性将返回 1。
            // 如果节点是属性节点，则 nodeType 属性将返回 2。
        btn[1].onclick=function(){
            ish2.innerText=isli[1].nodeName+""+isli[1].nodeType;
        }

        //nextSibling返回某个元素之后紧跟的节点（处于同一树层级中）
        btn[2].onclick=function(){
            ish2.innerText=isli[0].nextSibling;
        }

        btn[3].onclick=function(){
            isli[3].previousElementSibling.style.background="grey";
        }
        
        btn[4].onclick=function(){
            var nli=document.createElement("li");
            nli.innerHTML=isul.getElementsByTagName("li").length+1;
            isul.appendChild(nli);
        }

        btn[5].onclick=function(){
            isli[2].parentNode.removeChild(isli[2]);
            //parentNode 对象的形式返回指定节点的父节点
        }

        btn[6].onclick=function(){
            isul.removeChild(isul.lastElementChild);
            //lastElementChild 最后一个元素节点（子节点）
        }

        btn[7].onclick=function(){
            box.appendChild(isul.cloneNode(true));
            //cloneNode 克隆节点
        }
        
    </script>
</body>
</html>

作业要点

面试题1

1.除了es6 的 symbol之外，javaScript有哪几种数据类型？

2.为什么0.1+0.2不等于0.3？在什么场景下遇到这个问题？如何解决？

3.说明==和===的区别

4.说明undifind 和null的区别

5.javascript中如何判断一个变量是一个String类型？使用函数实现

6.判断true和false

onfoucs

<!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>onfoucs</title>
</head>
<body>
    <form action="https://www.baidu/" id="fm">
        <input type="text" name="wd" id="ipt" value="请输入内容">
    </form>

    <script type="text/javascript">
        var oIpt=document.getElementById("ipt");
        var oForm=document.getElementById("fm");
        //绑定获取焦点事件：获取光标闪动
        oIpt.onfocus=function(){
            //把text输入框内容清空
            oIpt.value="";
        }

        //失去焦点事件
        oIpt.onblur=function(){
            if(oIpt.value===""){
                //让text内容恢复原样，当用户没有输入内容的时候
                oIpt.value="请输入搜索内容";
            }
        }
        // 按下回车键表单会自动提交到action设置的地址
        // 当用户没有输入内容的时候，提示不能提交，只有当用户输入内容的时候才可以提交     
        oForm.onsubmit=function(){
            if(oIpt.value==""){
                alert("搜索内容不得为空");
                return false;
            }
        }
    </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51Hsj6nr-1649006857488)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220309104447924.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XCsgr6kD-1649006857489)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220309104538723.png)]

正则

<!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>
</head>
<body>
    <input type="text" name="">
    <button>提交</button>
    <script>
        // 正则表达式是由一个字符序列形成的搜索模式。
        // 当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
        // 正则表达式可以是一个简单的字符，或一个更复杂的模式。
        // 正则表达式可用于所有文本搜索和文本替换的操作。

       //1.  \b  单词的开始或结束
       //2.  .   任意[一个]非换行字符
       //3.  *   前面的字符(可以是普通字符，也可以是元字符)重复
       //4.  \d  任意[一个]数字
       //5.  {n} 前面的字符，重复n次(n是一个数字)
       //6.  {n,m} 前面的字符，重复n到m次(m,n都是数字)
       //7.   ^  字符串开始的位置
       //8.   $  字符串结束的位置

       //元字符（meta  character）
     
      //  .匹配除换行符以外的任意字符
      // \w 匹配字母或数字或下划线或汉字 等价于 '[^A-Za-z0-9_]'。
      // \s 匹配任意的空白符
      // \d 匹配数字
      // \b 匹配单词的开始或结束
      // ^ 匹配字符串的开始
      // $ 匹配字符串的结束

        //g 全局匹配
       //正则表达式对象的test方法，用来测试参数字符串，是否符合正则所描述的规则
       //符合，则返回true，否则，返回false
       //只要字符串中有 字串符合正则的规则，则返回true
       //如果需要整个字符串都跟正则进行匹配，则需要加两个东西
       //字符串开始的位置、字符串结束的位置

        var telNo='0241-12345678';
        var telReg=/^0\d{2,3}-\d{7,8}$/;
        /* 以0开头，重复2-3次，任意一个数字，重复7-8次 */
        console.log(telReg.test(telNo));//true

        var telReg=/^\w{6,20}$/;
        /* 数字可以开头，6-20位，数字、下划线 */
        var mytext='m3mm_m';
        console.log(telReg.test(mytext));//true

        console.log('hello\nworld');//换行

        /* 匹配一个奇数数字的正则为： */
        var oddDigitalReg=/^[13579]+$/;
        /* +是重复一次或多次 */
        console.log(oddDigitalReg.test('135135779711'));//true
   
        /* 匹配一个字符串，这个字符串表示一个奇数
        奇数的特点是以1,3,5,7,9结束 */
        var oddReg=/^\d*[13579]$/;
        //*前面的字符可以是（普通的字符，也可以是元字符）重复
        console.log(oddReg.test('1132624135791'));//true
        console.log(oddReg.test('1132624135792'));//false


        /* 表示一个非0数字的方法
        正则表示式内的[]内的-所代表的意义为：
        中括号中匹配的范围从-前面的字符开始，到-后面的字符结束
        开始和结束的范围，是有字符的字符编码表示
        例如：/[a-z]/表示97到122之间的字符
        var noneZeroReg=/[123456789]/  //[1-9]
        表示一个英文字符
        lphabet=/[a-zA-Z]/ */


        /* 用户名规则：数字、字母、下划线，数字不能开头，6-20位 */
        var userReg = /^[a-zA-Z_]\w{5,19}$/
        document.querySelector('button').onclick=function() {
            var username = document.querySelector('input').value;
            console.log(userReg.test(username));
        }

        /* 2.表示重复次数
        这个正则表达式中，有两点：
            1.reg1|reg2，表示两个里面匹配一个
            2.()分组，每个分组表示一个子表达式 */ 
        /* 以xi开头 （ha重复两次 或he）xi */
        var mood1='xihexi';
        var mood2='xihahaxi';
        var moodReg=/^xi((ha){2}|he)xi$/;
        console.log(moodReg.test(mood1));//true
        console.log(moodReg.test(mood2));//true

        /* 电话区号是3位或者5位数字 */
        var reg=/^(\d{3}|\d{5}$)/;
        console.log(reg.test('12235'));//true
   </script>
</body>
</html>

坐标

clientX：当鼠标事件发生时，鼠标相对于浏览器（浏览器的有效区域）x轴的位置；

clientY：当鼠标事件发生时，鼠标相对于浏览器（浏览器的有效区域）y轴的位置；

screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；

screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；

offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置

offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

offsetWidth:元素的像素宽度

<!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>
        #text{
            padding-left: 38%;
        }
        #event{
            width: 600px;
            height: 400px;
            border: 1px solid red;
            margin: 20px auto;
            padding: 10px;
            position: relative;
        }
        #event span{
            position: absolute;
            top: 45%;
            /* display: block; */
            width: 0;
            height: 0;
        }
        #event span:first-child{
            left: 10px;
            border-top: 14px solid transparent;
            border-right: 18px solid red;
            border-bottom: 14px solid transparent;
        }
        #event span:last-child{
            right: 10px;
            border-top: 14px solid transparent;
            border-left: 18px solid red;
            border-bottom: 14px solid transparent;
        }
    </style>
</head>
<body>
    <h2 id="text">event</h2>
    <div id="event">
        <span></span>
        <span></span>
    </div>
    <script>
        // clientX：当鼠标事件发生时，鼠标相对于浏览器（浏览器的有效区域）x轴的位置；
        // clientY：当鼠标事件发生时，鼠标相对于浏览器（浏览器的有效区域）y轴的位置；
        // screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
        // screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
        // offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
        // offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置
        var h2=document.querySelector("#text");
        var ev=document.querySelector("#event");
        var span=ev.getElementsByTagName("span");
        var mid=ev.offsetWidth/2;
        //offsetWidth:元素的像素宽度
        ev.addEventListener('mousemove',function(e){
            var x=e.offsetX;
            var y=e.offsetY;
            h2.innerHTML="offset:"+x+" "+y+" client:"+e.clientX+" "+e.clientY;
            if(x<mid){
                span[0].style.display="block";
                span[1].style.display="none";
            }
            if(x>mid){
                span[1].style.display="block";
                span[0].style.display="none";
            }
        })
    </script>
</body>
</html>

json

什么是json
JSON是用于存储和传输数据的格式
JSON通常用于服务端向网页传递数据
是一种轻量级的数据交换格式
JSON是独立的语言

JSON.parse()用于将一个JSON字符串转换为JavaScript对象
JSON.stringify() 方法用于将JavaScript值转换为JSON字符串
document.write(“

”+str_pretty1+“

”);

BOM 浏览器对象模型

location.host+" “+location.href+” "+location.port;//显示当前url
location.reload();//刷新页面
window.location=“http://www.baidu”;//页面跳转
window.location.assign(“http://www.baidu”);//页面跳转
window.location.replace(“http://www.baidu”);//页面跳转 使用新的页面来代替当前页面 (没有历史记录)返回不了

window.open 新窗口打开页面
window.close();关闭当前窗口
window.print();打印

back(),可以回退到上一个页面，作用和浏览器的回退按钮一样。
forward()，可以跳转到下一个页面，作用和浏览器的前进按钮一样。
go()，可以用来跳转打指定的页面，需要一个整数作为参数，
1表示向前跳转一个页面，2表示向前跳转两个页面，以此类推。
-1表示向后跳转一个页面，-2表示向后跳转两个页面，以此类推。

返回到顶部的几种方法

AJAX

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面

//1.  XMLHttpRequest 是 AJAX 的基础。 
        //  创建XMLHttpRequest()对象
        
        // variable=new XMLHttpRequest();

//2. 向服务器发送请求
        // 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

        // 规定请求的类型、URL 以及是否异步处理请求。
        // method：请求的类型；GET 或 POST
        // url：文件在服务器上的位置
        // async：true（异步）或 false（同步）
        // xmlhttp.open("GET","ajax_info.txt",true);
        // xmlhttp.send();


//3.  AJAX - 服务器 响应
        // responseText  获得字符串形式的响应数据。


// onreadystatechange 事件

        // 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

        // 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
        // 0: 请求未初始化
        // 1: 服务器连接已建立
        // 2: 请求已接收
        // 3: 请求处理中
        // 4: 请求已完成，且响应已就绪

<body>
    <div id="myDiv">获取新数据</div>
    <button onclick="isclick()">点我</button>
    <script>
        var text=document.getElementById("myDiv");
        function isclick(){
            var xmlHttp;
            if(window.XMLHttpRequest){
                //IE7+,firefox,Chrome,Opera,Safair浏览器执行代码
                xmlHttp=new XMLHttpRequest();
            }
            else{
                //IE6,IE5 浏览器执行代码
                xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlHttp.onreadystatechange=function(){
                if(xmlHttp.readyState==4 && xmlHttp.status==200){
                    console.log(xmlHttp.responseText);
                    text.innerHTML=xmlHttp.responseText;
                }
               
            }
            xmlHttp.open("get","http://localhost:3000/api/getData",true);
            xmlHttp.send();
        }        
    </script>
</body>

HTML5

canvas

理论：canvas是一个HTML5新增元素，可以使用canvas元素在网页中进行绘图，可以设置宽度和高度
    可以通过dom在javaScript中获得canvas元素。可以使用css对canvas元素进行修饰。网页中可以有多个
    canvas，ie8以及更早的浏览器不支持canvas

canvas绘制图形的流程步骤
    1）通过javascript DOM 方法获得canvas元素
    2）调用canvas的getContext('2d')方法，获得画布绘图环境。目前绘图环境只支持2D环境，可获得
    一个CanvasReadingContext2D对象。
    3)通过绘图环境调用方法。设置属性，完成绘图过程
    4）使用填充或者的方式将上一步的绘图过程在页面中绘制出来。

1）rect():绘制一个矩形的路径（没有显示效果，需要fill或者stroke才显示）
注意：画布的坐标系左上角是坐标原点。向右x坐标增加，为正值；向下y坐标增加，为正值。

// fillRect()填充一个矩形
//strokeRect()描边一个矩形
//fillStyle:填充的颜色
//strokeStyle:描边的路径的颜色

// 注意：弧是一种路径，arc方法后并不能将弧绘制在画布上，
//需要使用stroke或fill才可以完成绘制
// 不封闭的路径推荐使用stroke进行显示，只绘制路径本身。
//lineWidth:线条宽度
// PI就是圆周率π，PI是弧度制的π,也就是180°
//圆的中心的 x 坐标。
//圆的中心的 y 坐标。
//圆的半径
// 起始角度
// 结束角度

ctx.closePath();图形封口
ctx.beginPath();开始新路径

开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

web存储

1）getItem(); 获取指定的key值
2）setItem(); 设置指定的key值
3）removeItem();删除指定的key
4) clear();清除所有key的值
5）length:所有key的数量 */

localStorage关闭对话框后再打开仍然存在，需要删除刷新才会没有
而sessionStorage关闭对话框后再打开就没有了

再次打开：

audio

<!-- html5新增了audio和video元素，用以在页面中播放音频和视频，取代之前使用的flash，embed等。 -->
    <!-- 音频格式有：MP3，wav，ogg，视频文件播放格式：MP4，webm，ogg。不同浏览器对视频格式的支持
    的程度也有所不同，单目前主浏览器都已支持video和audio这两个html5元素 -->

    <!-- 常用属性如下：
    1)controls:播放控件
    2)autoplay:自动播放
    3)loop:循环播放
    4)muted:静音
    5)width:视频播放器的宽度
    6)height:视频播放器的高度
    7)preload:预加载，常用属性值为auto（预加载视频）、metadata（仅加载元数据，
    如文件大小，时间，第一帧）、none（不执行预加载）；
    8）poster：视频文件默认显示的图片

    上面属性中，controls，autoplay、loop、muted在设置时属性和属性值相同，按照HTML5上面
    的代码规范，也写属性名即可。
    为了浏览器的兼容性，有时需要同时提供多种视频或者音频文件 -->

    <!-- 方法对视频和音频进行操作

        1）paly():播放音频或视频
        2）pause():暂停音频或视频
        3）load():重新加载音频或视频
        4）canPlayType:检测浏览器能播放的音频或视频的类型
        
        视频事件，可以覆盖对音频，视频的各种情况
        1)onpause     暂停多媒体
        2)onplay   开始播放多媒体
        3)onpalying 正在播放多媒体
        4)onloadstart 开始加载多媒体  -->

闭包

闭包的本质就是在一个函数内部创建另一个函数
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收 于是这里就产生了内存消耗的问题

闭包最⼤的作⽤就是隐藏变量，闭包的⼀⼤特性就是内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后,基于此特性，JavaScript可以实现私有变量、特权变量、储存变量等
没有声明函数名的称为匿名函数 例如：function(){}

 		//1 0 2 0
        function fn(){
            var num=1;
            return function(){
                var n=0;
                console.log(num++);
                console.log(n++);
            }
        }
        var fn1=fn();
        fn1();
        fn1(); 
	// 一般情况下，在函数fn执行完后，就应该连同它里面的变量一同被销毁，
    // 但是在这个例子中，匿名函数作为fn的返回值被赋值给了fn1，
    // 这时候相当于fn1=function(){var n = 0 … }，
    // 并且匿名函数内部引用着fn里的变量num，所以变量num无法被销毁，
    // 而变量n是每次被调用时新创建的，
    // 所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁，
    // 于是乎最后就剩下孤零零的num，于是这里就产生了内存消耗的问题

vue

1.vue.js是什么？

构建数据驱动的Web应用开发框架

改变数据就能驱动页面的一个更新，再也不需要开发者自己去操作dom

2.为什么如此受欢迎?

（1） 声明式渲染，应对前端分离的大趋势

​ 内部包含了一套模板

（2） 渐进式框架，适应各种业务需求以及场景

​ 模块化开发，在不同段的需求都能满足

（3） 快速交付，结合第三方UI框架

​ 对应的vue.js有一个活跃的社区，提供各种各样的库，UI框架等，

​ 利用别人的东西快速实现自己的工作。

（4） 企业需求，必备技能

​

3.MVC,MVP,MVVM架构模型对比

(1)MVVM：“MVVM”:双向数据绑定，View的变动，映射在 ViewModel，反之一样

架构思想：是来指导我们开发者的开发行为，为了更好的让代码可读，可复用的原则

vue的设计无疑受到了MVVM的启发

MVVM是什么?

MVVM 模式，顾名思义即 Model-View-ViewModel 模式。它萌芽于2005年微软推出的基于 Windows 的用户界面框架 WPF ，前端最早的 MVVM 框架 knockout 在2010年发布。

Model 层: 对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。

View 层:作为视图模板存在，在 MVVM 里，整个 View 是一个动态模板。除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声明。

ViewModel 层:把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；而当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。一旦值变化，View 层绑定的 ViewModel 中的数据也会得到自动更新。

MVVM的优缺点?

优点:

分离视图（View）和模型（Model）,降低代码耦合，提高视图或者逻辑的重用性: 比如视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑

提高可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码

自动更新dom: 利用双向绑定,数据更新后视图自动更新,让开发者从繁琐的手动dom中解放

缺点:

Bug很难被调试: 因为使用双向绑定的模式，当你看到界面异常了，有可能是你View的代码有Bug，也可能是Model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。

对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高

(2)MVC: “MVC”:Controller 薄，View 厚，业务逻辑大都部署在 View。

(3)MVP: “MVP”:View 薄，不部署任何业务逻辑，称为"被动视图" (Passive View)

​ Presenter 厚，逻辑都部署这里。

(4) 对比其他框架（angular,react）

4.开发式渲染=>组件系统=>路由机制=>状态管理=>…

5.vue缺点：

ie8以下低版本浏览器不兼容

生态圈小

学习成本高

defineProperty

// 给对象添加一个新的属性，或者针对对象里的某些属性，可以给这个属性设置一些特性，比如是否只读

​ // var obj = {}

​ // // Object.defineProperty(obj, prop, descriptor) descriptor属性描述符

​ //get set 拦截，实现响应式原理，改变数据就改变页面

var obox=document.getElementById("box");
        var myvue={
            name:""
        }
        Object.defineProperty(myvue,"name",{
            get:function(){
                console.log("get");
                return obox.innerHTML;//返回经过处理后的变量
            },
            set:function(value){
                console.log("set");
                return obox.innerHTML=value;//利用临时变量接受复制
            }
        })

起步

模板语法

v-bind

v-on

v-show v-if

v-show做显示隐藏，只是简单的进行css切换，在控制台能看出来，加了一个display:none属性
v-if做显示隐藏，销毁和重新生成dom，频繁操作会消耗性能，但是安全

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-siyQwjxs-1649006857507)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220314153201128.png)]

v-if else

v-for

循环

高亮显示点击的是第几个

key的作用主要是为了高效的更新虚拟DOM。
        另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，
      JS操作真实DOM！
        用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。
       在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，
     因此会马上执行流程，最终执行10次。
    例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。
   计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，频繁操作还是会出现页面卡顿，影响用户体验。

     为什么需要虚拟DOM，它有什么好处?
        Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，
        虚拟DOM就是为了解决浏览器性能问题而被设计出来的。
      如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，
     最终将这个JS对象一次性渲染到DOM树上，再进行后续操作，避免大量无谓的计算量。
      所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，
     操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

  Diff操作
        在实际代码中，会对新旧两棵树进行一个深度的遍历，每个节点都会有一个标记。
        每遍历到一个节点就把该节点和新的树进行对比，如果有差异就记录到一个对象中。


1.节点类型变了，例如下图中的P变成了H3。
2.节点类型一样，仅仅属性或属性值变了,不会触发节点卸载和装载，而是节点更新。
3.文本变了，文本对也是一个Text Node，也比较简单，直接修改文字内容就行了。  否则vue只会替换其内部属性而不会触发过渡效果。

methods

computed

计算属性是基于他们的依赖进行缓存的，（存在js对象里）
计算属性只有在他的相关依赖发生改变时才会重新求值
点击A按钮，打印出A，点击B打印出B,console.log()只执行一次。
使用的是虚拟DOM,把真是的DOM拷贝一份，操作的是虚拟DOM,
虚拟DOM跟真实DOM不同时才会触发这个方法，如果相同就不会触发这个方法，
耗时，大量搜索时才用计算属性。

vue监听

我们可以通过 watch 来响应数据的变化

表单绑定

修饰符

lazy这个修饰符会在光标移开input之后才会更新数据
number这个修饰符先输入数字就会限制只能输入数字，先输入字符无效，除了数字
trim这个修饰符 输入框中过滤首尾空格
一开始显示在text框里的是hello world，如果输入"    hello",则会自动去掉前面的空格
.self这个修饰符，只有元素本身触发时才触发方法，就是点击元素本身才会触发
.stop 阻止事件冒泡
.capture事件捕获
.prevent 阻止默认行为
 .once 只能用一次，无论点击几次只执行一次

.capture事件捕获

未加.capture时点击按钮为btn1,div1(从内到外 冒泡)
加了以后是div1,btn1（从外到内 捕获）

.prevent 阻止默认行为

.once 只能用一次，无论点击几次只执行一次

.enter
.alt.enter
如果不加的话，每输入一个就会显示你好

模糊查询

item.carname.indexOf(condition)!=-1 找不到字符串的时候为-1

自定指令

//指令所绑定的元素，可以用来直接操作 DOM。

​ //binding：一个对象，包含以下属性：name,value等

​ //Vue.directive(name",function(el,blinding))

全局组件

全局组件
Vueponent(“组件名”,{})
可以用作页面的任何位置
`是es6的模板字符串
Data 是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响

局部组件

// 只能在定义它的el中使用，不能在其他位置使用，否则无法生效

父子通信

父传子用props
父组件通过标签中写入需要传的数据

组件props

属性加":“可以传数字或者boolean类型,不加”:",只能传字符串

组件自定义事件

slot

slot 插槽 是混合父组件的内容与子组件自己的模板,内容分发

动态组件

keep-alive
保留状态，避免重新渲染，多用于手机端
不用keep-alive的话节省内存，但浪费性能，用户切换时等待时间长

component元素,动态地绑定多个组件到它的is属性

<!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>
    <script src="lib/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        footer ul{
            display: flex;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 40px;
        }
        footer ul li{
            flex:1;
            text-align: center;
            height: 40px;
            line-height: 40px;
            list-style: none;
            background-color: black;
        }
        footer ul a{
            text-decoration: none;
            color: white;
            display: block;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- 保留状态，避免重新渲染，多用于手机端-->
        <!-- 不用keep-alive的话节省内存，但浪费性能，用户切换时等待时间长 -->
        <keep-alive>  
            <!-- component元素,动态地绑定多个组件到它的is属性 -->
            <component :is="current"></component><!-- 动态绑定 -->
        </keep-alive>
        
        <footer>
            <ul>
                <li><a @click="current='home'">首页</a></li>
                <li><a @click="current='list'">列表页</a></li>
                <li><a @click="current='shopcar'">购物车页面</a></li>
            </ul>
        </footer>
    </div>
    <script type="text/javascript">
        var home={
            template:`
            <div>
                home页面
                <input type="text"/>
            </div>
            `
        }
        var list={
            template:`
            <div>
                list页面
            </div>
            `
        }
        var shopcar={
            template:`
            <div>
                shopcar页面
            </div>
            `
        }
        var vm=new Vue({
            el:"#box",
            data:{
                current:"home"
            },
            components:{//注册组件
                home,
                list,
                shopcar
            }
        })
    </script>
</body>
</html>

点击列表页，会显示list页面
点击购物车页面，会显示shopcar页面

生命周期

<!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>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <button @click="handleClick()">点我改变数据</button>
        <div>{{name}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                name: "内容"
            },
            methods:{
                handleClick(){
                    this.name="修改之后的内容"
                }
            },
            /* 页面初始化时调用的生命周期 */
            beforeCreate() { // beforeCreate是在Vue实例初始化事件后执行的。
                console.log("beforeCreate")
            },
            created() {//在Vue实例完成了内部代码和外部代码的初始化之后执行
                console.log("created")
            },
            beforeMount() {//在将模板渲染到显示页面上之前会执行beforeMount
                console.log("beforeMount")
            },
            mounted() {//在模板渲染到前端页面之后执行mounted
                console.log("mounted")
            },

            /* 点击按钮更新调用的生命周期 */
            beforeUpdate() {
                console.log("beforeUpdate")
            },
            updated() {
                console.log("updated")
            },

            /* 销毁时调用的生命周期 */
            //这两个函数一般不会自动运行。需要通过执行vm.$destroy()时才会执行
            beforeDestroy() {//beforeDestroy在Vue实例的生命周期结束前执行
                console.log("beforeDestroy")
            },
            destroyed(){// destroyed在Vue实例的生命周期结束后执行。
                console.log("destroyed")
            }
        })
    </script>
</body>

</html>

vue

路由模式分为history和hash两种模式
a标签href="#/home"不支持history
rount-link两种模式都支持

子路由和重定向

编程式路由及路由跳转

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

点击film页面 -> list1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UsPjpuSH-1649006857541)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220318111318119.png)]

vuex

vuex （全局状态管理）
  管理的数据是多页面需要共享的数据

  安装
  1. npm install vuex --save

  2. 在src 下新建store文件夹，然后新建 index.js 文件

  3. main.js 引入注册

  4.挂载vuex
   vue.use(Vuex)


5. // 创建vuex对象
const store = new Vuex.Store({
  state: {
    // 存放的键值对就是管理状态
    name: "hello"
  }
})

 6. 取数据
  this.$store.state.message
  {{$store.state.message}}

element-ui

1. 在main.js 引入文件

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

1. 页面vue文件，按照文档操作

https://element.eleme/#/zh-CN/component/installation

element-ui安装

Axios

http://www.axios-js/zh-cn/docs/

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

1. npm install axios

2. import axios from ‘axios’

3. Vue.prototype.axios = axios;

   好像是这个Vue.prototype.$axios = axios

handleClick1(){
            var parms={
                username:this.username,
                password:this.password,
            };
            this.axios.post("https://api.apiopen.top/recommendPoetry",parms).then((res)=>{
                console.log(res);
                console.log(res.data.code);
                if(res.data.code==200){
                    alert(res.data.message);
                }
            });
        }

xmlhttp.status的值及解释：

1xx:信息响应类，表示接收到请求并且继续处理
2xx:处理成功响应类，表示动作被成功接收、理解和接受
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
5xx:服务端错误，服务器不能正确执行一个正确的请求

100——客户必须继续发出请求   
101——客户要求服务器根据请求转换HTTP协议版本  
200——交易成功   
201——提示知道新文件的URL    
202——接受和处理、但处理未完成    
203——返回信息不确定或不完整   
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

 <el-button
                type="primary"
                :underline="false"
                @click="dialogTableVisible = true"
                >我的评价</el-button
              >
              <!-- 点击我的评价显示的弹框 -->

              <el-dialog title="我的评价" :visible.sync="dialogTableVisible">
                <el-table :data="item.gridData">
                  <el-table-column
                    property="date"
                    label="日期"
                    width="150"
                  ></el-table-column>
                  <el-table-column
                    property="message"
                    label="姓名"
                    width="200"
                  ></el-table-column>
                  <el-table-column
                    property="address"
                    label="满意"
                  ></el-table-column>
                </el-table>
              </el-dialog>

1.新建config.js文件  此文件在src下views同级
2. 在 config.js文件自定义，定义后台api地址
const config = {
     //后端api地址
     API_URL: "",
 };
export default config

3. 新建一个utils文件夹，此文件夹跟views同级
4. 在utils文件夹新建一个request.js 文件
5.在request.js文件引入axios包
   import request from "axios"

6. 在request.js文件 将你新建的config.js文件引入进来
 import config from "@/config"

7.配置后台api地址，以及请求头token
const token = localStorage.getItem('token');
const service = request.create({
    baseURL: config.API_URL,
    headers: {
        "Authorization": token
    }
});

8.封装axios response 响应参数，请求拦截
service.interceptors.response.use(
    response => {
        const res = response.data;
        return res
    },

    error => {
        console.log('err' + error);
        return Promise.reject(error)
    }
);

export default service

10. 新建一个api文件夹，在src文件夹下面
11. 然后新建接口模块文件 后缀名 为.js
12. 在你新建的接口模块文件，引入request.js 文件
import service from "../utils/request"
13. 配置相关接口
例如：export function Login(data){
    return service({
        url:'/api/user/login',
        method:'post',
        data:data
    })
}

登录接口两种方式

Login(LoginData).then((res) => {
        console.log(res);
        if (res.code == 200) {
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("uid", res.data.user.id);
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.$router.push("/");
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
      // this.$axios
      //   .post(this.$store.state.url + "/api/user/login", LoginData)
      //   .then((res) => {
      //     if (res.data.code == 200) {
      //       //res.data.success ==true
      //       this.$message({
      //         message: "登陆成功",
      //         type: "success",
      //       });
      //       localStorage.setItem("token", res.data.data.token);
      //       localStorage.setItem("uid", res.data.data.user.id);
      //       this.$router.push("/");
      //     }
      //   });

1.  {{}}与v-html 区别
    {{}}和v-text渲染效果一样，只会返回标签的内容，不会把标签的效果渲染出
	v-html不仅用于渲染数据，还能够输出真正的html，即能够解析html代码
2.  全局组件与局部组件
	全局组件
	Vueponent("组件名",{})
	可以用作页面的任何位置

	局部组件
	只能在定义它的el中使用，不能在其他位置使用，否则无法生效
3.  Vue 指令
4.  V-show与v-if
	相同点：v-if与v-show都可以动态控制dom元素显示隐藏
	不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。
5.  Vue 组件通信，父子通信
	将想要传递给子组件的数据定义在data中，在使用子组件时，动态绑定该数据名
	在子组件中，使用 props 接收父组件传递过来的数据
6.  Vue 声明式路由与编程式路由
	声明式：<rounter-link ：to="……">;
	编程式：this.$router.push(……)
7.  路由传参，以及接收参数
        vue路由传参方式可以划分为params传参、query传参和url字符串拼接,首先需要知道路由跳转并传参的方式(声明式导航和编程式导航)以及接收路由参数的方法
8.  Vue 修饰符 https://blog.csdn/wqliuj/article/details/108654103
        一、事件修饰符
        .stop 阻止事件继续传播
        .prevent 阻止标签默认行为
        .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
        .self 只当在 event.target 是当前元素自身时触发处理函数
        .once 事件将只会触发一次
        .passive 告诉浏览器你不想阻止事件的默认行为
        
9.  Vue 生命周期
        beforeCreate( 创建前 )
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后 ）
实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount
挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted
挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate
在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）
在实例销毁之前调用，实例仍然完全可用，

这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件
destroyed（销毁后）
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

作者：前端_周瑾
链接：https://www.jianshu/p/672e967e201c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

我的评价</el-button

          <!-- 点击我的评价显示的弹框 -->

          <el-dialog title="我的评价" :visible.sync="dialogTableVisible">
            <el-table :data="item.gridData">
              <el-table-column
                property="date"
                label="日期"
                width="150"
              ></el-table-column>
              <el-table-column
                property="message"
                label="姓名"
                width="200"
              ></el-table-column>
              <el-table-column
                property="address"
                label="满意"
              ></el-table-column>
            </el-table>
          </el-dialog>

```html
1.新建config.js文件  此文件在src下views同级
2. 在 config.js文件自定义，定义后台api地址
const config = {
     //后端api地址
     API_URL: "",
 };
export default config

3. 新建一个utils文件夹，此文件夹跟views同级
4. 在utils文件夹新建一个request.js 文件
5.在request.js文件引入axios包
   import request from "axios"

6. 在request.js文件 将你新建的config.js文件引入进来
 import config from "@/config"

7.配置后台api地址，以及请求头token
const token = localStorage.getItem('token');
const service = request.create({
    baseURL: config.API_URL,
    headers: {
        "Authorization": token
    }
});

8.封装axios response 响应参数，请求拦截
service.interceptors.response.use(
    response => {
        const res = response.data;
        return res
    },

    error => {
        console.log('err' + error);
        return Promise.reject(error)
    }
);

export default service

10. 新建一个api文件夹，在src文件夹下面
11. 然后新建接口模块文件 后缀名 为.js
12. 在你新建的接口模块文件，引入request.js 文件
import service from "../utils/request"
13. 配置相关接口
例如：export function Login(data){
    return service({
        url:'/api/user/login',
        method:'post',
        data:data
    })
}

登录接口两种方式

Login(LoginData).then((res) => {
        console.log(res);
        if (res.code == 200) {
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("uid", res.data.user.id);
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.$router.push("/");
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
      // this.$axios
      //   .post(this.$store.state.url + "/api/user/login", LoginData)
      //   .then((res) => {
      //     if (res.data.code == 200) {
      //       //res.data.success ==true
      //       this.$message({
      //         message: "登陆成功",
      //         type: "success",
      //       });
      //       localStorage.setItem("token", res.data.data.token);
      //       localStorage.setItem("uid", res.data.data.user.id);
      //       this.$router.push("/");
      //     }
      //   });

1.  {{}}与v-html 区别
    {{}}和v-text渲染效果一样，只会返回标签的内容，不会把标签的效果渲染出
	v-html不仅用于渲染数据，还能够输出真正的html，即能够解析html代码
2.  全局组件与局部组件
	全局组件
	Vueponent("组件名",{})
	可以用作页面的任何位置

	局部组件
	只能在定义它的el中使用，不能在其他位置使用，否则无法生效
3.  Vue 指令
4.  V-show与v-if
	相同点：v-if与v-show都可以动态控制dom元素显示隐藏
	不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。
5.  Vue 组件通信，父子通信
	将想要传递给子组件的数据定义在data中，在使用子组件时，动态绑定该数据名
	在子组件中，使用 props 接收父组件传递过来的数据
6.  Vue 声明式路由与编程式路由
	声明式：<rounter-link ：to="……">;
	编程式：this.$router.push(……)
7.  路由传参，以及接收参数
        vue路由传参方式可以划分为params传参、query传参和url字符串拼接,首先需要知道路由跳转并传参的方式(声明式导航和编程式导航)以及接收路由参数的方法
8.  Vue 修饰符 https://blog.csdn/wqliuj/article/details/108654103
        一、事件修饰符
        .stop 阻止事件继续传播
        .prevent 阻止标签默认行为
        .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
        .self 只当在 event.target 是当前元素自身时触发处理函数
        .once 事件将只会触发一次
        .passive 告诉浏览器你不想阻止事件的默认行为
        
9.  Vue 生命周期
        beforeCreate( 创建前 )
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后 ）
实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount
挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted
挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate
在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）
在实例销毁之前调用，实例仍然完全可用，

这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件
destroyed（销毁后）
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

[外链图片转存中…(img-gthiC4OV-1649006857545)]

[外链图片转存中…(img-kwoiKS64-1649006857546)]

[外链图片转存中…(img-9dF86700-1649006857547)]

本文标签： 知识点三件