前端基础复习HTMLCSSCSS3JavaScriptJSONAJAX

84 阅读 0 评论 56 点赞

我是靠谱客的博主自信花瓣，最近开发中收集的这篇文章主要介绍前端基础复习HTMLCSSCSS3JavaScriptJSONAJAX，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

HTML

1、常见浏览器内核

浏览器内核英文名叫做：Rendering Engine，翻译过来就是渲染引擎的意思。

浏览器内核的两部分及其作用：

渲染引擎(layout engineer 或者 Rendering Engine) ： 渲染HTML结构，整合CSS样式。
JS 引擎： 解析执行JS进行动态交互。（chrome浏览器的V8引擎）

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

常见浏览器内核简介：

1、IE浏览器内核：Trident内核，也是俗称的IE内核；(trident 三叉戟)；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

9、2345浏览器内核：好像以前是IE内核，现在也是IE+Chrome双内核了；

10、UC浏览器内核：这个众口不一，UC说是他们自己研发的U3内核，但好像还是基于Webkit和Trident，还有说是基于火狐内核。

IE： IE内核 / Trident内核；Chrome ：Chrome内核 / Blink内核。

2、什么HTML

HTML 是超文本标记语言(Hyper Text Markup Language)，用来描述网页结构。
HTML 不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签
HTML 使用标记标签来描述网页

超文本：不仅仅能表示文本信息，还能表示音视频、格式等等信息。

标记语言( markup language )有 xml, html, xhtml ，你会见到他们都是 “ml” 尾的。

3、什么是HTML5

HTML5 是下一代的 HTML，是互联网下一代的标准。
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

扩展：

1、什么是 XHTML

XHTML 是以 XML 格式编写的 HTML，所以通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持

2、什么是DHTML

DHTML是Dynamic HTML的简称，DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念。即一个页面中包括html+css+javascript（或其它客户端脚本），其中css和客户端脚本是直接在页面上写而不是链接上相关文件。 ——百度百科

4、HTML常见标签

4.1 链接 a

<a href="https://www.baidu.com">打开百度，你就知道！</a>

属性	值	描述
href	URL	规定链接的目标 URL。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。仅在 href 属性存在时使用。

4.2 表格 table

<table>
    <caption>表格标题</caption>
    <tr>
    	<td>单元格内容</td>
        ...
    </tr>
    ...
</table>

tr 标签 table raw 用于定义表格中的行
td 标签 table data 用于定义表格中的单元格

表格属性	描述
`cellspacing`单元格间距	设置单元格与单元格边框之间的空白间距
`cellpadding` 单元格边距	设置单元格内容与单元格边框之间的空白间距
border	设置表格的边框
width	设置的表格的宽度
height	设置的表格的高度
align	设置表格在网页中的水平对齐方式 left、center、right

我们经常有个说法，是三参为0，平时开发的我们这三个参数 border cellpadding cellspacing为 0

合并单元格2种方式

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

<!DOCTYPE HTML>
<html>
	<head>
		<title> my html</title>
	</head>
	<body>
		<table cellspacing="1" cellpadding="20" border="1" >
			<tr> 
				<th>姓名</th> 
				<th>性别</th>
				<th>年龄</th>
				<th rowspan="2">照片</th>
			</tr>

			<tr>
				<td>身高</td>
				<td>民族</td>
				<td>婚姻</td>
				
			</tr>
			<tr>
				<td>个人简介</td>
				<td colspan="3"> </td>	
			</tr>
			<tr>
				<td>个人作品</td>
				<td colspan="3"> </td>
			</tr>
		</table>
	</body>
</html>

4.3 列表 ul ol

标签名	定义	说明
<ul></ul>	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol></ol>	有序标签	里面只能包含li 有顺序，使用情况较少
<dl></dl>	自定义列表	里面有2个兄弟， dt（definition term，定义术语）一般是你的列表的表头和 dd（definition description，定义描述）相当于 ul 的 li 中相同的内容

4.4 表单 form

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。

4.5 input 标签

4.6 label 标签

**概念：**label 标签为 input 元素定义标注（标签）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

如何绑定元素呢？

第一种用法就是用label直接包括input表单。

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

适合单个表单选择

第二种用法 for 属性规定 label 与哪个表单元素绑定。

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面

4.7 其他标签

水平线：<hr>
换行：<br>
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>缩写词或者首字母缩略词</abbr>
<address>联系信息</address>
<bdo>文字方向</bdo>
<blockquote>从另一个源引用的部分</blockquote>
<cite>工作的名称</cite>
<del>删除的文本</del>
<ins>插入的文本</ins>
<sub>下标文本</sub>
<sup>上标文本</sup>

4.8 头部标签

<head>	定义了文档的信息。
<title>	定义了文档的标题。
<base>	定义了页面链接标签的默认链接地址。
<link>	定义了一个文档和外部资源之间的关系。
<meta>	定义了HTML文档中的元数据。
<script>定义了客户端的脚本文件。
<style>	定义了HTML文档的样式文件。

CSS

1、CSS的使用

方式一：行内式（内联样式）

<标签名 style="属性1:属性值1; 属性2:属性值2" >内容</标签名>

方式二：内部样式表（内嵌式样式表）

<head>
    <!--type="text/css"  在html5中可以省略。-->
    <style type="text/css"> 
        选择器{
            属性1:属性值1
            属性2:属性值2
        }
    </style>
</head>

方式二：外部样式表（外链式）

<head>
    <link rel="stylesheet" type="text/css" href="css文件路径" />
</head>

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。可以省略。
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

2、CSS选择器

2.1 基础选择器

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

2.2 复合选择器

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
相邻兄弟选择器	可选择紧接在另一元素后的元素，且二者有相同父元素	紧挨着的第一个兄弟		符号是+ div+p
后续兄弟选择器	选取所有指定元素之后的相邻兄弟元素	是选择所有相邻兄弟		符号是~ div~p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header

伪类选择器：

a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */
注意：推荐使用顺序为link、visited、hover、active

3、CSS常见样式

3.1 文本样式 (text)

属性	表示	注意点
color	文本颜色	我们通常用十六进制比如而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none
letter-spacing	字符间距	字符与字符之间的间距
word-spacing	字间距	字与字之间的间距
direction	文本方向

长度单位：em 相对于当前对象内文本的字体尺寸；px 像素；1em 等于14个px。

行高补充（line-height）

行高 = 两条基线之间的距离 = 上半行距 + 下半行距 + 字体大小

行距 = 行高 - 字体大小

行高我们利用最多的一个地方是：文字的行高等于盒子的高度，可以让单行文本在盒子中垂直居中对齐。

行高和高度的三种关系

如果行高等于高度 文字会垂直居中
如果行高大于高度文字会偏下（上行距就会变大，文字就会偏下）
如果行高小于高度文字会偏上（上行距就会变小，文字就会偏上）

假设div高度为50，那么当行高等于高度时，行高减去字体默认大小16时，上下行距总是相等的为17，所以文字垂直居中。

假设div高度为50，那么当行高大于高度时，假设行高为60，行高减去字体默认大小16时，上下行距相等为22，所以文字会偏下。

css中的line-height

3.2 字体样式 (font)

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
font	字体连写	1. 字体连写是有顺序的不能随意换位置 2. 其中字号和字体必须同时出现

3.3 标签显示模式（display）

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

标签显示模式转换 display

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display: inline-block;

区别：

块级元素	行内元素	行内块元素
能够识别宽高	设置宽高无效	能够识别宽高
margin和padding的上下左右均对其有效	对margin仅设置左右方向有效，上下无效； padding设置上下左右都有效，即会撑大空间	不自动换行
可以自动换行	不会自动进行换行	默认排列方式为从左到右
多个块状元素标签写在一起，默认排列方式为从上至下

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

3.4 背景 (background)

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径) 提倡url不要加引号
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标，切记如果有精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll/fixed
背景简写	更简单	他们没有顺序;背景颜色背景图片地址背景平铺背景滚动背景位置;
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

背景位置注意

必须先指定background-image属性
position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景透明注意

最后一个参数是alpha 透明度取值范围 0~1之间
我们习惯把0.3 的 0 省略掉这样写 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
因为是CSS3 ，所以低于 ie9 的版本是不支持的。

4、CSS三大特性

4.1 层叠性

概念：所谓层叠性是指多种CSS样式的叠加。
原则：样式冲突，遵循的原则是就近原则。

4.2 继承性

概念：子标签会继承父标签的某些样式，如文本颜色和字号。
注意：
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

4.3 优先级（重点）

概念：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

选择器相同，则执行层叠性。
选择器不同，就会出现优先级的问题。

1）、权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
div {
color: pink!important;
}

2）、权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1

注意： 数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

3）、继承的权重是0

这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

如果选中了，那么以上面的公式来计权重。谁大听谁的。
如果没有选中，那么权重是0，因为继承的权重为0。

5、盒子模型

盒子模型包括：

元素的内容（content） 盒子里面的文字和图片等元素就是内容区域
边框（border） 盒子的厚度称为边框
**内边距（padding）**盒子内容与边框的距离是内边距
外边距（margin）盒子与盒子之间的距离是外边距

元素实际的大小：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

5.1 盒子边框（border）

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色
border简写	没有顺序

border-style：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

简写:
border: border-width || border-style || border-color

例如：
border: 1px solid red; 没有顺序

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度样式颜色;	border-bottom:宽度样式颜色;	border-left:宽度样式颜色;	border-right:宽度样式颜色;

补充：表格的细线边框

通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，但是两个单元格之间的边框会出现重叠，从而使边框变粗。
通过css属性collapse（合并、折叠）把相邻边框合并在一起：table{ border-collapse:collapse; }

5.2 内边距（padding）

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

注意：

简写	表达意思
1个值	padding：上下左右
2个值	padding：上下左右
3个值	padding：上左右下
4个值	padding：上右下左；

5.2.1 内边距撑大原来盒子

问题：设置内边距时会撑大原来的盒子。

解决：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小。

一个盒子宽度为100， padding为 10，边框为5像素，问这个盒子实际的宽度的是（）

(A) 130
(B) 135
© 125
(D) 115

100 + 20 + 10

关于根据下列代码计算盒子宽高下列说法正确的是（）

div {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
    border-top: 5px solid blue;
    padding: 50px;
    padding-left: 100px;
}

(A) 宽度为200px 高度为200px
(B) 宽度为352px 高度为306px
© 宽度为302px 高度为307px
(D) 宽度为302px 高度为252px

w 200 + 150 + 2 = 352

h 200 + 100 + 6 = 306

5.2.2 案例：新浪导航

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏</title>
	<style>
		.nav {
			height: 41px;
			background: #FCFCFC;
			border-top: 3px solid #FF8500;
			border-bottom: 1px solid #EDEEF0
		}
		a {
			display: inline-block;/*块元素转化为行内块*/
			font-size: 12px;
			height: 41px;
			line-height: 41px;
			padding: 0 20px;
			text-decoration: none;/*没有下划线*/
			color: #4C4C4C
		}
		.nav a:hover {
			background-color: #eee;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">设为首页</a>
		<a href="#">手机新浪网</a>
		<a href="#">移动客户端</a>
		<a href="#">博客</a>
		<a href="#">微博</a>
		<a href="#">关注我</a>
	</div>
</body>
</html>

5.3 外边距（margin）

margin值的写法和简写跟 padding 完全相同。

1、块级盒子水平居中

盒子必须指定宽度，左右外边距都设置为auto

以下下三种写法都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

2、文字居中和盒子居中区别

文字居中：text-align: center，还可以让行内元素和行内块元素居中对齐
块级盒子居中：左右margin改为 auto

3、插入图片和背景图片区别

插入图片我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

img {  
    width: 200px;/* 插入图片更改大小 width 和 height */
    height: 210px;
    margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
    margin-left: 50px; /* 插入当图片也是一个盒子 */
}

div {
    width: 400px;
    height: 400px;
    border: 1px solid purple;
    background: #fff url(images/sun.jpg) no-repeat;
    background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}

4、清除元素默认的内外边距

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除。

// 代码： 
* {
    padding:0;         /* 清除内边距 */
    margin:0;          /* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

5、去掉列表默认的样式

无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。

li { list-style: none; }

5.3.1 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

相邻块元素垂直外边距的合并

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
解决方案：尽量给只给一个盒子添加margin值。

嵌套块元素垂直外边距的合并（塌陷）

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并，合并后的外边距为两者中的较大者

解决方案：

可以为父元素定义上边框。可以为父元素定义上内边距。可以为父元素添加overflow:hidden。

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

5.3.2 案例：新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*清除元素默认的内外边距*/
		* {
			margin: 0;
			padding: 0;
		}
		/*取消列表样式*/
		li {
			list-style: none;	
		}
		.box {
			width: 298px;
			height: 198px;
			border: 1px solid #CCC;
			/*块级盒子居中*/
			margin: 100px auto;
			background: url(images/line.jpg);
			padding: 15px;
		}
		.box h2 {
			font-size: 18px;
			/*底部边框*/
			border-bottom: 1px solid #ccc;
			padding: 5px 0px;
			margin-bottom: 10px;
		}
		.box ul li {
			height: 30px;
			border-bottom: 1px dashed #ccc;	
			background: url(images/arr.jpg) no-repeat 1px;
		}
		.box ul li a {
			color: #333;
			font-size: 14px;
			text-decoration: none;
			line-height: 30px;
			/*因为这个li 没有宽度，所以padding不会撑开盒子*/
			padding-left: 20px;
		}
		.box ul li a:hover{
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<div class="box">
		<!-- 标题盒子 -->
		<h2>最新文章/New Articles</h2>
		<!-- 列表盒子 -->
		<ul>
			
			<li><a href="#">安徽</a></li>	
			<li><a href="#">合肥</a></li>	
			<li><a href="#">亳州</a></li>	
			<li><a href="#">利辛</a></li>	
			<li><a href="#">啧啧</a></li>	
		</ul>
	</div>
</body>
</html>

6、浮动

6.1 CSS 布局的三种机制

网页布局的核心 —— 就是用 CSS 来摆放盒子位置。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位。

普通流（标准流）
- 块级元素会独占一行，从上向下顺序排列；
  - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
  - 常用元素：span、a、i、em等
浮动：让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。
定位：将盒子定在某一个位置 ,自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。

6.2 浮动语法

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

6.3 浮动演示

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

CSS 浮动实例 - 向右浮动的元素

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

CSS 浮动实例 - 向左浮动的元素

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

CSS 浮动实例 2 - 向左浮动的元素

float —— 浮漏特

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特	特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙

子盒子的浮动参照父盒子对齐，不会与父盒子的边框重叠，也不会超过父盒子的内边距。

建议：如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题。

6.4 清除浮动

6.4.1 原因

因为有时候内容不确定有多少，所以父级盒子不方便给高度；但是子盒子浮动不占有位置，这时父级盒子高度为0，就影响了下面的标准流盒子，对后面的元素排版产生影响。准确地说，并不是清除浮动，而是清除浮动后造成的影响。

本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

6.4.2 方法

语法：

选择器{clear:属性值;}   clear 清除

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响（实际工作中，几乎只用 clear: both;）

1、额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。

2、父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3、父级使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点：符合闭合浮动思想结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：百度、淘宝网、网易等

4、父级使用双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点：代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：小米、腾讯等

6.4.3 小结

以后什么时候用清除浮动呢？

父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了。

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

7、定位

定位 = 定位模式 + 边偏移

边偏移

简单说，我们定位的盒子，是通过边偏移来移动位置的。在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移。

边偏移属性	示例	描述
`top`	`top: 80px`	顶端偏移量，定义元素相对于其父元素上边线的距离。
`bottom`	`bottom: 80px`	底部偏移量，定义元素相对于其父元素下边线的距离。
`left`	`left: 80px`	左侧偏移量，定义元素相对于其父元素左边线的距离。
`right`	`right: 80px`	右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值	语义
`static`	静态定位
`relative`	相对定位
`absolute`	绝对定位
`fixed`	固定定位

7.1 静态定位 (static) - 了解

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，不要定位的时候用。静态定位按照标准流特性摆放位置，它没有边偏移。静态定位在布局时我们几乎不用的

7.2 相对定位 (relative)

相对定位是元素相对于它原来在标准流中的位置来说的。（自恋型）

效果图：

相对定位的特点：（务必记住）相对于自己原来在标准流中位置来移动的。==原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。==

7.3 绝对定位 (absolute)

绝对定位是元素以带有定位的父级元素来移动位置。（拼爹型）

完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素要有定位
- 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点：（务必记住）

绝对是以带有定位的父级元素来移动位置（拼爹型）如果父级都没有定位，则以浏览器文档为准移动位置。
不保留原来的位置，完全是脱标的。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

定位口诀：子绝父相

疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？

分析：

方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
- 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

7.4 固定定位 (fixed)

固定定位是绝对定位的一种特殊形式：如果说绝对定位是一个矩形那么固定定位就类似于正方形。

完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性来设置元素的位置；
- 跟父元素没有任何关系；单独使用的
- 不随滚动条滚动。

案例演练：固定定位案例

提示：IE 6 等低版本浏览器不支持固定定位。

7.5 定位的扩展

绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin:auto 设置水平居中。

在使用绝对定位时要想实现水平居中，可以按照下图的方法：

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半。

案例演示：相对定位案例

堆叠顺序(z-index)

加了定位的盒子，会出现盒子重叠的情况，默认后来者居上，后面的盒子会压住前面的盒子。可以用z-index层叠等级属性调整盒子的堆叠顺序。

z-index 的特性如下：

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性

可以改变显示模式有以下方式：

inline-block 转化为行内块
浮动 float 默认转化为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似，默认转化为行内块

注意：

一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

7.6 定位小结

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

注意：

边偏移需要和定位模式联合使用，单独使用无效；
top 和 bottom 不要同时使用；left 和 right 不要同时使用。

7.7 案例 - 淘宝轮播图

<!DOCTYPE html>
<html>
<head>
	<title>
		
	</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		li {
			list-style: none;
		}
		.taobao {
			position: relative;
			width: 520px;
			height: 280px;
			background-color: pink;
			margin: 100px auto;
		}
		/*并集选择器*/
		.arrow-l, 
		.arrow-r {
			/*只能用定位来做，才能压住盒子*/
			/*不要占位置且随便移动，必须使用绝对定位*/
			position: absolute;
			/*垂直居中*/
			top: 50%;
			margin-top: -15px;
			/*绝对定位的盒子，无须转换，直接给大小就好*/
			width: 20px;
			height: 30px;
			/*透明背景*/
			background: rgb(0, 0, 0, .2);
			/*水平居中*/
			/*text-align: left;*/
			/*垂直居中*/
			line-height: 30px;
			/*取消下划线*/
			text-decoration: none;
			/*字体颜色*/
			color: #fff;
			
		}
		.arrow-l {
			/*右上角和右下角圆角矩形*/
			border-top-right-radius: 15px;
			border-bottom-right-radius: 15px;

		}
		.arrow-r {
			text-align: right;
			right: 0;
			border-top-left-radius: 15px;
			border-bottom-left-radius: 15px;
		}
		.arrow-l:hover, .arrow-r:hover {
			background: rgba(0, 0, 0, .4);
		}
		.circle {
			width: 70px;
			height: 13px;

			position: absolute;
			left: 50%;
			margin-left: -35px;
			bottom: 15px; 
			background:	rgba(255, 255, 255, .2);
			border-radius: 7px;
		}
		.circle li {
			float: left;
			width: 8px;
			height: 8px;
			background:	#fff;
			border-radius: 5px;
			margin: 3px;
		}
		.circle .current {
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="taobao">
		<a href="#" class="arrow-l"> &lt; </a>
		<a href="#" class="arrow-r"> &gt; </a>
		<img src="taobao.jpg">
		<ul class="circle">
			<li></li>
			<li></li>
			<li class="current"></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

CSS3

CSS 用于控制网页的样式和布局，CSS3 是最新的 CSS 标准。对CSS3已完全向后兼容，所以你就不必改变现有的设计，浏览器将永远支持CSS2

圆角边框(CSS3)

语法：border-radius:length; length 可以为数值或百分比的形式

正方形变圆圈：

技巧： border-radius: 50%;

矩形变圆角

以下效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半。
而我们这里矩形就只用用高度的一半就好了。精确单位。

圆角矩形设置4个角

圆角矩形可以为4个角分别设置圆度，但是是有顺序的

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

如果4个角，数值相同
```
border-radius: 15px;
```
里面数值不同，我们也可以按照简写的形式，具体格式如下:

border-radius: 左上角 右上角  右下角  左下角;

还是遵循的顺时针。

盒子阴影(CSS3)

语法:

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

前两个属性是必须写的。其余的可以省略
外阴影 (outset) 是默认的但是不能写
想要内阴影可以写 inset

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}

JavaScript

1、JavaScript 简介

1.1 什么是 JS？

JavaScript是一种轻量级的编程语言，其后缀Script是脚本的意思，脚本语言不需要编译，运行过程由浏览器的JS引擎进行解释执行。所谓解释执行就是指源代码不需要预编译（同声传译）。而编译型语言就需要在代码运行前进行预编译（放录音）。

在Node.js 之前 JavaScript是一项完全的客户端技术，应用于浏览器中实现各种动画及对DOM的操作等。下面介绍Node.js和npm。

课外阅读：JavaScript 的历史

1.2 Node.js 和 npm

1.2.1 引擎是什么？

词源：

引擎，即是汽车动力的来源。换句话说，就是驱动汽车发动、前进、加速的一种组件。
当引擎用在游戏中时，游戏引擎指的是控制所有游戏功能的主程序。

改变状态：

汽车由静止到启动再加速的状态是通过汽车引擎来改变的。
游戏中控制人物的行为，和游戏中人物进行交互，是通过游戏引擎来完成的。

代码库和接口：

引擎就是为了实现某个功能已经封装好的库。

有人也许会问，这和API有什么区别？

API是提供调用封装好的库的接口；而引擎是为了完成某个功能，通过调用多个API接口实现，且这种调用是基于引擎功能而制定的调用组合。

例子：

浏览器内核的两部分

渲染引擎：负责获取网页的内容（HTML、XML、图像等）;整理讯息，增加样式（例如加入CSS）。
JS引擎：解析执行JS，获取网页的动态效果。

总结

从功能的角度讲，引擎是封装了代码/函数库，通过调用代码/函数库的接口来实现特定的功能。
从状态的角度讲，引擎是为了实现状态的转换。而状态的转换，需要定义规则。即在什么情况下作出什么反应。
从抽象的角度讲，引擎简化了我们看问题的视角。使得我们通过引擎就可以对程序的功能状态进行改变，从而实现丰富的内容和功能。把底层（相对于业务和设计架构而言）的逻辑抽象出来，以便在设计的时候专注于业务逻辑本身，而不是底层调用细节。

什么是JS引擎？

1.2.2 Node.js 是什么?

V8引擎

了解Node.js之前，先了解一下什么是V8引擎，可以说Node.js的诞生很大程度归功于v8引擎的出现。

v8是用C++开发的 JS引擎，在谷歌浏览器中使用，目的是快速解析和执行JS脚本。

随着Web相关技术的发展，JS需要承担更多的工作。这就更需要快速的解析和执行JS脚本。V8引擎就是为了解决这一问题而生的。
在运行JS之前，相比其它的JS引擎转换成字节码或解释执行，V8将其编译成原生机器码，并且使用了如内联缓存（inline caching）等方法来提高性能。有了这些功能，JavaScript程序在V8引擎下的运行速度媲美二进制程序。
V8可以独立运行，也可以嵌入到任何C++应用程序。

Node.js

Node.js 是一个服务器端的、非阻断式I/O的、事件驱动的JavaScript运行环境。

是一项服务器技术。我们都知道客户端提出请求，服务端接收并响应，提供服务。在Node.js 之前 JS 是一项完全的客户端技术，应用于浏览器中实现各种动画及对DOM的操作等。而后端，即服务端则是由Python、Java等语言实现的。Node.js 的出现，使得前后端使用同一种语言，统一模型的梦想得以实现。

是一个基于GoogleV8引擎的JavaScript环境，V8引擎执行Javascript的速度非常快，性能非常好。

具有以下特点：

服务器端JavaScript处理：server-side JavaScript execution
非阻断/异步I/O：non-blocking or asynchronous I/O
事件驱动：Event-driven

非阻断的意思就是把服务器想象成一个loop循环。一个新请求来了，这个loop接收请求，然后传递给其他进程（比如数据库查询进程），然后响应一个回调（callback）。完事后loop循环一直跑，接收其他请求。这样，服务器就不会像之前一样傻等着数据库返回结果。

数据库将数据返回回来，loop将结果传递给浏览器，接着跑。这种方式下，服务器的进程就不会闲着。服务器只在用户那边有事件发送的时候才响应，这就是事件驱动。

什么是Node.js

1.2.3 npm 是什么？

npm是用 JavaScript（运行在Node.js上）写的一个可以将前端代码集中管理的工具。
可以使 JavaScript 开发人员可以快速方便地共享软件包。
全称是 Node Package Manager。
类似java语法当中的maven， gradle， python的pip。

npm和Node.js的相辅相成

npm中文文档

npm使用入门

1.3 JS 的组成

JavaScript 注意由三部分组成：

核心（ECMAScript）描述了该语言的语法和基本对象
文档对象模型（DOM）描述了处理网页内容的方法和接口
浏览器对象模型（BOM）描述了与浏览器进行交互的方法和接口

ECMAScript

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM——文档对象模型

文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM——浏览器对象模型

浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.4 JS 的使用

行内式

<input type="button" value="点我试试" onclick="alert('Hello World')" />

内嵌式

//type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言
<script type="text/javascript"> 
    alert('Hello  World~!');
</script>

script 标签可以写在HTML页面里的 body标签或者 head标签内。

外部引入JS文件

<script src="my.js"></script>

1.5 JS 的输出

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

2、JavaScript 语法

2.1 数据类型

JavaScript中一共有5种基本数据类型：
- 字符串型（String）
- 数值型（Number）
- 布尔型（Boolean）
- undefined型（Undefined）
- null型（Null）

这5种之外的类型都称为引用数据类型Object，所以总的来看JavaScript中共有六种数据类型。

typeof运算符可用来判断变量的数据类型

typeof 运算符把对象、数组或 null 返回 object。因为在 JavaScript 中数组即对象。
typeof 运算符把函数返回 function。

类型	例子	结果
String	typeof “Bill”	返回 “string”
Number	typeof 3.14	返回 “number”
Boolean	typeof true	返回 “boolean”
Undefined	typeof x	返回 “undefined” (假如 x 没有值)
Null	typeof null	返回 “object”

数字型三个特殊值

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

isNaN 用来判断一个变量是否为非数字的类型，返回 true 或者 false

2.2 数据类型的转换

转化为字符串

方式	说明	案例
toString()	转成字符串	var num=1; num=num.toString(); console.log(typeof num);
String() 强制转换	转成字符串	var num=1; console.log(typeof(String(num)));
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1; console.log(typeof(num+“字符串”));

转化为数字

方式	说明	案例
parseInt(string) 函数	将string 类型转成整数数值型	parseInt(‘78’)
parseFloat(string) 函数	将string 类型转成浮点数数值型	parseFloat(‘78.21’)
Number() 强制转换	将string 类型转成数值型	Number(‘12’)
JS 隐式转换（- * /）	利用算数运算隐式转换为数值型	‘12’-0

转化为布尔型

方式	说明	案例
Boolean()函数	其他类型转化为布尔型	Boolean(‘true’)；

表示空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined
其余值都会被转换为 true

2.3 对象基础

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，即对象是由属性和方法组成的。

2.3.1 创建对象

方式一：使用 new Object 创建对象

var person = new Object();
person.name='xiaohong';
person.age=18;
console.log(person)

方式二：使用 字面量创建对象

var person = {
    name: 'xiaohong',
    age: 18
}
console.log(person)

删除属性：delete 对象.属性名

方式三：使用 构造函数创建对象

// 使用构造函数来创建对象
function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
    // 设置对象的方法
    this.sayName = function () {
        console.log(this.name);
    };
}

var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);

console.log(person1);
console.log(person2);
console.log(person3);

构造函数：构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写，构造函数和普通函数的还有一个区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用

构造函数创建对象过程：

调用构造函数，它会立刻创建一个新的对象
将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
逐行执行函数中的代码
将新建的对象作为返回值返回

构造函数、原型、原型链

2.3.2 数据类型梳理

JavaScript中的变量可能包含两种不同数据类型的值：基本数据类型和引用数据类型。

基本数据类型：

JavaScript中一共有5种基本数据类型：String、Number、 Boolean、Undefined、Null。

基本数据类型的值是无法修改的，是不可变的。

基本数据类型的比较是值的比较，也就是只要两个变量的值相等，我们就认为这两个变量相等。

引用数据类型：

引用类型的值是保存在内存中的对象。

当一个变量是一个对象时，实际上变量中保存的并不是对象本身，而是对象的引用。

当从一个变量向另一个变量复制引用类型的值时，会将对象的引用复制到变量中，并不是创建一个新的对象。

这时，两个变量指向的是同一个对象。因此，改变其中一个变量会影响另一个。

比较：

=：赋值运算符，和Java一样

==：比较运算符，比较的是值是否一样,不会去比较数据类型

===：比较运算符，先比较的是数据类型，在比较值是否相等,如果都一样,就返回true,否则就返回false

2.4 函数

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

通常情况下，JavaScript代码是自上而下执行的，如果只是对函数进行了声明，其中的代码并不会执行，只有在调用函数时才会执行函数体内部的代码。

这里要注意的是JavaScript中的函数也是一个对象，使用typeof检查一个函数对象时，会返回function。

2.4.1 函数的创建

使用 函数声明 来创建一个函数

// 声明定义方式
function fn() {...}
// 调用  
fn();

使用 函数表达式 来创建一个函数

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...};
// 调用的方式，函数调用必须写到函数体下面
fn();

2.4.2 对象中的函数

对象的属性值可以是任何的数据类型，也可以是个函数。

如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法，调用这个函数就说调用对象的方法（method）。

注意：方法和函数只是名称上的区别，没有其它别的区别

var person = {
    name: "zhangsan",
    age: 18,
    sayHello: function () {
        console.log(name + " hello")
    }
}

person.sayHello();

2.4.3 this对象

解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象。

以函数的形式调用时，this永远都是window
以方法的形式调用时，this就是调用方法的那个对象

//创建一个全局变量name
var name = "全局变量name";

//创建一个函数
function fun() {
    console.log(this.name);
}

//创建一个对象
var obj = {
    name: "孙悟空",
    sayName: fun
};

//我们希望调用obj.sayName()时可以输出obj的名字而不是全局变量name的名字
obj.sayName(); //孙悟空

2.5 预解析

预解析：就是把把变量和函数的声明在代码执行之前执行完成。

变量的声明提前：使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不使用var关键字，则变量不会被声明提前。

console.log(num);  // 结果是多少？
var num = 10;      // ？

结果：undefined

注意：变量提升只提升声明，不提升赋值

函数的声明提前：使用函数声明形式创建的函数 function 函数名(){} ，它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数。使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用

//函数声明形式创建的函数
fn();
function fn() {
    console.log('打印');
}

//结果：控制台打印字符串 --- ”打印“ 
//注意：函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！

//函数表达式创建函数,会执行变量提升，此时接收函数的变量名无法正确的调用
fn();
var  fn = function() {
    console.log('想不到吧');
}

//结果：报错提示 ”fn is not a function"
//解释：该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined；而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined，所以无法正确调用

3、JavaScript 常用对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数。此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。

在 JavaScript 中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法。

3.1 Array对象

创建数组

创建数组，有三种方法

常规方式:

var myCars=new Array();
myCars[0]="Saab";   
myCars[1]="Volvo";
myCars[2]="BMW";

简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

字面
```
var myCars=["Saab","Volvo","BMW"];
```

遍历数组

for(var i = 0; i < myCars.length; i++){
		console.log(myCars[i]);
	}

数组属性

属性	描述
constructor	返回创建数组对象的构造函数。
length	设置或返回数组元素的个数。
prototype	允许你向数组对象添加属性或方法。

数组方法

Array 对象

方法	描述
concat()	连接两个或更多的数组，并返回结果。
filter()	检测数值元素，并返回符合条件所有元素的数组。
forEach()	数组每个元素都执行一次回调函数。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的一部分，并返回一个新数组。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

3.2 其他对象

Date 对象

Math 对象

Number 对象

String 对象

4、DOM

4.1 DOM概述

文档对象模型（Document Object Model，简称DOM），是HTML和XML文的编程接口。
DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。
通过这些DOM接口可以改变网页的内容，结构和样式。

当网页被加载时，浏览器会创建页面的文档对象模型，HTML DOM模型被结构化为 DOM树。

4.2 节点

网页中所有的内容，在文档树中都是节点（比如html标签、属性、文本、注释、整个文档等）

根据节点的类型：

文档称为文档节点，用document表示，代表整个HTML文档，网页中所有节点都是它的字节的。
标签称为元素节点，用element表示
属性称为属性节点，用attribute表示，属性节点是元素节点的一部分，并非是元素节点的字节点。
文本称为文本节点，用text表示，要获取文本节点，先获取元素节点。

4.3 节点属性

4.4 查找HTML元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素。
document.getElementsByTagName(name)	通过标签名来查找元素。
document.getElementsByClassName(name)	通过类名来查找元素。
document.querySequlector(CSS选择器)	通过CSS选择器选择一个元素。
document.querySelectorAll(CSS选择器)	通过CSS选择器选择多个元素。

querySequlector 和querySelectorAll 里面的选择器都要加符号，比如：document.querySelector(‘#nav’);

4.5 获取HTML的值

方法	描述
元素节点.innerText	获取 HTML 元素的 inner Text
元素节点.innerHTML	获取 HTML 元素的 inner HTML
元素节点.属性	获取 HTML 元素的属性值。
元素节点.getAttribute(attribute)	获取 HTML 元素的属性值。
元素节点.style.样式	获取 HTML 元素的行内样式值。

4.6 改变HTML的值

方法	描述
元素节点.innerText = new text content	改变元素的 inner Text。
元素节点.innerHTML = new html content	改变元素的 inner HTML。
元素节点.属性 = new value	改变 HTML 元素的属性值。
元素节点.setAttribute(attribute, value)	改变 HTML 元素的属性值。
元素节点.style.样式 = new style	改变 HTML 元素的行内样式值。

innerText和innerHTML的区别

获取内容时的区别：

innerText会去除空格和换行，而innerHTML会保留空格和换行

设置内容时的区别：

innerText不会识别html，而innerHTML会识别

元素节点.属性 和 **元素节点.getAttribute(attribute)**的区别

获取内容时的区别：

前者获取元素本身自带的属性值，后者主要获得程序员自定义的属性。

设置内容时的区别

前者设置元素本身自带的属性值，后者主要设置程序员自定义的属性。

4.7 修改 HTML 元素

方法	描述
document.createElement(element)	创建 HTML 元素节点。
document.createAttribute(attribute)	创建 HTML 属性节点。
document.createTextNode(text)	创建 HTML 文本节点。
元素节点.removeChild(element)	删除 HTML 元素。
元素节点.appendChild(element)	添加 HTML 元素。
元素节点.replaceChild(element)	替换 HTML 元素。
元素节点.insertBefore(element)	在指定的子节点前面插入新的子节点。

4.8 查找HTML元素

方法	描述
元素节点.parentNode	返回元素的父节点
元素节点.parentElement	返回元素的父元素。
元素节点.childNodes	返回元素的一个子节点的数组（包含空白文本Text节点）。
元素节点.children	返回元素的一个子元素的集合（不包含空白文本Text节点）。
元素节点.firstChild	返回元素的第一个子节点（包含空白文本Text节点）。
元素节点.firstElementChild	返回元素的第一个子元素（不包含空白文本Text节点）。
元素节点.lastChild	返回元素的最后一个子节点（包含空白文本Text节点）。
元素节点.lastElementChild	返回元素的最后一个子元素（不包含空白文本Text节点）。
元素节点.previousSibling	返回某个元素紧接之前节点（包含空白文本Text节点）。
元素节点.previousElementSibling	返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。
元素节点.nextSibling	返回某个元素紧接之后节点（包含空白文本Text节点）。
元素节点.nextElementSibling	返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）。

4.9 DOM文档事件

窗口事件

属性	描述
onblur	当窗口失去焦点时运行脚本。
onfocus	当窗口获得焦点时运行脚本。
onload	当文档加载之后运行脚本。
onresize	当调整窗口大小时运行脚本。
onstorage	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。

表单事件

属性	描述
onblur	当元素失去焦点时运行脚本。
onfocus	当元素获得焦点时运行脚本。
onchange	当元素改变时运行脚本。
oninput	当元素获得用户输入时运行脚本。
oninvalid	当元素无效时运行脚本。
onselect	当选取元素时运行脚本。
onsubmit	当提交表单时运行脚本

键盘事件

属性	描述
onkeydown	当按下按键时运行脚本。
onkeyup	当松开按键时运行脚本。
onkeypress	当按下并松开按键时运行脚本。

鼠标事件

属性	方法
onclick	当单击鼠标时运行脚本
ondblclick	当双击鼠标时运行脚本。
onmousedown	当按下鼠标按钮时运行脚本。
onmouseup	当松开鼠标按钮时运行脚本。
onmousemove	当鼠标指针移动时运行脚本。
onmouseover	当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡
onmouseout	当鼠标指针移出元素时运行脚本，不可以阻止冒泡。
onmouseenter	当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
onmouseleave	当鼠标指针移出元素时运行脚本，可以阻止冒泡。
onmousewheel	当转动鼠标滚轮时运行脚本。
onscroll	当滚动元素的滚动条时运行脚本。

5、BOM

5.1 BOM概述

浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。

浏览器对象模型（BOM）可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作，常见的BOM对象如下：

Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

5.2 Window对象

弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。

//警告框
window.alert("警告");
//确认框
window.confim("确认");
//提示框
window.prompt("sometext","defaultText");

其上方法都可以不window前缀来编写

定时事件

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数。
第一个参数是要执行的函数。第二个参数指示执行之前的毫秒数。

setInterval(function, milliseconds)

等同于 setTimeout()，但持续重复执行该函数
第一个参数是要执行的函数。第二个参数每个执行之间的时间间隔的长度

常用窗口属性

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：该例显示浏览器窗口的高度和宽度（不包括工具栏和滚动条）

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

5.3 Navigator对象

Navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器，由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了，一般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent，如下代码：

var ua = navigator.userAgent;
console.log(ua);

谷歌浏览器：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

火狐浏览器：

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0

IE11浏览器：

Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko

5.4 Location对象

Location对象中封装了浏览器的地址栏的信息，如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）

常用属性

console.log(location);          //输出location对象
console.log(location.href);     //输出当前地址的全路径地址
console.log(location.origin);   //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host);     //输出当前地址的主机
console.log(location.port);     //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search);   //输出当前地址的?后边的参数部分

常用方法

assign()：用来跳转到其它的页面，作用和直接修改location一样

location.assign("https://www.baidu.com");

reload()：用于重新加载当前页面，作用和刷新按钮一样，如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面

location.reload(true);

replace()：可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，它不会生成历史记录，不能使用回退按钮回退

location.replace("https://www.baidu.com");

5.5 History对象

History对象可以用来操作浏览器向前或向后翻页

常用属性

console.log(history);           //输出history对象
console.log(history.length);    //可以获取到当成访问的链接数量

常用方法

back()：可以回退到上一个页面，作用和浏览器的回退按钮一样

history.back();

forward()：可以跳转到下一个页面，作用和浏览器的前进按钮一样

history.forward();

go()：可以用来跳转到指定的页面，它需要一个整数作为参数

1：表示向前跳转一个页面，相当于forward()
2：表示向前跳转两个页面
-1：表示向后跳转一个页面，相当于back()
-2：表示向后跳转两个页面

JSON

1、概述

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式

数据在浏览器与服务器之间进行交换时，这些数据只能是文本，JSON 属于文本并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

2、JSON 语法

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象

3、JSON 值

键必须是字符串，且由双引号包围，而值必须是以下数据类型之一：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null

JSON 的值不可以是以下数据类型之一：

函数
日期
undefined

4、JSON字符串转JS对象

JSON.parse()：可以将以JSON字符串转换为JS对象，它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回

案例演示：

var jsonStr = '{"name":"孙悟空","age":18,"gender":"男"}';
var obj = JSON.parse(jsonStr);
console.log(obj);

5、JS对象转JSON字符串

JSON.stringify()：可以将一个JS对象转换为JSON字符串，需要一个js对象作为参数，会返回一个JSON字符串

var obj = {"name": "猪八戒", "age": 28, "gender": "男"};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);

AJAX

1、概述

AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

普通浏览器交互时，浏览器发出HTTP请求服务器，服务器进行处理响应，然后返回一个新的页面。每当服务器处理时，客户端浏览器都要空闲等待。仅仅是请求简单的数据，都需要返回一个完整的页面由浏览器进行再度渲染。而且应用的响应的时间还依赖于服务器的响应时间，这就导致用户体验不好。

AJAX的出现解决了上述问题，在不重新加载整个页面的情况下，可以与服务器交换少量数据并更新部分网页内容，这就实现了网页的异步更新。

从基于AJAX技术的交互示意图可以看出，浏览器中显示一个页面后，这个页面以后一直不改变，所有的操作请求都由这个网页中的javascript代码发出，所有的结果都由javascript代码接受并增加到这个页面上，浏览器窗口中显示的网页始终都是初始的那个网页。

2、创建XMLHttpRequest对象

AJAX 的核心是 XMLHttpRequest对象，与服务器交换就用该对象在后台发送请求和接收响应，而不是通过浏览器。所有现代浏览器均支持 XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject）。

创建 XMLHttpRequest对象的语法：

variable = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable = new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest对象。如果支持，则创建 XMLHttpRequest对象。如果不支持，则创建 ActiveXObject：

实例

var xmlhttp;
if (window.XMLHttpRequest){
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

但是需要注意的是，出于安全原因，现代浏览器不允许跨域访问，这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。

3、XMLHttpRequest对象方法

方法	描述
abort()	取消当前请求
getAllResponseHeaders()	获取响应的所有http头
getResponseHeader()	从响应信息中获取指定的http头
open(method, url, async, user, psw)	规定请求method：请求类型 GET 或 POST url：文件位置 async：默认true（异步）、 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST请求 string：欲通过此请求发送的数据。
setRequestHeader()	向要发送的报头添加标签/值对

4、XMLHttpRequest对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 “OK” 或 “Not Found”）

5、AJAX的GET请求

users.json

[
  {"name":"孙悟空","age":18,"gender":"男"},
  {"name":"猪八戒","age":19,"gender":"男"},
  {"name":"唐僧","age":20,"gender":"男"},
  {"name":"沙和尚","age":21,"gender":"男"}
]

index.html

//1、创建异步对象
var ajax = new XMLHttpRequest();
//2、创建一个请求。 设置请求的method,url
ajax.open("get","users.json");
//3、发送请求
ajax.send();
//4、注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function(){
    //判断响应状态和HTTP状态码
    if(ajax.readyState == 4 && ajax.status == 200){
        alert(ajax.responseText);
    }
}

返回结果：

6、AJAX的POST请求

index.html

//1、创建异步对象
var ajax = new XMLHttpRequest();
//2、创建一个请求。 设置请求的method,url
ajax.open("POST","/login");
//设置请求头，告诉服务器，请求中的正文格式
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//3、发送请求
ajax.send("name=唐僧&age=18");
//4、注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function(){
    //判断响应状态和HTTP状态码
    if(ajax.readyState == 4 && ajax.status == 200){
        alert(ajax.responseText);
    }
}

7、Content-Type

MediaType，即是Internet Media Type，互联网媒体类型；也叫做MIME类型，在Http协议消息头中，使用Content-Type来表示具体请求中的媒体类型信息。

例如： Content-Type: text/html;charset:utf-8;

常见的媒体格式类型如下：

text/html ： HTML格式
text/plain ：纯文本格式
text/xml ： XML格式
image/gif ：gif图片格式
image/jpeg ：jpg图片格式
image/png：png图片格式

以application开头的媒体格式类型：
application/xhtml+xml ：XHTML格式
application/xml ： XML数据格式
application/atom+xml ：Atom XML聚合格式
application/json ： JSON数据格式
application/pdf ：pdf格式
application/msword ： Word文档格式
application/octet-stream ：二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ： <form encType="">中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：
multipart/form-data ：需要在表单中进行文件上传时，就需要使用该格式

学习JavaScript这一篇就够了

最后

以上就是自信花瓣为你收集整理的前端基础复习HTMLCSSCSS3JavaScriptJSONAJAX的全部内容，希望文章能够帮你解决前端基础复习HTMLCSSCSS3JavaScriptJSONAJAX所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Web
浏览次数：84 次浏览
发布日期：2023-12-13 22:10:05
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_6_f5_13_j_18_1.html

前端 基础复习HTMLCSSCSS3JavaScriptJSONAJAX

概述

HTML

1、常见浏览器内核

2、什么HTML

3、什么是HTML5

4、HTML常见标签

4.1 链接 a

4.2 表格 table

4.3 列表 ul ol

4.4 表单 form

4.5 input 标签

4.6 label 标签

4.7 其他标签

4.8 头部标签

CSS

1、CSS的使用

2、CSS选择器

2.1 基础选择器

2.2 复合选择器

3、CSS常见样式

3.1 文本样式 (text)

3.2 字体样式 (font)

3.3 标签显示模式（display）

3.4 背景 (background)

4、CSS三大特性

4.1 层叠性

4.2 继承性

4.3 优先级（重点）

5、盒子模型

5.1 盒子边框（border）

5.2 内边距（padding）

5.2.1 内边距撑大原来盒子

5.2.2 案例：新浪导航

5.3 外边距（margin）

5.3.1 外边距合并

5.3.2 案例：新闻列表

6、浮动

6.1 CSS 布局的三种机制

6.2 浮动语法

6.3 浮动演示

6.4 清除浮动

6.4.1 原因

6.4.2 方法

1、额外标签法(隔墙法)

2、父级添加overflow属性方法

3、父级使用after伪元素清除浮动

4、父级使用双伪元素清除浮动

6.4.3 小结

7、定位

7.1 静态定位 (static) - 了解

7.2 相对定位 (relative)

7.3 绝对定位 (absolute)

7.4 固定定位 (fixed)

7.5 定位的扩展

绝对定位的盒子居中

堆叠顺序(z-index)

定位改变display属性

7.6 定位小结

7.7 案例 - 淘宝轮播图

CSS3

圆角边框(CSS3)

盒子阴影(CSS3)

JavaScript

1、JavaScript 简介

1.1 什么是 JS？

1.2 Node.js 和 npm

1.2.1 引擎是什么？

1.2.2 Node.js 是什么?

V8引擎

Node.js

1.2.3 npm 是什么？

1.3 JS 的组成

1.4 JS 的使用

1.5 JS 的输出

2、JavaScript 语法

2.1 数据类型

2.2 数据类型的转换

2.3 对象基础

2.3.1 创建对象

前端基础复习HTMLCSSCSS3JavaScriptJSONAJAX

发表评论取消回复