期末思维导图模板_ProcessOn思维导图、流程图

第二章网页制作的排版方法

2.1 文字与段落排版

2.1.1 段落标签

段落标签的语法为：

<p align="left|center|right">文字</p>
属性align：设置段落文字在网页上的对齐方式，包括left（左对齐）、center（居中）和right（右对齐），默认为left。
格式中的“|”表示“或者”，即多项选其一。

段落标签会在段落前后加上额外的空行，不同段落间的间距等于连续加了两个换行标签<br/>，用以区别文字的不同段落。

2.1.2 标题标签

标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题，HTML会自动在标题前后添加一个额外的换行。

标题文字标签的格式为：

<h align="left|center|right">标题文字</h>
属性align：设置段落文字在网页上的对齐方式，包括left（左对齐）、center（居中）和right（右对齐），默认为left。

2.1.3 换行标签

<br/>标签将打断HTML文档中正常段落的行间距和换行。<br/>放在任意一行中都使该行换行，如果<br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下一卡而又不会在行与行之间留下空行，即强制文本换行。换行标签的语法：文字<br/>

2.1.4 水平线标签

水平线标签的格式为：

<hr align=" left|center|right" size ="横线粗细" width="横线长度" color="横线色彩" noshade="noshade" />

2.1.5 预格式化标签

<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。常见用来表示计算机的源代码预格式化标签。语法为： <pre>文本块</pre>

2.1.6 缩排标签

<blockquote>标签可定义一个块引用。<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。缩排标签的语法为： <blockquote>文本</blockquote>

2.1.7 案例

2.2 超链接

2.2.1 超链接简介

2.2.1.1 超链接的定义

2.2.1.2 超链接的分类

2.2.1.3 路径

2.2.2 超链接的应用

2.2.2.1 锚点标签<a>···</a >

HTML.使用<a>标签来建立一个链接，通常<a>标签又称为锚。建立超链接的标签以<a>开始，以</a >结束。锚可以指向网络上的任何资源：一张 HTML页面、一幅图像、一个声音或视频文件等。

<a>标签的语法：

<a href="url" title="指向链接显示的文字" target="窗口名称">文本文字</a>

2.2.2.2 指向其他页面的超链接

创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系，有4种写法。注意，应该尽量采用相对路径。
（1）链接到同一目录内的网页文件，语法：

<a href="目标文件名.html">热点文本<a/>
其中，“目标文件名”是链接所指向的文件。
（2）链接到下一级目录中的网页文件，格式：

<a href="子目录名/目标文件名.html">热点文本<a/>
（3）链接到上一级目录中的网页文件，语法：

<a href="../目标文件名.html">热点文本<a/>
其中，“../”表示退到上一级目录中
（4）链接到同级目录中的网页文件，格式：

<a href="../子目录名/目标文件名.html">热点文本</a>
表示先退到上一级目录中，然后再进入目标文件所在的目录。

2.2.2.3 指向书签的超链接

指向页面内书签的超链接

要在当前页面内实现书签超链接，需要定义两个标签：一个为超链接标签，另一个为书签标签。超链接标签的格式： <a href="记号名">热点文本</a>

指向其他页面书签的超链接

当单击书签超链接标题，页面会根据超链接中的href属性所以定的地址，将网页跳转到目标地址中书签名称所表示的内容。要在其他页面内实现书签链接，需要定义两个标签：一个为当前页面的超链接标签，另一个为跳转页面的书签标签。

2.2.2.4 指向下载文件的超链接

2.2.2.5 指向电子邮件的超链接

2.3 图像

2.3.1 网页图像的格式及使用要点

2.3.1.1 常见的网页图像格式

GIF

JPEG

PNG

2.3.1.2 使用网页图像的要点

2.3.2 图像标签

2.3.2.1 图像的替换文本说明

2.3.2.2 设置图像大小

2.3.2.3 图像的边框

2.3.3 图像超链接

2.3.4 设置网页背景图像

2.3.5 图文混排

2.4 列表

2.4.1 无序列表

2.4.1.1 在<ul>后指定符号的样式

<ul type="符号类型"> <li type="符号类型1">第一个列表项</li> <li type="符号类型2">第二个列表项</li> <li>第二个列表项</li> ...... </ul>

2.4.1.2 在<li>后指定符号的样式

2.4.2 有序列表

2.4.3 定义列表

<dl> <dt>······第一标题项······</dt> <dd>······对第一标题项的解释文字······</dd> <dt>······第二标题项······</dt> ...... <dd>······对第二标题项的解释文字······</dd> </dl>

2.4.4 嵌套列表

第四章 CSS样式基础

4.1 CSS概述

4.1.1.CSS的基本概念

4.1.2传统HTML的缺点

4.1.2.1.维护困难

4.1.2.2.标记不足

4.1.2.3.网页过“胖”

4.1.2.4.定位困难

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离

4.1.3.2.增强了网页的表现力

4.1.3.3.使整个网站显示风格趋于统一

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

存放CSS样式文件的目录一般命名为style或css。

4.1.4.2.样式文件的命名规则

在项目初期，不同类别的样式放于不同的CSS文件；后期，不同的CSS 文件整合到一个CSS 文件中。这个文件一般命名为style.css或css.css。

4.1.4.3.选择器的命名规则

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。样式名必须能够表示样式的大概含义（禁止出现如Divl，Div2和Style等自名）。

4.1.4.4.CSS代码注释

以字符“/*”开始，以字符“*/”结束。注释可以是单行，也可以是多行，并可以出现在CSS代码的任何地方。

4.2 CSS语法基础

4.2.1.CSS基本语法

selector{propertyl:valuel;property2:value2;property3:value3;······} 选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;······}

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

<p style="font-size:70px;">这里是第一个段落的内容</p> <p>这里是第二个段落的内容</p>

4.2.2.2.class选择器

<p class="class1">这里是class1段落的内容</p> <p class="class1">这里是class1段落的内容</p> <p class="class2">这里是class2段落的内容</p>

4.2.2.3.ID选择器

<p id="ID1">这里是ID1段落的内容</p> <p id="ID2">这里是ID2段落的内容</p>

4.2.2.4.伪类选择器

<a href="http://www.jxatei.net/">江西应用工程职业学院</a>

4.2.3.CSS选择器声明

4.2.3.1.集体生明

h3,h4,h5,p{ color:#acacac; font-size:18px; }

4.2.3.2.全局声明

/*全局声明*/ *{ }

4.2.3.3派生选择器（上下文选择器）

li strong{ font-style:italic; font-weight:normal; } strong{ font-weight:bold; }

4.3 CSS引入方式

4.3.1.内联样式表（行内样式表）

<标记 style="属性1:属性值1;属性2:属性值2;…">修饰的内容</标记>

4.3.2.内部样式表

4.3.3.外部样式表

4.3.3.1.链接外部样式表

4.3.3.2.导入外部样式表

4.4 CSS的属性单位

4.4.1.长度、百分比单位

4.4.1.1.相对类型

4.4.1.2.绝对类型

4.4.2.色彩单位

4.4.2.1.用十六进制数方式表示色彩值

div{ color:#FF0000; }

4.4.2.2.用色彩名称方式表示色彩值

4.4.2.3.使用RGB（x,y,z）函数表示

x、y、z、分别是红色、绿色、蓝色的值，x，y，zE [0，225]，亦可用百分比表示对比rgba(x，y，z，a）中a是alpha通道设置透明度取值0~1。

4.5.CSS继承与层叠

4.6 元素类型

4.6.1.块级元素

块级元素（display：block)
display 属性设置为block将显示块级元素，块级元素的宽度为100%，而且后面隐藏附带有换行符，使块级元素始终占据一行，如<div>常常被称为块级元素，这意味着这些元素显示为一块内容，标题、段落、列表、表格、分区div和body等元素都是块级元素。

4.6.2.行级元素

行级元素（display：inline）行级元素也称内联元素，display 属性设置为inline将显示行级元素，元素前后没有换行符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小超接、图像、范围（span）、表单元素等都是行级元素。

4.6.3.列表项元素

列表项元素（display：list-item) list-—item 属性值表示列表项目，其实质上也是块状显示，是一种特殊的块状类型，它加了缩进和项目符号。

4.6.4.隐藏元素

隐藏元素（display：none) none 属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把 display 设置为none，该元素及其所有内容就不再显示，也不占用文档中的空间。

第六章元素应用CSS

6.1 使用CSS设置字体样式

6.1.1.字体类型

6.1.2.字体大小

font-size:绝对尺寸|相对尺寸；

6.1.3.字体粗细

font-weight:bold|number|normal|lighter|100-900;

6.1.4.字体倾斜

font-style:normal|italic|oblique;

italic为“斜体”，oblique 为“倾斜体”

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

text-align: left | right | center | justify;

justify 为两端对齐

6.2.2.行高

line-height:lenght|normal;

6.2.3.文本的修饰.

text-decoration:underline|blink|overline|line-through|none;

underline 为下划线，blink 为闪烁，overline 为上划线，line-through为贯穿线，none为无装饰。

6.2.4.段落首行缩进

text-indent:length;

6.2.5.首字下沉

在CSS样式中伪对象“:first-letter”可以实现对象内第一个字符的样式控制。

6.2.6.字符间距

letter-spacing:length | normal;

normal为默认值，定义字符间的标准间距。length 表示由浮点数字和单位标识符组成的长度值，允许为负值。

6.2.7.文本的截断

text-overflow:clip | ellipsis;

clip定义简单的裁切，不显示省略标记。ellipsis 定义当文本溢出时显示省路标记。

6.2.8.文本的颜色

color:red;/*规定颜色值为颜色名称的颜色*/ color:#000000;/*规定颜色值为十六进制值的颜色*/ color:rgb(0,0,255);/*规定颜色值为rgb代码的颜色*/ color:rgb(0%,0%,80%);/*规定颜色值为rgb百分数的颜色*/

6.2.9.文本的背景颜色

background-color:color | transparent;

color用于指定颜色。transparent表示透明的意思，也是浏览器的默认值。说明：background-color不能继承，默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才能看见。

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

6.3.2.图像缩放

使用CSS样式控制图像的大小，可以通过width和height两个属性来实现。需要注意的是，当width 和height两个属性的取值使用百分比数值时，它是相对于父元素而言的，如果将这两个属性设置为相对于body的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也发生相应变化的效果。

6.3.3.设置背景图像

background-image: url(url)| none;

url表示要插入背景图像的路径，nome表示不加载图像。

6.3.4设置背景重复

background-repeat:repeat | no-repeat | repeat-x | repeat-y;

6.3.5.背景图像定位background-position:length | length;
background-position:positional | position;

6.3.5.1.使用关键字进行背景定位

top：将背景图像同元素的顶部对齐。 bottom：将背景图像同元素的底部对齐。 left：将背景图像同元素的左边对齐。 right：将背景图像同元素的右边对齐。 center：将背景图像相对于元素水平居中或垂直居中。

6.3.5.2.使用长度进行背景定位

/* 6.3.5.2.使用长度进行背景定位 */ background-position: 100px 50px;

6.3.5.3.使用百分比进行背景定位

/* 6.3.5.3.使用百分比进行背景定位 */ background-position: 20% 50%;

6.4 使用CSS设置表单样式

6.4.1.使用CSS修饰常用的表单元素

6.4.1.1.修饰文本域

文本域主要用于采集用户在其中编辑的文字信息，通过CSS样式可以对文本域内的字体、颜色以及背景图像加以控制。

6.4.1.2.修饰按钮

按钮主要用于控制网页中的表单。通过CSS样式可以对按钮的字体、颜色、边框以及背景图像加以控制。

6.4.1.3.制作登录表单

在许多网站中都有登录表单的应用，而登录表单所包含的元素通常有用户名文本域、密码域、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。

第八章利用CSS制作导航菜单

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现

8.1.1.1导航栏的创建

<nav>标签是 HIML5 新增的文档结构标签，用于标记导航栏，以便后续与网站的其他内整合，所以常用<nav>标签在页面上创建导航栏菜单区域。

8.1.1.2 列表样式的设计

使用list-syie-type属性去掉默认标记。为了预防不同的浏览器会出现预设值。设置margin和paddinng属性为0，避免最终布局效果可能产生的误差;为了使列表元素能够在同一行显示，为<li>列表选项定义浮动效果。

8.1.1.3 超链接样式的设计

对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。然后将其display属性设置为bock，使得超链接成为块级元素，这样才可以为超链接设置80像素的宽度。

8.1.1.4 鼠标事件

利用CSS为a:hover 和a:acive 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

8.1.2 下拉子菜单导航栏的设计与实现

8.1.2.1导航栏的创建

仍然是在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有序列表<ol>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

8.1.2.2 列表样式的设计

此时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用 CSS 在<head>标签中进行声明，对列表样式进行改变。同样，使用 list-style-type 属性去掉默认标记，设置 margin 和 padding 属性为0，为<li>列表选项定义浮动效果，设置text-decoration 属性 none。

8.1.2.3 二级菜单的隐藏和显示设计

为了使有序列表的二级菜单隐藏起来，需要设置 display属性为 none。为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的 display属售block 。为了二级菜单能在从属的一级菜单正下方显示，需要设置二级菜单的绝对定位及一级单的相对定位。

8.1.2.4 DIV样式的设计

完成以上关键步骤后，对内容所处的div样式进行设置、包括宽度、高度、边框和对齐方式。

8.1.2.5 超链接样式的设计

利用CSS为列表超链接重新设置样式，例如，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。然后将其display属性设置为block，使得超链接成为块级元素，这样才可以为超链接设置80像素的宽度。

8.1.2.6 鼠标事件

利用CSS为无序列表选项li:hover 和有序列表的a:hover 进行样式设置，表示鼠标悬停状态时的样式变化。

8.2 纵向侧边导航栏

8.2.1 简单纵向导航栏的设计与实现

8.2.1.1导航栏的创建

普通的纵向导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级元素。区别于水平导航栏，纵向导航栏不需要设置列表选项<li>的浮动属性。
在<nav>的首尾标签之间使用<div>标签创建菜单范围，结合无序列表<ul>标签和列表选项<li>标签创建菜单选项。这里的超链接地址暂时设置为空链接，用户可根据实际情况改成具体的 URL地址。

8.2.1.2 DIV样式的设计

对导航栏所处的 div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置，包括高度、行高、颜色和对齐方式。

8.2.1.3 列表样式的设计

此时列表选项还带有<ul>元素的默认实心圆点样式，需要使用list-style-type 属性去掉默认标记，设置 margin 和 padding的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分。

8.2.1.4 超链接样式的设计

利用 CSS 为超链接重新设置样式，对超链接的a:link和a:visiled 进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a:hover和a:active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。

8.2.2 出式子菜单导航栏的设计与实现

8.2.2.1 导航栏的创建

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<u>和有序列表<ol>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

8.2.2.2 DIV样式的设计

对导航栏所处的 div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置，包括高度、行高、颜色和对齐方式。

8.2.2.3 二级菜单的隐藏和显示设计

为了使有序列表的二级菜单隐藏起来，需要设置display属性为none。为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block 。为了二级菜单能在从属的一级菜单正右方显示，需要设置二级菜单的绝对定位及一级菜单的相对定位。

8.2.2.4 列表样式的设计

此时列表选项还带有<ul>元素的实心圆点样式，及<ol>元素的阿拉伯序号,需要使用list-style-type 属性去掉默认标记，设置 margin 和 padding 的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分。

8.2.2.5 超链接样式的设计

利用CSS为超链接重新设置样式，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a:hover和a:active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。

8.3 底部固定导航栏

8.3.1 导航栏的创建

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

8.3.2 列表样式的设计

此时会带有<ul>元素的默认实心点标记，以利用list-style-type 属性去掉，同时设置margin和padding属性。列表选项设置float属性，让列表元素能够在同一行显示。

8.3.3 菜单固定底部的设计

为了美化文字内容的外观，可以设置div的高度、宽度、背景、边框和文本对齐方式等。为了使导航菜单始终处于页面的最上层，需要设置z-index属性的优先值。为了使导航菜单固定于页面底部，需要设置位置属性position 和各个方向的位置值。

8.3.4 超链接样式的设计

利用CSS 为超链接重新设置样式，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。然后将其display属性设置为block，使得超链接成为块级元素。

8.3.5 鼠标事件

利用CSS为a:hover 和a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

第一章网页基础知识

1.1 认识网页和网站

1.1.1 网页、网站

1.1.1网页、网站

1.1.1.2 网站

1.1.1.3 常用术语

Interner (全球性网络）

WWW (万维网）

URL (统一资源定位符，指定通信协议和地址）

IP (网际协议）

域名（网站名称，全世界唯一，书写格式：机构名.主机名.类别名.地区名）

HTTP（超文本传输协议）

FIP (文件传输协议）

发布（上传网站）

站点（一个站点就是一个网站所有内容存放的文件夹）

超链接（一个网页指向一个目标链接）

Web Browser（游览器）

C/S（客户机和服务器）

B/S（浏览器到服务器的结构）

HTML（超文本语言）

XML（扩展性标记语言）

Session（会话）

Web Server（服务端）

1.1.2 静态网页和动态网页

1.1.2.1 静态网页

1.1.2.2 动态网页

1.2 网页的基本构成元素

1.2.1 文本

一般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般可使用宋体，大小一般使用9磅或12像素左右即可。

1.2.2 图片和动画

丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式。网页中的图像主要用于点缀标题的小图片，介绍性的图片，代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。具有强烈的视觉冲击力，可以更好的吸引浏览者的注意力。

1.2.3 超链接

超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一副图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时，会变成小手形状。

1.2.4 音频视频

音频：使网页效果多样化，常见格式有mid和MP3 视频：一般格式是flv，具有文件小，加载速度快等特点。

1.2.5 交互表单

表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等。接受用户在浏览器端的输入，将这些信息发送到用户设置的目标端。

1.2.6 其他常见元素

网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、Java Applet 等元素。

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

1.4 Web前端技术简介

1.4.1 初识Web前端

Web前端技术主要包括HTML、CSS和JavaScript等语言，用于创建和设计网页的界面、样式和交互效果。其中，HTML是网页的骨架，CSS负责网页的样式设计，而JavaScript则处理网页的动态交互功能。这些技术让网页呈现出丰富的内容和美观的视觉效果，同时提供良好的用户体验。

1.4.2 Web前端开发的三大核心技术

1.4.2.1 HTML

网页内容的骨架。

1.4.2.2 CSS语言

负责网页的外观和样式。

1.4.2.3 JavaScript语言

让网页具有交互性。

1.4.3 前端开发工具

1.4.3.1 浏览器

浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。

1.4.3.2 网页编辑器

HTML，CSS 和 JavaScript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。

1.4.3.3 切图软件

切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有 Photoshop 和 Fireworks两种。

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。用HTML 编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。自1990 年以来 HTML 就一直被用作 WWw的信息表示语言，使用HTML描述的文件，需要通过Web浏览器HTTP显示出效果。

1.5.1.2 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，简单且易学易懂。

1.5.1.3 标记

HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字、图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类：
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head> </head>，<body></body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。

1.5.2 HTML基本结构

1.5.2.1 HTML文档标签<html>...</html>

HTML文档标签的格式为：<html>HTML文档的内容</html> <html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>为止。每个HTML文档均以<html>开始，以</html>结束。

1.5.2.2 HTML文档头标签<head>...</head>

HTML 文档包括头部（head）和主体（body）。 HTML文档头标签的格式为：<head>头部的内容</head> 文档头部内容在开始标签<html>和结束标签</html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。

1.5.2.3 文档编码

文档编码格式如下：<meta charset=" utf-8" /> 为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用GB2313（简体中文）。

1.5.2.4 HTML文档主体标签<body>...</body>

HTML文档主体标签的格式为：<body>网页的内容</body> 主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

<title>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括。

< title>标签位于<bead>与</head>中，用于标示文档标题，格式如下：
<title>标题</title>

1.7.2 <meta>标签

1.7.2.1 keywords

keywords 用来告诉搜索引擎网页使用的关键字。

1.7.2.2 description

description用来告诉搜索引擎网站主要的内容。

1.7.3 <link>标签

1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

HTML5使用标签为文档进行注释，注释标签以“标签支持单行和多行注释。

1.8.2 特殊符号

第三章表格布局与表单交互

3.1 表格概述

3.1.1 表格的结构

3.1.2 表格的基本语法

3.2 表格属性的设置

3.2.1 表格边框属性

3.2.2 表格的宽度和高度属性

3.2.3 表格背景颜色与表格图像属性

3.2.4 表格边框样式属性

3.2.5 表格单元格间距、单元格边距属性

3.2.6 表格水平对齐属性

3.2.7 设置表格的（tr）标记行的属性

3.2.8 设置单元格的属性

3.2.9 表格单元格跨行、跨列属性

3.2.9.1 单元格跨行

3.2.9.2 单元格跨列

3.3 表格嵌套

3.4 表单

3.4.1 表单标记

3.4.2 定义域和域标题

利用fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，feldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend标记为 feldset标记定义域标题。说明：fieldset标记没有属性，是成对标记。legend标记必须位于 feldset标记内，也成对标记：有一个对齐align 属性，属性值分别为 left，center和 right。
语法：

<form>
    <fieldset>
        <legend alig="left|center|right">域标题内容</legend>
    </fieldset>
</form>

3.4.3 表单信息输入<input name="" type=""/>

3.4.3.1 单行文本输入框

3.4.3.2 密码输入框

3.4.3.3 复选框

3.4.3.4 单选按钮

3.4.3.5 图像按钮

3.4.3.6 提交按钮

3.4.3.7 重置按钮

3.4.3.8 普通按钮

3.4.3.9 文件选择框

3.4.3.10 隐藏框

3.4.4 多行文本输入框

<textarea name="" rows="" cols="" wrap=""/>初始信息内容</textarea>

3.4.5 下拉列表框

第五章 CSS盒模型

5.1盒模型的定义

5.2 CSS元素的高度和宽度

5.2.1 盒模型的宽度

盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right) +右边框（border-right）+右外边距（margin- right)。

5.1.2 盒模型的高度

盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（paddingop）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）。

5.3 边距设置和边框设置

5.3.1 外边距设置

5.3.1.1 上外边距

margin-top: length|percent|auto

5.3.1.2 右外边距

margin-right: length|percent|auto

5.3.1.3 下外边距

margin-bottom:length|percent|auto

5.3.1.4 左外边距

margin-left:length|percent|auto

5.3.1.5 外边距

margin: length | percent | auto

5.3.2 外边距的合并

5.3.2.1 行级元素外边距合并

/* 5.3.2.1 行级元素外边距合并 */ display: inline;

5.3.2.2 块级元素外边距合并

/* 5.3.2.2 块级元素外边距合并 */ display: block;

5.3.3 内边距设置

元素的内边距用来控制边框和内容区之间的空白距离，用padding属性表示，类似于HTML中表格单元格的填充属性。从语法和用法上来说，内边距的属性与外边距的属性类似，既可以使用复合属性，也可以使用单边属性，padding属性接受 length值或 percent值，内边距不可以使用负值。

5.3.4 边框设置

5.3.4.1上边框

border-top: border-style | border-width | border-color

5.3.4.2右边框

border-right: border-style | border-width | border-color

5.3.4.3下边框

border-bottom: border-style | border-width | border-color

5.3.4.4 左边框

border-left: border-style | border-width | border-color

5.3.4.5 边框样式

5.3.4.6 边框宽度

5.3.4.7 边框颜色

在CSS中，边框颜色是通过border-color 属性来设置的，该属性可以使用任何类型的色值，包括用颜色命名的值、十六进制参数或RGB值。但是如果对象的 border-style 设置为none或者 border-width设置为0，本属性将失去作用。

5.3.5 新增边框属性

5.3.5.1圆角边框

/* 5.3.5.1圆角边框 */ border-radius: 25px;

5.3.5.2阴影边框

/* 5.3.5.2阴影边框右偏移量下偏移量模糊距离颜色*/ box-shadow: -15px 20px 50px #ff00ff;

5.3.5.3图片绘制边框

5.4 CSS元素的定位position: static | relative | absolute | fixed

5.4.1 static 定位

static 是HTML元素的默认值，不受top、right、bottom和left属性影响，元素出现在正常的文档流中。

5.4.2 relative定位

relative 不脱离文档流的布局，需要参照父元素的四条边（不是浏览器），设置自身的top、right、bottom和 left 属性的参数，从盒子中独立出来浮在上面。

5.4.3 absolute定位

5.4.3.1 相对浏览器绝对定位

5.4.3.2 相对父盒子绝对定位

5.4.4 fixed定位

5.5 CSS元素的浮动

5.5.1 盒子的浮动添加

float: left | right | none

5.5.2 盒子的浮动清除

clear: left | right | both | none

第七章利用CSS和多媒体美化页面

7.1 CSS链接的美化

7.1.1.文字链接的美化

<a></a >标签始终定义超链接，用于从一张页面链接到另一张页面，<a>元素最重要的属性是href 属性，它指示链接的目标，如果未设置 href属性，后续多个属性均无法使用，则只是超链接的占位符。

7.1.2.按钮链接的美化

7.1.3背景链接的美化

7.2 CSS列表的美化

7.2.1.列表项类型（list-style-type）

7.2.2.列表项图像（list-style-image）

7.2.3.列表项位置（list-style-position）

7.2.4.复合列表样式（list-style）

list-style: list-style-type | list-style-position | list-style-image

7.2.5.利用背景图像实现列表项标记

虽然使用 list-style-image 属性很容易实现设置列表项图像的目的，但这个属性不能够精确控制图像替换的项目符号距离文字的位置。因此，可以利用 background-image 加以实现。

7.3 CSS表格的美化

7.3.1.border-collapse

设置表格的边框是否被合并

border-collapse: separate | collapse | inherit

7.3.2..border-spacing

相邻单元格边框之间的横向和纵向的间距

border-spacing: length如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。

7.3.3.caption-side

设置或检索表格标题在表格的哪一边

caption-side: top | right | bottom | left

7.3.4.empty-cells

当表格的单元格无内容时，是否显示该单元格的边框

empty-cells: show | hide

7.4 多媒体的添加与美化

7.4.1.<embed>标签的使用

7.4.2.<bgsound>标签的使用

7.4.3.HTML5新增的多媒体标签

7.4.3.1.<audio>标签

<audio controls="controls"> <source src="media/Easy. ogg" type="audio/ogg" ></source> <source src="media/铃铛.mp3" type=" audio/mp3"></source> 您的浏览器不支持audio元素。 </audio>

7.4.3.2.<video>标签

<video>标签定义视频，例如电影片段或其他视频流。<video>标签在页面中嵌入视频的代码和<audio>标签的使用相似。

第九章 DIV+CSS布局

9.1 DIV+CSS概述

9.1.1 认识DIV

9.1.2 DIV的宽高设置

9.1.2.1 宽高属性

宽度:width width:250px--设置宽值为250像素。 width:50%--设置宽值为父元素的百分之五十。高度:height height:250px--设置高值为250像素 height:50%--设置高值为父元素的百分之五十。

9.1.2.2 div标签内直接设置宽高

9.1.2.3 div使用选择器设置宽高

9.1.2.4 div高度的百分比设置问题

如果div的宽度设置了百分比，则相对其父元素相应改变宽度。但是div的高度则无法根据百分比相应改变。因为设置 div 的高度自适应是相对其父元素的高度而言，本例中 div 的父元素是浏览器本身，所以需要先定义父元素的宽高百分比。

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧

9.2.2 DIV元素的宽度自适应

有时会用到浮动效果，实现DIV元素的宽度自适应。宽度自适应是指两个并排的div其中左边的 div为固定宽度，右边div则根据浏览器的宽度自动调整，这种用法常用于文章列表和文章内容的页面布局。

9.2.3 DIV内容的居中

平时说的 div 内容居中，只是保持div 内容的水平居中。但是很多网站需要用到的是水平和垂直居中。这里用行高(line-height)属性来实现，当行高的值等于容器的高度值，内容便垂直居中。

9.2.4 DIV元素的嵌套

9.3 DIV+CSS的典型布局

9.3.1 左中右布局

左中右布局在网页设计时最为常用，即div-left 是导航菜单，div-main是视觉集中点，放置主要内容，div-right是表单或链接等。而左中右三个区域一并被包含在一个大的 div-all 中。

9.3.2 上中下布局

上中下布局符合许多网站共同的特点，即 div-top是导航或者横幅广告，div-main 是视觉集中点，放置主要内容，div-footer 是版权信息等。而上中下三个区域一并被包含在一个大的 div-all 中。

9.3.3 混合布局

混合布局也可以叫综合型布局。混合布局可以在一列或一行布局的基础之上，分为多列或多行布局。网页布局的结构普遍都是三列布局，或者可以根据实际需求，对网页再进行划分。

第十章 JavaScript的应用

10.1 JavaScript概述

10.1.1 JavaScript简介

10.1.1.1 简单性

JavaScipt是一种脚本语言，采用小程序段的方式实现编程。像其他脚本语言一样,javaScript同样是一种解释性语言，提供了一个简易的开发过程。

10.1.1.2 动态性

JavaScript是动态的，可以直接响应用户或客户的输人，无须经过 Web服务程序，通过事动来响应用户的请求。

10.1.1.3 跨平台性

JavaScrp依赖浏览器，与操作环境无关，只要能运行浏览器的计算机、支持JavaSeip的浏览器就可以正确执行。

10.1.1.4 安全性

JavaScript 是一种安全性语言，不允许访问本地的硬盘，并不能将数据存人到服务器上不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，可有效地防止数据的丢失。

10.1.1.5 基于对象的语言

JavaScript是一种基于对象的语言，同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。

10.1.2 JavaScript入门案例

JavaScript程序不能独立运行，必须依赖HTML文件，通常将JavaSeript代码放置在script标记内，由浏览器JavaSeript 脚本引擎来解释执行。

10.1.3 JavaScript放置的位置

10.1.3.1 head标记中的脚本

script标记放在头部head 标记中，通过JavaScript 代码必须定义成函数形式，并在主体body标记内调用或通过事件触发。放在head标记内的脚本在页面装载时同时载入，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。

10.1.3.2 body标记中的脚本

script 标记放在主体 body标记中，JavaScript 代码可以定义成函数形式，在主体 body 标记内调用或通过事件触发。也可以在script标记内直接编写脚本语句，在页面装载时同时执行相关代码，这些代码执行的结果直接构成网页的内容，在浏览器中可以查看。

10.1.3.3 外部js文件中的脚本

除了将JavaScript代码写在head和body部分以外，也可将JavaScript 函数单独写成个js文件，在HTML文档中引用该js文件。

10.1.3.4 事件处理代码中的脚本

10.2 JavaScript语法

10.2.1 语法基础

10.2.1.1 区分大小写

在JavaScript语言中，对大小写是敏感的，这在现在的很多开发语言中都是如此，所以读者要养成一种良好的习惯，这样就可以避免调试程序时遇到这些低级错误。

10.2.1.2 变量不区分类型

Javascipt 中变量声明，采用其弱类型，即变量在使用前无须进行变量数据类型声明由解释器在运行时检查其数据类型，例如:x=1234;y="1234" 根据 Javascript 变量的申明方式，可知前者说明x为数值型变量，而后者说明y为字符串型变量。

10.2.1.3 每行代码结尾可以省略分号

在JavaScript里面每条语句结尾的分号“;”不是必要的，如果多个语句写在一行上那么语句之间的分号“;”才是必需的，最后一条语句的分号“;”可以省略。为了养成自好的编程习惯，建议还是在每条语句后面加上分号。

10.2.1.4 注释与C、C++、Java等语言相同

注释就是对代码的解释和说明，目的是为了让别人和自己容易读懂程序。JavaScript的注释形式与C、C++、Java等语言相同，格式如下: //单行注释 /* 多行注释 */

10.2.2 标识符和常用变量

10.2.2.1 标识符

标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript 关于标识符的规定如下:
(1)必须使用英文字母或者下划线开头。
(2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符。
(3)不能使用JavaScript 关键字与 JavaScript 保留字。
(4)不能使用 JavaScript 语言内部的单词，比如 Infinity，NaN，undefined 等。
(5)大小写敏感，如name 和 Name 是不同的两个标识符。
合法的标识符:Hello、-12th、sum、Dog23 等。
不合法的标识符:if、3com、case、switch等。

10.2.2.2 变量声明

在 JavaScript 语言环境中，变量是用于存储信息的容器，关键字 var 可应用于JavaScript中任何类型的变量声明。JavaScript是采用的隐式变量声明，但要注意在JavaScript语言的任何位置进行隐式变量声明会将变量声明为全局变量，而函数内的局部变量则必须使用var来声明变量，因此，在声明变量时，需要根据变量的作用范围来声明变量。

var count;//单个声明 var count,amount,level;//用单个var关键字声明的多个变量 var count=O,amount=100;//一条语句中的变量声明和初始化

10.2.2.3 变量类型

JavaSeript 有6种数据类型，主要的类型有 Number 数值型、String 字符型、0bject 对象及Boodean布尔型，其他两种类型为 Null和 Undefined。

（1）Number数值型。Jvascript支持整数和浮点数。整数可以为正数、0或负数;浮点数包含小数点，例如3.53、-534.87等都是浮点数。浮点数还可以采用科学计数法进行表示，如3.5E15表示3.5x10^15。

（2）String字符型。字符型数据又称为字符申型，由若干个字符组成，并且用单引号或双引号封装起来，例如:”你好!”"this is string””学习·语言”专使用字符串的过程中，有时会遇到一种情况:在一个字符串中需要使用单引号或双引号、正确的方法是在由双引号标记的字符串中引用字符时使用单引号，在由单引号标记的字市中引用字符时使用双引号，即单引号、双引号必须成对使用相互包含，但不能交叉。例如:
"热烈欢迎参加‘JavaScript 技术’研讨的专家";//正确的用法

"学习不是一件‘’容易"的事件’;//错误的用法

(3)Boolean 布尔型。Boolean值有true 和false，这是两个特殊值，可以将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整数0。但不能用tue 表示1或false 表示 0。

(4)Undefined 数据类型。JavaScript 会对未赋值变量赋值为 undefined。

(5)Null数据类型。这是一个对象,但是为空。因为是对象，所以typeof null 返回“0bject”，注意 null是Javascript 保留关键字。

(6)0bject类型。除了上面提到的各种常用类型外，对象类型也是JavaScript中的重要组成部分。

10.2.3 运算符与表达式

10.2.3.1 算术运算符和表达式

10.2.3.2 关系运算符和表达式

10.2.3.3 逻辑运算符和表达式

10.2.3.4 赋值运算符和表达式

10.2.3.5 条件运算符和表达式

语法: 变量=表达式1?表达式2:表达式3

说明:该条件表达式表示，如果表达式1的结果为真(true)，则将表达式2的值赋给变量，否则将表达式3的值赋给变量。例如，变量number1、number2比较大小，将较大的数赋值给变量max，代码如下:

var max=(numberl>number2)? numberl :number2 ;

10.2.3.6 逗号运算符和表达式

var rs=(3+5,10*6); /*先计算第一个表达式3+5的值为8,再计算第二个表达式10*6的值为 60,最后将第二个表达式的值60赋给变量rs*/

10.2.4 程序设计

10.2.4.1 条件分支语句

10.2.4.2 循环语句

for(变量=开始值;变量<=结束值;变量=变量+步进值){ /*循环体语句 */ }

10.2.5 函数

10.2.5.1 定义函数

function函数名(varl，var2，var3){ /*函数代码*/ 】

val、var2、var3 等指的是传人函数的变量或值，为函数的参数;大括号定义了函数的开始和结束。

10.2.5.2 函数返回值

需要返回某个值的函数必须使用return 语句。例如:

function sum( a , b ){ x=a+ b; return X; }

JavaScript 中的函数无须对函数的返回值进行申明，直接使用return，返回值的类型可以是本节提到的6种类型中的任意一种。

10.2.5.3 函数调用

函数的调用很简单，可以通过其名字加上括号中的参数进行调用。

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

JavaScript 编程是使用“面向对象”的概念，也称为“对象化编程”。JavaScript“面向对象编程”的意思就是把JavaScript 能涉及的范围划分成大大小小的对象，对象下面还继续划分对象，所有的编程都以对象为出发点，基于对象，小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。
在JavaScript里面可以创建自己的对象，但在创建用户自定义对象前，需要先学习创建的JavaScript对象，以及如何使用它们。本节后续开始将具体地依次讲解JavaScript的内建对象。
在 JavaScript 里面创建一个新的空对象，例如:
var o= new object( );
JavaScript 的对象可分为本地对象或内置对象、Browser 对象和 HTML DOM 对象。

(1)本地对象。本地对象就是ECMA-262 标准内定义的类。全局对象是预定义的对象，作为JavaScript的全局函数和全局属性的占位符。通过使全局对象，可以访问所有其他预定义的对象、函数和属性。全局对象不是任何对象的属性所以它没有名称。全局对象只是一个对象，而不是类，它既没有构造函数，也无法实例化一个新的全局对象。

(2)Browser对象。BrowserObjects也可被称作BOM，是用来与浏览器窗体网页产生互动的对象。

(3)HTMLDOM对象。HTMLDOM定义了用于HTML的一系列标准对象，以及访问和处理 HTML文档的标准方法。其中，最重要的一个对象就是document对象，document代表整个HTML文档，用来访问页面中的所有元素。

10.3.1.2 属性

属性是对象的特性值的表述，例如:

访问用户自定义对象属性的方式和访问JavaScript 内建对象的属性方式是一样的，例如

var person= new object( ); person,birthday ='1982-09-09';

10.3.1.3 方法

方法指对象可以执行的行为(或可以完成的功能)，与属性相同，JavaScript内建对象自带了很多功能强大的方法，可以直接调用来完成某些特定的功能，例如：

var str = Hello World! document. writeln( str. toUpperCase( ) );

运行结果为: HELLO WORLD! 以上示例使用了字符串对象的toUpperCase()方法，其功能是将字符串全部转变为大写字母。

10.3.2 常用对象

10.3.2.1 window对象

window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript中，window 对象是全局对象，所有的表达式都在当前的环境中计算。

(1)窗口操作。window对象是JavaScript 中最大的对象，主要用于操作浏览器窗口。通常要引用它的属性和方法时不用window.xx形式，而直接使用方法名称即可。

通过 window对象移动或调整浏览器窗口的大小，有4种方法:
moveBy(x，y):从当前位置水平移动窗体x个像素，垂直移动窗体y个像素。x为负数，将向左移动窗体;y为负数，将向下移动窗体。

moveTo(x，y):移动窗体左上角到相对于屏幕左上角的(x，y)点。当使用负数作为参数时，窗体会移出屏幕的可视区域。
resizeBy(w，h):相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体。
resizeTo(w，h):把窗体宽度调整为w个像素，高度调整为h个像素。

(2)打开窗口。用open()打开新窗口。

语法:

window. open( url , name , features , replace ) ;
说明:
url：要载入窗体的 URL。
name：新建窗体的名称。
features：代表窗体特性的字符串，字符串中每个特性使用逗号分隔。
replace：一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定。

(3)关闭窗口。用close()关闭窗口。
语法:

window. close( );
例如，关闭一个新建的窗口:var NewWin= window, open(….... ) ;
NewWin. close( );

(4)系统对话框。window对象有三种常用的对话框，
alert():显示提示信息，不能对脚本产生任何改变。常见于提醒用户信息不完整、有误等情况。
confirm():弹出消息对话框(对话框中包含一个OK按钮与一个 Caneel 按钮)，一般用于确认信息，返回 true或fale，所以主要用于if…else….判断。常见于用户对信息更改前的确认。
prompt():一个带输入框的对话框，可以返回用户填人的字符串，常见于某些留言板或论坛输人内容那里的插人UBB格式图片。
alert()方法前面示例讲解过，这里再举例说明confirm()方法和prompt()方法的使用。

说明:prompt()方法需要定义两个参数，而第2个参数是可选的，是指文本框输人的以文本。与confirm()方法不同的是，pompt()方法只返回1个值，当浏览者单击“确定”按钮时，返回文本框中输人的文本。单击“取消”按钮时，返回值为 null。

(5)history历史对象。window 对象中的 history 历史对象包含了用户已浏览的 URL,的信息,是指浏览器的浏览历史。鉴于安全性的需要，该对象有很多限制。history历史对象有length这个属性来列出历史的项数。JavaScript所能管到的历史被限制在用测览器的“前进”后退”键链接到的范围。
history 历史对象有以下方法:
back():后退，与按下“后退”键是等效的。
forward():前进，与按下“前进”键是等效的。
go():用法为history.go(x);在历史的范围内指向指定的 URL访问地址。如果 x<0,则后退x个地址;如果x>0，则前进x个地址;如果x=0，则刷新现在打开的网页。

10.3.2.2 document对象

document 本身是一个对象，但又是 JavaScript中 window对象和 frames 对象的一个属性,其描述当前窗口或指定窗口对象的文档。它包含文档从<head>标签到</body>标签的全部内容。
用法为 document 或<窗口对象>.document，其中 document 表示当前窗口的文档，<窗口对象>,document 表示指定窗口的文档。

10.3.2.3 location对象

location 对象用于获取或设置窗体的URL,并且可以用于解析URL，是JavaScript 中最重要的对象之一，location的中文意思是“位置"。location既是window对象的属性又是document对象的属性，即“window.location== document. location;”。

10.3.2.4 navigator对象

navigator 对象的中文意思为“导航器”,通常用于检测浏览器与操作系统的版本，也是window 对象的属性。
由于navigator没有统一的标准，因此各个浏览器都有自己不同的navigator版本navigator 的属性和方法也会有一定的不同。这里介绍普遍支持且常用的部分属性和方法。

10.3.2.5 screen对象

screen 对象用于获取用户的屏幕信息，是window对象的属性。
每个window 对象的screen属性都引用一个screen对象。可以通过 screen对象获取一些屏幕的信息，如宽度、高度、像素等，而这些信息对于设置图片和页面在浏览器中显的大小都是非常有用的。screen对象的属性应用和浏览器的关系比较密切，所以在应用这些属性时，一定要注意浏览器之间的兼容性。
availWidth与availHeight属性比较常用，它们可是使窗口填满用户显示器的屏幕。

10.4 JavaScript事件

10.4.1 事件及事件处理

(1)直接在HTML标记中指定。这种方法用得最多。一般形式: <标记…事件="事件处理程序"[事件=”事件处理程序"…]>

(2)编写特定对象特定事件的JavaScript。这种方法用得少，但是在某些场合还是很好用的。

(3)在JavaScript中说明。一般形式: <事件主角-对象>.<事件>=<事件处理程序>; 该方法需要注意的是，“事件处理程序”是真正的代码，而不是字符串形式的代码。如果事件处理程序是一个自定义函数，如无使用参数的需要，就不要加“()”。

10.4.2 常用事件

JavaScript 中常用事件主要包括一般页面事件、鼠标事件、键盘事件等。对于事件的类型，随着 HTMI5的出现和发展，又新增了HTML5事件、设备事件、触摸事件、手势事件等各种事件。事件的应用常见于下面几种场景:鼠标单击某一元素、页面或图像载入、鼠标悬浮于页面的某个热点之上、在表单中选取输人框、确认表单、键盘按键等。

10.4.3 事件应用举例

onLoad事件

onchange事件

onkeypress，onkeydown事件

鼠标事件（mouseOver，mouseOut，mouseDown，mouseUp）