<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行，也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
<!-- 文档声明，声明当前网页的版本 -->
<!DOCTYPE html>
<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>
<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>
<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
<meta charset="utf-8" />
<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
<title>网页的标题</title>
</head>
<!-- body是htm1的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
<body>
<!-- h1网页的一级标题 -->
<h1>网页的大标题</h1>
</body>
</html>
有些时候，在HTML中不能直接书写一些特殊符号，如
| 实体名称 | 显示结果 | 描述 |
|---|---|---|
|   | 空格 | |
| > | > | 大于号 |
| < | < | 小于号 |
| & | & | 与 |
更多实体，可以参考w3school网站
meta主要用于设置网页中的一些元数据，元数据并不是给用户看的
<meta charset="utf-8" />
<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
在网页中HTML专门用来负责网页的结构，所以在使用HTML标签的时候，应该关注的是标签的语义，而不是他的样式，这里先介绍几个基本的于一标签，还有些常用的标签放在后面具体讲解。
| 标签 | 作用 | 描述 | |
|---|---|---|---|
| 块元素 | <h1>~<h6> | 标题 | 一共有6级，一般情况下一个页面只有一个<h1>，一般情况下很少用到4-6级标签 |
| <hgroup> | 标题组 | <hgroup> 标签被用来对标题元素进行分组。 | |
| <p> | 段落 | 页面中的一个段落 | |
| <blockquote> | 长引文 | 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体 | |
| 行内元素 | <q> | 短引文 | 表示一个封闭的并且是短的行内引用的文本 |
| <br> | 换行 | ||
| <em> | 强调 | 标签是一个短语标签，用来呈现为被强调的文本,不建议用 |
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，这个通过浏览器中的查看网页源代码并不能看到效果，但是使用 F12 进行开发者调试时是能够看到上述几种情况被修正的结果。
不过虽然浏览器能够对不规范的页面内容进行修正，还是不建议编写不规范的代码，因为这对后期代码维护或团队代码协作将是非常不好的后果和体验。
<ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ol>
<ul>
<li>Milk</li>
<li>
Cheese
<ul>
<li>
Blue cheese
<ul>
<li>Sweet blue cheese</li>
<li>Sour blue cheese</li>
</ul>
</li>
<li>Feta</li>
</ul>
</li>
</ul>
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素，那么嵌套的元素就相当于一个超链接
<ul>
<li><a href="https://www.baidu.com">Website</a></li>
<li><a href="mailto:example@outlook.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以./或…/开头
图片标签用于向当前页面中引入一个外部图片。
img标签是一个自结束标签，这种元素属于替换元素（块和行内元素，具有两种元素的特点）
audio标签用来向页面中引入一个外部的音频文件。
E8 下不支持audio元素，但是可以使用 元素在文档中的指定位置嵌入外部内容。
<embed src="./source/audio.mp3" />
video标签来向网页中引入一个视频，使用方式和audio基本上是一样的
<video controls>
<source
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
type="video/webm"
/>
<source
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
type="video/mp4"
/>
<embed
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
type="video/mp4"
/>
</video>
女人都是感性动物，注重细节，这种场景下"大大咧咧"的男生就成为了次品。无怪乎，喜欢渣男，也难免被渣。不说了，继续卷。
使用<table>创建一个表格，主要可以通过table中以下子标签生成表格，具体子标签如下：
<table>
<!--行标签-->
<tr>
<!--单元格标签-->
<td></td>
<!--设置单元格行合并-->
<td colspan="合并的格数"></td>
<!--设置单元格列合并-->
<td rowspan="合并的列数"></td>
</tr>
</table>
<!--长表格-->
<table>
<!--头，也可以用<th>来表示-->
<thead>
<tr>
<td>
</td>
</tr>
</thead>
<!--内容-->
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
<!--尾-->
<tfoot>
<tr>
<td>
</td>
</tr>
</tfoot>
</table>
table {
width: 500px;
margin: 0 auto;
border-top: 1px solid black;
border-left: 1px solid black;
border-spacing: 0px;
}
table tr td {
width: 100px;
border-bottom: 1px solid black;
border-right: 1px solid black;
text-align: center;
}
<!--action是提交的地址，method是提交的方式，只支持get/post-->
<form action="www.baidu.com" method="get">
<!--type：text -> 文本框-->
<!--type：password -> 密码框-->
<!--type：submit -> 提交按钮-->
<!--type：reset -> 重置按钮-->
<input type="类型" name="参数值">
<!-- 普通按钮 -->
<input type="button" value="按钮" />
<!-- 普通按钮的另一种写法 -->
<button type="button">按钮</button>
<!--单选框-->
<input type="radio" name="man" value="男">
</form>
<!--单选框 value作为传递给服务器的值，checked是默认值-->
<input type="radio" name="man" value="男" checked>男
<input type="radio" name="woman" value="女">女
<br/>
<!--多选框-->
<input type="checkbox" name="1" value="1">1
<input type="checkbox" name="2" value="2">2
<br/>
<!--下拉列表-->
<select name="drop-down">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
通过标签的style属性来设置元素的样式
<p style="color:red;font-size:60px">学习</p>
为解决上述问题，使得我们的样式能够在一个html文件中重复被使用。我们引入了==“内嵌样式”==
顾名思义，内嵌样式就是将样式定义到<head>标签中，使得样式可以被重复使用。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
font-size: 20px;
color: red;
}
</style>
</head>
为了解决上述问题，我们引入了以下方式，链接样式表。
顾名思义，链接样式表就是将外部的css文件引入到当前html文件中
<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">
<!-- href表示引入的路径，rel代表引入文件的类型 -->
<link href="./style.css" rel="stylesheet"/>
<title>Document</title>
</head>
作用：选中改html文件中的所有元素
语法：
* {
样式1;
样式2;
}
作用：选中改html文件中指定的元素
语法：
类型 {
样式1；
样式2；
}
例子：
p {
font-size: 20px;
color: red;
}
作用：根据元素的 class 属性值选中一组元素
语法：
.类型 {
样式1；
样式2；
}
p[title] {
color: orange;
}
p[title="e"] {
color: orange;
}
p[title^="e"] {
color: orange;
}
p[title$="e"] {
color: orange;
}
p[title*="e"] {
color: orange;
}
div.red {
font-size: 30px;
}
.a.b.c {
color: blue;
}
h1,
span {
color: green;
}
- 父元素：直接包含子元素的元素叫做父元素
- 子元素：直接被父元素包含的元素是子元素
- 祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
- 后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
- 兄弟元素：拥有相同父元素的元素是兄弟元素
div.box > p > span {
color: orange;
}
div span {
color: skyblue;
}
p + span {
color: red;
}
p ~ span {
color: red;
}
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第 n 个子元素
:first-of-type 同类型中的第一个子元素
:last-of-type 同类型中的最后一个子元素
:nth-of-type() 选中同类型中的第 n 个子元素
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的
:not()否定伪类，将符合条件的元素从选择器中去除
/* ul下所有li，黑色 */
ul > li {
color: black;
}
/* ul下第偶数个li，黄色 */
ul > li:nth-child(2n) {
color: yellow;
}
/* ul下第奇数个li，绿色 */
ul > li:nth-child(odd) {
color: green;
}
/* ul下第一个li，红色 */
ul > li:first-child {
color: red;
}
/* ul下最后一个li，黄色 */
ul > li:last-child {
color: orange;
}
作用：根据元素的 id 属性值选中一组元素
语法：
#id {
样式1；
样式2；
}
样式的继承，我们为一个元素设置的样式，同时也会应用到它的后代元素上，继承是发生在祖先后代之间的，集成的设计师为了方便我们的开发。利用继承，我们可以将一些通用的样式，统一设置到共同的祖先元素上，这样只需要设置一次即可让所有的元素都具有该样式，注意，并不是所有的样式都会被继承。
当我们通过不同的选择器，选中不同的元素，并且为相同的样式设置不同的值时，就会发生样式的冲突。
| 选择器 | 权重 |
|---|---|
| 内联样式 | 1,0.0,0 |
| ID选择器 | 1,0.0,0 |
| 类和伪类选择器 | 1,0.0,0 |
| 元素选择器 | 1,0.0,0 |
| 通配选择器 | 1,0.0,0 |
| 样式继承 | 没有优先级 |
网页是一个多层的结构，一层叠加着一层，通过CSS可以分别为每一层来设置样式，作为用户只能看到最顶上一层，这这层中，最底下的一层称为文档流，文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列。对于我们来说元素主要有两个状态（在文档流中，不在文档流中脱离文档流）
CSS将页面中的所有元素都设置一个矩形的盒子。每一个盒子都由以下类型组成。
内容区是盒子模型的中心，它呈现了盒子的主要内容，元素的所有子元素和文本内容都在内容中
- width设置内容区的宽度
- height设置内容区的高度
内边距，也叫填充，是内容区和边框之间的空间
- padding-top 上内边距
- padding-right 右内边距
- padding-bottom 下内边距
- padding-left 左内边距
常用的边框属性
- border-width 边框的宽度：默认 3px
- border-top-width 上边框的宽度
- border-right-width 右边框的宽度
- border-bottom-width 下边框的宽度
- border-left-width 左边框的宽度
- border-color 边框的颜色：默认使用 color 的颜色值
- border-top-color 上边框的颜色
- border-right-color 右边框的颜色
- border-bottom-color 下边框的颜色
- border-left-color 左边框的颜色
- border-style 边框的样式：没有默认值，必须指定
- border-top-style 上边框的样式
- border-right-style 右边框的样式
- border-bottom-style 下边框的样式
- border-left-style 左边框的样式
外边距，也叫空白边，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是 CSS 布局的一个重要手段。注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用空间。
- margin-top 上外边距
- 设置正值，元素自身向下移动
- 设置负值，元素自身向上移动
- margin-right 右外边距
- 设置正值，其右边的元素向右移动
- 设置负值，其右边的元素向左移动
上述说法并不准确，对于块元素，设置margin-right不会产生任何效果- margin-bottom 下外边距
- 设置正值，其下边的元素向下移动
- 设置负值，其下边的元素向上移动
上述说法并不准确，对于块元素，会有垂直方向上的边距重叠问题（后面会细说）- margin-left 左外边距
- 设置正值，元素自身向右移动
- 设置负值，元素自身向左移动
一个元素在其父元素中，水平布局必须要满足以下的等式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素的宽度。
元素溢出：子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
可以在父元素的overflow属性来管理溢出内容
垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象
兄弟元素的相邻，会取两者绝对值的最大值。特殊情况如果，一正一负，则取两者之和。
父子元素间相邻外边距，子元素会传递给父元素（上外边距）,由于父子元素之间的折叠会影响开发的效果，因此必须处理。主要处理方案如下：
解决方案
如果想要行内元素产生垂直效果，可以使用display属性，将当前元素改为块元素
- display的属性
- inline：行内元素
- block：块状元素
- table：表格
- inline-block：行内块元素，相当于文字
- none：将当前元素删除
display:none与visibility:hidden的区别，display:none相当于删除当前标签，但是visiblity:hidden只是将元素隐藏，位置依然存在。
在当今网页设计/开发实践中，使用 CSS 来为语义化的(X)HTML 标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界：所有的浏览器都能够理解和适用多有 CSS 规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多 CSS 样式在不同的浏览器中有着不同的解释和呈现。
当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari 等等)中，有一些都是以自己的方式去理解 CSS 规范，这就会导致有的浏览器对 CSS 的解释与设计师的 CSS 定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示而且有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视 CSS 的一些声明和属性。
为了解决以上问题，我们提出了两种解决方案。
将所有的样式的默认格式都取消掉，重新设置
<link rel="stylesheet" href="assets/reset.css" />
统一所有样式
<link rel="stylesheet" href="assets/normalize.css">
默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定。
box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
content-box:默认值，宽度和高度用来设置内容区的大小
border-box：宽度和高度用来设置整个盒子可见框的大小
outline和border的用法相似，不同的是outline不会影响盒子可见区的大小
使用box-shadow可以设置图形的阴影区域
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
border-radius 用来设置圆角，圆角设置的是圆的半径大小，以该方向的角为起始点，分别向图形内延深对应的值，作为圆心，画圆，取1/4圆极为圆角。
通过浮动可以使一个元素脱离文档流向其父元素的左侧或右侧移动
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失，，父元素高度丢失后，其下的元素会自动上移，导致页面的布局混乱。
为了解决高度塌陷的问题，我们引入了BFC：
BFC全称为块区域格式化环境，是CSS的一个隐藏属性，开启BFC，该元素会变成一个独立的布局区域。开启BFC后，具有以下特点：
- 不会被浮动元素覆盖
- 父子元素外边距不会重叠
- 可以包含浮动的元素
开启BFC的方法：
消除浮动元素对当前元素的影响
如果我们在浮动元素的后面添加一个块级元素，并让这个元素设置为空，用clear清楚高度坍塌对当前元素的影响不久可以解决这个问题了？
由此，我们采用了::after(创建一个伪元素，作为选中元素的最后一个子元素)的方式
.one::after {
content: "";
clear: left;
display: block;
}
参考文档流中的元素的位置进行定位
默认top的正方向为下，left向右，right向左，bottom向上
以包含块为定位元素作为定位
包含块
- 包含块就是离当前元素最近的开启了定位的祖先块元素
- 如果所有的祖先元素都没有开启定位，则html（根元素、初始包含块）就是它的包含块
固定定位也是一种绝对定位，只不过定位元素为当前窗口，但不会随网页的滚动条滚动。
@font-face {
/* 指定字体名字 */
font-family: "myFont1";
/* 服务器中字体路径 */
src: url("/font/ZCOOLKuaiLe-Regular.woff"),
url("/font/ZCOOLKuaiLe-Regular.otf"),
url("/font/ZCOOLKuaiLe-Regular.ttf") format("truetype"); /* 指定字体格式，一般不写 */
}
p {
font-size: 30px;
color: salmon;
font-family: myFont1;
}
1.下载（https://fontawesome.com/）
2.下载买免费包
3.将包中的的css文件夹和webfonts拉入到项目中，记得要放到同一个目录中
4.在zeal中下载fontawesome包（只有fas和fab才能用免费的）
文字占有的实际高度，可以通过line-height来设置行高
行高经常还用来设置文字的行间距行间距=行高 - 字体大小
| text-align属性值 | 对齐方式说明 |
|---|---|
| left | 左侧对齐 |
| right | 右侧对齐 |
| center | 居中对齐 |
| jestify | 两端对齐 |
| vertical-align属性值 | 对齐方式说明 |
|---|---|
| baseline | 基线对齐 |
| top | 顶端对齐 |
| bottom | 底端对齐 |
| middle | 两端对齐 |
将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片，这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题。
通过过渡可以指定一个属性发生变化的切换方式，创建好的效果，提升用户的体验。
多个属性用，隔开。如果所有属性都过渡，则使用all关键字，
动画是以动画帧为基本单位，所以在使用动画的时候，要先使用动画帧。
@keyframes test {
/**开始属性**/
from {
margin-left: 0;
}
/**结束属性**/
to {
margin-left: 700px;
}
}
/**定义的动画帧**/
animation-name: test;
/**动画的持续时间**/
animation-duration: 2s;
/**延时动画的开始时间**/
animation-delay: 2s;
/**动画的执行次数**/
animation-iteration-count: 3;
/**动画的持续方向**/
animation-direction: reverse;
animation-play-state: 设置动画的执行状态
animation-fill-mode: 动画的填充模式
变形就是指通过 css 来改变元素的形状或位置，变形不会影响到页面的布局，transform用来设置元素的变形效果
z轴平移，调整元素在Z轴的位置，正常情况就是调整元素和人眼的距离，距离越大，元素离人越近，Z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距
//注释
body {
--height: calc(200px / 2);
--width: 100px;
div {
height: var(--height);
width: var(--width);
}
.box1 {
background-color: #bfa;
.box2 {
background-color: red;
.box3 {
background-color: yellow;
}
> .box4 {
background-color: green;
}
}
}
}
变量，在变量中可以存储一个任意的值，并且我们可以在需要时，任意的修改变量中的值，变量的语法：@变量名
在混合函数中可以直接设置变量，并且可以指定默认值
/*这种形式定义了形参的位置，并设置了默认值*/
.test(@w:200px, @h:100px, @bc:red) {
width: @w;
height: @h;
background-color: @bc;
}
@import "style.less";
@import "syntax.less";
是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局，flex可以是元素具有弹性，让元素可以跟随着页面的大小的改变而改变
要使用弹性盒，必须先将一个元素设置为弹性容器
我们通过display来设置弹性容器
主轴和侧轴的概念：
主轴：元素排列的方向，row就是从左往右，row-reverse就是从右往左
侧轴：与主轴垂直的方向
弹性元素就是弹性容器的子元素，一个元素可以同时是弹性元素和弹性容器。
<!--使用事件-->
<button onclick="alert('Hello Word')">打开</button>
<!--在链接上使用-->
<a href="javascript:alert('Hello Word')">链接</a>
<!--如果不想让该连接进行跳转，可以使用如下方式-->
<a href="javascript:">超链接</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
test = function () {
alert("Hello Word");
}
</script>
</head>
<body>
<button onclick="test()">按钮</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<button onclick="test()">按钮</button>
</body>
</html>
alert("Hello Word");
document.write("Hello Word");
console.log("Hello Word");
test1 = function(arg1, arg2) {
console.log(arg1, arg2);
}
function test2(arg1, arg2) {
console.log(arg1, arg2);
}
注意事项
字面量实际上就是一些固定的值，比如 1 2 3 4 true false null NaN “hello”,字面量都是不可以改变的。由于字面量不是很方便使用，所以在JS中很少直接使用字面量.
注意，JS是弱类型语言，是通过定义的值来推断类型的，var本身不带便任何一种类型，比如a赋予1，那么a就是number类型，a赋予‘str’,那么a就是String类型。
//变量的定义
var a = 1;
在JS中所有的可以自主命名的内容，都可以认为是一个标识符，是标识符就应该遵守标识符的规范。比如：变量名、函数名、属性名
规范：
JS中的字符串需要使用引号引起来 双引号或单引号都行。注意在字符串中使用\作为转义字符
JS中所有的整数和浮点数都是Number类型
布尔值主要用来进行逻辑判断，布尔值只有两个，true 逻辑的真，false 逻辑的假。
空值专门用来表示为空的对象
如果声明一个变量但是没有为变量赋值此时变量的值就是undefined
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。
test = function () {
//对象的定义
var user = {
name : "admin",
sex : "男"
}
//对象的两种方式
document.write(user.name);
document.write(user["sex"])
}
//调用变量的toString()方法
var a = 1;
var b = a.toString();
//调用String()方法
var c = String(b);
//使用Number()方法
var a = 1;
var b = Number(a);
//使用parseInt()或parseFloat(),这两个函数专门用来将一个字符串转换为数字的,可以将一个字符串中的有效的整数位提取出来，并转换为Number
var a = "123.456px";
a = parseInt(a); //123
需要注意的：
- 字符串 > 数字
* 如果字符串是一个合法的数字，则直接转换为对应的数字
* 如果字符串是一个非法的数字，则转换为NaN
* 如果是一个空串或纯空格的字符串，则转换为0- 布尔值 > 数字
* true转换为1
* false转换为0- 空值 > 数字
* null转换为0- 未定义 > 数字
* undefined 转换为NaN
使用Boolean()函数
var s = "false";
s = Boolean(s); //true
需要注意的是
- 字符串 > 布尔
除了空串其余全是true- 数值 > 布尔
除了0和NaN其余的全是true- null、undefined > 布尔
都是false- 对象 > 布尔
都是true
var a = true;
a = a + "";
var a = "123";
a = +a;
为任意的数据类型做两次非运算，即可将其转换为布尔值
var a = "hello";
a = !!a; //true
运算符也称为操作符，通过运算符可以对一个或多个值进行运算或操作。
用来检查一个变量的数据类型，语法：typeof 变量，它会返回一个用于描述类型的字符串作为结果
- 除了加法以外，对非Number类型的值进行运算时，都会先转换为Number然后在做运算。
- 而做加法运算时，如果是两个字符串进行相加，则会做拼串操作，将两个字符连接为一个字符串。任何值和字符串做加法，都会先转换为字符串，然后再拼串
- null和undefined：
由于undefined衍生自null，所以null == undefined 会返回true。但是 null === undefined 会返回false。- NaN：
NaN不与任何值相等，报告它自身 NaN == NaN //false。判断一个值是否是NaN，使用isNaN()函数。
条件 ? 符合条件的值 : 不符合条件的值
//if语句
if() {
} else {
}
//switch语句
switch(条件表达式){
case 表达式:
语句...
break;
case 表达式:
语句...
break;
case 表达式:
语句...
break;
default:
语句...
break;
}
//while语句
while() {
}
//do-while语句
do {
}while();
//for语句
for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){
③语句...
}
//死循环
while(true){
}
for(;;){
}
对象是JS中的引用数据类型，对象是一种复合数据类型，在对象中可以保存多个不同数据类型的属性
由ES标准中定义的对象，在任何的ES的实现中都可以使用。比如：Math String Number Boolean Function Object…
由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。比如 BOM DOM…
由开发人员自己创建的对象
var obj = new Object();
var obj = {
属性名:属性值,
...
};
- 向对象中添加属性
语法：
对象.属性名 = 属性值;
对象[“属性名”] = 属性值; //这种方式能够使用特殊的属性名
对象的属性名没有任何要求，不需要遵守标识符的规范，但是在开发中，尽量按照标识符的要求去写。
属性值也可以任意的数据类型。- 读取对象中的属性
语法：
对象.属性名
对象[“属性名”] //"属性名"可以使字符串常量，也可以是字符串变量
如果读取一个对象中没有的属性，它不会报错，而是返回一个undefined- 删除对象中的属性
delete 对象.属性名
delete 对象[“属性名”]- 使用in检查对象中是否含有指定属性
语法：“属性名” in 对象
如果在对象中含有该属性，则返回true
如果没有则返回false
for (var field : object) {
console.log(field);
}
nicode编码我们又可以叫做是统一码。在计算机科学领域中是一中业界标准
//在js中使用unicode编码：\u + 编码号的十六进制表示
function test() {
console.log("\u003D")
}
<!--在html中，使用unicode编码：\u + 编码号的十进制表示-->
<div>=</div>
function 函数名([形参1,形参2...形参N]){
语句...
}
var 函数名 = function([形参1,形参2...形参N]){
语句...
};
注意:
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);
第一个参数会作为方法的this，其余参数作为实参
方法.call(this指向变量, 实参...);
第一个参数会作为方法的this，其余参数作为实参，实参以数组封装
方法.apple(this指向变量,[实参...];
- 在Script标签中创建的对象都被称为全局对象
- 全局对象是在页面打开的时候创建，页面关闭时销毁
- 在全局作用域中有一个window对象，我们创建的全局对象，都会被当作window的属性。我们创建的方法，会被当做window的方法。可以用window.field/window.method调用这些属性/方法。
- 每创建一个函数，就是一个函数作用域。
- 各个函数作用域是互不相通的，即A作用域中的变量B不能在C作用域中使用
- 函数作用域中，对相同的变量取值，遵寻最近原则
- 在函数作用域中，如果变量没有用var定义，则该变量为全局变量
注意：
- 变量的提前声明：
使用var a = 1这种形式定义的变量，会在所有代码执行前进行定义，然后在当前行进行赋值。- 函数的提前声明
使用function a() {}这种形式声明的函数，会在所有代码前声明，因此可以在该函数前面执行该函数。
this在JS中就是函数执行的上下文对象
==需要注意的：==当对象.方法()，那么传入方法的this就是对象，如果是方法()这种形象，则this就是window。
构造函数的this就是将创建的对象。
//类名首字母大写
function 类名() {
}
1.立即创建一个新的对象
2.将新建的对象设置为函数的this
3.逐行执行函数的代码
4.将新建的对象作为返回值返回
用来判断当前对象的类型
对象 instanceof 类名
我们每创建一个函数，解析器都会想函数中添加一个属性prototype,这个属性对应着一个对象，这个对象就是原型对象，原型对象是由浏览器帮我们创建的。
Person.prototype
person.__proto__
注意
如果在我们所有对象中都是用到的属性，我们可以把它添加到原型中。如果我们调用这个属性，对象中没有，就会向原型对象中寻找。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.type = "人类";
var person = new Person("Mick", 1);
console.log(person.type);
person.type = "高级动物";
console.log(person.type);
console.log(Person.prototype.type)
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.type = "人类";
var person = new Person("Mick", 1);
//用in判断,会检验对象和原型中的数据
console.log("type" in person);
//用hasOwePerson,只会检验对象中的数据
console.log(person.hasOwnProperty("type"))
当我们直接将对象用console.log输出的时候，就会调用对象的toString()方法，这里和java一样，当然在java中我们是重写类的toString方法，在这里我们需要重写prototype的toString()方法
尚硅谷视频中只有一个句话：如果对象为null，浏览器会对对象进行回收，不同浏览器有不同的垃圾回收机制。
java出身的，所以这边我就没记录，跟java中的数组一致，但是Array慢慢被ArrayList取代了。
//创建空数组
var array = new Array();
//
var arr = new Array(1,2,3);
var arr2 = new Array(10);
//向数组中插入元素
array.push(1);
//取出数组中的元素
var arrayElement = array[2];
//计算数组的长度
console.log(array.length);
//数组的遍历
for (var i=0;i<s.length;i+=1) {
}
注意
arguments是方法的隐形参数，和this一样，arguments是实参列表，长度就是参数列表的长度。
function method2() {
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
注意：
argument-callee：当前正在执行的函数对象。
日期对象
//日期的创建（不指定时间，默认为当前时间）
var date = new Date();
//也可以用Date.now()获取当前时间
var currentDate = Date.now();
//日期创建（指定时间，格式为：yyyy/MM/dd HH-mm-ss)
var dateOfHasArgument = new Date("2022/12/12 12:00:00");
数学工具类
众所周知，JS的六种基本类型中，string,number,null,boolean,undefined都是基本数据类型。因此我们想对基本数据类型的对象添加方法的时候就很不方便。因此JS给我们提供了三种包装类，从而实现这个需求
虽然包装类有以上的特点，但是存在一个问题，比如我们使用Boolean判断，程序如下：
var boolean = new Boolean(false);
if (boolean) {
console.log("into")
}
奇怪的是，输出了into，那是因为在对象转换的时候由于对象非空，因此将boolean转换为true，所以输出了into，因此开发过程中，不要使用包装类。
这边的概念和java就比较相似，就是说我们调用基本数据类型的方法的时候，会将基本数据类型转换为包装类，执行完方法或者属性后，再转换为基本数据类型，在java中，也叫自动装箱完后自动拆箱。
学过Java的同学，这边就学习着比较简单了，方法基本相似。
//通过构造函数创建
var regExp = new RegExp(正则表达式, 匹配格式);
//通过字面量创建，不需要引号
var regExp = /正则表达式/匹配模式;
匹配模式分为两种：
var 检验结果 = regExp.test(检验的字符串);
DOM的全称是：Document Object Mode，文档对象模型。可以理解成文档对象集合，简单来说，就是HTML中所有节点的集合，js给我们提供了document对象，我们可以通过document操作文档对象模型。
构成HTML文档最基本的元素，常见的节点如下:
时间就是网页与用户的交互行为，如：鼠标点击、关闭网页…
由于方便代码的管理，我们通常都会把代码放到head标签中的script标签。但是由于JS的执行顺序都是从上往下，往往在页面没加载之前，就把js代码执行了，所以我们提供两种做法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="but">按钮</button>
<script>
var but = document.getElementById("but");
but.onclick = function click() {
alert("点击我干嘛");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function click() {
var but = document.getElementById("but");
but.onclick = function click() {
alert("点击我干嘛");
}
}
</script>
</head>
<body>
<button id="but">按钮</button>
</body>
</html>
//获取页面中的button
window.onload = function click() {
var buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
console.log(buttons[i]);
}
}
<!--如果尝试查询ul的childNodes会发现有9个,1个是: ul后面的那个回车与空格,4个是: li后面的那个回车与空格,4个是li标签-->
<ul id="test_ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
语法：标签.style.样式名 = "样式值";
注意：
- 如果样式名中带有-，将样式名驼峰化
- 如果样式中写了!important，则此时样式会有最高的优先级
语法：标签.style.样式名;
语法：标签.current.样式名;
语法:getComputedStyle(元素，伪元素表达符);
解决获取样式版本不兼容的问题
function getStyle(tag, styleName) {
return window.getComputedStyle ? getComputedStyle(tag, null).styleName : tag.currentStyle.styleName;
}
在js程序中，我们如果在事件函数中传入一个形参，浏览器会自动把当前事件对象传入当作实参，程序如下
x1.onmousemove = function (event) {
let clientX = event.clientX;
let clientY = event.clientY;
box2.innerHTML = "X轴坐标：" + clientX + "," + "Y轴坐标：" + clientY;
}
但是存在一个问题，IE8及其以下版本不支持，只支持以下形式
x1.onmousemove = function (event) {
let clientX = window.event.clientX;
let clientY = window.event.clientY;
box2.innerHTML = "X轴坐标：" + clientX + "," + "Y轴坐标：" + clientY;
}
我们可以将以上形式改造一下，就解决了兼容性问题
x1.onmousemove = function (event) {
event = event || window.event;
let clientX = window.event.clientX;
let clientY = window.event.clientY;
box2.innerHTML = "X轴坐标：" + clientX + "," + "Y轴坐标：" + clientY;
}
冒泡指的是时间向上传导，当后代元素的某个事件被触发，他的祖先元素如果拥有相同的事件，那么也将会被触发，子元素优先执行。
注意
//取消冒泡
event.cancelBubble=true;
如何让父元素下的子元素统一指定事件执行函数，并让新创建的元素也具备这个事件执行函数？
解决方式：
设置父元素的绑定事件，利用冒泡机制可以使子元素触发，同时可以通过event对象的target属性限制只允许子元素出发对应事件，这就叫做事件的委派。
box.addEventListener("click",function(){
//...
},false);
本来是要绑定onclick但是现在换成了click,绑定的事件是先绑定先执行,函数的this是调用元素
function bind(obj,eventstr,callback){
if(obj.addEventListener)
obj.addEventListener(eventstr,callback,false);
else
obj.attachEvent("on"+eventstr,function(){
// 解决IE this为window的问题
callback.call(obj);
});
}
对于事件的传播网景与微软有着不同的理解,微软认为元素的事件应该是由内而外的传播,应该先触发当前元素上的事件,然后传播到祖先元素，网景因为由祖先元素先触发
W3C综合了两方观点,将事件分成了三个阶段:
如果想要设置元素在捕获阶段出发时间，可以设置addEventListener()的第三个参数为true；
浏览器对象模型，可以通过BOM对象来操作浏览器。
代表的是整个浏览器的窗口，同时window也是网页的全局对象。
代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
注意：
由于历史原因，Navigator的好多属性都不能使用，我们只介绍UserAgent
携带浏览器的相关信息，forefix是火狐，MSIE是IE10及以下版本，chrome是谷歌。另外IE11以上可以通过下面来实现
"ActiveXObject" in Window
代表当前浏览器的地址栏信息，通过localtion可以获取地址栏的信息，或者操作浏览器跳转页面。直接打印location就可以获得当前页面的完整路径,如果修改了路径值,浏览器会自动刷新到修改的路径,同时生成历史记录
代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录。但是由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页，而且该操作只在档次访问时有效。
代表用户的屏幕信息，通过该对象可以获取到用户显示器的相关信息
注意：
在浏览器中，Navicator、Location、History、Screen都是以window的属性存在的。而由于window属性的特殊性，navicator、location、history、screen都可以独自使用