一、HTML
（1）html，xhtml和xml的区别
1.xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：
a、元素必须要有结束标签；
b、元素必须嵌套；
2.对于html的元素和属性，xhtml必须小写，因为xhtml是严格区分大小写的和html是不同的标签；
3.xhtml的属性值必须在引号之中；
4.xhtml不支持属性最小化，什么是属性最小化了？
面试题：HTML与XHTML二者之间有什么区别：①XHTML元素必须被正确的嵌套 ②XHTML元素必须被关闭 ③XHTML标签名必须使用小写字母 ④XHTML文档必须拥有根元素
（2）html标签
1. 水平线标签
< hr width="" size="" align="" color="" noshade / >
（3）html文本标签
字体标签 <font color="" face="" size="1~7" ></font>
粗体标签 <b></b><strong></strong>
斜体标签 <i></i><em></em>
下划线标签 <u></u><ins></ins>
删除线标签 <del></del>
上标标签 <sup></sup>
下标标签 <sub></sub>
（4）字符实体
（5）超链接标签
1.普通链接
基础语法：<a href="链接地址" target="blank | self" title="描述">文本或图片</ a>* *href：连接路径 target：标的意思，跳转后的网站是否在新标签页打开； blank新窗口跳转， self当前窗口跳转 title：鼠标悬浮显示文字
空链接 <a href="##"></a >
返回页面顶部 <a href="#"></a>
保持原位置 <a href=“javascript:; ></a >
脚本链接 <a href="javscript:alert('hello world')"></a>
电子邮件链接 <a href="mailto:邮箱地址"></a>
拨打电话 <a href="tel:电话号码"></a》
2 锚点链接
使用 name 属性创建 HTML 页面中的锚点
当使用锚时，我们可以创建直接跳至该命名锚的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息
步骤
创建锚点 <a name="锚点名称"></ a>
链接到锚点 同一页面 : < a href="#锚点名称"></a> 不同页面 : <a href="目标文档URL# 锚点
名称">< /a>
（6）列表标签
1.列表标签
<ul type="disc|square|circle">
<li>1</li>
<li>2</li>
</ul>
<ol type="a|A|i|I" start="num">
<li>1</li>
<li>2</li>
</ol>
<!--
ul 元素表示这是一个无序列表，ol是有序列表
li 元素表示表内部的列表项，每一条
-->
disc默认值实心圆，square正方形，circle空心圆2.图文并茂
<figure>
<figcaption>这是一张图</figcaption>
<img src="1.png" width="200">
</figure>
<!-- figure 插图元素 figcaption 表示插图的标题内容 说明 --> 
（7）表格标签
①属性
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
align：内容⽔平对⻬⽅式
valign：内容垂直对⻬⽅式
②合并单元格
rowspan：合并列方向单元格
colspan：合并行方向单元格 属性值是⼀些数字，表示合并单元格的数量 上边线在同⼀⾏
的，就算在同⼀⾏
面试题：请阐述table的缺点
①. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
②. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
③. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
④. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱
⑤. 不够语义
二、CSS
（1）长度单位
①相对长度单位：
px 像素（Pixel）
% 百分比
em : Element meter 根据文档字体计算尺寸
rem :Root element meter 根据根文档（ body/html ）字体计算尺寸
ex : 文档字符“x”的高度
ch : 文档数字“0”的的宽度
vh : View height 可视范围高度
vw : View width 可视范围宽度
②绝对长度单位：in英寸（Inch） pt 点（Point） cm 厘米（Centimeter） mm 毫米（Millimeter） 换算比例：1in = 2.54cm = 25.4 mm = 72pt
③calc：css3的一个新增的功能， 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “-“, “ *”, “/” 运算； calc()函数使用标准的数学运算优先级规则；
（2）选择器
1. 选择器的优先级
!important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器
2. 派生选择器
后代选择器: 以空格分隔
子元素选择器: 以>分隔
相邻兄弟选择器:以+分隔
普通兄弟选择器:以~分隔
（3）字体样式
italic：指定⽂本字体样式为斜体。
.italic {
font-style:italic
}
font-weight：定义字体粗细
lighter：细体
（4）文本属性
1 .文本缩进
text-indent 属性将⻚⾯上的段落的第⼀⾏进行缩进(首行缩进)，这是⼀种最常⽤的⽂本格式化效果。 取值：
⽤⻓度值指定⽂本的缩进。可以为负值。
⽤百分⽐指定⽂本的缩进。可以为负值。
p { text-indent:20px; }
p { text-indent:20%; }2. 文本对齐
text-align属性设置⽂本⽔平对⻬⽅式。
justify：内容两端对⻬，对最后⼀⾏⽆效
注意：样式应用的最后一行文字不会生效（如果只有一行，那第一行同样是最后一行）\
3. 文本修饰
text-decoration 属性设置⽂本装饰线条的位置，综合属性 可以单独设置 text-decoration- line、 text-decoration-color 和 text-decoration-style 属性 text-decoration-line
①underline 指定⽂字的装饰是下划线
②overline 指定⽂字的装饰是上划线
③line-through 指定⽂字的装饰是贯穿线
注：还可以组合多个值，比如 underline 和 overline，在文本上下方同时显示线条 text-decoration-style
① solid 线条显示为单行
②double 线条显示为双线
③ dotted 线条显示为点线
④dashed 线条显示为虚线
⑤wavy 线条显示为波浪线
under { text-decoration: underline red; }
over { text-decoration: wavy overline orange; }
lineThough { text-decoration: line-through; }
none { text-decoration: none; }
under01 { text-decoration-line: overline underline; }4. 单词间距
word-spacing 属性设置英⽂单词之间的间距 取值：
-
normal：默认间隔
-
⽤⻓度值指定间隔。可以为负值
p { word-spacing:20px; }letter-spacing 属性设置字符之间的间距，适⽤于中英⽂⽂本 取值：
-
normal：默认间隔
-
⽤⻓度值指定间隔。可以为负值
p { letter-spacing:20px; }5. 文本换行
①word-wrap 让文字换行
word-wrap 属性设置⽂本内部⻓单词或URL换⾏ 取值：
-
normal 默认值（浏览器保持默认处理）。
-
break-word 在⻓单词或 URL 地址内部进⾏换⾏。
② word-break
word-break 属性设置⾃动换⾏的处理⽅法 取值：
-
normal 使⽤浏览器默认的换⾏规则。
-
break-all 允许在单词内换⾏。
-
keep-all 只能在半⻆空格或连字符处换⾏。
③ white-space 不允许文字换行
nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 < br >标签为止。
④text-overflow 当文本溢出包含元素时剪切文字
ellipsis 显示省略符号来代表被修剪的文本。
6. 文字阴影text-shadow【css3】
text-shadow 属性向文本设置阴影。
语法：text-shadow: x-shadow y-shadow blur color;
| x-shadow | 必需。水平阴影的位置。允许负值。 |
| **y-shadow | 必需。垂直阴影的位置。允许负值。 |
| **blur | 可选。模糊的距离。 |
| **color | 可选。阴影的颜色。 |
7. 盒子阴影box-shadow【css3】
box-shadow 属性向框添加一个或多个阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
8. text-stroke文字描边
是用来为文本添加描边效果的css属性，但请注意，它并非标准CSS属性，而是WebKit（如Safari和Chrome）浏览器专有的CSS扩展属性，为了兼容其他浏览器，通常会配合 -webkit-text-stroke 和 -moz-text-stroke 等私有前缀属性一起使用
-webkit-text-stroke: stroke-width color;
-moz-text-stroke: stroke-width color;9.多行/多行文本垂直居中
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #f00;
/* 将div修改为table单元格的特性 */
display: table-cell;
/* 垂直居中 */
vertical-align: middle;
}
</style>
<div class='box'>
比如，当前热映《长清湖》超越了《你好，李焕英》票房，这是很不容易的。
要知道当初《你好，李焕英》不仅拥有天时（影院放开不久），
还有人和。贾玲与刘德华互联网上频繁互动，为影片上映做好了预热，
不大卖都难。 </div>
（5）CSS伪类和伪元素
伪类单冒号，伪元素双冒号
伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素
1.伪类
:first-child /* 第一个子元素 */
:last-child /* 最后一个子元素 */
:only-child /* 只有一个子元素 */
:root /* 根标签 */ :nth-child(n) /* 第几个子元素 */
ul li:nth-child(1){color:#f00;} /* 第一个子元素 - 从1开始 */
ul li:nth-child(2n){color:#f00;} /* 偶数行的子元素 - 2的倍数的所有元素 */
:nth-child(odd) /* 奇数元素 */ :nth-child(even) /* 偶数元素 */
:nth-last-child(-n+4) /* 后4个元素 */
2.伪元素
::first-line 首行
::first-letter 首字母
::before 元素前插入
::after 元素后插入
::placeholder：选取输入字段中的占位文本。
（6）列表样式
ul li 是无序列表，ol li 是有序列表
1. list-style
简写属性在⼀个声明中设置所有的列表属性。设置顺序：list-style-type, list-style-position, list-style-image。默认值为：disc outside none。
①list-style-type 设置列表标记样式
ul属性：
-
默认值: disc（实⼼圆）
-
circle（空⼼圆）
-
square（⽅形）
ol属性：
-
decimal（0开头的数字标记）
-
lower-roman（小写罗马数字）
-
upper-roman（大写罗马数字）
②list-style-position 设置在何处放置列表标记
-
默认值: outside
-
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
③list-style-image 设置使⽤图像来替换列表项的标记
-
none 不指定图⽚，默认内容标记将被 list-style-type 代替
-
url 使⽤绝对或相对地址指定列表项标记图⽚，如果图像地址⽆效，默认内容标记将被 list-style-type 代替
（7）表格样式
1. border-collapse
collapse 设置表格的边框是否被折叠成一个单一的边框或隔开(去除单元格和单元格之间的缝隙)
2. vertical-align
垂直⽅向对⻬⽅式，它的值：top | middle | bottom
<table bgcolor= "" border="" align= "" cellpadding="" cellspacing="" > （8）CSS盒模型和box-sizing
1.CSS边框 （border）
border 简写属性在⼀个声明设置所有的边框属性 可以按顺序设置如下属性：
border-width
border-style
solid 实线
dotted 点状线
double 双实线
dashed 虚线
border-color
2.外边距合并
①垂直方向，上面的盒子有下边距，下面的盒子有上边距，会发生合并
解决办法：给两个盒子都添加float
②两个盒子嵌套，大盒子有外边距，小盒子有外边距，会发生合并
解决办法：给父元素添加边框
给父元素添加float
③有一个空元素，有外边距，无边框和填充，上外边距与下外边距碰到了一起，会发生合并
解决办法：给空元素添加float
给空元素添加padding
给空元素添加height
3.box-sizing
/* 设置盒子模型为ie盒⼦模型 */
.container {
/* 怪异盒子 */
box-sizing:border-box;
}
/* 设置盒子模型为标准盒⼦模型 */
.container {
box-sizing:content-box;
}（9）背景属性
-
background-color 背景颜色
-
background-image 背景图片
-
background-repeat 背景平铺方式
-
repeat 默认值，⽔平垂直⽅向上平铺
-
no-repeat 不平铺
-
repeat-x ⽔平⽅向平铺
-
repeat-y 垂直⽅向平铺
-
-
background-attachment 背景图片固定方式
-
scroll 默认值。背景图像会随着⻚⾯其余部分的滚动⽽移动
-
fixed 当页面的其余部分滚动时，背景图像不会滚动
-
-
background-position 背景图片位置
-
上下 左右 第一个位置定义上下的位置（top/center/bottom），第二个定义左右位置(left/center/right)，如果仅定义一个值，第二个值为 center
-
x y 第一个值为水平位置，第二个为垂直位置，可以是百分比或者px，如果仅定义一个值，第二个值为50%
-
-
background-size 背景图片尺寸
-
length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
-
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
-
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
-
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
-
-
background-origin 背景图片显示区域
-
padding-box 默认值，背景图像相对于内边距定位
-
border-box 背景图像相对于边框定位
-
content-box 背景图像相对于内容边框定位
-
-
background-clip 背景显示区域
-
border-box 默认值，背景填充全部
-
padding-box 背景填充不包括边框
-
content-box 背景只填充内容部分
-
-
inherit 继承父元素的背景属性样式
（10）浮动（浮动塌陷）
1.常见的清除浮动方式
-
加额外标签 浮动元素后⾯加⼀个空标签，设置样式 clear:both;，左右两侧均不允许浮动元素
-
定⾼法 给浮动元素的⽗元素设置⾼度⼤于或等于最⾼的浮动元素的⾼度，⽤于⼩板块，⾼度可以写死的部分
-
⽗元素添加 overflow:hidden 属性 利⽤ overflow:hidden 清除浮动时，⽗元素⾥⾯不能有定位超出的元素，如果有，超出的部分会被隐藏
-
利⽤after伪元素清除浮动
注意： 项目中我们常⽤after伪元素清除浮动，因为它不会额外增加标签，⽽且不会出现因为⽤overflow:hidden超出的部分会被隐藏，⽗元素⾼度也不⽤写死，我们只要在⻚⾯写⼀次清浮动的代码，在需要清浮动的位置加上 clearfix 类名就可以了
（11）定位
1.sticky 粘性定位
-
基于⽤户的滚动位置来定位
-
在未滚动出目标区域时，类似 position:relative;
-
当⻚⾯滚动超出⽬标区域时，类似 position:fixed;，它会固定在⽬标位置。
-
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位
注意：需要粘性定位的元素，父元素一定要有足够的高度
（12）隐藏元素的6种方式
①使用透明度
语法：opacity:0 注意：元素消失，但是还会占据空间
②使用display
语法：display:none 注使用透明度意：元素消失，不会占据空间
③使用 scale 缩放
语法：transform:scale(0) 注意：元素消失，但是还会占据空间
④使用visibility
语法：visibility:hidden 隐藏 / visible显示 注意： 元素消失，但是还会占据空间
⑤使用宽高和overflow
语法：width:0;overflow:hidden; 注意： 元素消失，但是还会占据空间
⑥使用position定位
语法：position:absolute; top:-当前元素的高度；left：-当前元素的高度 注意： 元素消失，不会占据空间
（13）光标属性
cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。
| 属性名 | 效果 |
| crosshair | 精确定位“十”字形； |
| pointer | “小手”形状 |
| text | 文本“I”形； |
| wait | 等待，“沙漏”形； |
| default | 默认指针； |
| help | 帮助，带尾箭头 |
| auto | 鼠标按照默认的状态根据页面上的元素自行改变样式 |
三、HTML5和CSS3
（1）HTML5-新增结构化标签
①特性
新的特殊内容元素，比如 header、nav、section、article、footer
新的表单控件，比如 required、date、time、email、url、search
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
<!-- 音频 -->
<audio src="../那一年.mp3"></audio>
audio 音频元素；用于嵌入一个 音频文件
src 音频文件的URL
controls 显示播放控件
autopaly 表示立刻播放
preload 预先载入音频文件数据
<!-- 视频 -->
<video src="movie.mp4" controls="" width="400" muted="" poster="cover.jpg" loop="">
video 视频播放元素
src 视频资源的URL
controls 表示显示播放控件
autoplay 自动播放,目前不能使用
muted 表示静音
poster 指定视频载入时显示的图片封面
loop 反复播放
preload 预先加载新增了本地存储html5删除的元素
② 结构化标签
<header>定义页眉
<nav>定义导航
<section> 定义文档中的区段
<article> 定义文章
<section> 定义文档的节(区域).比如章节,页眉,页脚,或者文档中的其他部分
<aside> 定义文章的侧边栏
<hgroup>用于对section或网页的标题进行组合
<figure>用于对元素进行组合,使用figcaption元素为元素组添加标题
<figcaption>给元素添加标题
<time>定义日期或时间
<footer>定义页脚
③ html5废弃的标签
以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym>首字母缩写
<applet>嵌入的applet（Applet是采用Java编程语言编写的小应用程序）
<basefont>Applet是采用Java编程语言编写的小应用程序
<big>大号字体效果
<center>居中
<dir>定义目录列表
<font>规定文本字体、大小和颜色
<frame>框架
<frameset>框架集
<noframes>noframes
<strike>可定义加删除线
<tt>呈现类似打字机或者等宽的文本效果
（2）HTML5-新增表单控件
1.下拉菜单
<datalist > 元素规定输入域的选项列表。 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项 使用 < input > 元素的列表属性与 < datalist> 元素绑定
<!-- 添加搜索框 -->
<input list="browsers" name="mybrowser">
<!-- 搜索内容 -->
<datalist id="browsers">
<option value='jack'></option>
<option value='Rose'></option>
<option value='Bob'></option>
<option value='Pater'></option>
<option value='jerry'></option>
</datalist>2.必填字段
required 属性适用于以下 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file
<!--键和值一致可以省略-->
<input type="text" required="required">3.正则
pattern='[限制的内容]{数量}' A-Z -表示范围 数量 如果是5-10之间，中间用,隔开
<!--年龄-->
<input type="text" name="" id="" pattern='[0-9]{3}'><br>
<!--只能输入字母--> <input type="text" name="" id="" pattern='[A-Za-z]{1,3}'><br>
<!--电话号码--> <input type="text" name="" id="" pattern='1[3-9][0-9]{9}'><br>4.邮件地址
语法：<input type="email" />
<input type="email" name='email'/>5.网址
语法：<input type="url" />
<input type="url" name='url'/>6.数字类型
语法：type="number" min 最小值 max 最大值 value 默认值 step 间隔值
<input type="number" min="1" max="10" value="1" step='10'>7.日期字段
语法：type = date min 最小日期 max 最大日期 注意：日期格式必须为YYYY-MM-SS
<input type="date" min="2010-12-16" />8.时间字段
语法：type="time" step 时间间隔（单位秒)
<input type="time" step="1800" />9.拾色器
语法：type：color value：默认颜色
<input type="color" value="#ed1c24">10.进度条
<progress value="22" max="100"></progress>11.取消表单验证
在开发阶段我们可能想把表单临时提交一下， 又不想让它进行表单中所有元素内容的有效性检查，有两种方法可以取消表单验证
<!-- 方法一 -->
<form action="demo.php" novalidate='novalidate'></form>
<!-- 方法二 -->
<input type="submit" formnovalidate='formnovalidate'/>12.使用滑块和输出组件进行运算
oninput 输入组件 output 输出组件 parseInt 转换为整形
<form action="" oninput="sum.value = parseInt(a.value) - parseInt(b.value)">
0<input type="range" min="0" max="100" step="10" value="0" id='a'>100
+ <input type="number" min="0" max="100" step="10" value="10" id="b">
= <output name='sum'></output>
</form>13.指定元素属于对应的表单
在HTML4中，表单内的从属元素必须写在表单的内部，而在HTML5中，可以把他们书写在页面上的任何地方，然后为该元素指定一个form属性，属性值为表单的id，这样就可以声明该元素的从属指定表单了。
<form action="demo.php" method="get" id="user-demo" id='user-form'>
first name: <input type="text" name='uname'>
<input type="submit"> </form>
first name:
<input type="text" name='rename' form="user-form">注意：form 属性适用于所有 标签的类型。 form 属性必须引用所属表单的 id。 form 属性规定输入域所属的一个或多个表单。
14.提交到不同的页面
在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。 同一个表单可以选择提交给不同的数据处理程序：
<form action="demo.php" method="get" >
first name: <input type="text" name='fname'>
last name: <input type="text" name='lname'>
<input type="submit" value='注册' formaction="register.php">
<input type="submit" value='登陆' formaction="login.php">
<input type="submit" value='post方式提交' formmethod="post" formaction="login.php">
</form>15.占位符
在HTML5中，表单元素所具有的默认提示，可以使用placeholder去进行设置。
<input type="text" name='uname' placeholder='请输入用户名'>placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。 你以前可能无数次看到这种效果，但那些大部分是用JavaScript里实现的，而现在，HTML5提供了原生支持，而且效果更好！
（3）CSS3新增语法
1.CSS3新增盒模型相关属性
①box-sizing属性：设置盒模型的两种类型 （怪异盒子:border-box 标准盒子:content-box）
②resize调整盒子大小
③box-shadow盒子阴影
(语法：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必需的。水平阴影的位置。允许负值
v-shadow：必需的。垂直阴影的位置。允许负值
blur：可选。模糊程度
spread：可选。阴影的宽度
color：可选。阴影的颜色
inset：可选。从外层的阴影（outset）改变阴影内侧阴影)
④opacity不透明度
2.CSS3新增背景属性
①background-origin（原点位置，图片相对于哪里来定位）
注意：当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用。
background-origin: border-box
background-origin: padding-box
background-origin: content-box
background-origin: inherit
②background-clip（背景裁切）
/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;③background-size
④多背景图CSS3允许元素设置多个背景图片
3.CSS3新增边框属性
①border-radius边框圆角
②outline边框外轮廓（了解）
4.CSS3新增文本属性
①text-shadow属性：给文本添加阴影。
②white-space属性：设置文本换行方式。
③text-overflow属性：设置文本内容溢出时的呈现模式
④CSS3升级了text-decoration属性，让其变成了复合属性。
text-decoration: text-decoration-line || text-decoration-style || text-decoration-color⑤text-stroke文字描边
-webkit-text-stroke-width：设置文字描边的宽度，写长度值。
-webkit-text-stroke-color：设置文字描边的颜色，写颜色值。
-webkit-text-stroke：复合属性，设置文字描边宽度和颜色。5.CSS3新增渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
linear-gradient(angle（角度）, color-stop1, color-stop2, ...)
重复线性渐变
您可以使用repeating-linear-gradient()函数重复线性渐变。
设置径向渐变的形状
radial-gradient()函数的shape参数用于定义径向渐变的最终形状。它可以取值 circle 或 ellipse。这是一个实例：
background: radial-gradient(circle, red, yellow, lime);
（4）CSS3-过渡
| 属性 | 描述 |
| transition | 简写属性，用于在一个属性中设置四个过渡属性 |
| transition-property | 规定应用过渡的 CSS 属性的名称 |
| transition-duration | 定义过渡效果花费的时间。默认是 0 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease" |
| transition-delay | 规定过渡效果何时开始。默认是 0 |
| 值 | 描述 |
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值【立方贝塞尔曲线函数】 |
（5）Filter函数
| Filter | 描述 |
|---|---|
| none | 默认值，没有效果。 |
| blur(px) | 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 |
| brightness(%) | 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 |
| contrast(%) | 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。
|
| grayscale(%) | 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； |
| hue-rotate(deg) | 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 |
| invert(%) | 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。 |
| opacity(%) | 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。 |
| saturate(%) | 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。 |
| sepia(%) | 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； |
| url() | URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。 例如： |
| initial | 设置属性为默认值，可参阅： CSS initial 关键字 |
| inherit | 从父元素继承该属性，可参阅： |
（6）CSS3-2D效果
1.平移：语法：translate(X,Y)，既可以为正值，也可以为负值（向下、向右为正方向）
2.旋转：语法：transform:rotate(角度) 角度：单位deg 正值：顺时针旋转 负值：逆时针旋转
注意：inline行级元素是不能直接旋转的
3.缩放：语法：transform:scale(x,y) x：表示x轴的缩放比例 y：表示y轴的缩放比例 x,y 值分别为原有元素宽高的倍数。 1为不缩放，大于1放大，小于1缩小
4.倾斜：语法：transform：skew(x-angle,y-angle)
该元素会以横向（X轴）和垂直（Y轴）为参考确定角度; 如果只想沿x轴或者y轴进行倾斜，那么属性为skewX(n)和skewY(n)
5.旋转中心点：任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。 在没有transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、缩放，扭曲等操作都是以元素自己中心位置进行变形。 如果实现过渡动画，则变换中心点应该在元素初始CSS
（7）CSS3-动画效果
-
动画效果
语法： 创建动画：@keyframes 调用动画：animation
animation参数值
| 参数值 | 效果 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease" |
| animation-delay | 规定动画何时开始。默认是 0 |
| animation-iteration-count | 规定动画被播放的次数（number类型）。默认是 1，（infinite: 无限次） |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal" ，‘alternate' |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running",'paused' |
| animation-fill-mode | 规定对象动画时间之外的状态.forwards,backwards默认值 |
（8）CSS3-3D效果
1.透视属性
语法： 给所有的子元素设置： perspective: 1000px;
给元素本身设置 ： transform: perspective(300px) rotateY(60deg) ;
2.灭点位置
语法：perspective-origin : x轴 y轴;
可以使用的值：left，center，right，length，%；top，center，bottom
3.是否为3D模型
语法：transform-style: flat|preserve-3d(preserve-3D | flat 2d效果，默认);
4.设置变换中心
在3D效果中设置变换中心，2D中也是使用当前属性，3D中可以多设置一个值
语法：transform-origin : x轴 y轴 z轴;
注意：Z轴只能设置为像素值，不能用关键字和百分比
5.不面对屏幕时是否可见
语法：backface-visibility: visible | hidden;
backface-visibility：定义元素在不面对屏幕时是否可见
正反旋转效果
（9）flex弹性盒子
| 容器属性(6 个): | 属性值 |
| flex-direction 主轴方向 | row， row-reverse，column，column-reverse |
| flex-wrap 主轴换行方式 | nowrap （默认）：不换行 ； wrap：换行，第一行在上方。 wrap-reverse：伸缩项目无法容纳时，自动换行，方向和wrap相反,这个效果和使用float的效果是一样的。 |
| flex-flow 符合形式 | 主轴方向和换行方式的简写 语法：flex-flow：row nowarp |
| justify-content 主轴对齐方式 | center，flex-start（主轴起点对齐），flex-end，space-between/around/evenly |
| align-items 交叉轴对齐方式 | flex-start/end,center,baseline(项目的第一行文字的基线对齐)，stretch（若项目未设置高度或设置为auto，项目将占满整个容器的高度） |
| align-content 多根主轴对齐方式 | stretch，flex-start/end，center，space-between/around/evenly |
| 项目属性(6 个): | 属性值 |
| order（控制项目出现的顺序） | 默认为0，值越小越靠前 |
| flex-grow（放大比例） | 默认为0，不为0时若有剩余空间则放大 |
| flex-shrink（缩小比例） | 默认为0，不为0时若空间不够则缩小 |
| flex-basis（项目在主轴方向上的初始大小） | auto，px |
| flex（flex-grow，flex-shrink，flex-basis的缩写） | flex：0 1 auto； |
| align-self（单独设置某一个伸缩项目的。 所有的值和align-itmes 一致） |
（10）多列布局
1.设置列宽
column-width： | auto 设置对象的宽度；使用像素表示。
2.设置列数
column-count： | auto 用来定义对象中的列数，使用数字 1-10表示。
3.同时设置列宽和列数
columns: <'column-width'> || <'column-count'> 设置对象的列数和每列的宽度。复合属性。
4.列和列之间的间距
column-gap: normal || length， normal是默认值，为1em，length 是用来设置列与列之间的间距。
5.列和列之间的边框
column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '> 设置对象的列与列之间的边框。复合属性：包括边框的粗细，颜色，样式 样式： dotted 点状边框 dashed 虚线 double 双线 solid 实线
6.列高是否统一
column-fill：auto | balance 设置对象所有列的高度是否统一; auto： 列高度自适应内容; balance： 所有列的高度以其中最高的一列统一 两个效果基本上一样，没有太大变化
7.横跨多少列
column-span 属性规定元素应横跨多少列。 column-span: 1|all; 默认为1，一般情况下设置为all
四、JavaScript
（1）数据类型（7）
基础数据类型（5）：string，number，boolean，null，undefined
引用数据类型（2）：array（数组），Object（对象）
1.string
转义字符
2.number
二进制-0b开头
八进制-0o开头
十六进制-0x开头
3.14e11=>3,14*10^11 科学计数法
toFixed（num）：小数点后保留多少位，默认有四舍五入的效果
ceil（），向上取整
floor（），向下取整
round（），四舍五入
①自动转换：js会通过关系运算符，逻辑运算符，算数运算符，if语句等实现隐式转换
根据需要自动进行类型转换，但是转换时会遵循一定的规则
②强行转换->通过内置对象的方法强制转换
比如：parseInt(),parseFloat(),Number(),String(),Boolean(),toString（）
注意：数学运算（特殊情况：+再出现字符串的情况下不是数学运算，而是字符串的拼接）
注意：parseInt还可以接受第二个参数（2到36之间），表示呗解析的值的进制，返回该值对应的10进制数。parseInt的第二个参数为10，即默认是十进制转十进制
parseInt('1000'); // 1000
// 等同于 parseInt('1000',10); // 1000
parseInt('1000'，2); // 8
parseInt('1000'，6); // 216
parseInt('1000'，8); // 512③boolean转换
！！可以强制转换为boolean
| 类型 | 转换布尔型后的结果 |
| ""或'' | FALSE |
| 0或0.0 | FALSE |
| NaN | FALSE |
| undefined | FALSE |
| null | FALSE |
| 其它 | TRUE |
在==比较的过程中，数据转换的规则 类型一样的几个特殊点：
{} == {} false,对象对比的是堆内存的地址
[] == [] false
NaN == NaN false
类型不一样的转换规则：
-
null == undefined true，但是换成 === 结果是false（因为类型不一致），剩下null/undefined和其他任何数据类型值都不相等
-
字符串 == 对象，要把对象转为字符串
-
剩下如果 == 两边数据类型不一致，都是需要转换为数字再进行比较
如果类型都是字符串，就会按照ASCII编码的进行对比
（2）运算符
||运算方法[真前假后]：
只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。&&运算方法[假前真后]：
只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;条件运算符【三元运算符/三目运算符】【重要】
条件表达式?结果1:结果2
如果条件表达式结果为true则返回结果1 如果条件表达式结果为false则返回结果2
运算符的优先级
小括号>算术运算符>比较运算符>逻辑运算符>赋值运算符
（3）流程控制
1. for...in【掌握】
for (变量 in 对象) { 代码段 }for...in 语句用来遍历对象的每一个属性。每次都将属性名作为字符串保存在变量里
2. do......while【了解】
do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。 do while循环，先执行循环体代码，再进行条件判断。至少执行一次循环体的代码。
do {
代码段
} while (条件表达式)
注意：当前循环中，代码至少执行一次
3.跳转语句
① return 、break和continue的区别和作用
1.return关键字并不是专门用于跳出循环的，return的功能是结束一个方法。 一旦在循环体内执行到一个return语句，return语句将会结束该方法，循环自然也随之结束。与continue和break不同的是，return直接结束整个方法，不管这个return处于多少层循环之内。
2.continue的功能和break有点类似，区别是continue只是中止本次循环，接着开始下一次循环。而break则是完全中止循环。
3.break用于完全结束一个循环，跳出循环体。不管是哪种循环，一旦在循环体中遇到break，系统将完全结束循环，开始执行循环之后的代码。 break不仅可以结束其所在的循环，还可结束其外层循环。此时需要在break后紧跟一个标签，这个标签用于标识一个外层循环。Java中的标签就是一个紧跟着英文冒号（:）的标识符。且它必须放在循环语句之前才有作用。
(4)自定义函数
1.定义函数
① Function构造函数定义函数
var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);② function语句定义函数[最常用的方式]
function 函数名 (参数1，参数2……[形参]){ <语句块> return 返回值 }③ 在表达式中直接定义函数
var 函数名 = function (参数1，参数2，…){函数体};2.调用函数
①直接调用
myFunction();或window.myFunction()②事件处理中调用
<div onclick="myFunction()"></div>③将函数的返回值赋给变量
var t = myFunction();3.函数的参数
如果传递的参数个数小于函数定义的参数个数，JavaScript会自动将多余的参数值设为undefined；
如果传递的参数个数大于函数定义的参数个数，那么多余传递的参数将会被忽略掉。域
获取所有实参【arguments】
function Test(a,b){
alert(typeof(arguments)); // 获得类型
alert(arguments[1]); // 获取下标为1的参数值
alert(arguments.length); // 获取参数的长度
alert(arguments.callee); // 获取函数的所有内容
}
Test("zhang","li"); 默认参数
function tab(row,color='pink',color2='gray'){
<tr bgcolor="'+color+'"></tr>
}
tab(10,'gray','orange');4.变量的作用域
局部变量>形参>全局变量
预解析
预解析，又称之为变量提升，在js代码真正执行之前，进行提前加载，把所有带有var和function的关键字进行预解析
注意：预解析的问题，如果同时有变量和函数的预解析，那么函数的优先级高
优先执行栈内存中的内容
（5）js对象
1.String对象.方法
①indexOf(string,[index]) 子字符串位置 //返回子字符串abc在字符串中第一次出现的位置（从0开始计算），不存在返回-1
②lastIndexOf(string,[index]) //返回子字符串abc在字符串中最后一次出现的位置
③slice(start,end) 获取字符串的某个部分 截取是前包含，后不包含
④截取 substr(起始位置,[截取长度]) //截取不写则代 表截取到字符串未尾
⑤substring(起始位置,[结束位置]) //不包括截取结果的右边界字符
⑥替换 replace('子字符串1','子字符串2') //将字符串中子字符串1替换为子字符串2
⑦获取指定位置的字符 charAt(n) 默认为第一个字符 n 表示的是下标，范围是 0-正无穷，不能使用负值
⑧获取指定字符的ASCII编码 str.charCodeAt()
String.fromCharCode() 根据ascii返回对应的字符
⑨转换大小写 toLowerCase() toUpperCase()
⑩将字符串分割为数组 split(分割符,[返回数组的最大长度])
2.Math对象.方法
属性：Math.PI
方法：
Math.round(number) //四舍五入整数
Math.ceil(number) //向上取整
Math.floor(number) //向下取整
Math.random() //随机返回0.0~1.0之间的数（公式Math.random()*(max-min+1)+min）
Math.max(x,y) //求最大值
Math.min(x,y) //求最小值
Math.pow(x,y) //求x的y次方
console.log(Math.PI); // PI
console.log(Math.round(8.5)); // 四舍五入
console.log(Math.abs(-10)); // 绝对值
console.log(Math.ceil(6.4)); // 向上取整
console.log(Math.floor(6.9)); // 向下取整
console.log(Math.max(1,7,6,4,9,2)); // 最大值
console.log(Math.min(1,7,6,4,9,2)); // 最小值
console.log(Math.pow(5,8)); // 求x的y次方
console.log(Math.sqrt(9)); // 开方3.Date对象.方法
①将日期转为字符串
toLocaleString() //年月日 时分秒
toLocaleDateString() //年月日
toLocaleTimeString()//时分秒toLocaleString特殊用法：可以将一串数字转为xxx,xxx,xxx这种有间隔的方法
console.log((123264849.12).toLocaleString('en-US')); // 123,264,849.12②getTime() //1970 年 1 月 1 日至今的毫秒数 时间戳专门用来计算时间的差值，或者倒计时等功能
var d = new Date();
// 1. 通过getTime获取
console.log(d.getTime()); // 当前毫秒钟
// 2. 通过valueOf获取
console.log(d.valueOf());
// 3. H5新增的获取毫秒树的方式
console.log(Date.now());
// 4. 添加+号[把日期对象转为数字类型]
console.log(+new Date());时间差计算公式
d = parseInt(总秒数/60/60/24) // 天数
h = parseInt(总秒数/60/60%24) // 小时
m = parseInt(总秒数/60%60) // 分钟
s = parseInt(总秒数%60) // 秒
③设置时间
var d = new Date('2009-11-12 08:20:30'); // 正常字符串时间的表示方式
var d = new Date('Jan 1 2001 05:20:10'); // 日期时间对象返回的格式
var d = new Date(2020,10,10,10,20,30); // js的时间格式
var d = new Date(1607061589000); // 时间戳4.数组（Array）对象.方法
①转化为字符串
toString（）//将数组转化为字符串，中间以逗号连接
用法:arr.toString（）
join（）//将数组元素连接成字符串，（）里面是连接符，不写默认以逗号连接
用法：arr.join（）
②数组连接
concat（）//连接多个数组，返回新数组，拼接的内容可以是数字，字符串，数组
用法：arr.concat（arr1，123，‘Hello’，[1,2,3]）
...展开运算符（ES6新增的运算符）
用法： var arr = [1,2,3];
var arr2 = [4,5,6];
var arr3 = [...arr,...arr2]
③添加删除
unshift（）//向数组头部添加元素，返回数组新长度 //arr.unshift（‘str’）
push（）//像数组尾部添加元素，返回数组新长度 //arr.push（‘str’）
shift（）//删除数组头部元素，返回删除元素 //arr.shift（）
pop（）//删除数组尾部元素，返回删除元素 //arr.pop（）
delete arr[i]//删除指定下标的元素，返回值是boolean
splice（）：
用法： 删除元素或删除并插入新元素 arr.splice(startindex，length,item,item) 直接对原数组进行删除，添加或者修改
startindex：从什么地方开始删除
length：删除的长度
item:添加的新内容 返回值：被删除的内容
删除：splice(开始删除的位置，删除的长度)
替换：splice(开始删除的位置，删除的长度，删除之后添加的新内容)
添加：splice(开始删除的位置，0，添加的新内容)
④排序
sort (回调函数) 将数组元素升序排序
arr.sort(function(a,b){
return a-b // 正序
return b-a // 倒序
})reverse（）//颠倒数组中的元素
用法：arr.reverse（）
（6）js事件
键盘事件：keypress键盘事件，keyup抬起，keydown按下
鼠标事件 文档：load加载 表单：focus获得焦点，blur失去焦点，submit提交事件，change改变事件
1.鼠标事件
| ****事件 | ****说明 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousemove | 鼠标被移动 |
| onmousedown | 某个鼠标按键被按下 |
| onmouseup | 某个鼠标按键被松开 |
| oncontextmenu | 右键事件 |
| onmousewheel | 当滚轮被滚动的时候 |
| onmouseenter | 鼠标进入 |
| onmouseleave | 鼠标离开 |
onmouseenter 和 onmouseover的区别
1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有） ，支持冒泡
2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有） ，不支持冒泡
2.键盘事件
| 事件 | 说明 |
| onkeypress[使用的比较少] | 键盘的某个键被按下 |
| onkeydown | 键盘的某个键被按下或按住 |
| onkeyup | 键盘的某个键被松开 |
3.光标事件
| 事件 | 说明 |
| onfocus | 元素获得焦点 |
| onblur | 元素失去焦点 |
4.窗口事件
| ****事件 | ****说明 |
| onresize | 览器窗口被调整大小时发生 |
5.表单事件
| ****事件 | ****说明 |
| onsubmit | 提交按钮被点击 |
| onreset | 重置按钮被点击 |
| onselect | 文本内容被选定 |
| onchange | 用户改变表单元素的内容 |
| oninput | 在用户输入时触发 |
注意：onselect 属性可用于以下元素内：< input type="file" >、< input type="password">、< input type="text">、< keygen> 以及 < textarea>.
注意2：oninput事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
6.滚动事件
| 事件 | 说明 |
| onscroll | 窗口发生滚动 |
| scrollTo | 滚动到指定位置【增加】 |
document.documentElement.scrollTop（页面滚动的高度）
方法一： window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标。 y-coord 是文档中的纵轴坐标。 比如： window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标。 y-coord 是文档中的纵轴坐标。 比如：window.scrollTo(0,1000); // 垂直滚动到1000的位置
方法二： window.scrollTo(options) // option为对象格式 window.scrollTo(options) // option为对象格式
-
top 等同于 y-coord
-
left 等同于 x-coord
-
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
7.距离相关
①offset系列用法
1.offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离
计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧
如果父级盒子没有定位, 那么会接着往上找有定位的盒子
如果上级元素都没有定位,那么最后距离是与body的left值
2.offsetTop : 用于获取元素到最近定位父盒子的顶部距离
计算方式:当前元素的上边框的上侧到定位父盒子的上边框下侧
如果父级盒子没有定位,那么会接着往上找有定位的盒子
如果上级元素都没有定位,那么最后距离是与body的top值
3.offsetWidth :用于获取元素的真实宽度(除了margin以外的宽度); 元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
4.offsetHeight : 用于获取元素的真实高度(除了margin以外的高度)元素的高度（包括元素宽度、内边距和边框，不包括外边距）
5.offsetParent :用于获取该元素中有定位的最近父级元素
如果当前元素的父级元素都没有进行定位,那么offsetParent为body
6.offsetX：event.offsetX，鼠标点击时距离父元素x轴的距离
7.offsetY：event.offsetX，鼠标点击时距离父元素y轴的距离
②client系列用法
clientWidth : 元素的宽度（包括元素宽度、内边框，不包括边框和外边框）
clientHeight: 元素的高度（包括元素宽度、内边框，不包括边框和外边框）
clientX : 获取鼠标事件发生时距离页面x轴水平坐标 event.clientX
clientY : 获取鼠标事件发生时距离页面y轴的垂直坐标（不包含滚动上去的部分）
③inner系列用法
首先这两个属性是比较特殊的，只能由浏览器使用的。返回当前浏览器窗口大小所对应的宽高度
window.innerHeight (包含滚动条的宽度)
window.innerWidth
④scroll系列用法
1.scrollHeight :scrollHeight 属性是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px
如果内容不足,就是元素的高度
2.scrollWidth : 是一个只读属性，它返回该元素的像素宽度，宽度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px
如果内容不足,就是元素的宽度
3.scrollTop : onscroll事件发生时,元素向上卷曲出去的距离
标准浏览器生效: document.documentElement.scrollTop
IE浏览器有效: document.body.scrollTop
4.scrollLeft : onscroll事件发生时,元素向左卷曲出去的距离
5.scrollIntoView 滚动元素的父容器
8.获取CSS动态样式
①getBoundingClientRect()
语法:Element.getBoundingClientRect()，获取css内部样式
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 属性集合。
| 属性名 | 属性值 |
| top | 元素上边距离页面上边的距离 |
| left | 元素右边距离页面左边的距离 |
| right | 元素右边距离页面左边的距离 |
| bottom | 元素下边距离页面上边的距离 |
| width | 元素宽度 |
| height | 元素高度 |
②obj.style
【获取行内样式】 注意：可以获取样式，也可以设置样式
③getComputedStyle
【非IE浏览器下，获取内部样式，或者外部样式】
注意：只能获取不能设置
基本语法： window.getComputedStyle(元素).样式属性
④currentStyle
【IE浏览器下获取内部样式，或者外部样式】
基本语法： 元素.currentStyle.样式属性
9.event事件
| 事件对象属性方法 | 说明 |
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准【ie6-8使用】 |
| e.type | 返回事件的类型，比如：click，mouseover 不带on |
| e.returnValue | 该属性阻止默认事件（默认行为） ie6-8，比如不让链接跳转 |
| e.preventDefault() | 该属性阻止默认事件（默认行为）标准，比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 【标准】 |
| e.cancelBubble | 阻止冒泡【ie】 |
①阻止默认事件的发生
return false//1
event.returnValue=false//2
event.preventDefault()//3②冒泡/捕获
捕获： element.addEventListener(event, function, useCapture)
useCapture： 可选。布尔值，(默认值, false. true 代表以事件捕获形式触发事件, false 代表以事件冒泡形式触发事件)
10.移动端事件
click在移动端大概有300ms的延迟
①touch事件模型
ontouchstart：触摸开始(当手指触摸屏幕时触发，不管当前有多少只手指)
ontouchmove：触摸后移动(当手指在屏幕上滑动时连续触发，通常我们再滑屏页面，会调用)event.preventDefault()
ontouchend：触摸结束(当手指离开屏幕时触发)
onclick:点击事件 ontouchcancel：系统通知跟踪触摸时候会触发。例如在触摸过程中突然有人打电话过来取消了当前的操作，此时会触发事件，这个事件用的比较少； 触摸事件的响应顺序：ontouchsatrt > ontouchmove > ontouchend > onclick 300ms延时
②去除移动端click300ms延迟
1)meta标签
禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟
<meta name="viewport" content="width=device-width"><meta name="viewport" content="initial-scale=1.0">2)css去除
html{touch-action: manipulation;}③touch事件对象
每个touch事件对象包含的属性如下：
-
clientX：触摸目标在视口中的x坐标。
-
clientY：触摸目标在视口中的y坐标。
-
pageX：触摸目标在页面中的x坐标。
-
pageY：触摸目标在页面中的y坐标。
-
screenX：触摸目标在屏幕中的x坐标。
-
screenY：触摸目标在屏幕中的y坐标。
-
identifier：标识触摸的唯一ID。
-
target：触摸的DOM节点目标。
-
targetTouches： 当前对象上所有触摸点的列表数组
-
changeTouches：涉及当前(引发)事件的触摸点的列表数组，常用于手指离开的事件，手指都离开屏幕之后，touches和targetTouches中将不再有值，targetTouches还会有一个只，此值为最后一个离开屏幕的手指的触摸点。
（7）DOM对象
DOM（document object model）文档对象模型
1.DOM节点
| 节点类型（nodeType） | 节点名称（nodeName） | 节点值（NodeValue） | |
| 元素节点（标签 ） | 1 | 标签名（大写 ） | null |
| 属性节点（属性） | 2 | 属性名称 | 属性值 |
| 文本节点（文本） | 3 | #text | 文本本身 |
注释节点：8
根节点：9
注意：空格和换行也是文本节点
2.获取节点
①属性节点包括：clsaa，id，style，name等
obj.attributes[0|'id']; //获取对象的所有的属性的集合
obj.getAttribute(“id”); //获取指定属性名的属性值
obj.getAttributeNode(“id”) //从当前元素中通过名称获取属性节点
②取其他节点 获取父、子和同胞节点对象
节点对象.parentNode //父节点
节点对象.childNodes //获取子节点
节点对象.children //获取元素中的子元素对象，不要文本
节点对象.firstChild //获取第一个子节点
节点对象.firstElementChild //获取第一个子节点，不要文本
节点对象.lastChild //获取最后一个子节点
节点对象.lastElementChild //获取最后一个子节点，不要文本
节点对象.previousSibling //获取前一个兄弟元素节点
节点对象.previousElementSibling //获取上一个兄弟元素节点；（只包含元素节点）不包含文本节点；
节点对象.nextSibling //获取下一个兄弟元素
节点对象.nextElementSibling // 获取下一个兄弟元素节点；（只包含元素节点）不包含文本节点；
节点对象.elements // 返回包含表单中所有元素的数组
3.操作节点对象-改变节点内容
①获取元素对象属性：
方法1：元素对象.属性名 [class需要使用className]，仅限于当前标签存在的属性，自定义不可以使用
方法2：元素对象.getAttribute('属性名')
方法3：元素对象.dataset.index【dataset是H5新增的属性】
②设置元素对象属性：
方法1：元素对象.属性名='属性值'
方法2：元素对象.setAttribute('属性名','属性值')
方法3：元素对象.dataset.index = '01' （通过dataSet新增自定义属性，一般以data-开头的属性名，为程序员之间默认的格式，认为这是一个自定义属性）
③元素对象.dataset.defaultColor
移除元素对象属性： removeAttribute("name")
delete 元素对象.dataset.XXX
④获取及设置元素节点对象内容
元素对象.innerHTML（从开始标签-结束标签包括html标签）
元素对象.outerHTML（innerHTML的全部和标签本身）
元素对象.innerText（只获取元素总的文本内容）
表单元素对象.value
4.节点对象操作-增删改
①创建节点
| 方法 | 描述 |
| createElement(tagName) | 创建标记名tagName的Element节点。Element节点可以包含文本子节点和属性子节点 例如：node_h1=document.createElement(“h1”) |
| createTextNode(text) | 创建包含文本text的文本节点，返回得到的节点如：node_text=document.createTextNode(“hello”) |
| appendChild(node) | 向当前节点添加子节点，子节点被添加在子节点列表的尾部。例如：node_h1.appendChild(node_text) |
| insertBefore(new,current) | 在current节点前插入new节点。 parentNode.insertBefore(new,current) |
②删除节点
父节点对象.removeChild("子节点对象")
节点对象.remove() //移除当前元素
③替换节点
父节点对象.replaceChild("新节点","旧节点")
④克隆节点
element.cloneNode(true)
5.DOM元素的其他获取方式
| 属性名 | 说明 |
| anchors | 该属性返回一个数组，代表当前文档中的锚 //anchors.length |
| forms | form表单对象的数组 |
| images | image对象的数组 |
| links | link对象的数组 |
| lastModified | 返回当前文档的最后一次修改时间 |
| title | 设置或返回当前文档的标题 |
常用元素节点对象
document.documentElement html
document.head head
document.title title
document.body body
（8）BOM对象
BOM（Browser Object Model）浏览器对象模型
1.window对象
-
表示浏览器窗口，所有浏览器都支持 window 对象
-
所有 JavaScript 全局的对象、函数以及变量均自动成为 window 对象的成员[属性和方法]
| 子对象 | 作用 |
| document | 文档对象用于操作页面元素 |
| location | 地址对象用于操作URL地址 |
| navigator | 浏览器对象用于获取浏览器版本信息 |
| history | 历史对象用于操作浏览器历史 |
| screen | 屏幕对象用于操作屏幕的高度和宽度 |
| 属性名 | 说明 |
| closed | 返回一个布尔值，用于判断窗口是否已经关闭。 |
| 方法名 | 说明 |
| open([url],[_blank],[width，height]) | 新建窗口 |
| close() | 关闭当前页面 |
| moveTo(x,y) | 移动窗口到指定坐标 |
| moveBy(x,y) | 相对当前位置移动 |
| resizeTo(x,y) | 窗口大小调整到指定宽高 |
| resizeBy(+w,+h)(可以是正、负数值) | 窗口大小增减宽高 |
| 方法名 | 说明 |
| alert("信息内容") | 弹出一个警告框 |
| confirm("信息内容") | 弹出一个确认对话框 |
| prompt("信息内容",["默认输入内容"]) | 弹出一个提示对话框 |
2.location对象
location 对象用于获得当前页面的地址 (URL)，或把浏览器重定向到新的页面
| 属性名 | 说明 |
| pathname | 返回当前页面的路径和文件名。 |
| href | 返回当前页面的 URL |
| hostname | 返回域名 |
| port | 返回端口 |
| protocol | 返回协议 |
| search | 返回传值部分 |
| 方法名 | 说明 |
| reload([true]) | 刷新 |
| replace("url") | 跳转到新页面 |
3.history对象
| 属性名 | 说明 |
| length | 浏览器窗口的历史列表中的网页个数 |
| 方法名 | 说明 |
| go(num) | 该方法可以直接跳转到某一个已经访问过的URL。 |
| forward() | 该方法可以前进到下一个访问过的URL,等价于go(1) |
| back() | 该方法可以返回到上一个访问过的URL,等价于go(-1) |
4.navigator对象
| 方法名 | 说明 |
| go(num) | 该方法可以直接跳转到某一个已经访问过的URL。 |
| forward() | 该方法可以前进到下一个访问过的URL,等价于go(1) |
| back() | 该方法可以返回到上一个访问过的URL,等价于go(-1) |
5.screen对象
-
screen对象是一个由JavaScript自动创建的对象，该对象的作用主要是描述客户端的显示器的信息，例如屏幕的分辨率、可用颜色数等。
-
screen对象是一个全局对象，该对象中存放的都是静态属性，这些属性值是只读的
| 属性名 | 说明 |
| height | 屏幕的高度，单位为像素 |
| width | 屏幕的宽度，单位为像素 |
| colorDepth | 颜色深度 |
| availHeight | 显示器可用的屏幕高度，单位为像素。（不含任务栏） |
| availWidth | 显示器可用的屏幕宽度，单位为像素 |
6. encodeURIComponent() 函数
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
decodeURIComponent解码
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
（9）正则表达式
1.元字符之原子的集合
| 集合 | 含义描述 |
| . | 查找单个字符，除了换行和结束符。 [ ^\n\r] |
| \d | 匹配0-9的数字，相当于[0-9] |
| \D | 匹配除0-9之外的任意字符，相当于[ ^0-9 ] |
| \s | 匹配一个空白字符，相当于[\f\n\r\t\v ] |
| \S | 匹配一个非空白字符，相当于[ ^\f\n\r\t\v ] |
| \w | 匹配任意一个数字、大小写字母和下划线字符，相当于[0-9a-zA-Z _]匹配任意一个数字、大小写字母和下划线字符，相当于[0-9a-zA-Z _] |
| \W | 匹配任意一个非数字、大小写字母和下划线字符，相当于[ ^0-9a-zA-Z ] |
2.使用RegExp创建正则表达式对象
new RegExp(pattern, attributes); pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。
var reg = RegExp(/\d/,'g'); // 匹配所有的数字，并且是全局匹配
var reg = RegExp('1','g'); // 匹配数字1，并且全局匹配
console.log(str1.match(reg));3.使用 RegExp(正则表达式) 对象的方法
①bool RegExpObject.test(string) 检索字符串是否匹配。 返回 true 或 false
②array RegExpObject.exec(string) 检索字符串中指定的值。 返回找到的值，并确定其位置。 注意：当使用exec有g全局匹配的时候，才会自动进行while循环遍历
var str = "I like to eat apples, and my name is apple";
var reg = new RegExp("apple","g");
var result;
while(result = reg.exec(str)){
alert(result);
alert(reg.lastIndex);
}4.支持正则表达式的 String 对象的方法
①array stringObject.match(regexp) 检索字符串
②string stringObject.replace(regexp,replacement) 替换 在正则中：()包括起来，那么就产生了一个模式单元，模式单元使用 $num
③array stringObject.split(separator,howmany) 分割成数组
④int stringObject.search(regexp) 检索字符串中第一个与 regexp 相匹配的子串的起始位置。 如果没有找到任何匹配的子串，则返回 -1。
（10）this指向
1.改变this指向
①call方法
语法格式：fun.call(this，obj1，obj2);
②apply方法
语法格式：fun.apply(this，[obj1，obj2]);
③bind方法
语法格式：Fun.bind(this，arg1，arg2);
bind()方法不会调用函数，但是能改变函数内部this指向，需要自调用
（11）防抖和节流
本质上是优化高频率执行代码的一种手段
定义
防抖: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
节流: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
（12）ajax
1.什么是ajax
Asynchronous Javascript And XML（异步JavaScript和XML）
AJAX并不是一种语言，而是一种创建交互式网页应用的网页开发技术
AJAX是Javascript、HTML和CSS、DOM、XML和XSTL、XMLHttpRequest 等技术的组合
AJAX核心对象是XMLHttpRequest
2.AJAX优缺点
① AJAX异步处理的优点
减轻服务器的负担，AJAX一般只从服务器获取只需要的数据。
无刷新页面更新，减少用户等待时间。
更好的客户体验，可以将一些服务器的工作转移到客户端完成，节约网络资源，提高用户体验
无平台限制
促进显示与数据相分离
② AJAX异步处理的缺点
页面中存在大量js，给搜索引擎带来困难
AJAX干掉了Back和History功能，即对浏览器机制的破坏
存在跨域问题 域名
只能传输及接收utf-8编码数据
| 属性 | 描述 |
| onreadystatechange | 定义了当 readyState 属性发生改变时所调用的函数。 |
| readyState | 保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪 |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found"如需完整列表，请访问 Http 消息参考 |
| statusText | 返回状态文本（例如 "OK" 或 "Not Found"） |
（13）跨域请求
跨域是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制
什么是同域：协议, 域名, 端口号 完全一致, 是同域.
原生JS解决跨域问题有三种方式：Jsonp，postMessage，CORS 前端：Jsonp，proxy 后端：CORS
1.jsonp跨域
前端发送请求 后端配合回调函数
好处：
①javascript 兼容性比较好
②不需要服务器支持，直接在本地运行
缺点：
①它只支持GET请求而不支持POST等其它类型的HTTP请求
②它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
③jsonp在调用失败的时候不会返回各种HTTP状态码。
④安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的
2.CORS跨域
header('Access-Control-Allow-Origin:http://www.abc.com'); // 允许一个访问
header('Access-Control-Allow-Origin:*'); // 允许所有访问
echo '您已经访问成功';3.URL对象（补充）
①URL的编码/解码方式
JavaScript 提供四个 URL 的编码/解码方法。
-
encodeURI()
-
encodeURIComponent()
-
decodeURI()
-
decodeURIComponent()
②URL接口常用属性
| 属性 | 功能 |
| URL.href | 返回整个 URL |
| URL.protocol | 返回协议，以冒号:结尾 |
| URL.hostname | 返回域名 |
| URL.host | 返回域名与端口，包含:号，默认的80和443端口会省略 |
| URL.port | 返回端口 |
| URL.origin | 返回协议、域名和端口【只读】 |
| URL.pathname | 返回路径，以斜杠/开头 |
| URL.search | 返回查询字符串，以问号?开头 |
| URL.searchParams | 返回一个URLSearchParams实例，该属性是Location对象没有的 |
| URL.hash | 返回片段识别符，以井号#开头 |
| URL.password | 返回域名前面的密码 |
| URL.username | 返回域名前面的用户名 |
（14）面向对象
面向对象三大特征：封装、继承、多态
1. 使用new创建对象的步骤
创建一个空的实例化对象
让构造函数中的this指向空的实例化对象
执行（调用）构造函数，从而创建实例话对象自身的属性和方法
返回实例化对象
2.原型和原型链
原型：JavaScript中的每个函数在创建时都会拥有一个名为prototype的属性，这个属性指向一个对象，即该函数的原型对象。原型对象中有一个constructor属性，指回该函数本身。当通过构造函数创建一个新的对象时，这个对象内部会包含一个__proto__属性，指向构造函数的原型对象。这样，原型对象上的属性和方法就可以被所有通过该构造函数创建的对象实例共享。
原型链：当尝试访问一个对象的属性时，JavaScript会首先在对象本身查找这个属性。如果没有找到，它会沿着__proto__属性指向的原型链向上查找，直到找到该属性或到达原型链的末端。原型链的末端通常是Object.prototype，其__proto__属性的值为null。
这种原型链机制使得对象可以访问不在自身上定义的属性，实现了属性和方法的继批。例如，所有的JavaScript对象都可以使用toString()方法，因为这个方法定义在Object.prototype上，而所有对象的原型链最终都会指向Object.prototype。
3.继承
①构造继承
使用call和apply来改变被继承函数的this指向
function Student(name,sex,age,stu_id){
// 继承方法1: 让student 继承 person
// Person.call(this,name,sex,age);
Person.apply(this,[name,sex,age]);
}②原型继承
原型也是对象，将原型对象实例化
Student.prototype = new Person();③实例继承
在函数中创建一个实例化对象，并进行返回
function Student(name,sex,age){
var per = new Person(name,sex,age);
return per;
}
var stu = new Student('Jack','男',18);④拷贝继承
通过循环遍历被继承对象的属性和方法，并赋值给新的实例化对象的原型对象
⑤组合继承
构造继承和原型继承的组合
⑥寄生继承
function Student(name,sex,age,stuID){
Person.call(this,name,sex,age);
this.stuID = stuID;
this.study = function(){
console.log('我正在学习');
}
}
(function(){
// 创建一个super类，作为中间媒介，进行传递
var Super = function(){};
// 将该类原型执行person的原型[注意！！！还没解释清楚，后期再解释]
Super.prototype = Person.prototype;
// 子类的原型指向 super的实例
Student.prototype = new Super();
})() // 自调用
var stu = new Student('Jack','男',18,'10010');
console.log(stu.ID);
console.log(stu.name);
stu.play()五、ES6
（1）ES6-变量-常量-块级作用域-解构赋值-箭头函数
ES6新增let（定义变量）和const（定义常量）
块级作用域——{}包起来的区域就是一个块级作用域
1.var，let，const的区别
2.解构赋值
解构赋值的本质: 模式匹配. 只要 = 两侧的模式相同, 左侧的变量就可以被赋予对应的值.
let dataObj = {
codeNum: '200',
codeMsg: 'ok',
data: [
{name: '刘德华', age: 60},
{name: '刘德华', age: 60}
]
};
let {codeNum, data, data: listObj, data: [dataPer], data:[{name, age}]} = dataObj;3.箭头函数
箭头函数获取参数没有arguments这个用法，使用（...args）等同于arguments
函数的两个属性，length和name
length：获取函数参数的个数，如果参数有默认值，length属性将返回
name：获取函数的函数名
箭头函数的this指向
箭头函数本身没有this，所以箭头函数的this指向 是 父级程序的this指向 如果没有父级程序 或者 父级程序没有指向 箭头函数的this指向是window
在箭头函数中不能通过call/apply/bind改变this指向
不能使用new关键字，没有原型属性
（2）ES6新增数组字符串方法-字面量对象简写
1.字符串方法
includes(str ，index)，检索字符串中是否包含str，index是从下标为几的位置开始查
startsWith(str，index)，判断字符串是否以str开头
endsWith(str， index)，判断字符串是否以str结尾
repeat(n):，让字符串重复几次
padStart(num，str)，使用str将字符串填充到num位，向前面添加
padEnd(num，str)，使用str将字符串填充到num位，向后面添加
trimStart()，去除字符串开头的空格
trimEnd()，去除字符串结尾的空格
trim()，去除字符串两边的空格
2.ES5新特性（新增数组方法）（ES6-10新特性）
forEach （item，index，self），item：循环的元素，index：循环元素的下标，self：数组本身，无回调
map（item，index，self） ，对数据处理并返回，进几个数据返回几个数据
filter （item，index，self），过滤，返回符合条件的数据
some （item，index，self），有一个符合条件就返回true，否则false
every （item，index，self），全部符合条件就返回true，否则false
reduce（sum，item，index，self），汇总（减少）数据，返回汇总后的sum
ES6新特性
①变量声明：const和let
② 解构赋值
③ 箭头函数
④模板字符串
⑤ 默认参数、剩余参数和展开运算符
⑥类和继承
⑦Promise
⑧模块化
⑨迭代器和生成器
⑩Map和Set
ES7新特性
①Array.prototype.includes()方法
②求幂运算符 **
ES8新特性
①Async/Await
② Object.values()，Object.entries()
③String padStart
ES9新特性
① for — of遍历
② Promise.prototype.finally()
ES10新特性
①Array.prototype.flat()
②Array.prototype.flatMap()
③Object.fromEntries()
④String.trimStart 和 String.trimEnd
⑤try…catch
（3）ES6新增数据类型-新增方法
1.新增数据类型
①Symbol，独一无二的值，常用作对象的键名
②Set，类似与数组，成员值唯一，会自动去除重复值
③ Map，类似于对象，键名可以是任意类型
2.新增数组方法
①Arrayf.from（），将一个类似于数组的结构转换为数组
let arrLike = {
'0': 'm',
'1': 'a',
'2': 'b',
'3': 'c',
length: 4
}②Array.of（），将一组数字转换为数组
③copyWithin（index，start，end），操作数组自身，参数都为数组下标，将从start到end之间的数据，从index处开始替换掉
④fill（val，start，end），将数组从start到end之间的数据全部替换为val
⑤keys（），数组全部的键名
⑥values（），数组全部的值
⑦entries（），数组全部的键值对
注意：keys（），values（），entries（）可用于数组和对象，数组的用法是arr.keys（），对象的用法是Object.keys（obj），数组可用对象的用法，反之不可以
（4）ES6-promise-try-catch-模块化开发
promise主要就是解决回调地狱的问题的，其实就是把异步的代码按照同步的顺序来执行
promise本身是同步的，它里面的reslove和reject方法是异步的
promise有两个静态方法，all和race，all表示里面异步的代码全部执行完毕后，在执行后面的代码，race表示第一个异步代码执行完毕后，就执行后面的方法
六、H5新增API
（1）canvas
<canvas width="1024" height="768" id="canvas" style="border:1px solid #aaa; display:block; margin:50px auto;"></canvas>
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d')
window.onload=function(){
// 获取convas元素
var canvas=document.getElementById('canvas');
// 初始化 绘制2d图
var context=canvas.getContext('2d')
}总结：
定义一个路径
context.moveTo(x,y) context.lineTo(x,y)
多个路径分开处理，首尾使用分隔开
context.beginPath() context.closePath()
定义线条的宽度，颜色，填充色
context.lineWidth context.strokeStyle context.fillStyle
绘制方法，绘制线条和填充色
context.stroke() context.fill()
绘制圆形
context.arc(centerx,centery,radius, 【圆心x，圆心y，半径】startingAngle,endingAngle,【从哪个弧度开始，从哪个弧度结束】anticlockwise=false 【可选，顺时针还是逆时针，默认值为顺时针】False = 顺时针，true = 逆时)
绘制椭圆
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来添加的， 参数的意思：(起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)
绘制文字
绘制镂空文字: strokeText(text, x, y, maxWidth) 绘制填充文字: fillText(text, x, y, maxWidth)
文字阴影
shadowColor 阴影颜色 shadowOffsetX 阴影x偏移 shadowOffsetY 阴影y偏移 shadowBlur 模糊程度
文字渐变
createLinearGradient（x0，y0，x1，y1）方法创建线性的渐变对象。
addColorStop(0,"black") 渐变的颜色 x0 渐变开始点的 x 坐标 y0 渐变开始点的 y 坐标 x1 渐变结束点的 x 坐标 y1 渐变结束点的 y 坐标 (0,0,0,100) 从上到下 (0,100,100,100) 从左到右
var grd = ctx.createLinearGradient(0,200,200,200);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop('1',"red");
ctx.fillStyle = grd;
ctx.fillText(txt,0,100); // 文字的渐变
ctx.fillRect(20,20,150,100); // 北京的渐变二次贝塞尔曲线
quadraticCurveTo(cpx, cpy, x, y) cpx 和 cpy 确定控制点坐标 x 和 y 确定目标点坐标
https://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html三次贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) cp1x 和 cp1y 确定第一个控制点坐标 cp2x 和 cp2y 确定第二个控制点坐标 x 和 y 确定目标点坐标
七、Vue3
（1）Vue指令
指令是带有 v- 前缀的特殊 attribute（属性）
1.v-html,v-text
往标签里面添加信息，类似于innerHTML和innerText
2.v-bind
可简写成 ':'，数据的绑定
3.v-on
可简写成‘@’，事件的绑定
事件绑定修饰符
stop 阻止冒泡
prevent 阻止默认事件
capture以捕获的形式来触发
self只有当前事件会执行
once当前事件只能触发一次
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
扫一扫
5181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
