3-1前端笔记

最新推荐文章于 2022-06-08 19:24:15 发布

weixin_53381980

最新推荐文章于 2022-06-08 19:24:15 发布

阅读量289

点赞数

本文链接：https://blog.csdn.net/weixin_53381980/article/details/115823873

版权

HTML

1.1 介绍

HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)专门制作网页的计算机语言

注意：

1.<html>标签它代表当前页面是一个HTML

2.<head>标签中可以声明HTML页面的相关信息<html><head><title>拉钩有我必须火！</body> </html>

3.<body>标签中它主要是用于显示页面信息

4.标签要有开始，有结束，成双成对

4.开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭<br/>

5.大多数标签它具有属性,属性值要使用引号引起来。

6.HTML它本身是不区分大小写的

2.HTML的使用

2.1文件标签

<html> 标签：代表当前书写的是一个HTML文档
<head 标签：存储的本页面的一些重要的信息，它不会显示
<head> 标签：有一个子标签<title>它是用于定义页面的标题的
<body>标签：书写的内容会显示出来

<body>标签的属性

text 用于设置文字颜色
bgcolor 用于设置页面的背景色
background 用于设置页面的背景图片

2.2 排版标签

2.2.1 HTML注释

2.2.2 换行标签

<br/>标签就是一个换行（回车）功能标签，标签中的 / 可有可无的

2.2.3 段落标签

在<p>标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行.
常用属性 align 它的作用是设置段落中的内容对齐方式可取值有 left right center

2.2.4 水平线标签

<hr>标签会在页面上产生一个水平线

align：可取值有left right center 代表水平线位置
size：代表水平线厚度（粗细）
width：代表水平线宽度
color：水平线的颜色

2.2.5 分区标签

div是一个块标签，用来进行布局的

div与span都是“容器”的作用，具体区别:

div会自动换行，我们也叫这样的标签为块级元素
span标签它不会自动换行，我们也叫它为行内元素
div：整体划分区块
span：局部划分

2.3 字体标签

2.3.1 字体标签

<font>标签可以设置字体，字的大小及颜色，常用属性：

face:用于设置字体，例如宋体隶书楷体
size:用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可）
color:用于设置字的颜色

使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为#cc3300 时，可简化成 #c30 这种方式
RGB颜色表示法：RGB（x,y,z）。x、y、z是0 ～ 255之间的整数。rgb字母大小写无所谓

2.3.2 标题标记

<h1> ----- <h6>h1最大 h6最小，它们代表的是标题，自动换行，字体加粗，标题与标题之间产生一定的距离

注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套

2.3.3 格式化标签

<b>：字体加粗
<i>：字体倾斜
<del>：删除线
<u>：下划线

2.4 列表标记

ol：有序列表
type=‘A’：字母排序
type=‘I’：罗马排序
start=“3” 序列从几开始
ul：无序列表
type=“disc”：默认，实心圆
type=“square”：方块
type=“circle”：空心圆

2.5 图像标签

<img>它可以让我们在网页引入一张图片，常用属性：

src 代表的图片的路径
width 图片的宽度
height 图片的高度
border 用于设置图片的边框
alt 如果图片不可以显示时，默认显示的文本信息
title鼠标悬停图片上，默认显示的文本信息
align 图片附件文字的对齐方式，可取值有
-left：把图像对齐到左边
-right：把图像对齐到右边
-middle：把图像与中央对齐
-top：把图像与顶部对齐
-bottom：把图像与底部对齐（默认）

2.6 超连接标签

<a>标签,可以实现跳转到其它页面操作.超链接内容不仅可以是文本，也可以是图片等信息

href 代表的我们要跳转的路径
target 这个属性规定在何处打开这个链接文档，可取值：
_ blank 在新窗口中打开页面
_ self 默认。在本窗口打开页面

2.7 表格

<table>：定义一个表格

-border：边框，取值是像素为单位
-width 代表的表格的宽度
-align 代表表格的对齐方式；取值left 左对齐表格，right 右对齐表格，center 居中对齐表格
-cellspacing：单元格间距（通常设置0表示单线表格）
<tr>：表格中的行（Table Row）

-align 代表表格的对齐方式；取值
left 左对齐内容（默认值）
right 右对齐内容
center 居中对齐内容（th 元素的默认值）
<td>：表格中的数据单元格（Table DataCell）

colspan 指示列的合并
rowspan 指示行的合并

2.8 表单标签

表单可以让我们将录入信息携带到服务器端。

2.8.1 form属性

action：整个表单提交的目的地
method：表单提交的方式

get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）
post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）

2.8.2 表单中的元素(控件)

<input>元素的type属性 text：默认值，普通的文本输入框，placeholder属性：提示文本，
maxlength属性：最多能输入字符数量
password：密码输入框
checkbox：多选框/复选框 checked：被选中
radio：单选按钮
file：上传文件
reset：重置按钮
submit：提交按钮
button：普通按钮
<select>：下拉列表/下拉框，<option>：列表中的项，selected：被选中
<textarea>：文本域（多行文本框）
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height和 width 属性。
<button>：按钮
在form表单中，作用和submit一样
不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）

2.9 框架标签

通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。
注意，框架标签和body标签不共存。“有你没我，有我没你”

2.10 其它标签与特殊字符

2.10.1`<meta>`标签

<meta>标签必须写在<head>标签之间.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

当前页面的字符编码 gbk：中文简体
这里的名字是 viewport （显示窗口）
数据是文本内容 content=“width=device-width, initial-scale=1.0”
也就是显示窗口宽度是客户端的屏幕宽度（就是满屏！），显示的文字和图形的初始比例是1.0
每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版
本都以当前版本所支持的最高级标准模式渲染通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面

2.10.2 `<link>`标签

使用link标签来导入css，link标签也必须写在<head>标签中。

2.10.3 特殊字符

在这里插入图片描述

3.2 新增语义化标签

section标签：表示页面中的内容区域，部分，页面的主体部分
article标签：文章
aside标签：文章内容之外的，标题
header标签：头部，页眉，页面的顶部
hgroup标签：内容与标题的组合
nav标签：导航
figure标签：图文并茂
foot：页脚，页面的底部

3.3 媒体标签

src：媒体资源文件的位置
controls：控制面板
autoplay：自动播放（谷歌失效，360浏览器可以）
loop：循环播放

3.4 新增表单控件

<INPUT>，修改type属性：color：调色板,date：日历,month：月历,week：周历,
number：数值域:min：最小值（默认值是1,max：最大值（默认值无上限）,step：递增量
range：滑块search：搜索框（带×号，可一键删除框中内容）
进度条<progress/>
高亮<mark>
联想输入框<datalist>(模糊查询) 选项 <option>

CSS

CSS是指层叠样式表 cascading style sheets
通过CSS可以让我们定义HTML元素如何显示。
CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。

2.CSS与HTML结合方式

2.1 第一种方式内联/行内样式

就是在我们的HTML标签上通过style属性来引用CSS代码,优点:简单方便；缺点:只能对一个标签进行修饰。

2.2 第二种方式内部样式表

通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在head和body之间，也就是“脖子”的位置
优点:可以通过多个标签进行统一的样式设置缺点: 它只能在本页面上进行修饰.语法：选择器 {属性:值;属性:值}

2.3 第三种方式外部样式表

需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css在项目根目录下，创建css目录，
在css目录中创建css文件 css01.css在<head>中使用<link>标签引用外部的css文件

关于外部导入css使用<link>与@import的区别?

加载顺序不同

@import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有
修饰的页面，然后才看到修饰后的页面。
如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；

@import方式导入css样式，它是不支持javascript的动态修改的。而link支持。
三种样式表的优先级：满足就近原则 : 内联 > 内部 > 外部

3.CSS的使用

3.1.1 元素(标签)选择器

它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称.

3.1.2 类选择器

类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

3.1.3 id选择器

它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值。id选择器，比类选择器更具有唯一性

3.1.4 选择器组

逗号表示，谁和谁。例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写

我,你,他{ 手机 }

3.1.5 派生选择器

子代：父子关系（隔代不管）
后代：父子孙，曾孙，从孙…

3.1.6 CSS伪类

CSS伪类可对css的选择器添加一些特殊效果
伪类属性列表：
:active 向被激活的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

3.2 CSS基本属性

3.2.1 文本属性

指定字体：font-family : value;
字体大小：font-size : value;px：像素，em：倍数
字体加粗：font-weight : normal/bold;
文本颜色：color : value;
文本排列：text-align : left/right/center;
文字修饰：text-decoration : none/underline;
行高：line-height : value;
首行文本缩进：text-indent : value （2em）;

3.2.2 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-repeat 设置背景图像的墙纸效果，是否及如何重复
repeat：在垂直方向和水平方向重复，为重复值
repeat-x：仅在水平方向重复
repeat-y：仅在垂直方向重复
no-repeat：仅显示一次
background-position 设置背景图像的起始位置
1：控制水平方向 x轴：正值，向右移动；负值，向左移动
2：控制垂直方向 y轴：正值，向下移动；负值，向上移动
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
默认值是 scroll：默认情况下，背景会随文档滚动
可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

3.2.3 列表属性

CSS列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母
使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
none：无标记。（去除标记）
disc：默认。标记是实心圆。
circle：标记是空心圆。
square：标记是实心方块。
decimal：标记是数字。
decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

3.2.4 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。
border-style取值：
none:默认无边框。
dotted：定义一个点线边框。
dashed：定义一个虚线边框。
solid：定义实线边框。
double：定义两个边框，两个边框的宽度和border-width的值相同。
groove：定义3D沟槽边框。效果取决于边框的颜色值。
ridge：定义3D脊边框，效果取决于边框的颜色值。
insert：定义一个3D的嵌入边框。效果取决于边框的颜色值。
outset：定义一个3D突出边框。效果取决于边框的颜色值。

3.2.5 轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓和边框的区别：

边框 (border) 可以是围绕元素内容和内边距的一条或多条线；
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。

3.2.6 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
margin(外边距) - 盒子与盒子之间的距离
border(边框) - 盒子的保护壳
padding(内边距/填充) - 内填充，盒子边与内容之间的距离
content(内容) - 盒子的内容，显示的文本或图像

3.3 CSS定位

3.3.1 默认定位

块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高
行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高
行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高

3.3.2 浮动定位

让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。
float取值：
none ：不浮动
left：贴着左边浮动
right：贴着右边浮动

3.3.3 相对定位

和原来的位置进行比较，进行移动定位（偏移）

3.3.4 绝对定位

本元素与已定位的祖先元素的距离

如果父级元素定位了，就以父级为参照物；
如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
如果爷爷没定位，继续向上找，都没定位的话，body是最终选择

3.3.5 固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

3.3.6 z-index

如果有重叠元素，使用z轴属性，定义上下层次。
z轴属性，要配合相对或绝对定位来使用。
z值没有额定数值（整型就可以，具体用数字几，悉听尊便）

4. CSS3

4.1 圆角

border-radius：左上右上右下左下;
border-radius：四个角;
border-radius：50%; 圆形

4.2 盒子阴影

box-shadow：1 2 3 4 5;
1：水平偏移
2：垂直偏移
3：模糊半径
4：扩张半径
5：颜色

4.3 渐变

4.3.1 线性渐变

background:linear-gradient([方向/角度]，颜色列表)；

4.3.2 径向渐变

以圆心向外发散

4.4 背景

4.4.1 背景位置

background-origin：指定了背景图像的位置区域

border-box : 背景贴边框的边
padding-box : 背景贴内边框的边
content-box : 背景贴内容的边

4.4.2 背景裁切

background-clip:

border-box 边框开切
padding-box 内边距开切
content-box 内容开切

4.4.3 背景大小

background-size:

cover 缩放成完全覆盖背景区域最小大小
contain 缩放成完全适应背景区域最大大小

4.5 过渡动画

4.5.1 过渡

从一个状态到另一个状态，中间的“缓慢”过程；缺点是，控制不了中间某个时间点。
transition｛1 2 3 4｝
1：过渡或动画模拟的css属性
2：完成过渡所使用的时间（2s内完成）
3：过渡函数。。。
4：过渡开始出现的延迟时间

4.5.2 动画

从一个状态到另一个状态，过程中每个时间点都可以控制。
关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }
动画属性：animation{ 1 , 2 , 3 , 4 , 5 }
1：动画帧
2：执行时间
3：过渡函数
4：动画执行的延迟（可省略）
5：动画执行的次数

JavaScript

1.1 js的特点

可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序（后面会学习不用浏览器也能运行）
解释执行：事先不编译，逐行执行
基于对象：内置大量现成对象
适宜：客户端数据计算，客户端表单合法性验证，浏览器事件的触发，网页特殊显示效果制作

1.2 js的组成

ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改
变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀
疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。

1.弹出新的浏览器窗口
2.移动、关闭浏览器窗口以及调整窗口大小
3.提供 Web 浏览器详细信息的定位对象
4.提供用户屏幕分辨率详细信息的屏幕对象
5.对 cookie 的支持
6.IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而
7.实现ajax局部刷新技术

2. HTML与javaScript结合方式

2.1.行内脚本

点击按钮（触发）
弹框（具体的操作）

2.2.内部脚本

使用<script></script>
标准是写在head和body之间（脖子位置），但其实只要写在html文件内部就可以，无论什么位置
<html>外，<p></p>内部，都可以。

2.3.外部脚本

在项目根目录下创建一个目录js
在js目录中创建一个文件，后缀名是.js
在html页面中，使用

3. JavaScript的使用

3.1 变量

因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var
声明变量： var x ; var x,y;
数值类型：number
不区分整型数值和浮点型数值
所有数字都采用 64 位浮点格式存储，类似于double 格式
字符串：string
首尾由单引号或双引号括起
布尔类型：
仅有两个值：true和false也代表1和0
实际运算中true=1,false=0

3.1.1 自动类型转换

数字 + 字符串：数字转换为字符串                     10+’a’ -> 10a
数字 + 布尔值：true转换为1，false转换为0            true+5->6 
字符串 + 布尔值：布尔值转换为字符串true或false      true+’a’->truea 
布尔值 + 布尔值：布尔值转换为数值1或0               true+true->2

3.1.2 数据类型转换函数

parseInt：强制转换成整数
如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字）
例如：parseInt(“6.32”)=6
parseFloat：强制转换成浮点数，如果不能转换，则返回 NaN例如：parseFloat(“6.32”)=6.32
typeof：查询数值当前类型，返回 string / number / boolean / object 。例如：typeof(“test”+3)==“string”

3.1.3 null 与 undefined

null 在程序中代表“无值”或者“无对象”，可以通过给一个变量赋值 null 来清除变量的内容
undefined，声明了变量但从未赋值或者对象属性不存在

3.1.4 算术运算

加(＋)、减(－)、乘( * ) 、除( / ) 、余数( % )
可以表示减号，也可以表示负号，如：x = -y
+可以表示加法，也可以用于字符串的连接
递增( ++ ) 、递减( – )，i++ 相当于 i=i+1，i-- 相当于 i=i-1

3.1.5 关系运算

严格相等：===，类型相同数值相同
非严格相等：!==

3.1.6 逻辑运算

逻辑非（!）、逻辑与（&&）、逻辑或（||）
逻辑运算的操作数均为 boolean 表达式
我要吃两碗拉面或者10个包子才能吃饱！问题是，我只吃两碗面，饱了！我只吃10个包子，饱了
我要吃两碗拉面并且10个包子才能吃饱！问题是，我只吃两碗面，没饱！我只吃10个包子，没饱，

在这里插入图片描述

3.1.7 控制语句

if（关系表达式） { 
    // 语句块 1 
}else { 
    // 语句块 2 
}
if (表达式1) { 
    // 语句1; 
}else if (表达式2){ 
    // 语句2; 
}else if (表达式3){ 
    // 语句3; 
} else{ // 
    语句4;
}
switch (表达式) { 
    case 值1:
         // 语句1; 
       break; 
     case 值2:
          // 语句2; 
          break; 
      default: 
          // 语句4; 
      }
 for (var i=1 ; i<=5 ; i++){ 
        alert(i); 
          }
 while (条件){ 
        // 语句1; 
          ... 
          }

3.2 常用字符串API

length:获取字符串的长度（字符串中字符的个数）属性，没有小括号
toUpperCase/toLowerCase :转大小写
charAt(下标) ：返回某个下标上的字符
indexof(字符)：查找字符串中字符出现的首次下标
lastIndexof(字符)：查找字符串中字符最后一次出现的下标
substring(开始,结束)：截取字符串中一部分（结束是不包含的）
replace(旧的,新的)：将字符串中的旧字符替换成新字符
split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

3.3 数组

3.3.1 创建数组

var arr1 = new Array();

3.3.2 初始化数组的三种方式

// 第一种 
var arr1 = new Array(); 
arr1[0] = 110; 
arr1[1] = 119; 
arr1[2] = 120; 
// 第二种 
var arr1 = new Array(10,"a",true); 
// 第三种 
var arr1 = [10,"a",true]; 

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

3.3.3 数组的常用方法

tostring()：将数组转换成字符串
join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。
concat(新元素)：将原来的数组连接新元素，原数组不变。
slice(开始，结束)：在数组中提取一部分，形成新的数组。
reverse()：数组的反转（倒序）
sort()：数组排序
arr.sort(func) 数值排序

3.4 Math数学对象

Math 对象用于执行数学任务
没有构造函数 Math()
无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法

3.5 Number对象

Number.fixed(2); 自带四舍五入技能
var n = new Number( 12.345 ); var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入 console.log( n1 ); var x = new Number( 12.3 ); var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐 console.log( n2 );

3.6 正则表达式

var reg1 = /^\d{3,6}$/; // 匹配纯数字3-6个
var reg2 = new RegExp(“^\d{3,6}$");

3.7 日期对象

var time = new Date(); 
console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间) 
var year = time.getFullYear(); // 年份 
var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1 
var day = time.getDate(); // 几号 
var hour = time.getHours(); // 几点 
var mm = time.getMinutes(); // 分钟 
var s = time.getSeconds(); //秒 
var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒 
var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒"; 
console.log( timestr );

3.8 函数

使用关键字 function 定义函数

function 函数名( 形参列表 ){ 
// 函数体 return 返回值; 
}

函数声明后不会立即执行，会在我们需要的时候调用到。
注意：
形参：一定不要带数据类型
分号是用来分隔可执行JavaScript语句。由于函数声明不是一个可执行语句，所以不以分号结束。

3.8.1 无返回值

function qiuhe(a, b) { 
    var he = a + b; 
    console.log("两数之和：" + he); 
}
qiuhe(3,4);

3.8.2 有返回值

function qiuhe(a, b) { 
    var he = a + b; 
    return "两数之和：" + he; 
}
var s = qiuhe(3,4); 
console.log( s );

3.8.3 参数对象

在函数内部，调用参数列表的属性

function func(a,b,c){ 
    console.log( arguments.length ); // 获得参数的个数 
    console.log( arguments[1] ); // 获得下标为1的参数 
}

3.8.4 构造函数

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

注：上述函数以分号结尾，因为它是一个执行语句。

3.8.5 匿名函数

没有名称的函数

var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收 
    return a * 10 + b; 
};
console.log( fn(3, 4) );

3.8.6 全局函数

isNaN：检查其参数是否是非数字值

console.log( isNaN( 123 ) ); // 数字，false 
console.log( isNaN( "hello" ) ); // 非数字，true 
console.log( isNaN( 4-1 ) ); // 数字，false 
console.log( isNaN( 123 ) ); // 数字，false 
console.log( isNaN( -10 ) ); // 数字，false 
console.log( isNaN( "123" ) ); // 数字，false 
console.log( isNaN( "1a23" ) ); // 非数字，true

eval：用来转换字符串中的运算

var str = "1+3"; 
console.log( str ); // 1+3 , +会认定为一种字符符号而已，没有加法的作用 
console.log( eval( str ) ); // 让字符串中的运算符号生效

encodeURI 与 decodeURI

var name = "拉勾网"; 
console.log( "转码前：" + name ); 
name = encodeURI(name); 
console.log( "转码后：" + name ); 
name = decodeURI(name); 
console.log( "解码后：" + name );

3.8.7 闭包

1、闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。
2、闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理；
简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。
保证了数据的安全唯一性

a = 10; // 全局变量，声明的时候可以不使用var 
    function test1(){ 
    b = 20; // 不适用var声明的变量，就是全局变量 
    var c = 30; // 用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能 在其声明的函数内部 
    console.log(c); 
    }
    
    function test2(){ 
        console.log(c); //c is not defined (c变量没有定义) 
    }
    test1(); 
    test2();

需求：统计方法执行了多少次

var count = 0; // 总次数 
function test1(){ 
    count++; // 自增+1 
    }
    test1(); 
    test1(); 
    test1(); 
    console.log( count );

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
直观的说就是形成一个不销毁的栈环境。
闭包的优点：方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避
免了传参的问题
闭包的缺点：因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭
包就会造成内存泄露，内存消耗很大

3.9 弹框输出

普通弹框 alert(“hello，拉勾”);
控制台日志输出 console.log(“谷歌浏览器按F12进入控制台”);
页面输出 document.write(“<h2>我爱你中国</h2>”); 将<h2>元素输出到<body>中
确认框 confirm(“确定删除吗？”);

var b = confirm("确定删除吗？"); 
if(b){
    document.write( "<h1>删除成功！</h1>" ); 
}else{
    document.write( "<h1>你取消了操作</h1>" ); 
}

输入框 prompt(“请输入姓名：”);

4.DOM 操作

在一个html页面中，会使用很多标签来规划制作页面。
文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），
所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了
-在节点树中，顶端节点就是根节点（root）
-每个节点都有父节点（除了根节点）
-任何一个节点都可以拥有任意数量的子节点
-同胞是拥有相同父节点的节点

<html>
    <head>
        <meta charset="utf-8"> 
        <title>DOM 教程</title> 
    </head> 
    <body>
        <h1>第一节：HTML DOM</h1> 
        <p>Hello world!</p> 
    </body>
</html>

从上面的 HTML 中：

<html>节点没有父节点；它是根节点
<head>和 <body>的父节点是 <html> 节点
文本节点 “Hello world!” 的父节点是<p>节点
并且：
<html>节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有两个子节点：<meta> 与<title> 节点
<title> 节点也拥有一个子节点：文本节点 “DOM 教程”<h1> 和 <p>节点是同胞节点，同时也是
<body> 的子节点
并且：
<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点
js为我们提供了很多种方法来实现在页面找查找某个元素节点

4.1 DOM访问

getElementById：通过id属性获得元素节点对象
案例：当帐号为空时，阻止表单提交

<body>
    <form action="xxx" onsubmit="return login()"> 
      <p>帐号：<input id="username"/></p> 
      <p>电话：<input id="phone"/></p> 
      <p><button>登录</button></p> 
    </form> 
    <script> 
      function login() { 
        var name = document.getElementById("username").value ; 
        if(name == ""){ 
          alert("帐号不能为空！"); 
          return false; // 阻止表单的提交 
        }
        return true; // 放行，让表单提交 
    } 
    </script> 
</body>

getElementsByName：通过name属性获得元素节点对象集
案例：购物车全选效果

<body>

<h2>我的购物车</h2> 

<table border="1" cellspacing="0"> 

<tr>

<td><input type="checkbox" onchange="quan(this)" /> 全选</td> 

<td>名称</td> 

<td>单价</td> 

</tr> 

<tr>

<td><input type="checkbox" name="one" />1</td> 

<td>功能性饮料-尖叫</td> 

<td>4.0</td> 

</tr> 

<tr>

<td><input type="checkbox" name="one" />2</td> 

<td>火腿肠</td> 

<td>2.0</td> 

</tr> 

<tr>

<td><input type="checkbox" name="one" />3</td> 

<td>包子</td> 

<td>1.5</td> 

</tr> 

</table> 

<p>

<button>提交订单</button> 

</p> 

<script> 

function quan(all) { 

var arr = document.getElementsByName("one"); 

for (var i = 0; i < arr.length; i++) { 

arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框 

} 

} 

</script> 

</body>

getElementsByTagName：通过标签名称获得元素节点对象集
案例：表格隔行变色

<body>

<table border="1" cellspacing="0"> 

<tr>

<td><input type="checkbox" onchange="quan(this)" /> 全选</td> 

<td>名称</td> 

<td>单价</td> 

</tr> 

<tr>

<td><input type="checkbox" name="one" />1</td> 

<td>功能性饮料-尖叫</td> 

<td>4.0</td>**4.2 DOM****修改**

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容

改变 CSS 样式

改变 HTML 属性

创建新的 HTML 元素

删除已有的 HTML 元素

改变事件（处理程序）

\1. 改变一个 <h2> 元素的 HTML 内容 :

\2. 改变一个<h2>的 HTML 样式

</tr> 

<tr>

<td><input type="checkbox" name="one" />2</td> 

<td>火腿肠</td> 

<td>2.0</td> 

</tr> 

<tr>

<td><input type="checkbox" name="one" />3</td> 

<td>包子</td> 

<td>1.5</td> 

</table> 

<script> 

var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象 

集合 

for (var i = 0; i < rows.length; i++) { 

if(i % 2 == 1){ // 奇数 

rows[i].style.backgroundColor = "pink"; 

} 

} 

</script> 

</body>

4.2 DOM修改

修改 HTML DOM 意味着许多不同的方面：
改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

改变一个<h2>元素的 HTML 内容 :

<body>

<button onclick="test()">点我试试</button> 

<script> 

function test(){ 

document.getElementById("hello").innerHTML = "走哇，喝点去~！"; 

} 

</script> 

<h2 id="hello">你好！</h2> 

</body

改变一个<h2>的 HTML 样式

<body>

<button onclick="chou()">你瞅啥</button> 

<script> 

function chou(){ 

document.getElementById("hello").style.color = "red"; 

document.getElementById("hello").style.fontFamily = "华文彩云"; 

} 

</script> 

<h2 id="hello">你好！</h2> 

</body

4.2.1 添加节点

点击按钮，在页面中创建一张图片

<body>

<button onclick="add()">添加</button> 

<div></div> 

<script> 

function add(){ 

var img = document.createElement("img"); // <img> 

img.setAttribute("src","../lagou-html/img/cat.gif"); // <img 

src="../lagou-html/img/cat.gif"> 

img.setAttribute("title","小猫咪"); // <img src="../lagou- 

html/img/cat.gif" title="小猫咪"> 

img.setAttribute("id","cat"); // <img src="../lagou- 

html/img/cat.gif" title="小猫咪" id="cat"> 

var divs = document.getElementsByTagName("div"); 

divs[0].appendChild(img); 

} 

</script> 

</body>

4.2.2 删除节点

点击按钮，把上面刚创建的图片从页面上删除

<body>
    <button onclick="add()">添加</button> 
    <button onclick="del()">删除</button> 
    <div> 
    </div> 
    <script> 
    function add(){ 
        。。。略。。。 
    }function del(){ 
        var img = document.getElementById("cat"); 
        img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点
} 
    </script>
</body

4.2.3 替换节点

点击按钮，把上面刚创建的图片替换成另一张

<body>
    <button onclick="add()">添加</button> 
    <button onclick="del()">删除</button> 
    <button onclick="rep()">替换</button> 
    <div> 
    </div> 
    <script> 
        function add(){ 
          。。。略。。。 
        }
        function del(){ 
          。。。略。。。 
        }function rep(){ 
           var imgold = document.getElementById("cat"); 
           // 通过修改元素的属性，做的替换 
           // img.setAttribute("src","../lagou-html/img/2.jpg"); 
           
           var imgnew = document.createElement("img"); 
           imgnew.setAttribute("src","../lagou-html/img/1.jpg"); 
           imgold.parentNode.replaceChild( imgnew, imgold ); 
        } 
     </script> 
 </body>

4.3 事件

js捕获某个动作而做出的反馈
HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

4.3.1 窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。

onload 当文档被载入时执行脚本

<body onload="test()"> 
  <script> 
    function test() { 
      document.write("哈哈哈哈"); 
    } 
  </script> 
</body>

4.3.2 表单元素事件 (Form Element Events)
仅在表单元素中有效。

onblur 当元素失去焦点时执行脚本
onfocus 当元素获得焦点时执行脚本

<body>
    <script> 
      function a() { 
        console.log("获得焦点==被激活"); 
        }
        function b() { 
          console.log("失去焦点"); 
        } 
        </script> 
        <form action=""> 
          <p>帐号：<input onfocus="a()" onblur="b()" /></p> 
          <p>密码：<input /></p> 
    </form> 
</body>

4.3.3 鼠标事件 (Mouse Events)

onclick 当鼠标被单击时执行脚本
ondblclick 当鼠标被双击时执行脚本
onmouseout 当鼠标指针移出某元素时执行脚本
onmouseover 当鼠标指针悬停于某元素之上时执行脚本

<style> 
    img{width: 30%; 
    border: 5px solid white;

    } 
</style> 
<body>

    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" 
onclick="dan()"> 
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" 
ondblclick="shuang()"> 
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" > 
    <script> 
        function dan(){ 
            alert("点了一下"); }
        function shuang(){ 
            alert("连续快读点两下"); 
        }
        function shang(img){ 
            img.style.border = "5px solid red"; 
        }
        function xia(img){ 
            img.style.border = "5px solid white"; } 
        </script> 
</body>

4.3.4 键盘事件

onkeydown 按下去
onkeyup 弹上来

<script> 
    window.onkeydown = function(){ 
        // event：事件源（按键） 
        // console.log( "按键编码："+event.keyCode ); 
        if(event.keyCode == "13"){ // 回车键 
            alert("登录成功！"); 
        } 
    }
    window.onkeyup = function(){ 
        console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则 触发 
    } 
</script>

4.3.5 事件冒泡

创建两个div，一个大一些，一个小一些

<style> 
    #father { 
      width: 200px;
      height: 200px; 
      background: black; 
      padding: 10px; 
      }
    #child { 
    width: 100px; 
    height: 100px; 
    background: greenyellow; 
    } 
</style> 

<body>
    <div id="father"> 
      <div id="child"></div> 
      </div> 
      <script> 
      // 代码不重要，重要是知道这个事件发生，是正常现象 
      document.getElementById("father").addEventListener("click", function() { alert("父级元素的事件被触发：" + this.id); 
      }); 
      document.getElementById("child").addEventListener("click", function(e) { e.stopPropagation() //取消事件的冒泡机制 alert("子级元素的事件被触发：" + this.id); }); 
    </script> 
</body>

先子，后父。事件的触发顺序自内向外，这就是事件冒泡；

4.3.6 事件捕获

还是刚才创建两个div，一个大一些，一个小一些

<style>
   #father { 
     width: 200px; 
     height: 200px; 
     background: black; 
     padding: 10px; 
   }
   #child { 
     width: 100px; 
     height: 100px; 
     background: greenyellow; 
   } 
</style> 
<body> 
  <div id="father"> 
    <div id="child"></div> 
    </div>
    <script> 
    document.getElementById("father").addEventListener("click",function(){ 
    alert("父级：" + this.id); 
    },true); 
    document.getElementById("child").addEventListener("click",function(){ 
    alert("子级：" + this.id); 
    },true); 
    </script> 
</body>

先父,后子。事件触发顺序变更为自外向内，这就是事件捕获；

4.4 面向对象OOP

使用Object创建通用对象

var user = new Object(); 
user.name = "吕布"; 
user.age = 21; 
user.say = function(){ 
    console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！"); 
}

user.say();

var dog = new Object(); 
dog.nickname = "屎尿多"; 
dog.wang = function(){ 
console.log("我饿了，我要拆家了！"); 
}
dog.wang();

使用构造函数

function userinfo(name , age){ 
    this.name = name; this.age = age; 
    this.say = function(){ 
        console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！"); 
    } 
}
var user = new userinfo("詹姆斯",35); 
user.say();

使用直接量

var user = {
    username : "孙悟空", 
    age : 527, 
    say : function(){ 
         console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！"); 
         } 
     };
user.say();

4.5 JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
易于人阅读和编写，同时也易于机器解析和生成
{
属性1：值1，
属性2：值2，
。。。。
}

<script> 
    var json1 = { username: "吕布", age: 31 }; 
    console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁"); 
    
    // json数组 
    var josnarr = [{ name: "貂蝉", age: 18 }, { name: "小乔", age: 17 }]; 
    console.log("貂蝉" + josnarr[0].age + "岁了"); 
    console.log("小乔" + josnarr[1].age + "岁了"); 
    
    // 复杂的json对象 
    var long = { 
        name: "赵云", 
        sex: "男", 
        hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"] 
        };
        console.log(long.name + "的主攻武器：" + long.hobby[1]); 
   </script>

5. BOM操作

5.1 window对象

在这里插入图片描述

<button onclick="kai()">极速入职</button> 
<script> 
    function kai(){ 
        window.open("http://lagou.com" , "拉勾网" , 
"width=500,height=300,left=400"); 
         // window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才 生效
 }
 </script>

5.1.1 screen屏幕对象

我想知道我的电脑屏幕多大？实际上，得到的就是分辨率

<body> 
  <button onclick="kai()">求大小</button> 
</body> 
<script> 
  function kai() { 
    alert(window.screen.width + "|" + window.screen.height); 
  } 
</script>

5.1.2 location定位

包含有关当前 URL 的信息，通常用来做页面跳转

<button onclick="test()">测试</button> 
<script> 
    function test(){ 
        console.log( "当前页面的URL路径地址："+ location.href ); 
        location.reload(); // 重新加载当前页面（刷新） 
        location.href = "http://lagou.com"; // 
        跳转页面 
        } 
</script>

5.1.3 history浏览器历史

history对象会记录浏览器的痕迹
a.html

<a href="b.html">去b页面</a>

b.html

<button onclick="hui()">返回</button> 
<script> 
    function hui(){ 
        //history.go(-1); //上一级页面 
        history.back(); // 与go(-1)是等价的 
        } 
</script>

5.1.4 navigator 导航（了解）

window.navigator 对象包含有关访问者浏览器的信息;

<script> 
    var str = ""; str += "<p>浏览器的代号："+ navigator.appCodeName +"</p>"; 
    str += "<p>浏览器的名称："+ navigator.appName+"</p>"; 
    str += "<p>浏览器的版本："+ navigator.appVersion+"</p>"; 
    str += "<p>硬件平台："+ navigator.platform+"</p>";
    str += "<p>用户代理："+ navigator.userAgent +"</p>"; 
    str += "<p>启用Cookies："+navigator.cookieEnabled+"</p>";
    document.write(str); 
</script>

5.1.5 存储对象

用起来和我们在java中map很相似，都是键值对的方式存数据

5.1.5.1 本地存储 localStorage

保存数据

localStorage.setItem("name","curry");

提取数据

localStorage.getItem("name");

删除数据

localStorage.removeItem("name");

多样化操作

// 三种方式保存数据 
localStorage["a"] = 1; 
localStorage.b = 2; 
localStorage.setItem("c",3); 
// 查看数据类型 
console.log( typeof localStorage["a"] ) 
console.log( typeof localStorage["b"] ) 
console.log( typeof localStorage["c"] ) 

// 第一种方式读取 
var a = localStorage.a; 
console.log(a); 

// 第二种方式读取 
var b = localStorage["b"]; 
console.log(b); 

// 第三种方式读取 
var c = localStorage.getItem("c"); 
console.log(c);

5.1.5.2 会话存储 sessionStorage

会话，就是保持浏览器别关闭。关闭浏览就等于结束了一次会话。开启浏览器就意味着创建了一次会话。
保存数据

sessionStorage.setItem("name", "klay");

提取数据

var lastname = sessionStorage.getItem("name");

删除指定键的数据

sessionStorage.removeItem("name");

删除所有数据

sessionStorage.clear();

案例：记录点击了几下按钮

<button onclick="dian()">点我</button> 
<h3 id="result"></h3> 
<script> 
  function dian(){ 
       if( sessionStorage.getItem("clickCount") ){
          sessionStorage.setItem("clickCount", 
Number(sessionStorage.getItem("clickCount")) + 1); 
       }else{
          sessionStorage.setItem("clickCount", 1); 
      }
      document.getElementById("result").innerHTML = "已经点击了"+ sessionStorage.getItem("clickCount") +"次！" 
      } 
</script>

5.2 计时操作

5.2.1 周期性定时器 setInterval

setInterval(1,2)：周期性触发代码exp （常用）
1：执行语句
2：时间周期，单位为毫秒

案例：闪烁的字体（1秒1变色）

<body>
    <h1 id="title">拉勾网：极速入职</h1> 
    <script>
       var colors = ["red","blue","yellow","pink","orange","black"]; 
       var i = 0; 
       function bian(){ 
         document.getElementById("title").style.color = colors[i++]; 
         if(i == colors.length){ 
             i = 0; // 颜色重新开始 
           } 
         }setInterval(bian,100); // 每隔0.1秒，执行一次bian函数 
     </script> 
 </body>

案例：在闪烁字体的基础上扩展，闪烁的电子时钟

<body>
  <h1 id="title"></h1> 
  <script> 
    var colors = ["red","blue","yellow","pink","orange","black"]; 
    var i = 0; 
    function bian(){ 
      document.getElementById("title").style.color = colors[i++]; 
      if(i == colors.length){ 
      i = 0; // 颜色重新开始 
      } 
    }
    function time(){ 
        var d = new Date(); 
        var str = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"号 "+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒"; 
        document.getElementById("title").innerHTML = str; 
        }
        setInterval(bian,100); // 每隔1秒，执行一次变色函数bian 
        setInterval(time,1000); // 每隔1秒，执行一次时间函数time 
    </script> 
  </body>

5.2.2 停止定时器 clearInterval

案例：模拟年会抽奖

<body>
    <img id="tu" src="../lagou-html/img/1.jpg" width="50%" /> 
    <br /> 
    <button onclick="begin()">开始</button> 
    <button onclick="stop()">停止</button> 
    <script> 
      var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; 
      function begin() { 
        timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量
       }
       function stop() { 
         clearInterval(timer); // 停止定时器 
         }
         function bian() { 
         var i = Math.floor(Math.random() * arr.length); // 0-4 
         document.getElementById("tu").src = "../lagou-html/img/" + arr[i]; 
         } 
    </script> 
</body>

5.2.3 一次性定时器 setTimeout

相当于延迟的效果，只执行一次

<script> 
    function bian(){ 
        document.body.style.backgroundColor = "red"; 
    }//3秒之后调用 
    setTimeout(bian,3000); 
</script>

weixin_53381980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

3-1前端笔记

HTML

1.1 介绍

注意：

2.HTML的使用

2.1文件标签

2.2 排版标签

2.2.1 HTML注释

2.2.2 换行标签

2.2.3 段落标签

2.2.4 水平线标签

2.2.5 分区标签

2.3 字体标签

2.3.1 字体标签

2.3.2 标题标记

2.3.3 格式化标签

2.4 列表标记

2.5 图像标签

2.6 超连接标签

2.7 表格

2.8 表单标签

2.8.1 form属性

2.8.2 表单中的元素(控件)

2.9 框架标签

2.10 其它标签与特殊字符

2.10.1<meta>标签

2.10.2 <link>标签

2.10.3 特殊字符

3.2 新增语义化标签

3.3 媒体标签

3.4 新增表单控件

CSS

2.CSS与HTML结合方式

2.1 第一种方式 内联/行内样式

2.2 第二种方式 内部样式表

2.3 第三种方式 外部样式表

3.CSS的使用

3.1.1 元素(标签)选择器

3.1.2 类选择器

3.1.3 id选择器

3.1.4 选择器组

3.1.5 派生选择器

3.1.6 CSS伪类

3.2 CSS基本属性

3.2.1 文本属性

3.2.2 背景属性

3.2.3 列表属性

3.2.4 边框属性

3.2.5 轮廓属性

3.2.6 盒子模型

3.3 CSS定位

3.3.1 默认定位

3.3.2 浮动定位

3.3.3 相对定位

3.3.4 绝对定位

3.3.5 固定定位

3.3.6 z-index

4. CSS3

4.1 圆角

4.2 盒子阴影

4.3 渐变

4.3.1 线性渐变

4.3.2 径向渐变

4.4 背景

4.4.1 背景位置

4.4.2 背景裁切

4.4.3 背景大小

4.5 过渡动画

4.5.1 过渡

4.5.2 动画

JavaScript

1.1 js的特点

1.2 js的组成

2. HTML与javaScript结合方式

2.1.行内脚本

2.2.内部脚本

2.3.外部脚本

3. JavaScript的使用

3.1 变量

3.1.1 自动类型转换

2.10.1`<meta>`标签

2.10.2 `<link>`标签

2.1 第一种方式内联/行内样式

2.2 第二种方式内部样式表

2.3 第三种方式外部样式表