HTML/CSS/JS"/>
前端——HTML/CSS/JS
1. Web服务本质
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
2. 关于HTML
2.1 HTML是什么
- 超文本标记语言（Hypertext Markup Language，HTML）是一种用于创建网页的标记语言
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释（兼容性问题）
- 网页文件的扩展名：.html或.htm
2.2 HTML不是什么
- HTML是一种标记语言（markup language），它不是一种编程语言
- HTML使用标签来描述网页。不像Python编程语言一样，这个标记语言是没有逻辑的
3. HTML介绍
3.1 HTML文档结构
<!DOCTYPE html>
<html lang="zh-CN"><head> <meta charset="UTF-8"><title> </title>
</head><body>
</body></html> 标注：
① <!DOCTYPE html>声明为HTML5文档
② 这个lang表示语言，zh-CN是中文的意思，表示你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'
③ <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）
④ <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的
⑤ <title>、</title>定义了网页标题，在浏览器标题栏显示（标签页）
⑥ <body>、</body>之间的文本是可见的网页主体内容
注意：
① 标签要封闭，全封闭/自封闭
② HTML文件不识别多个空格或换行，均识别成一个空格，此时需借助特殊字符
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">
3.2 HTML的注释
找到一行内容 “ctrl 加 / ” 就能注释，注释的内容不会在网页上显示出来，形如 <!-- 注释内容 -->
3.3 HTML标签格式
3.3.1 标签说明
- HTML标签是由尖括号包围的关键字，如<html>、<div>等
- HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线
- 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等
- 标签里面可以有若干属性，也可以不带属性
3.3.2 标签语法
- <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
有些属性是没有特殊的效果的，而有些属性是有效果的，如下：
- <p><a s='name'><h3>这是名字</h3></a></p>，其中s='name'是没什么效果的，不可点击
- <p><a href=""><h3>这是链接</h3></a></p>，你会看到一些效果，可以点击，有下划线，有颜色
3.3.3 重要属性
① id：定义标签的唯一ID，HTML文档树中唯一，将来页面上的标签有很多，例如：来几个a标签，然后怎么区分这些标签呢，可以通过<a id='a1'>这是id为a1的标签</a>，id不能重复，将来我们想找这个标签的时候，可以通过这个id的值来找到这个标签
② class：为HTML元素定义一个或多个类名（classname）(CSS样式类名)
③ style：规定元素的行内样式（CSS样式） 简单来个示例：<h3 style="color:red;">它会变红</h3>你会发现变成红色了，如下图：
4. HTML常用标签
4.1 head内常用标签
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
4.2 Meta标签
- <meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词
- <meta>标签位于文档的头部，不包含任何内容
- <meta>提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是 http-equiv 属性和 name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能
4.2.1 http-equiv属性
相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值
<!-- 2秒后跳转到对应的网址，注意引号 -->
# 如果把URL和后面的内容去掉，就是2秒钟刷新一次
<meta http-equiv="refresh" content="2;URL="> <!-- 指定文档的编码类型 -->
<meta http-equiv="content-Type" charset=UTF8"><!-- 告诉IE以最高级模式渲染文档 -->
# 告诉IE浏览器，按照最高标准来渲染此页面
<meta http-equiv="x-ua-compatible" content="IE=edge"> 4.2.2 name属性
主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
# 关键字，别人可以通过这些关键字搜索到我的这个文章的
# 搜索引擎能够通过content内容来帮别人搜索到此文档
<meta name="keywords" content="meta总结, html meta, meta属性, meta跳转"> # 是对这个文档的描述
<meta name="description" content="这里是文档的一些描述内容"> PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因
常见的浏览器及内核如下：
4.3 bod内常用标签
4.3.1 基本标签（块级标签和内联标签）
# 不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s># 独占一个段落
<p>段落标签</p> # 一级标题至六级标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6># 换行
<br># 就是单独个一个水平线
<hr> 特殊字符（还有好多其他的，可以直接百度搜HTML特殊符号对照表）
| 内容 | 对应代码 |
|---|---|
| 空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果) | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权标识（写公司网站的时候会用到） | © |
| 注册商标（一个圆圈里面有个R） | ® |
4.3.2 div标签和span标签（常用）
div标签：用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现
span标签：用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现
块级元素与行内元素的区别：
块级元素（块级标签/行外标签），是以另起一行开始渲染的元素，行内元素（内联标签）则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的
刚学的标签：
块级标签：p、h1--h6、hr、div
内联标签：b、i、u、s
注意：
① 关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。div是可以包含div的
② p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。可以试一下p标签套p标签，f12你会发现三个p标签
4.3.3 img标签（内联标签）
<img src="图片的路径" alt="图片未加载成功时的提示"
title="鼠标悬浮时提示信息" width="宽" height="高">注意：
① src的路径分为两种：网上的一个图片路径和本地的一个相对图片路径
② alt后的提示内容，在图片未显示前会提示，图片显示出来后则不提示
③ title后的提示内容，当鼠标悬浮在图片上，会显示提示
④ 宽高两个属性只用一个会自动等比缩放
4.3.4 a标签（内联标签）
超链接标签：是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
<a href="" target="_blank" >点我就可以跳转到百度啦</a> target：
_blank：表示在新标签页中打开目标网页
_self：表示在当前标签页中打开目标网页（默认效果）
注意：
① 没有写href属性，只显示普通文本
② 写了href属性但没有值，有特殊效果（文字有颜色、有下划线），点击会刷新当前页面
拓展：
① 什么是URL
URL是统一资源定位器（Uniform Resource Locator）的缩写，也被称为网页地址，是因特网上标准的资源的地址
② URL举例
.html
http://222.172.123.33/stu/intro.html
③ URL地址由4部分组成，各部分之间用“/”符号隔开
第1部分：为协议，http://、ftp://等
第2部分：为站点地址，可以是域名或IP地址
第3部分：为页面在站点中的目录，stu
第4部分：为页面名称，例如 index.html
href属性指定目标网页地址，该地址可以有几种类型：
① 绝对URL - 指向另一个站点（比如 href="）
② 相对URL - 指当前站点中确切的路径（href="index.htm"），学django的时候会用的比较多
③ 锚URL - 指向页面中的锚（href="#top"），博客的目录经常用到，还可以跳转到 name属性为p1的a标签上，<a name='top'>xxx</a>
例1：如下代码体现了URL跳转的作用
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="#p1" >点我就可以跳转到id为p1的p标签啦</a><div style="height:1000px"></div>
<p id="p1">哈哈，我就是id为p1的p标签</p>
<div style="height:1000px"></div>
</body>
</html>我们一运行，会出现以下界面，当我们再次点击这个超链接时
就会直接跳转到目标的URL，如下图
例2：如下代码体现了锚点跳转的作用
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 1000px;width: 200px;background-color: black;}</style>
</head>
<body>
<!-- 设置锚点 -->
<a name="top">这是顶部</a>
<div class="c1"></div>
<!-- 跳转锚点,写的是a标签name属性对应的值,写法 href='#值' -->
<a href="#top">回到顶部</a>
</body>
</html>注：在设置锚点时，可写name=''值''，或者写成id=''值''都可以
4.3.5 列表标签
4.3.5.1 无序列表
<ul type="disc"><li>第一项</li><li>第二项</li>
</ul>type属性：
（1）disc（实心圆点，默认值）
（2）circle（空心圆圈）
（3）square（实心方块）
（4）none（无样式）
4.3.5.2 有序列表
<ol type="1" start="1"><li>第一项</li><li>第二项</li>
</ol>type属性：
（1）1 数字列表，start是从数字几开始（默认值）
（2）A 大写字母
（3）a 小写字母
（4）Ⅰ 大写罗马
（5）ⅰ 小写罗马
4.3.5.3 标题列表
就像大纲一样，有一个层级效果，代码及效果如下
<dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容1</dd><dd>内容2</dd>
</dl>4.3.6 表格标签
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据
表格的基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border='1'><thead><tr><th>序号</th><th>姓名</th><th>特点</th></tr></thead><tbody><tr><td>1</td><td>雨落</td><td>贼帅</td></tr><tr><td>2</td><td>庆言</td><td>美女</td></tr></tbody>
</table>
</body>
</html>其中：
<thead> 表示的是标题部分 </thead>
<tbody> 表示的是内容部分 </tbody>
<tr> 表示的是一行 </tr>
<th> 表示的是一个单元格，文字是加粗效果 <th>
<td> 表示的是一个单元格，文字是常规字体 <td>
注释-常用属性：
border：表格边框
cellpadding：内边距（内边框和内容的距离）
cellspacing：外边距（内外边框的距离）
width：像素 百分比（最好通过css来设置长宽）
rowspan：单元格竖跨多少行（即合并单元格）
colspan：单元格横跨多少列（即合并单元格）
上面这几个属性基本上用不到，其实标签又可以分为两类：
1、展示给用户看的
2、获取用户输入内容的标签
刚才前面的这些标签都是展示内容用的，下面要学的标签是捕获用户输入的标签。基本上HTML中常用的就这些标签
4.3.7 input标签
<input> 元素会根据不同的 type 属性，变化为多种形态
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type="text" /> |
| password | 密码输入框（不显示明文） | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" name='x' /> |
| radio | 单选框 | <input type="radio" name='x' /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
属性说明：
① name：表单提交时的“键”，注意和id的区别
② value：表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
③ checked：radio和checkbox默认被选中的项
④ readonly：text和password设置只读
⑤ disabled：将当前标签作废，对于所有input均适用
1、输入框与单多选
2、日期输入框
3、提交与重置按钮
submit：发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
reset：页面不会刷新，将所有输入的内容清空
4、文本选择框
5、设置为只读
4.3.8 form标签
功能：
① 表单用于向服务器传输数据，从而实现用户与Web服务器的交互
② 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等
③ 表单还可以包含textarea、select、fieldset和 label标签
表单元素
基本概念：HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。表单一般用来收集用户的输入信息
表单工作原理：访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上，服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集） |
| action | 规定向何处提交表单的地址（URL）（提交页面） |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启） |
| enctype | 规定被提交数据的编码（默认：url-encoded） |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET） |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name） |
| novalidate | 规定浏览器不验证表单 |
| target | 规定 action 属性中地址的目标（默认：_self） |
注意：
① submit只有写在form表单里面才能进行提交，否则只是一个普通的按钮
② method的默认提交方法是get，效果是可以在网址上看到提交的内容
除了form表单内的submit可以进行提交，button按钮也可以实现
4.3.9 select标签
属性说明：
multiple：布尔属性，设置后为多选下拉框（按住Ctrl可多选），否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
4.3.10 label标签
定义：<label> 标签为 input 元素定义标注（标记）。如果不用这个label给input标签一个标记，input会变黄，不影响使用，只是提示你，别忘了给用户一些提示，也就是这个label标签
注意：
1、label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
2、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同
除此之外，以下这两种写法实际效果是一样的
4.3.11 textarea标签
主要作用就是多行文本输入框，像input标签只能在一行输入，但是利用textarea标签就可以进行多行输入了，通过改变行数和列数来控制文本框的大小
属性说明：
name：名称
rows：行数（相当于文本框高度设置）
cols：列数（相当于文本框长度设置）
disabled：禁用
maxlength：显示字符数，例如：maxlength='10' 最多输入十个字符
5. CSS介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
5.1 CSS语法
每个CSS样式由选择器和声明组成，声明又包括属性和属性值。每个声明之后用分号结束
5.2 CSS的注释
/* 这是注释 */6. CSS的几种引入方式
6.1 行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用
6.2 内部样式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中，格式和展示效果如下：
6.3 外部样式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可，推荐使用此方式。但需注意，现在写的这个.css文件是和你的html是一个目录下，如果不是一个目录，href里面记得写上这个.css文件的路径
<link href="mystyle.css" rel="stylesheet" type="text/css"/>7. CSS选择器
7.1 基本选择器
7.1.1 元素选择器（标签名）
格式如下：标签{属性1:值1; 属性2:值2; }
div {color:blue;}但是这样有一个问题，如果有多个div标签，我想把其中一个div标签中的文字颜色改为蓝色，或者背景改成红色怎么办？看下面的ID选择器
7.1.2 ID选择器
格式如下：#id属性值{属性1:值1; 属性2:值2; }
#i1 {background-color: red; color:red}针对格式的说明：#号表示id属性，i1表示id属性的值
id 是不能重复的，如果想给多个p标签同时添加一个css样式挨个添加id属性吗？并且，如果是不同的标签，但是他们的css样式要一样，怎么办？看下面的类选择器
7.1.3 类选择器
格式如下：.class属性值{属性1:值1; 属性2:值2; }
.c1{font-size:14px;}/* 所有p标签里面含class属性的值为c1的p标签，注意中间没有空格 */
p.c1{color: red;}针对格式的说明：.号表示class属性，c1表示class属性的值
注意：
① 样式类名不要用数字开头（有的浏览器不认）
② 标签中的class属性如果有多个，要用空格分隔
7.1.4 通用选择器
格式如下：*{属性1:值1; 属性2:值2; }
*{color: white;}针对格式的说明：*表示所有的标签
7.2 组合选择器
7.2.1 后代选择器（子孙）
格式如下：#外部标签 内部标签{属性1:值1; 属性2:值2; }
#li a {color: green;}针对格式的说明：选择li标签内部的所有a标签，进行修改样式
7.2.2 儿子选择器
格式如下：#父级标签>子标签{属性1:值1; 属性2:值2; }
#div>p {font-family: "Arial Black", arial-black, cursive;}针对格式的说明：选择所有父级是div元素的p元素，进行修改样式
7.2.3 毗邻选择器
格式如下：标签+紧接其后的标签{属性1:值1; 属性2:值2; }
div+p {margin: 5px;}针对格式的说明：选择所有紧接着div标签之后的p标签，进行修改样式
7.2.4 弟弟选择器
格式如下：#标签~兄弟标签{属性1:值1; 属性2:值2; }
#i1~p{border: 2px solid royalblue;}针对格式的说明：选择i1标签后面所有的兄弟p标签，进行修改样式
7.2.5 组合选择器
格式如下：标签一,标签二{属性1:值1; 属性2:值2; }
div,p{color: green;}针对格式的说明：div标签以及p标签都会被组合选中，进行修改样式
7.2.6 其他选择器
1、div.c1{color:red} 过滤：找到有c1类值的所有div标签
2、div .c1{color:red} 找后代：找到div标签后代中有类值为c1的所有标签
7.3 属性选择器
7.3.1 属性选择器
/* 用于选取带有指定属性的元素 */
p[title]{color: red;}/* 用于选取带有指定属性和值的元素 */
p[title="213"]{color: green;}通过属性或者属性的值来查找，这个属性是我们自己定义的，非id或class这种html自带的属性
7.3.2 titile属性的正则写法
① 所有title属性以hello开头的元素
[title^="hello"]{color: blue;}② 所有title属性以hello结尾的元素
[title$="hello"]{color: yellow;}③ 所有title属性中字符串包含hello的元素
[title*="hello"]{color: red;}④ 所有title属性(有多个值或值以空格分割)中有一个值为hello的元素
[title~="hello"]{color: green;}7.4 分组选择器
7.5 伪类选择器
伪类选择器比较特殊，CSS3版本新加的特性，可以根据标签的不同状态再进行进一步的区分，比如一个a标签，点击前，点击时，点击后有不同的三个状态
7.5.1 a标签的伪类选择器
1、未访问的链接
a:link {color: #FF0000}
2、鼠标移动到链接上
a:hover {color: #FF00FF}3、选定的链接 - 鼠标点下但还没抬起的瞬间
a:active {color: #0000FF}4、已访问的链接
a:visited {color: #00FF00} 7.5.2 div标签的伪类选择器
7.5.3 input标签的伪类选择器
7.6 伪元素选择器
通过css来造标签，不推荐使用
1、first-letter：给首字母设置特殊样式
2、before：在每个p标签之前插入内容
3、after：在每个p标签之后插入内容
注意：不过上面的这些前后添加的文本内容，在页面上是无法选中的，正常的标签或者文字是可以选中的。且before和after多用于清除浮动
8. 选择器的优先级（难点）
8.1 CSS继承
我们可以通过很多种选择器来选择标签，如果有不同的选择器选中了相同的标签，并且赋予了不同的CSS样式，那么该按照哪个CSS样式来进行渲染呢？首要浏览器拿到HTML文件时，它是从上到下加载文件内容的，这也是为什么你会先看到head标签里面的内容，比如那个title标签
再看下面的例子：我在style里面写了两个#p1并且设置了不同的CSS样式，还有一个1.css文件，文件里面也写了一个#p1，对应一个其他的css样式，最后页面渲染的时候是选择的最后一个link那个文件中的#p1对应的那个css样式来渲染的，是因为按照顺序加载导致的，一个把一个覆盖了
总结：当选择器相同的时候，按照顺序来看CSS样式，谁最后就按照谁渲染。那如果是不同的选择器的时候，就要学习我们下面的优先级了，首先看一下继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的，他的权重是0。我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式
但CSS继承也是有限制的，有一些属性不能被继承，如：border, margin, padding, background等
8.2 选择器的优先级
浏览器根据什么来决定应该应用哪个样式，其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
注意：
1、内联样式的意思是把css样式写在标签里面
2、权重计算永不进位，即无论多少个低级选择器叠加在一起的优先级仍比不过一个较高级的选择器
3、选择器的权重可以相加
4、!important方式来强制让样式生效，不讲道理的操作，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护
5、继承虽然也能让后代标签继承父代的样式，但是继承的权重为0，也就意味着它的后代标签很容易被其他选择器所改变
9. CSS属性
9.1 宽和高
width属性可以为元素设置宽度；height属性可以为元素设置高度。但需注意：块级标签才能设置高度宽度，内联标签的高度宽度由内容来决定
9.2 字体属性
9.2.1 文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值，例如：
9.2.2 字体大小
如果设置成inherit表示继承父元素的字体大小值
9.2.3 字重（粗细）
font-weight用来设置字体的字重（粗细）
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
9.2.4 文本颜色
颜色属性被用来设置文字的颜色，颜色是通过CSS最经常的指定：
（1）十六进制值 - 如：#FF0000 #前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色）
（2）一个RGB值 - 如：RGB(255,0,0) #红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0
（3）颜色的名称 - 如：red
（4）rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间
9.2.5 文本属性
1、文字对齐
text-align属性规定元素中的文本的水平对齐方式（letter-spacing）
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
2、文字装饰
text-decoration属性用来给文字添加特殊效果
| 值 | 描述 |
|---|---|
| none | 默认（定义标准的文本） |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| inherit | 继承父元素的text-decoration属性的值 |
注意：line-height与height设置值相同时，字体会垂直居中
3、首行缩进
text-indent可设置段落首行缩进，一个字在页面上的默认大小为16px
9.3 背景属性
9.3.1 背景颜色
background-color可设置背景颜色
9.3.2 背景图片
background-image: url('图片路径')，如果图片路径和HTML文件在同一目录下，可直接写图片名称；
9.3.3 背景重复
background-repeat可设置图片是否重复
注意：
1、background-repeat的默认重复方式为：沿x轴和y轴都平铺；
2、x轴方向即从左往右，y轴方向即从上往下，z轴方向即从内往外
9.3.4 背景位置
background-position可设置背景的位置
设置图片位置方式一：left左、right由、top顶（上）、bottom底（下）
设置图片位置方式二：通过数字调整图片位置
简写方式：
background-image:url("帅气雨落.jpg");
background-repeat:no-repeat;
background-position:30px 15px;
background-color:yellow/* 可直接简写成如下格式 */
background:yellow url("帅气雨落.jpg") no-repeat 30px 15px9.3.4 图片固定
9.4 边框
9.4.1 边框三大属性
边框主要有三大属性：①border-width 宽度；②border-style 样式；③border-color 颜色
通常使用简写方式：
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
除了可以统一设置边框外，还可以单独为某一个边框设置样式，如下所示：
9.4.2 border-radius圆角属性
当该矩形为正方形，圆角属性值为50%及以上，得到一个圆形；当该矩形为非正方形，圆角属性值为50%及以上，得到一个椭圆形，如下：
9.4.3 display属性
用于控制HTML元素的显示效果
| 值 | 意义 |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点 |
注意：块级标签不管你设置的宽度是多少，都会占用你整个页面宽度的空间
visibility:hidden与display:"none"的区别：
1、visibility:hidden：可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
2、display:none：可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失
display的效果inline-block，高度宽度还可以设置，包含内联和块级标签的属性，此时可以设置高度和宽度，但是不会再像其他块级标签一样另起一行
display的效果block，可以将内联标签改为块级标签
10. CSS盒子模型
在CSS里面，每个标签可以称为一个盒子模型
1、content（内容）：盒子的内容，显示文本和图像
2、padding（内边距）：用于控制内容与边框之间的距离
3、border（边框）：围绕在内边距和内容外的边框
4、margin（外边距）：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
关于content：这里的100x100px，就是div标签内部的内容设置的大小格式
关于padding：这里的上下边距20px，左右边距10px，就是div标签内部内容与边框的距离
关于border：这里的10px，就是我们设置的边框的粗细
关于margin：这里的上下外边距20px，左右外边距10px，就是框框与外界的边距
10.1 margin外边距
从网页代码可以看出，在body标签内，页面的上下左右都会有一个margi值，这个值是浏览器自动添加的，因此我们在写CSS样式时，如果想顶格写，就会先写一个margin:0，这个可表示上右下左的外边距都为0
body {margin:0;
}推荐简写：顺序是上、右、下、中（顺时针方向）
如果上下左右的外边距都设置成一样，可以简写成一个数，即margin:50px，即可表示该标签距离上下左右的外边距都为50像素
常见居中：
1、margin:0 auto：表示上下边距0像素，左右自适应（居中的效果）
2、margin:10px 20px 30px：表示上为10px，左和右为20px，下为30px
如果我们将上下两个标签都设置了margin值，分别设置了上标签的下边距为50px，下标签的上边距也为100px，那么这两个标签的距离其实是100px，而不是150px，这是因为margin属性会按照最大的值来隔离两者，并非简单的相加
10.2 padding内填充
同样的，padding的简写方式与margin一样
1、如果提供两个数据，则表示第一个数用于上和下，第二个数用于左和右
2、如果提供三个数据，则表示第一个数用于上，第二个数用于左和右，第三个数用于下
10.3 float
在 CSS 中，任何元素都可以浮动，类似于word文档里，插入图片可环绕文字的效果，现在多数用来做网页布局的。浮动元素会生成一个块级框，而不论它本身是何种元素
浮动的两个特点：
① 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
② 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
浮动的三种取值：
① left：向左浮动；② right：向右浮动；③ none：默认值，不浮动
先看这段代码，我们设置两个方框，看看它们在网页中的布局
如何让下面这个绿色框框放到红色框框的右侧，我们可以加一个浮动float
但是浮动有一个副作用，就是我们重新创建一个HTML文件时，写入如下内容
此时我们如何让这个绿色框框移动到红色框框的右侧去，于是我们尝试用以下代码
这里我们只是把两个红色框框分别设置成左、右浮动，但绿色框框未做任何更改，它自动往上跑了，并且被两个红色框框盖在上面。其实我并没有给c1标签设置高度，但这个c1标签实际是有高度的，主要是这两个c2标签设置了高度，从而导致这两个c2标签将c1标签撑起来了。当两个c1标签设置了浮动效果后，浮动起来之后脱离了页面文档，无法撑起自己的父级标签，故导致c3标签上去了，进而影响到了整个页面布局
如果不想这个绿色框框上去，可以将c1标签的子标签高度（内边距+外边距+边框宽度+标签高度）设置成c1这个父标签的高度，这样父级的标签就有了自己的高度，也可以被自己的子标签所撑起
此时我们可以看到，我们将c1标签的高度设置为102px后，绿色框框也就是c3标签没有上去了。但我们一般不采用这种方式，而是用clear清除浮动
10.4 clear
clear属性规定元素的哪一侧不允许其他浮动元素
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧均不允许浮动元素 |
| none | 默认值，允许浮动元素出现在两侧 |
| inherit | 规定应该从父元素继承 clear 属性的值 |
注意：clear属性只会对自身起作用，而不会影响其他元素。再看上面的例子，我们可以给绿色框框的那个c3标签设置一个clear:both，意思是说，这个标签的左右都不能有浮动的标签，那么它只能跑到两个浮动的c2标签的下面。但是一般我们都会在c2和c3的中间加一个别的标签，给这个标签设置一个clear属性，并且高度设置为0或者不给高度，因为浮动的标签是你自己c1里面的，所以你要自己解决，才能撑起你自己的高度，并且再用其他的标签的时候，我们就不需要再考虑浮动的问题了，直接写自己的样式就可以了，不然每次加其他的标签都要去看看上面的标签有没有浮动的
10.5 清除浮动
浮动的副作用我们上面已经提到，就是父标签塌陷问题，因此要清除浮动，主要有三种方式：
1、父级标签设置高度：就是上面的示例，在父标签里面加一个其他的标签，从而撑起父级标签
2、伪元素清除法：CSS来解决
3、overflow:hidden：给塌陷的父级标签设置这个属性就可以清除浮动
10.5.1 伪元素清除法
这种方法使用较多，我们可以通过伪元素清除法来清除一下浮动，用法如下：
一般业内约定成俗，都把这个清除浮动的class属性命名为clearfix，而不是cc，如果你在别的网页看到了这个clearfix，这个一定是用来清除浮动的，因此它的写法一般为：
.clearfix:after {content: "";display: block;clear: both;
}10.5.2 overflow溢出属性
首先我们来解释下这个属性，我们在标签里写了一堆文字，但是标签的高度和宽度设置的较小，这时候文字就会溢出，例如：
然后我们就可以设置一下，如果文字溢出了，溢出的部分怎么办，设置一个overflow的属性，其主要的值如下表：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
| inherit | 规定应该从父元素继承 overflow 属性的值 |
如果设置成overflow为scroll，就会出现滚动条，overflow相关属性如下：
10.5.3 拓展：制作圆形头像
10.6 定位（position）
1、static：默认值，无定位。不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的
2、relative：相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置左上角为参照物。不过即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，所以不会出现像浮动那种父级标签塌陷的副作用，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。往上移动：top:-100px（负值）或者bottom:-100px（负值），往左移动：left:-100px（负值）或者right:-100px（负值），往下移动：bottom:100px（正值）或者top:100px（正值），往右移动：right:100px（正值）或者left:100px（正值）。凡是标签要进行移动，不管是float还是relative还是线面的absolute，都是按照元素自己的左上角进行计算的
注意：position:relative的一个主要用法：方便下面要学的绝对定位元素找到参照物。可以将元素设置成relative，不设置任何的top、left、right、bottom等，它还是它原来的位置
3、absolute：绝对定位。设置为绝对定位的元素框从文档流完全删除，也会有父级标签塌陷的问题，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
注意：如果父级设置了position属性，例如position:relative，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那子元素就设置position:absolute，父元素设置position:relative，然后Top、Right、Bottom、Left用百分比宽度表示。另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义
4、fixed：固定。不管页面怎么动，都在整个屏幕的某个位置。对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义
注意：一个元素若设置了position:absolute | fixed，则该元素就不能设置float，因为这是两个不同的流，一个是“浮动流”，另一个是“定位流”。但是 relative 却可以，因为它原本所占的空间仍然占据文档流。在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置
10.7 层叠顺序（z-index）
z-index设置对象的层叠顺序。一般用在模态对话框上：
1、z-index 值：数值大的压盖住数值小的
#i1 {z-index: 999;}2、只有定位了的元素，才能有z-index：也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
3、z-index值没有单位，默认值为0：如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4、从父现象：如果A、B节点都定义了position:relative，A节点的z-index比B节点大, 那么A的子节点必定覆盖在B的子节点前面
10.8 透明效果（opacity）
opacity用来定义透明效果：取值范围是0~1，0是完全透明，1是完全不透明
10. JS介绍
10.1 JavaScript概述
1、ECMAScript和JavaScript的关系
1996年11月，JavaScript的创造者-Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现
2、ECMAScript的历史
| 年份 | 名称 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 | 添加正则表达式 添加try/catc |
| ECMAScript 4 | 没有发布 | |
| 2009 | ECMAScript 5 | 添加"strict mode"严格模式 添加JSON支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 | 增加指数运算符（**） 增加Array.prototype.includes |
注意：
1、ES6就是指ECMAScript 6
2、尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
① 核心（ECMAScript） - 代码
② 文档对象模型（DOM） Document object model (整合js，css，html)
③ 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
简单地说，ECMAScript描述JavaScript语言本身的相关内容。JavaScript是脚本语言；是一种轻量级的编程语言；是可插入HTML页面的编程代码。JavaScript插入HTML 页面后，可由所有的现代浏览器执行
10.2 JavaScript引入方式
方式一：Script标签内写代码
其实我们也可以在网页中进行检查，写上代码并执行，如下：
方式二：引入外部JS文件
有点类似于CSS中引入外部的文件，我们可以新建个JS文件，并在其中写入相关的代码，并在HTML中引入该文件
10.3 JavaScript语言规范
10.3.1 注释
① 单行注释：
//这是单行注释② 多行注释：
/*
这里面可以放些多行的注释
这里面可以放些多行的注释
*/10.3.2 结束符
JavaScript中的语句要以分号为结束符
10.4 JavaScript语言基础
10.4.1 变量命名
JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头
10.4.2 声明变量
① 变量名是区分大小写的
② 推荐使用驼峰式命名规则，首字母大写
③ 保留字不能用做变量名
10.4.3 声明变量的方式
1、方式一：使用var
① 使用var可以一次声明一个变量，也可以一次声明多个变量，不同变量之间使用逗号隔开
var name; //一次声明一个变量
var name, age, gender; //一次声明多个变量② 声明变量时可以不初始化（即赋初值），此时其值默认为undefined；也可以在声明变量的同时初始化变量
var name = "雨落"； //声明的同时初始化变量
var name = "雨落", age = 18, gender; //在一条声明中初始化部分变量
var name = "雨落", age = 18, gender = '男'; //在一条声明中初始化全部变量③ 变量的具体数据类型根据所赋的值的数据类型来确定
var message = "hello"; //值为字符串类型，所以message变量的类型为字符串类型
var message = 123; //值为数字类型，所以message变量的类型为数字类型
var message = true; //值为布尔类型，所以message变量的类型为布尔类型④ 在实际应用中，常常直接将循环变量的生命作为循环语法的一部分
for(var i = 0 ; i < 10 ; i += ); 2、使用let
ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令
for(let i = 0 ; i < 10 ; i += ); 3、使用const
ES6新增const用来声明常量。一旦声明，其值就不能改变。这个东西就是为了定义一个固定的常量，供大家使用，这个常量不会改变。需要特别注意的是：使用const声明变量时，必须给变量赋初值，且该值在整个代码的运行过程中不能被修改。另外，变量也不能重复多次声明。这些要求任何一点没满足都会报错
const PI = 3.1415;
console.log(PI); // 3.1415PI = 3; // TypeError: "PI" is read-only10.5 JavaScript数据类型
静态语言比如c：创建变量时，要指定变量的类型，python3.6也出现了类型注解的新特性def func(x:int, y:int) --> int: return x + y，意思是参数是int类型，返回值也是int类型的，起到注释的作用
var x; // 此时x是undefined
var x = 1; // 此时x是数字
var x = "YuLuo" // 此时x是字符串10.5.1 数值(Number)
JavaScript不区分整型和浮点型，就只有一种数字类型
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.00123还有一种NaN，表示不是一个数字（Not a Number），也就是说是一个值，但不是数字。parseInt()函数可解析一个字符串，并返回一个整数；parseFloat()函数可解析一个字符串，并返回一个浮点数
console.log(parseInt('123')); // 123
console.log(parseInt('ABC')); // NaN
console.log(parseFloat('1.23')); // 1.23var a1 = 1.23;
console.log(a1); // 1.23
console.log(typeof a1); // numbera2 = parseFloat('1.23');
console.log(a2); // 1.23
console.log(typeof a2); // numbera3 = parseInt('123a');
console.log(a3); // 123
console.log(typeof a3); // number10.5.2 字符串(String)
var a = "Hello";
var b = "world;
var c = a + b;
console.log(c); // Helloworld常用方法如下：
| 方法 | 说明 |
|---|---|
| .length | 查看字符串长度 |
| .trim() | 移除两端空白，得到一个新值 |
| .trimLeft() | 移除左边的空白，得到一个新值 |
| .trimRight() | 移除右边的空白，得到一个新值 |
| .charAt(n) | 返回第n个字符，类似索引，超过最大值返回''空字符串 |
| .concat(value, ...) | 拼接字符串 |
| .indexOf(substring, start) | 查找元素索引，这个start是从索引几开始找，没有返回-1 |
| .substring(from, to) | 根据索引获取子序列，不支持负数，所以一般都不用 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 全部变小写 |
| .toUpperCase() | 全部变大写 |
| .split(delimiter, limit) | 分割 |
1、.length：查看字符串长度并返回值
var a = 'helloworld';
console.log(a.length);// 输出结果：
102、.trim()：移除两端空白，得到一个新值，原值不改变
var a = ' he ll o ';
var b = a.trim();
console.log(b);// 输出结果：
he ll o3、.charAt(n)：返回第n个字符，类似索引，从0开始，超过最大值返回''空字符串
var a = 'hello';
var b = a.charAt(1);
console.log(b);// 输出结果：
e4、.concat(value, ...) ：拼接字符串
var a = 'hello';
var b = 'world';
var c = a.concat(b)；
console.log(c);// 输出结果：
helloworld5、.indexOf(substring, start) ：查找元素索引，这个start是从索引几开始找，没有返回-1
var a = 'helloworld';
var b = a.indexOf('o',3);
console.log(b)// 输出结果：
46、.slice(start, end)：切片
var a = 'helloworld';
var b = a.slice(0, 5);
console.log(b)// 输出结果：
hello7、.toUpperCase()：全部变大写
var a = 'helloworld';
var b = a.toUpperCase();
console.log(b)// 输出结果：
HELLOWORLD8、.split(delimiter, limit)：分割，后面的参数是指返回切割后的元素个数，超出也不会报错，只会按最大切割的元素个数返回
var a = 'helloworld';
var b = a.split('o',3);
console.log(b)// 输出结果：
[ 'hell', 'w', 'rld' ]注意区别：.slice(start, stop)和.substring(start, stop)
1、两者的相同点：
① 如果start等于end，返回空字符串
② 如果stop参数省略，则取到字符串末
③ 如果某个参数超过string的长度，这个参数会被替换为string的长度2、substirng()的特点：
① 如果 start > stop ，start和stop将被交换
② 如果参数是负数或者不是数字，将会被0替换3、silce()的特点：
① 如果 start > stop 不会交换两者
② 如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
③ 如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)补充：ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识，ESC键下面那个键就是反引号。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。你使用chorme浏览器就行，chorme浏览器支持ES6
① 普通字符串
`这是普通字符串！`② 多行文本
`这是多行的文本
这是多行的文本`③ 字符串中嵌入变量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`10.5.3 布尔值(Boolean)
① 区别于Python，true和false都是小写；
② 空字符串、0、null、undefined、NaN都是false
10.5.4 null和undefined
① null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null；
② undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined
③ null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值
10.5.5 对象(Object)
① JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象；
② JavaScript 提供多个内建对象，比如 Number、String、Date、Array 等，通过new实例化的对象都是object类型(var s = new String('hello')，var n = new Number(12)等)，数组不需要new生命，类型就是object类型；
③ 对象只是带有属性和方法的特殊数据类型
var a = 'aaa';
var b = new String('bbb');
var c = 111
var d = new Number(222)
console.log(typeof a); // string
console.log(typeof b); // object
console.log(typeof c); // number
console.log(typeof d); // object10.5.6 数组(Array)
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表
var a = [123, "ABC"];
var b = new Array([234, "def"])console.log(a[1]) // ABC
console.log(typeof a) // object
console.log(typeof b) // object常用方法如下：
| 方法 | 说明 |
|---|---|
| .length | 获取数组的元素个数 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素，并将其删除 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转，在原数组上改的 |
| .join(seq) | 将数组元素连接成字符串，seq是连接符 |
| .concat(val, ...) | 连接数组，得到一个新数组，原数组不变 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并向数组添加新元素 |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
1、.length：获取数组的元素个数
var a = [11, 22, 33, "aa"];
console.log(a.length);// 输出结果：
42、.push(ele)：尾部追加元素
var a = [11, 22, 33, "aa"];
a.push(true);
console.log(a);// 输出结果：
[ 11, 22, 33, 'aa', true ]3、.pop()：获取尾部的元素，并将其删除
var a = [11, 22, 33, "aa"];
var b = a.pop();
console.log(a);
console.log(b)// 输出结果：
[ 11, 22, 33 ]
aa4、.unshift(ele)：头部插入元素
var a = [11, 22, 33, "aa"];
a.unshift('bb');
console.log(a);// 输出结果：
[ 'bb', 11, 22, 33, 'aa' ]5、.shift()：头部移除元素
var a = [11, 22, 33, "aa"];
var b = a.shift();
console.log(a);
console.log(b);// 输出结果：
[ 22, 33, 'aa' ]
116、.slice(start, end)：切片
var a = [11, 22, 33, "aa"];
var b = a.slice(0,2);
console.log(b);// 输出结果：
[ 11, 22 ]7、.reverse()：反转，在原数组上改的
var a = [11, 22, 33, "aa"];
a.reverse();
console.log(a);// 输出结果：
[ 'aa', 33, 22, 11 ]8、.join(seq)：将数组元素连接成字符串，原数组不变，seq是连接符
var a = [11, 22, 33, "aa"];
var b = a.join('-');
console.log(a);
console.log(b);// 输出结果：
[ 11, 22, 33, 'aa' ]
11-22-33-aa9、.concat(val, ...)：连接数组，得到一个新数组，原数组不变
var a = [11, 22, 33, "aa"];
var b = ['bb', 'cc'];
var c = a.concat(b);
console.log(a);
console.log(b);
console.log(c);// 输出结果：
[ 11, 22, 33, 'aa' ]
[ 'bb', 'cc' ]
[ 11, 22, 33, 'aa', 'bb', 'cc' ]10、.sort() ：排序，它会把数字转化成字符串，按照ASCII码进行排序
1、借助函数前的排序：
var a = [12, 3, 45, 6];
var b = a.sort();
console.log(b);// 输出结果：
[ 12, 3, 45, 6 ]注意：想要解决这个问题，就得借助一个函数，该函数的实线原理如下，将数组里的前两个值传给参数a和b，如果a-b>0，则调换a，b值的前后顺序，再把第二个值和第三个值传给参数a和b，以此类推最终得出一个升序的数组
2、借助函数后得排序：
function sortNumeber(a, b){return a - b
};
var a = [12, 3, 45, 6];
var b = a.sort(sortNumeber);
console.log(b);// 输出结果：
[ 3, 6, 12, 45 ]11、.forEach()：将数组的每个元素传递给回调函数
12、.splice()：删除元素，并向数组添加新元素，有三个参数，分别对应从哪删（索引），删多少，删除位置新替代的元素（可写多个元素）
var a = [11, 22, 33, "aa"];
var b = a.splice(1,1, 'bb', 'cc');
console.log(a);
console.log(b);// 输出结果：
[ 11, 'bb', 'cc', 33, 'aa' ]
[ 22 ]13、.map()：返回一个数组元素调用函数处理后的值的新数组
10.6 内置对象和方法
JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据
| 类型 | 内置对象 | 介绍 |
|---|---|---|
| 数据类型 | Number | 数字对象 |
| String | 字符串对象 | |
| Boolean | 布尔值对象 | |
| 组合对象 | Array | 数组对象 |
| Math | 数学对象 | |
| Date | 日期对象 | |
| 高级对象 | Object | 自定义对象 |
| Error | 错误对象 | |
| Function | 函数对象 | |
| RegExp | 正则表达式对象 | |
| Global | 全局对象 |
10.6.1 自定义对象
JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键
var a = {'name': '雨落','age': 18};
console.log(typeof a); //object// 可以通过简直对的形式取值
console.log(a['name']); // 雨落// 可以通过万能的点取值
console.log(a.age); // 18for循环遍历对象中的内容：
var a = {'name': '雨落','age': 18};
for (var i in a){console.log(i, a[i]);
}// 输出结果：
name 雨落
age 18类型查询：typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。如果变量是一种引用类型或 Null 类型的，需要注意的是typeof null返回为object，因为特殊值null被认为是一个空的对象引用
console.log(typeof "abc") // string
console.log(typeof null) // object
console.log(typeof true) // boolean
console.log(typeof 123) // number
console.log(typeof NAN) // undefined
console.log(typeof undefined) // undefined10.7 运算符
10.7.1 算数运算符
加+、减-、乘*、除/、取余%、自加++、自减--注意i++和++i：两者都意为自加1，i++操作优先级低，先执行逻辑，然后再自加1；而++i，这个自加操作优先级高，先自加1，然后再执行代码后面的逻辑
var a = 100;
a++;
console.log(a);
++a;
console.log(a);// 输出结果：
101
102
var a = 100;
console.log(a++ == 100); // true 先判断此时a==100？在执行加1var b = 100;
console.log(++b == 100); // false 先执行加1，再判断此时a==100？10.7.2 比较运算符
大于>、大等于>=、小于<、小等于<=、不等于!=、相等==、全等===、不全等!==注意==和===：===意为全等于，既比较类型也比较值，不做类型转换，类型不同的一定不等；==意为弱等于，两边值类型不同的时候，要先进行类型转换，再比较
console.log(1 == "1" ) // true
console.log(1 === "1") // false10.7.3 逻辑运算符
① && 类似于and，同为真则取真
console.log(1 && 0) // 0② || 类似于or，有一真即为真
console.log(1 || 0) // 1③ ! 类似于not，取反
console.log(!0) //true10.7.4 赋值运算符
赋值=、加等于+=、减等于-=、乘等于*=、除等于/=10.8 流程控制
10.8.1 if - else
var a = 10;
if (a > 5){console.log("yes");
}else {console.log("no");
}// 输出结果：
yes10.8.2 if - else if - else
var a = 10;
if (a > 5){console.log("a > 5");
}else if (a < 5) {console.log("a < 5");
}else {console.log("a = 5");
}// 输出结果：
a > 510.8.3 switch切换
var a = 1;
switch (a){case 0:console.log("等于0");break;case 1:console.log("等于1");break;default:console.log("不是0或1");
}// 输出结果：
等于110.8.4 while循环
var i = 0;
while (i < 3) {console.log(i);i++;
}// 输出结果：
0
1
210.8.5 for循环
var a = [11, 22, 33];
for (var i in a){console.log(i);
}// 输出结果：
0
1
2var a = [11, 22, 33];
for (var i=0; i<a.length; i++){console.log(i, a[i]);
}// 输出结果：
0 11
1 22
2 33var a = {'k1':'v1', k2:'v2'}; // 键可以不加引号
for (var i in a){console.log(i, a[i]);
}// 输出结果：
k1 v1
k2 v210.8.6 三元运算
var a = 1;
var b = 2;
var c = a > b ? a : b
/* 如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c，
类似于python中的：c = a if a > b else b */
console.log(c)// 输出结果：
211. JS函数
11.1 函数定义
1、普通函数
function f1() {console.log("Hello world!");
}f1();// 输出结果：
Hello world!
2、带参数的函数
function f2(a, b) {console.log(arguments); // 内置的arguments对象console.log(arguments.length);console.log(a, b);
}// 输出结果：
[Arguments] { '0': 1, '1': 2 }
2
1 2
3、带返回值的参数
function sum(a, b){return a + b;
}
/* 在JS中，return a ，b; 只能给你返回最后一个值，
如果就想返回多个值，你可以用数组包裹起来 return [a,b]; */console.log(sum(1, 2));
/* sum(1,2,3)，参数给多了，也不会报错，还是执行前两个参数的和，
sum(1)，少参数或者没参数也不报错，不过返回值就会是NAN */// 输出结果：
34、 匿名函数 - 多和其他函数配合使用
var sum = function(a, b){
/* 在ES6中，使用var，可能会飘黄但不影响，建议你使用let来定义变量 */return a + b;
}console.log(sum(1, 2));// 输出结果：
35、立即执行函数 - 函数直接执行，无需被调用执行
(function(a, b){console.log(a + b);
})(1, 2);
/* Python中写可以这么写：
ret=(lambda x, y : x + y)(10, 20)
print(ret) */// 输出结果：
3补充：ES6中允许使用“箭头”（=>）定义函数，可以理解为匿名函数，用的不多
var f = v => v;// 等同于
var f = function(v){return v;
}如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分
var f = () => 5;// 等同于
var f = function(){return 5};var sum = (num1, num2) => num1 + num2;// 等同于
var sum = function(num1, num2){return num1 + num2;
}11.2 函数中的arguments参数
function add(a,b){console.log(a+b);console.log(arguments.length)/* 获取传入的参数的个数，arguments就是指传入的所有的实参，放在一个数组里面，这个arguments.length是统计这个数组的元素的个数 */
}add(1,2)// 输出结果：
3
2注意：函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回
11.3 函数的全局变量和局部变量
1、局部变量：在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除
2、全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
3、变量生存周期：
① JavaScript变量的生命期从它们被声明的时间开始
② 局部变量会在函数运行以后被删除
③ 全局变量会在页面关闭后被删除
11.4 作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层
var city = "BeiJing";
function f() {var city = "ShangHai";function inner(){var city = "ShenZhen";console.log(city);}inner();
}f();// 输出结果：
ShenZhen/* 思路点拨：
当执行f()函数时，会执行f()内的inner()函数，自内而外寻找city这个变量。
发现inner()函数内部的city = "ShenZhen" */var city = "BeiJing";
function Bar() {console.log(city);
}
function f() {var city = "ShangHai";return Bar;
}
var ret = f();
ret(); // 输出结果：
BeiJing/* 思路点拨：
当执行ret()函数，会执行f()函数，进而return Bar，会执行Bar()函数。
进而打印Bar()内的city，只能在全局变量找到city = "BeiJing" */var city = "BeiJing";
function f(){var city = "ShangHai";function inner(){console.log(city);}return inner;
}
var ret = f();
ret();// 输出结果：
ShangHai12. 对象
12.1 面向对象
1、创建对象
var person=new Object(); // 创建一个person对象
person.name="YuLuo"; // person对象的name属性
person.age=18; // person对象的age属性面向对象，在ES5中没有类的概念，只有个构造函数，命名的首字母要大写，实例化的时候使用new关键字进行实例化
function Person(name){this.name = name; // 封装属性；此处的this类似于Python函数的self
}
var p = new Person('yuluo');
console.log(p)
console.log(p.name)// 输出结果：
Person { name: 'yuluo' }
yuluoPerson.prototype.sum = function (a, b){ // 封装方法return a + b;
}
console.log(p.sum(1, 2))// 输出结果：
312.2 Date对象
var d = new Date();
console.log(d); // Wed Nov 15 2023 23:31:14 GMT+0800 (中国标准时间)
console.log(d.toDateString()); // Wed Nov 15 2023
console.log(d.toLocaleString()); // 2023/11/15 11:31:14
console.log(d.getDate()); // 15 获取日份
console.log(d.getDay()); // 3 获取星期（0-6，0表示周一，依次类推）
console.log(d.getMonth()); // 10 获取月份（0-11，0表示1月，依次类推）
console.log(d.getFullYear()); // 2023 获取完整年份
console.log(d.getHours()); // 23 获取小时
console.log(d.getMinutes()); // 31 获取分钟
console.log(d.getSeconds()); // 14 获取秒钟
console.log(d.getMilliseconds()); // 992 获取毫秒
console.log(d.getTime()); // 1700062274992 从1970/1/1午夜至今的毫秒数12.3 JSON对象
var str1 = '{"name": "yuluo", "age": 18}';
var obj1 = {"name": "yuluo", "age": 18};// JSON字符串转换成对象
var obj = JSON.parse(str1);// 对象转换成JSON字符串
var str = JSON.stringify(obj1);console.log(obj);
console.log(str);// 输出结果：
{ name: 'yuluo', age: 18 }
{"name":"yuluo","age":18}12.3 RegExp对象
12.4 Math对象
Math：不需要new来创建对象，直接使用Math.下面的方法
| 方法 | 描述 |
|---|---|
| .abs(x) | 返回数的绝对值 |
| .exp(x) | 返回 e 的指数 |
| .floor(x) | 小数部分进行直接舍去 |
| .log(x) | 返回数的自然对数（底为e） |
| .max(x,y) | 返回 x 和 y 中的最高值 |
| .min(x,y) | 返回 x 和 y 中的最低值 |
| .pow(x,y) | 返回 x 的 y 次幂 |
| .random() | 返回 0 ~ 1 之间的随机数 |
| .round(x) | 把数四舍五入为最接近的整数 |
| .sin(x) | 返回数的正弦 |
| .sqrt(x) | 返回数的平方根 |
| .tan(x) | 返回角的正切 |
更多推荐
前端——HTML/CSS/JS
发布评论