html+css+javascript总结
html+cs+javascript总结
文章目录
(一).Html知识总结
1.html定义
HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
2.HTML的基本标签
(1)html标签
整个网页是从这里开始的，然后到结束。
(2)head标签
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
`<title>` : 定义网页的标题
`<meta>`:定义网页的基本信息（供搜索引擎）
`<style>`:定义CSS样式
`<link>`:链接外部CSS文件或脚本文件
`<script>`:定义脚本语言
`<base>`:定义页面所有链接的基础定位（用得很少）
(3)body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
HTML文档结构分析
`<!DOCTYPE html>`: 声明文档类型。出于历史原因需要，现在可有可无。
`<html></html>`: `<html>`元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
`<head></head>`: `<head>`元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
`<meta charset="utf-8">`: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
`<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">`: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
`<title></title>`: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
`<body></body>`: `<body>`元素。能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
3.段落标签
`<h1>~<h6>` 标题
`<p>` 段落
`<br>` 换行
`<hr>` 水平线
`<div>` 分割（块元素）
`<span>` 区域（行内元素）
4.块元素和行内元素
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
a.独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
b.块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
a.可以与其他行内元素位于同一行；
b.行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果
常见行内元素有：strong、em、span等。
5.列表
(1)、有序列表
<ol type ="列表项符号">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
(2)、无序列表
<ul type ="列表项符号">
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
(3)、定义列表
<dl>
<dt>无序列表项</dt>
<dd>无序列表项</dd>
</dl>
<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。
6.表格
(1)表格基本结构
| 标签 | 语义 | 说明 |
|---|---|---|
| table | 表格 | 表格 |
| tr | 表格行 | 行 |
| td | 表格单元格 | 单元格 |
| thead | table head | 表头 |
| tbody | table body | 表身 |
| tfoot | table foot | 表脚 |
| th | table header | 表头单元格 |
表格基本结构要求:
`<table>`、`<tr>`和`<td>`是HTML表格最基本的3个标签，
其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。
(2)合并行和列
合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。
a、合并行
`<td rowspan="跨度的行数"></td>`
b、合并列
`<td colspan="跨度的列数"></td>`
7.图片
图像标签
在HTML中，图像标签为`<img>`。`<img>`是一个自闭合标签。
`<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">`
| 属性 | 说明 |
|---|---|
| src | 图像的文件地址 |
| alt | 图片显示不出来时的提示文字 |
| title | 鼠标移到图片上的提示文字 |
8.链接
超链接使用a标签，语法如下：
`<a href="链接地址" target="目标窗口的打开方式">`
| target | 属性值 | 说明 |
|---|---|---|
| _self | 默认方式，即在当前窗口打开链接 | |
| _blank | 在一个全新的空白窗口中打开链接 | |
| _top | 在顶层框架中打开链接 | |
| _parent | 在当前框架的上一层里打开链接 |
超链接根据链接对象的不同分为：
（1）外部链接
（2）内部链接：a.内部页面链接；b.锚点链接；
锚点:
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
锚点链接:
点击某一个超链接，它就会跳到当前页面的某一部分。
锚点链接方法:
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
9.表单
当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。
当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。
表单标签共有4个：`<input>`、`<textarea>`、`<select>`和`<option>`。
其中`<select>`和`<option>`是配合使用的。
1.input标签表单
用法:
`<input type="表单类型"/>`
| type类型 | 说明 |
|---|---|
| text | 单行文本框 |
| password | 密码文本框 |
| button | 按钮 |
| reset | 重置按钮 |
| image | 图像形式的提交按钮 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| hidden | 隐藏字段 |
| file | 文件上传 |
`<input>`有placeholder 属性用来表示提示字段
2.textarea标签表单
用法:`<textarea rows="行数" cols="列数">多行文本框内容</textarea>`
3.select和option
select标签表示下拉框表单,下拉列表由<select>标签<option>标签配合使用。
<select multiple="mutiple" size="可见列表项的数目">
<option value="选项值" selected="selected">选项显示的内容</option>
...
<option value="选项值">选项显示的内容</option>
</select>
(二).css知识总结
一.css定义
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
二.css语法
(1)样式规则
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
p{
color:red;
text-align:center;
}
(2)选择器
1.基础选择器
一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
基础选择器有标签，id和class选择器。其中class选择器使用非常普遍。
a. 标签选择器
标签选择器也称为元素选择器，使用HTML标签作为选择器的名称,以标签名作为样式应用的依据
p{
color: blue;
}
a. id选择器
/* 注意：id选择器前有 # 号。 */
#sky{
color: blue;
}
注意: html中元素的id值必须唯一
b. class选择器
/* 注意：class选择器前有 . 号。 */
.center{
text-align: center;
}
注意: 元素的class值可以多个，也可以重复。因此，实际应用中，class 选择器应用非常普遍。
2、复杂选择器
2.1 复合选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
/* 1.标签选择器和类选择器合起来使用----复合选择器 */
h1.aaa{
color:red;
}
2.2组合选择器
也称为集体声明
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
/* 2.组合选择器 */
h1,p,div,span,.ccc{
font-size:30px;
}
2.3 嵌套选择器
在某个选择器内部再设置选择器，通过空格隔开
只有满足层次关系最里层的选择器所对应的标签才会应用样式
注意: 使用 空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行
/* 3.嵌套选择器 */
div p{
color:green;
text-decoration:underline;
}
div>p{
color:green;
text-decoration:underline;
}
div h3.ddd{
color:red;
}
2.4 伪类选择器
根据不同的状态显示不同的样式，一般多用于标签
四种状态：
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬浮到连接上，即移动在连接上
:active 选定的链接，被激活
a:hover{
color:#666666;
font-size: 13px;
text-decoration: none;
}
2.5 伪元素选择器
:first-letter 为第一个字符的样式
:first-line 为第一行添加样式
:before 在元素内容的最前面添加的内容，需要配合content属性使用
:after 在元素内容的最后面添加的内容，需要配合content属性使用
p:first-letter{
color:red;
font-size:30px;
}
p:after{
content:"哈哈";
}
3、选择器优先级
3.1 优先级
行内样式>ID选择器>类选择器>标签选择器
原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式
后加载会覆盖先加载的同名样式
3.2 内外部样式加载顺序
就近原则
原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先
3.3 !important
可以使用!important使某个样式有最高的优先级
三.css生效方式
css生效方式一般有三种方法：外部样式表，内部样式表，内联样式
1 内部样式
也称为内嵌样式，在页面头部通过style标签定义
对当前页面中所有符合样式选择器的标签都起作用
2 行内样式
也称为嵌入样式，使用HTML标签的style属性定义
只对设置style属性的标签起作用
3 外部样式
使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入
- 使用 link标签 链接外部样式文件
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
- @import 指令 导入外部样式文件
<style>
@import "CSS样式文件路径";
@import url(CSS样式文件路径);
</style>
四.常用CSS属性
1.字体属性
设置字体相关的样式
| 属性 | 含义 |
|---|---|
| font-size | 大小、尺寸 |
| font-weight | 粗细 |
| font-family | 字体 |
| font-style | 样式 |
| font | 简写 |
1.1 font-size
取值：
inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited
px像素 pixel
%百分比，相对父标签字体大小的百分比
em倍数，相对于父标签字体大小的倍数
HTML根元素默认字体的大小为16px,也称为基础字体大小
1.2 font-weight
取值：
normal普通（默认）
bold粗体
自定义400 normal 700 bold
1.3 font-family
要求系统中要安装指定的字体
一般建议写3种字体：首选、其次、备用。以逗号隔开
1.4 font-style
取值：
normal普通
italic斜体
1.5 font
简写属性：font:font-style|font-weight|font-size|font-family
必须按此顺序书写
2.文本属性
| 属性 | 含义 | 说明 |
|---|---|---|
| color | 颜色 | |
| line-height | 行高 | 行之间的高度 |
| text-align | 水平对齐方式 | 取值：left、center、right |
| vertical-align | 垂直对齐方式 | 取值：top、middle、bottom可以用于图片和文字的对齐方式 |
| text-indent | 首行缩进 | |
| text-decoration | 文本修饰 | 取值：underline、overline、line-through |
| text-transform | 字母大小写转换 | 取值：lowercase、uppercase、capitalize首字母大写 |
| letter-spacing | 字符间距 | |
| word-spacing | 单词间距 | 只对英文有效 |
| white-space | 空白的处理方式 | 文本超出后是否换行，取值：nowrap |
3.背景属性
| 属性 | 含义 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 背景图片的重复方式 |
| background-position | 背景图片的显示位置 |
| background-attachment | 背景图片是否跟随滚动 |
| background | 简写 |
3.1 background-color
取值：transparent 透明
3.2 background-image
必须使用url()方式指定图片的路径
如果是在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件
3.3 background-repeat
取值：repeat(默认)，repeat-x，repeat-y,no-repeat
3.4 background-position
默认背景图显示在左上角
取值：
关键字：top、bottom、left、right、center
坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向
3.5 background-attachment
取值：scroll(默认)、fixed固定不动
3.6 background
简写属性：background:background-color|background-image|background-repeat|background-position
注意: 以空格隔开，书写顺序没有要求
4.列表属性
| 属性 | 含义 | 说明 |
|---|---|---|
| list-style-type | 设置列表前的标记 | |
| list-style-image | 将图像作为列表前的标记 | |
| list-style-position | 设置标记的位置 | 取值：outside(默认)、inside |
| list-style | 简写 |
4.1 list-style-type
取值：none、disc、circle、square、decimal
4.2 list-style
简写属性：list-style:list-style-type|list-style-image|list-style-position
注意: 书写顺序没有要求
5.表格属性
border-collapse:表格中相邻的边框是否合并（折叠）为单一边框
取值：separated（默认） collapse
五.盒子模型
1.简介
盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：
width 宽度
height 高度
border 边框
padding 内边距
margin 外边距
2.盒子模型
2.1 border
表示盒子的边框
分为四个方向：
- 上top、右right、下bottom、左left
- border-top、border-right、border-bottom、border-left
每个边框包含三种样式： - border-top-color、border-top-width、border-top-style
样式style的取值：
solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线
简写的三种方式：
按方向简写：
border-top、border-right、border-bottom、border-left
书写顺序：
border-顺序：width style color
按样式简写：
border-color、border-width、border-style
书写顺序：
border-样式：top right bottom left
必须按顺时针方向书写，同时可以缩写：
border-width:2px; //四个边框的宽度均为2px
border-width:1px 2px;
border-width:1px 2px 4px;
规则：如果省略，则认为上下一样，左右一样
简写：
如果四个边框样式完全相同，border:width style color;
2.2 padding
表示盒子的内边距，即内容与边框之间的距离
同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
** 注意：**如果上下冲突，则以上为准，如果左右冲突，则以左为准
2.3 margin
表示盒子的外边距，即盒子与盒子之间的距离
同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
六.定位方式
1.简介
通过position属性实现对元素的定位，有四种定位方式
常用取值：
| 取值 | 含义 | 说明 |
|---|---|---|
| static | 默认值 | 按照常规文档流进行显示 |
| relative | 相对定位 | 相对于标签原来的位置进行的定位 |
| absolute | 绝对定位 | 相对于第一个非static定位的父标签的定位 |
| fixed | 固定定位 | 相对于浏览器窗品进行定位 |
设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right
2.相对定位
先设置元素的position属性为relative,然后再设置偏移量
3.绝对定位
先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量
注意：
一般来说都会将父标签设置为非static定位
如果父标签不是非static定位，则会相对于浏览器窗口进行定位
设置元素为绝对定位后，元素会浮到页面上方
4.固定定位
先设置元素的position属性为fixed，然后再设置偏移量
设置元素为固定定位后，元素会浮动在面面上方
七.其他CSS属性
1.浮动和清除
1.1 浮动属性
通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，
如果一行显示不下，则会换行显示
常用取值:
- left左浮动
- right右浮动
- none不浮动，默认值
设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决
1.2 清除属性
通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素
常用取值：
left 左侧不允许出现浮动元素
right 右侧不允许出现浮动元素
both 两侧不允许出现浮动元素
none 允许两侧出现浮动元素，默值
举例:
.container{
clear:left;
}
结论：
对于非浮动元素，两边都可以设置清除（常用）
对于浮动元素，向哪边浮动，就只能设置哪边的清除
八、页面布局
1.简介
页面布局：
flex布局 (弹性布局)
grid布局 (网格布局)
2.flex布局
2.1 容器
容器属性:
- flex-direction 主轴方向
- flex-wrap 主轴一行满了换行
- justify-content 主轴元素对齐方式
- align-items 交叉轴元素对齐方式 单行
- align-content 交叉轴行对齐方式 多行
2.1.1 flex-direction 主轴方向
row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。
2.1.2 flex-wrap 主轴一行满了换行
nowrap (默认值) 不换行压缩宽度
wrap 换行
wrap-reverses 反向换行
2.1.3 justify-content 主轴元素对齐方式
flex-start (默认)靠着main-start对齐
flex-end 靠着main-end对齐
center 靠着主轴居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly 平均对齐，不靠着容器壁，剩余空间平分
2.1.4 align-items 交叉轴元素对齐方式
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。
2.1.5 align-content 交叉轴行对齐方式 多行
flex-start (默认)每一行靠着cross-start对齐
flex-end 每一行靠着cross-end对齐
center 每一行靠着cross线居中对齐
space-between 每一行两端对齐，靠着容器上下壁，剩余空间平分
space-around 每一行分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch 每一行伸缩，占满整个高度
2.2 项目元素 item 的属性
flex-grow：长大
flex-shrinik: 缩小
3.grid布局
3.1简介
Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。
3.2 基本概念
3.2.1 容器和子项目
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
3.2.2 行和列
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
3.2.3 单元格
行和列的交叉区域，称为"单元格"（cell）。
正常情况下，n行和m列会产生n x m个单元格。
3.3 容器属性
3.3.1 display
- display: grid ,指定一个容器采用网格布局。
- display: inline-grid,指定容器为一个行内元素，该元素内部采用网格布局
3.3.2 grid-template-columns、grid-template-rows
- grid-template-columns: 100px 定义每一列的列宽为100px
- grid-template-rows: 20% ; 定义每一行的行高为20%
repeat (),简化重复的值,repeat (重复的次数，重复的值)
3.3.3 grid-row-gap、grid-column-gap、grid-gap
- grid-row-gap属性设置行与行的间隔（行间距）
- grid-column-gap属性设置列与列的间隔（列间距）
- grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
3.3.4 justify-items 、align-items
- justify-items属性设置单元格内容的水平位置（左中右）
- align-items属性设置单元格内容的垂直位置（上中下）。
3.3.5 justify-content 、align-content
- justify-content属性是整个内容区域在容器里面的水平位置（左中右）
- align-content属性是整个内容区域的垂直位置（上中下）。
(三).javaScript
一. 基本语法
1.变量
ECMAScript的变量是松散类型,可以用来保存任何类型（如： String、Number、Boolean以及Object等）的数据。
定义变量时要使用 var 操作符，后跟变量名（即一个标识符），如下所示： var message; 这行代码定义了一个名为 message 的变量，该变量可以用来保存任何值。
2.操作符
- 一元操作符 ++ –
- 布尔操作符 && || ！
- 算术操作符 + - * / %
- 关系操作符 <> != !==
- 条件（问号）操作符 ? :
- 赋值操作符 = += -+ *= /= %=
3.语句
if do-while while for for-in for-of break continue switch
4.对象
4.1 概述
Object类型，称为一个对象，是JavaScript中的引用数据类型。它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。对象也可以看做是属性的无序集合，每个属性都是一个名/值对。对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。除了字符串、数字、true、false、null和undefined之外，JavaScript中的值都是对象。
4.2 创建对象
var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);
标题
或
var person = {
name: "孙悟空",
age: 18
};
console.log(person);
4.3 访问属性
对象.属性名 或 对象[‘属性名’]
4.4 删除属性
delete 对象.属性名
4.5 工厂模式创建对象
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
console.log(this.name);
};
return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
5.数组
5.1 概述
数组也是对象的一种，数组是一种用于表达有顺序关系的值的集合的语言结构，也就是同类数据元素的有序集合。
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据。但是在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关，此处不用纠结，我们大多数时候都是相同类型元素的集合。数组内的各个值被称作元素，每一个元素都可以通过索引（下标）来快速读取，索引是从零开始的整数。
使用typeof检查一个数组对象时，会返回object。
5.2 创建数组
方式一: new
var colors = new Array('red', 'blue', 'green');
方式二: 字面量
var colors = ['red', 'blue', 'green']; // 创建一个包含 3 个字符串的数组
5.3 遍历数组
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
5.4 数组方法
-
push()方法: 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
-
pop()方法：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
-
unshift()方法：该方法向数组开头添加一个或多个元素，并返回新的数组长度
-
shift()方法：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回
-
forEach()方法：该方法可以用来遍历数组
-
slice()方法：该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
-
splice()方法：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
参数：
第一个参数：表示开始位置的索引
第二个参数：表示要删除的元素数量
第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
- concat()方法：该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响
- join()方法：该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用，作为连接符
- reverse()方法：该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组
- sort()方法：该方法可以用来对数组中的元素进行排序，也会影响原数组，默认会按照Unicode编码进行排序
6.函数
6.1 概述
函数是由一连串的子程序（语句的集合）所组成的，可以被外部程序调用，向函数传递参数之后，函数可以返回一定的值。
通常情况下，JavaScript代码是自上而下执行的，不过函数体内部的代码则不是这样。如果只是对函数进行了声明，其中的代码并不会执行，只有在调用函数时才会执行函数体内部的代码。
这里要注意的是JavaScript中的函数也是一个对象，使用typeof检查一个函数对象时，会返回function。
6.2 创建函数
- 使用 函数对象 来创建一个函数
var 函数名 = new Function("执行语句");
- 使用 函数声明 来创建一个函数
function 函数名([形参1,形参2,...,形参N]) {
语句...
}
- 使用 函数表达式 来创建一个函数
var 函数名 = function([形参1,形参2,...,形参N]) {
语句....
}
6.3 函数返回值
使用 return 来设置函数的返回值，return后的值将会作为函数的执行结果返回，可以定义一个变量，来接收该结果。
**注意：**在函数中return后的语句都不会执行，如果return语句后不跟任何值就相当于返回一个undefined，如果函数中不写return，则也会返回undefined，return后可以跟任意类型的值
6.3 嵌套函数
在函数中声明的函数就是嵌套函数，嵌套函数只能在当前函数中可以访问，在当前函数外无法访问。
6.4 匿名函数
没有名字的函数就是匿名函数，它可以让一个变量来接收，也就是用 “函数表达式” 方式创建和接收。
var fun = function () {
alert("我是一个匿名函数");
}
fun();
6.5 立即执行函数
函数定义完，立即被调用，这种函数叫做立即执行函数，立即执行函数往往只会执行一次。
(function () {
alert("我是一个匿名函数");
})();