网页设计与制作教程

2024-12-12 20:07:17   0  举报





AI智能生成

网页设计与制作教程是一门全面介绍网页设计与制作的课程，涵盖了HTML、CSS和JavaScript等核心语言和技术。通过这个教程，你可以学习如何创建响应式网站、优化网页性能、提高用户体验等。无论你是初学者还是有一定基础的开发者，这个教程都将帮助你提升网页设计与制作的技能。

项目管理

大学

架构

前端开发

作者其他创作

大纲/内容

第一章网页制作的基础知识

1.1 认识网页和网站

1.1.1 网页、网站

1.1.1.1 网页

网页：网页是构成网站的基本元素，是承载各种网站应用的平台。网页是包含HTML标签的纯文本文件，后缀名通常为HTML，htm，php，aspx，jsp。

网页和网站之间的主要区别在于，网页是 Internet 上唯一 URL 下的单个文档。相反，网站是多个网页的集合，其中有关相关主题或其他主题的信息在域地址下链接在一起。

1.1.1.2 网站

网站：网站就是由网页及其它源文件组成的。

1.1.1.3 常用术语

Internet：由各种不同类型的计算机网络连接起来的全球性网络。
WWW：让Web客户端（常用浏览器）访问Web服务器中的网页。
URL：统一资源定位符，指定通信协议和地址。
IP：网际协议。
域名：网络名称。
HTTP：超文本传输协议。
FTP：文件传输协议，可实现资源共享。
发布：是指将制作好的网页传到网络上的过程，就是上传网站。
站点：一个站点就是一个网站所有内容所存放的文件夹。

1.1.2 静态网页和动态网页

1.1.2.1 静态网页

通常由HTML/CSS来展现出来，静态页面以展示为主，用户只能通过页面来获取相应内容。

1.1.2.2 动态网页

用户允许主动参与到页面中，动态网页在服务器端运行，客户机上看到的只是它的返回结果，不能看到它的源文件，常见的动态网页技术JavaScript，ActiveX和Flash等。

1.2 网页的基本构成元素

1.2.1 文本

文本具有体积小、网络传输速度快等特点，用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。网页虽不如图片能更快引起读者的注意，但却能更准确的表达信息的内容和含义。

1.2.2 图片和动画

图片比文本更直观生动，能供传递文本不能表达的信息，具有视觉冲击力。在网页中使用的图片格式主要有GIF、JPEG和PNG等。

1.2.3 超链接

超链接是指一个网页指向一个目标的连接关系，主要是为了引流。

1.2.4 音频视频

音频文件可以使网页效果多元化，常见的音频格式mid和mp3。

网页中的视频文件一般为flv格式，具有文件小、加载速度快等特点。

1.2.5 交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目的端。这个目的可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。

1.2.6 其他常见元素

常见元素：悬停按钮、JavaScript与ActiveX等各种特效，它们能点缀网页，在网上娱乐，使网页活泼有趣。

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

（1) 网页安全色是红色、绿色、蓝色。它们在不同硬件环境、不同操作系统、不同浏览器中都能正常显示的颜色集合。

（2）网页中的色彩表达方式是十六进制。

1.4 Web前端技术简介

1.4.1 初识Web前端

Web前端，通常指的是在浏览器中呈现的网页界面，如网站、应用程序等的前端开发。它涵盖了HTML、CSS和JavaScript等技术的运用，使得网页具有良好的视觉效果、用户体验和交互性。在竞争激烈的互联网行业中，一个优秀的Web前端能极大地提升用户满意度，为企业赢得市场份额。

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

1.4.2.1 HTML

控制内容的结构，是一门标记型语言，HTML称为“超文本标记语言”。“超文本”是指页面内可以包含图片，链接，甚至音乐，程序等非文字元素，而“标记”是指这些超文本必须由包含属性的开头与结尾标志来标记。

1.4.2.2 CSS语言

控制页面的样式，是一门描述性语言。

1.4.2.3 JavaScript语言

动态网页，是一门脚本编程语言。

1.4.3 前端开发工具

1.4.3.1 浏览器

浏览器是用来检索、展示以及传递 Web 信息资源的应用程序。

1.4.3.2 网页编辑器

网页编辑器是一种用于创建和编辑网页的软件工具。它允许用户设计、构建和更新网站的内容和外观。网页编辑器通常提供图形化界面，使得非技术人员也能轻松地创建和修改网页，而无需编写代码。

子主题

1.4.3.3 切图软件

切图软件切可以图难、重复性工作量大的问题。它可以一次打开多张照片，然后对每一张照片进行多次快速切图操作，切好的图自动保存到指定的目录下。支持多种常见的图片文件格式：JPEG、JPG、PNG、GIF、BMP。

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。

1.5.1.2 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。

1.5.1.3 标记

标记：用标签的方式记录内容。

例<xxx>内容</xxx>。.

1.5.2 HTML基本结构

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

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

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

HTML文档文档头标签的格式为：<head>头部的内容</head>，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。

1.5.2.3 文档编码

格式如下：<meta charset="utf-8"/>。

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

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

1.6 创建HTML文档

子主题

1.7 网页头部标签

1.7.1 <title>标签

title：<title>标签位于<head>与</head>中，用于设置网页名，格式为：<title>标题</title>。

例如：<title>京东</title>。

1.7.2 <meta>标签

1.7.2.1 keywords

keyword（关键字）：搜索引擎，检索。

1.7.2.2 description

description（网站内容描述）：用一段话来描述网页主要内容。

1.7.3 <link>标签

link标签引入css文件。
rel参数指定文件作用(样式脚本)。
href参数指定文件路径。
type参数指定文件类型。

1.7.4 <script>标签

Script标签引入JavaScript文件。
src指定文件路径。
type参数指定文件类型。

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为增加HTML5文档的可读性，可为其添加注释部分。HTML5使用，注释标签以""结束，支持单行注释和多行注释（换行输入）。

1.8.2 特殊符号

：空格
>：大于号 >
&It ：小于号 <
" ：引号”
©：”版权符号 @

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

2.1 文字与段落排版

2.1.1 段落标签

为了使文字段落排列得整齐、清晰，常用段落标签<p>...</p>来实现。

段落标签的语法为：<p align="left|center|right">文字</p>

属性align用于设置对齐方式，left，center和right，默认左对齐。

<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>
<p>第四段</p> (默认左对齐）

子主题

2.1.2 标题标签

标题标签的格式：<h# align="left|center|right">标题文字</h#>

属性align用于设置对齐方式，left，center和right，默认左对齐。

列出HTML中的各级标题：

<h1>一级标题</h1> （最大的标签）
<h2 align="center">二级标题</h2>
<h3 align="left">三级标题</h3>
<h4 align="right">四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>（最小的标签）

子主题

2.1.3 换行标签

换行标签的语法：文字<br/>

<br/>换行标签，段落间距变小

2.1.4 水平线标签

水平线标签的格式为：<hr size="横线粗细" width="横线长度" color="横线色彩"/>

属性size设置线条粗细，以像素为单位，默认值为2。

属性width设定线段长度

属性color设定线条色彩，默认黑色。

2.1.5 预格式化标签

<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 路径

URL——统一资源定位器，指的就是每一个网站都具有的独立的地址。

（1）绝对路径。

（2）根目录相对路径。

（3）文档目录相对路径。

2.2.2 超链接的应用

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

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

<a>标签的语法为：

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

href指定跳到哪里去

2.2.2.2 指向其他页面的超链接

2.2.2.3 指向书签的超链接

第一设置标签<a name="p"></a>

第二步跳转到标签位置<a href="#p">段落</a>

2.2.2.4 指向下载文件的超链接

2.2.2.5 指向电子邮件的超链接

2.3 图像

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

2.3.1.1 常见的网页图像格式

GIF。GIF是Internet上应用最广泛的图像文件格式之一，是一种索引颜色图像格式，此格式在网页中使用最多，它的特点是体积小。
JPEG。JPEG是Internet上应用最广泛的图像文件格式之一，适用于摄影或连续色调图像。因为JPG格式的文件体积较大，图片质量较佳，通常可以通过压缩JPG文件在图像品质和文件大小之间取得良好的平衡，当网页有质量要求，建议使用此格式。
PNG。PNG是一种新型的无专利权限的图像格式，兼有GIF和JPG的优点。

2.3.1.2 使用网页图像的要点

高质量的图像因其图像体积过大，不适合网络传输。一般选图不要超过8KB，小图加载快。
网页的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。
如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到文件所在的位置。例如，文件X. Y与A 文件夹在同一目录下，那么文件B. A在目录 A下的B文件夹中，它对于文件X. Y 的相对路径则为A/B/B.A，

2.3.2 图像标签

2.3.2.1 图像的替换文本说明

图像标签的格式：< img src="图像文件名" alt="替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度" border="边框宽度" align="环绕方式|对齐方式"/>

2.3.2.2 设置图像大小

2.3.2.3 图像的边框

图像标签的常用属性：

属性说明
src指定图像源，即图像的 URL路径
alt如果图像无法显示，代替图像的说明文字
title为浏览者提供额外的提示或帮助信息，方便用户使用
width指定图像的显示宽度（像素数或百分数），通常只设为图像的真实大小以免失真。若需要改变图像大小，最好事先使用图像编辑工具进行修改。百分数是指相对于当前浏览器窗口的百分比
height指定图像的显示高度（像素数或百分数）
border指定图像的边框大小，用数字表示，默认单位为像素，默认情况下图片没有边框，即border = 0
align指定图像的对齐方式，设定图像在水平（环绕方式）或垂直方向（对齐方式）上的位置，包括left 图像居左，文本在图像的右边）、right（图像居右，文本在图像的左边）、1p
（文本与图像在顶部对齐）、middle（文本与图像在中央对齐）或bottom（文本与图像在底部对齐）

2.3.3 图像超链接

图像超链接的语法：<a href="URL"><img src="图像文件名"/></a>

2.3.4 设置网页背景图像

网页页面格式：<body background="背景图像路径">

2.3.5 图文混排

图文混排技术是指设置图像与同一行中的文本、图像、插件或其他元素的对齐方式。

2.4 列表

2.4.1 无序列表

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

<ul type="disc"> 符号为实心圆点

<ul type="circle">符号为空心圆点

<ul type="square">符号为方块

<u1 img src="graph,gif">符号为指定的图片文件

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

<li type="disc">符号为实心圆点●

<li type="circle">符号为空心圆点

<]i type="square">符号为方块

<li img src ="graph,gif">符号为指定的图片文件

2.4.2 有序列表

ol>标签建立有序列表，<li>标签表项

< ol type=”符号类型”>

< li type=”符号类型1”>表项1

< li type=”符号类型2”>表项2

……

</ ol>

2.4.3 定义列表

<dl>自定义列表，<dt>,<dd>定义列表中具体的数据项。一般情况下使用<dt>定义列表的二级列表项，也可以认为是<dd>的一个概要信息，使用<dd>来定义最底层的列表项。

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

2.4.4 嵌套列表

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

3.1 表格概述

3.1.1 表格的结构

表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。

3.1.2 表格的基本语法

标记形式：

<table></table>表格标记
<caption></caption>表格标题标记
<th></th>表格表头标记（默认加粗）
<tr></tr>表格的行标记
<td></td>表格的列标记

3.2 表格属性的设置

3.2.1 表格边框属性

3.2.2 表格的宽度和高度属性

通过设置width属性（百分比）和height（百分比）属性，可以设置表格的宽度和高度。

语法：

<table width="" height="">...</table>

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

设置表格的border属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。

语法：

<table bgcolor="" background="">...</table>

3.2.4 表格边框样式属性

设置表格标记中的fame属性可以改变表格边框的样式；设置标记中的rules属性可以改变表格内部边框的样式。

语法：

<table frame=" " rules=" ">.....内容.....</table>

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

设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格把内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。间距是格子与格子之间的距离，边距是内容与格子的距离。

语法：

<table cellspacing=" " cellpadding=" "></table>

cellspacing。值单位为像素或百分比，默认值为2px。
cellpadding。值单位为像素或百分比。

3.2.6 表格水平对齐属性

对齐方式align属性语法：

<table align="left | center | right">...</table>

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

标题行标记的属性用于设置表格某一行的样式。属性如下

属性align：行内容水平对齐
属性valign：行内容垂直对齐
属性bgcolor：行的背景颜色
属性bordercolor：行的边框颜色

3.2.8 设置单元格的属性

表格的列（td）标记的属性可以设置表格单元格的显示风格。

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

3.2.9.1 单元格跨行

使用单元格td标记的rowspan属性可以设置单元格跨行合并。

语法：<td rowspan="行数">...</td>

3.2.9.2 单元格跨列

使用单元格td标记的colspan属性可以设置单元格跨列合并。

语法：<td colspan="列数">...</td>

3.3 表格嵌套

表格嵌套是一种常见的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，表格不宜过多使用，否则会降低网站访问速度。

3.4 表单

3.4.1 表单标记

表单form标记为成对标记，以<form>开始和</from>结束。

语法：

<form method="post" action=" ">
<input type="text" name=" "/>
<textarea name="" rows="" cols="">......</textarea>
<select name="">
<option value="" selected></option>
<option value=""></option>
</select>
</form>

3.4.2 定义域和域标题

利用fieldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们。legend标记为fieldset标记定义域标题。

语法：

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

</form>

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

设置input标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。

语法：<input name="" type="" maxlength="" size="" value="" readonly/>

3.4.3.2 密码输入框

设置input标记的type属性值为password，可以实现向表单中插入一个密码输入框。这样设计可以保障用户输入的密码不被泄露。

语法：<input name="" type="password" maxlength="" size=""/>

3.4.3.3 复选框

设置input标记的type属性值为checkbox，可以实现向表单中插入一个复选框，用户用复选框在网页上页面上设置多项选择。

语法：<input name="" type="checkbox" value="checked"/>

说明：复选框的主要属性有name，value和checked，其中checked属性默认被选中。

3.4.3.4 单选按钮

设置input标记的type属性值为radio，可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。

语法：<input name="" type="radio" value="" checked/>

单选按钮的属性有name，vale和checked等，其属性、取值及说明与复选框相同。由于单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同。

3.4.3.5 图像按钮

设置input标记的type属性值为image，可以实现向表单中插入一个图像按钮，用户可以利用图像按钮在网页中插入一张图像，通过src属性加载图像。

语法：<input name="" type="image" src="" width="" height=""/>

3.4.3.6 提交按钮

设置input标记的type属性值为submit，可以实现向表单中插入一个提交按钮，提交按钮用于将表单的信息提交至服务器进行处理。

语法：<input name="" type="submit" value="提交"/>

3.4.3.7 重置按钮

设置input标记的type属性值为reset，可以实现向表单中插入一个重置按钮，重置按钮用于将表单中所有的输入信息清空，然后让用户可以重新填写。

语法：<input name="" type="reset" value=""/>

3.4.3.8 普通按钮

设置input标记的type属性值为button，可以通过value来设置按钮名字，可以实现向表单中插入一个普通按钮。普通按钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。

语法：<input name="" type="button" value=""/>

3.4.3.9 文件选择框

设置input标记的type属性值为file，可以实现向表单中插入一个文件选择框。

语法:<input name=" " type=" file" value =" "/>

3.4.3.10 隐藏框

设置imput 标记的type属性值为hidden,可以实现向表单中插入一个隐藏框，用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的,value属性传给后端。

语法：<input name="" type="hidden" value=""/>

3.4.4 多行文本输入框

extarea 标记可以向表单中插人多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。

语法：<textarea name="" rows="" wrap=""/>初始信息内容</textarea>

3.4.5 下拉列表框

下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用select和option 标记来在表单中插入下拉菜单和列表项。

语法：

<select name=" " size=" " multiple>
<option value=""selected>文字信息1</ option>
<option value="">文字信息2</option>

........

</select>

说明：select标记是成对标记，option标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有name,size 和 multiple（多选）ctri+选中即为多选等属性。option 标记有 value 和 selected 等属性。select标记与option 标记必须配合使用。每一选项必须指定一个显示的文本和一个value值，显示文本通常附在 option 标记后面。

第四章 CSS样式基础

4.1 CSS概述

4.1.1.CSS的基本概念

HTML：页面结构文件。
CSS：页面样式文件。在网页设计时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果更精确的控制。

4.1.2传统HTML的缺点

4.1.2.1.维护困难

为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。

4.1.2.2.标记不足

HTML自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例如文字间距、段落缩进等，这些在HTML中都很难找到。

4.1.2.3.网页过“胖”

由于对各种风格样式没有统一进行控制，用HTML编写网页结构文件多而复杂，占用了很多宝贵的宽带。

4.1.2.4.定位困难

在整体页面布局时，HTML对于各个模块的位置调整很困难。

4.1.3.CSS的特点和优势

4.1.3.1.表现和内容分离

CSS通过定义HTML标记如何显示控制网页的格式，使得页面内容和表现分离，简化了网页格式设计，也使得对网页格式修改的更方便。

4.1.3.2.增强了网页的表现力

CSS样式属性提供了比HTML更多的格式设计功能。例如：可以通过CSS样式去掉网页中超链接的下划线，甚至可以为文字添加阴影效果等。

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

将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式混乱。

4.1.4.CSS的编写规则

4.1.4.1.目录结构命名规则

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

4.1.4.2.样式文件的命名规则

在项目初期，会把不同类别的样式存放于不同的CSS文件，是为了CSS的编写和调试的方便；在项目后期，为了网站性能上的考虑，会将不同的CSS文件整合到一个CSS文件中，这个文件一般命名为style，css或css.css。

4.1.4.3.选择器的命名规则

4.1.4.4.CSS代码注释

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

4.1.4.5.CSS代码注释

代码缩进可以保证CSS代码的清晰可读。在实际应用中，可以按一次Tab键来缩进选择器，按两次Tab键来缩进声明和结束大括号。这样排序规则便于查询，避免代码混乱。

4.2 CSS语法基础

4.2.1.CSS基本语法

4.2.1.1.基本语法

selector{property1:value1;property2:value2;property3:value3;...}

选择器 {属性1：属性值1；属性2：属性值2；属性3：属性值3；...}

4.2.1.2.语法说明

（1）选择器。选择器可以是HTML标记名或者属性的值也可以是自定义的标识符。

（2）属性/属性值对。“属性：属性值”必须一一对应，属性与属性值之间必须用“：”连接，每个属性/属性值对之间用分号（；）隔开。

（3）属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(-)分隔，例如背景颜色属性background-color;而在脚本语言中, 对象属性则连写成 backgroundColor。在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。
（4）复合属性。在CSS中有些属性可以表示多个属性的值。如关于文字的设置，有font-family（字体）、font-size（字体大小）、font-style（字体风格），这些可以用一个属性font来表示
（5）多个属性值。在CSS中有些属性可以设置多个属性值，用逗号（，）分隔。例如：

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

标记选择器（也可称为“元素选择器”）即直接使用HTML标记名称作为选择器。它的定义的样式作用于页面中所有与选择器同名的标记。

4.2.2.2.class选择器

class选择器也叫“类”选择器，可以给指定的标签设置一个class属性和class值然后通过class选择器找到对应的标签，为其设置class值，即添加CSS样式。使用class类选择器时，需要用英文（.）进行表示。

4.2.2.3.ID选择器

ID选择器用来对某一元素定义单独的样式。ID选择器只能在HTML中使用一次，针对性更强。定义ID选择器时，需要在id名称前加一个“#‘。

4.2.2.4.伪类选择器

4.2.3.CSS选择器声明

4.2.3.1.集体声明

集体声明代码如下：

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

4.2.3.2.全局声明

全局声明符号“*”，代码如下：

*{
color: red;
font-size: 18px;
}

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

另外，根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使CSS代码变得更加整洁。例如，要让列表项<li>中的<strong>标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器:

4.3 CSS引入方式

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

4.3.1.1.基本语法

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

4.3.1.2.语法说明

（1）标记是指HTML标记，如 p，hl 和 body 等标记:
（2）标记的 style 定义的声明只对自身起作用;
（3）style属性的值可以包含多个声明，每一声明之间用“;”分隔;

（4）标记自身定义的style样式优先于其他所有样式定义。

4.3.2.内部样式表

4.3.2.1.基本语法

I <style type =" text/ess" >
选择器11属性1:属性值1;属性2:属性值2;…
选择器21属性1:属性值1;属性2:属性值2;…选择器n属性1:属性值1;属性2:属性值2;…
</style>

4.3.2.2.语法说明

style标记是成对标记，有1个type属性是指style元素以CSS的语法定义。选择器1，…，选择器n，可以定义n个选择器，再定义声明部分。

4.3.3.外部样式表

4.3.3.1.链接外部样式表

链接式是将所有的样式放在一个或多个以“，css”为扩展名的外部样式表中，通过网的<head></head标签中使用<link>标记将外部样式表文件链接到HTML文档中。

（1）基本语法

<link type="text/css" rel="stylesheet"href="外部样式表名.css"/>

（2）语法说明：

语法中必须指定<link>标记的3个属性，其中href是定义链接外部样式表文件的url可以是相对路径和绝对路径：rel是定义当前文档与被链接文档之间的关系，这里指定stvlesheet.表示被链接的文档是样式表文件；type是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为CSS样式表。
这里面涉及3个属性，rel="stylesheet"规定当前文档与被链接文档之间的关系。type=text/css"规定被链接文档的MIME类型。href="mystyle.css"规定被链接文档的位置，只需要记住这个固定写法即可。

4.3.3.2.导入外部样式表

导入式是将一个独立的CSS文件导入HTML文档中，其是在HTML文档<head>中应用<style>标签，并在<style>标签中的开头处用@import语句，即可导入外部样式表文件。

4.4 CSS的属性单位

4.4.1.长度、百分比单位

4.4.1.1.相对类型

其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。如用cm(当前字母中，字母的宽度)作为属性单位时，将会依据父元素的font-size属性，如果没有父元素，则参考浏览器的默认值字号。

4.4.1.2.绝对类型

绝对类型所使用的单位不会随着显示设备的不同而改变，也就是当属性值使用绝对单位时，不论在哪种设备上显示都是一样的，例如屏幕上的1cm与打印机上的1cm是一样长的。表4-3为浏览器支持的绝对类型的长度单位。

4.4.2.色彩单位

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

在HTML中，使用RGB 概念指定色彩时，前面是一个“#”号，再加上6个十六进制字表示，表示方法为：#RRGGBB，其中，前两个数字代表红光强度（Red），中间两个数代表绿光强度（Green），后两个数字代表蓝光强度（Blue），以上3个参数的取值范围00~f。参数必须是两位数，对于只有1位的参数，应在前面补0。这种方法共可表示256 256×256种色彩，即16M种色彩。而红色、绿色、黑色、白色的十六进制设置值分别#FFO000、#0OFF0O、#0000FF、#000000、#FFFFFF。

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

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

x,y,z分别为红色，绿色，蓝色的值，x,y,z∈[0,225]，亦可以用百分比表示；对比rgba（x,y,z,a)中a是alpha通道设置透明度取值0~1。

4.5.CSS继承与层叠

4.6 元素类型

4.6.1.块级元素

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

4.6.2.行级元素

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

4.6.3.列表项元素

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

4.6.4.隐藏元素

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

第五章 CSS盒模型

5.1盒模型的定义

定义：用来设计和布局HTML元素的概念。

盒子的结构可以看作一个矩形框，包括边框（border）、外边框（margin）、内边距（padding），以及元素内容（content），元素会在指定的高度和宽度范围内在页面上显示出来。

content: 内容区域，包含文字、图片等。
padding: 内边距，内容与边框之间的距离。
border: 边框，围绕在内边距之外。
margin: 外边距，边框与相邻元素之间的距离。

5.2 CSS元素的高度和宽度

5.2.1 盒模型的宽度

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

5.1.2 盒模型的高度

盒模型的高度=上外边距(margin-top)+上边框(border-top)+上内边距(paddingtop)+内容高度(height)+下内边距(padding-bottom)+下边框(border-botom)+下外边距(margin-bottom)。

5.3 边距设置和边框设置

5.3.1 外边距设置

5.3.1.1 上外边距

外边距是指元素与元素之间的距离，外边距设置属性，可分别设置margin-top、margin-right、margin-bottom、margin-left,也可以用 margin 属性一次性设置所有外边距。

5.3.1.2 右外边距

语法:margin-top:length | percent | auto

参数:length包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度。auto 值为自动提取边距值，是默认值。
说明:设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元素的 height 属性或 width属性，或者设定 position属性为 absolute。

5.3.1.3 下外边距

语法:margin-right:length | percent | auto

参数:同 margin-top。
说明:同 margin-top。

5.3.1.4 左外边距

语法:margin-left:length percent参数:同margin-top auto

说明:同 margin-top。

5.3.1.5 外边距

语法:margin:length | percent | auto

参数:length 包括长度值和长度单位，包括绝对单位和相对单位。percent是基于父对象的高度，左右外边距允许使用负数。auto值为自动提取边距值，是默认值。说明:设置对象四边的外边距，包括margin-top(上外边距)、margin-right(右外边距)、margin-bottom 下外边距)、margin-left(左外边距)，外边距始终是透明的。如果只提供1个参数，将应用于全部的外边距。
如果提供2个参数，第1个参数应用于上、下外边距，第2个参数应用于左、右外边距。
如果提供3个参数，第1个参数应用于上外边距，第2个参数应用于左、右外边距，第3 个参数应用于下外边距。

5.3.2 外边距的合并

5.3.2.1 行级元素外边距合并

行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距的总和。

5.3.2.2 块级元素外边距合并

块级元素的盒子相遇，盒子与盒子之间的距离等于两盒子中外边距的较大者。

5.3.3 内边距设置

元素的内边距用来控制边框和内容区之间的空白距离，并非实体，用padding属性表示，类似于HTML中表格单元格的填充属性。内边距(padding)和外边距(margin)很相似，都是透明不可见的，只是内边距和外边距之间还有边框。从语法和用法上来说，内边距的属性与外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性，padding属性接受length 值或 percent值，区别于外边距，内边距不可以使用负值。

5.3.4 边框设置

5.3.4.1上边框

语法:border-top:border-style | border-width border-color。

参数:该属性是复合属性。需要通过参数设置来实现。

5.3.4.2右边框

语法:border-top:border-style l border-width l border-color

参数:该属性是复合属性。需要通过参数设置来实现。

5.3.4.3下边框

语法:border-bottom:border-style l border-width l border-color

参数:该属性是复合属性。需要通过参数设置来实现。

5.3.4.4 左边框

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

参数:该属性是复合属性。需要通过参数设置来实现。

5.3.4.5 边框样式

在CSS中，样式是边框最重要的一个设置，因为如果没有样式，在web页面中边框就不会显示。
border-style是一个复合属性，可以同时取1~4个值，取值方法与外边距相似。边框属性有12个值可选，包括默认(initial)和无边框(none)。

5.3.4.6 边框宽度

在CSS中，宽度是通过border-width属性来设置边框粗细与border-style属性相同，border-width也是一个复合属性。设置边框宽度时，可以直接输人length确定长度值，如5px或2cm，但不可以为负值；或者选择系统预设属性值。

5.3.4.7 边框颜色

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

5.3.5 新增边框属性

5.3.5.1圆角边框

border-radius:设置边框四个角有弧度成为圆角，需要设置相关参数。

5.3.5.2阴影边框

box-shadow:向四个边框添加一到多个阴影，需要设置相关参数。（排列顺序：右偏移量下偏移量阴影宽度阴影颜色）。

5.3.5.3图片绘制边框

border-image：设置所有边框用图片显示，需要嵌入相关图片，但是部分浏览器不支持此属性。

5.4 CSS元素的定位

5.4.1 static 定位

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

5.4.2 relative定位

relative（相对定位）不脱离文档流的布局，需要参照父元素的四条边(不是浏览器)，设置自身的top、night、botom 和left 属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。

5.4.3 absolute定位

5.4.3.1 相对浏览器绝对定位

5.4.3.2 相对父盒子绝对定位

5.4.4 fixed定位

Gxed 类似于absolute，但在固定定位中，盒子的位置不随着滚动条的移动而改变位置相对于浏览器窗口是固定不变的。

5.5 CSS元素的浮动

5.5.1 盒子的浮动添加

语法:float:left l right l none

参数:left 元素浮动到左边，即向左侧靠拢，则右边可以有文字环绕;right元素浮动到右边，即向右侧靠拢，左边可以有文字环绕;默认值none就是标准流通常的显示状态。

5.5.2 盒子的浮动清除

元素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想要清除这种影响，需要使用clear属性完成。（清除盒子浮动造成的影响）
由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最好工具。

语法:clear:left|right|both|none

参数:left清除左边浮动元素，即不允许左边有浮动对象;right清除右边浮动元素，即不允许右边有浮动对象;Both同时清除左右两边的浮动元素，即不允许左右两边有浮动对象;默认值 none。

第六章元素应用CSS

6.1 使用CSS设置字体样式

6.1.1.字体类型

字体样式的常用属性：

font-family：设置字体的类型
font-size：设置字体的大小
font-weight：设置字体的粗细
font-style：设置字体的倾斜
CSS提供font-family属性来控制文本的字体类型。

格式：font-family：字体名称

参数：字体名称按优先顺序排序，以逗号隔开。如果字体名称包含空格，则应用引号括起。

6.1.2.字体大小

在css样式中使用font-size属性设置字体大小，其值可以是绝对值也可以是相对值，常见的有“ px”(绝对位)、“ pt”(绝对单位)、“ em”(相对单位) 和“%”(相对单位) 等。

语法：font-size：绝对尺寸/相对尺寸;

参数：绝对字体尺寸是根据对象字体进行调节的，包括：xx-mall,x-small,small,me. dium, large, x- large 和 xx- large的7种字体尺寸, 这些尺寸都没有精确定义, 只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者 em以相对父元素大小的方式来设置字体尺寸.

6.1.3.字体粗细

6.1.4.字体倾斜

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

6.2.2.行高

6.2.3.文本的修饰.

使用CSS样式可以对文本进行简单的修饰，text属性所提供的text-decoration属性，主要实现文本加下划线、顶线、删除线及文本闪烁等效果。

语法：text-decoration:underline l blink | overline | line-through I none;

参数：underline 为下划线，blink 为闪烁，overline 为上划线，line-through为贯穿线，none为无饰。
说明：设置对象中文本的修饰。对象a、u、ins的文本修饰默认值为underline。对象i、s、del的默认值是 line-through。如果应用的对象不是文本，则此属性不起作用。

6.2.4.段落首行缩进

首行缩进是指段落的第一行从左向右缩进一定的距离，而首行以外的其他行保持不变，其目的是便于阅读和区分文章整体结构。
在Web页面中，将段落的第一行进行缩进，同样是一种最常用的文本格式化效果，在CSS样式中text-indent属性可以方便地实现文本缩进。可以为所有块级元素应用text-indent，但不能应用于行级元素。如果想把一个行级元素的第一行缩进，可以用左内边距或外边距创造这种效果。

语法：text-indent:length;

参数：length 为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。
说明：设置对象中的文本段落的缩进。本属应用于整块的内容。

6.2.5.首字下沉

在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉是指设置段落的第一行第个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。在CSS样式中伪对象“：first-letter”可以实现对象内第一个字符的样式控制。

6.2.6.字符间距

letter-spacing 为字符间距属性，可以设置字符与字符间的距离。

语法：letter-spacing:length I normal;

参数：normal为默认值，定义字符间的标准间距。length 表示由浮点数字和单位标识组成的长度值，允许为负值。
说明：该属性定义元素中字符之间插人多少空白符。如果指定为长度值，会调整字符间的标准间距，允许指定负长度值，这会让字符之间变得更拥挤。

6.2.7.文本的截断

在CSS样式中 text-overflow 属性可以实现文本的截断效果，该属性包含clip和ellipsis两个属性值。前者表示简单的裁切，不显示省略标记（…·)；后者表示当文本溢出时显示省略标记（…）。

语法：text-overflow:clip | ellipsis;

参数：clip定义简单的裁切，不显示省略标记。ellipsis 定义当文本溢出时显示省略标记。
说明：设置文本的截断。要实现溢出文本显示省略号的效果，除了使用 text-overflow眉性以外，还必须配合 white-space:nowrap(强制文本在一行内显示)和 overflow:hidde（溢出内容为隐藏）同时使用才能实现。

6.2.8.文本的颜色

在CSS样式中，对文本增加颜色修饰十分简单，只需添加 color属性即可。color属性的

语法：color:颜色值；

这里颜色值可以使用多种书写方式：
color:red; /*规定颜色值为颜色名称的颜色*/
color:#000000; /*规定颜色值为十六进制值的颜色*/
color:rgb(0,0,255); /*规定颜色值为rgb代码的颜色*/
color:rgb(0%,0%,80%); /*规定颜色值为rgb百分数的颜色*/

6.2.9.文本的背景颜色

在HTML中，可以使用标签的bgcolor属性设置网页的背景颜色。而在CSS里，不仅可以用background- color属性来设置网页背景颜色，还可以设置文本的背景颜色。

语法：background-color;color I transparent

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

6.3 使用CSS设置图像样式

6.3.1.设置图像边框

图像的边框就是利用 border属性作用于图像元素而呈现的效果。在HTML中可以直接通过<img>标记的 border属性值为图像添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置 border 属性值为0时，则显示为没有边框。例如以下代码。
<img src="images/fields. jpg”border="O"> <！--显示为没有边框-->
<img sre= "images/felds. jpg” border="1"> <！--设置边框的粗细为 Ipx-->
<img src="images/fields. jpg" border="2"> <！ --设置边框的粗细为 2px-->
<img sre="images/fields. jpg" border="3” > 
使用这种方法存在很大的限制，即所有的边框都只能是黑色，而且风格十分单一，颜是实线，只是在边框粗细上能够进行调整。如果希望更换边框的颜色，或者换成虚线边框，仅仅依靠HTML都是无法实现。

子主题

6.3.2.图像缩放

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

6.3.3.设置背景图像

在网页设计中，无论是单一的纯色背景，还是加载的背景图片，都能够给整个页面滑来丰富的视觉效果。CSS 除了可以设置背景颜色，还可以用 background-image来设置背景用像。

语法：background-image:url(url) | none;

参数：url表示要插入背景图像的路径。nome表示不加载图像。
说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到<baby>标签中。

6.3.4设置背景重复

背景重复（background-repeat)属性的主要作用是设置背景图片以何种方式在网页中示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节大小。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只者沿着一个方向平铺，可以使用 background-repeat属性来控制。

语法：background-repeat:repeat | no-repeat | repeat-x I repeat-y;

参数：repeat表示背景图像在水平和垂直方向平铺，是默认值；repeat-x表示背景图在水平方向平铺；repeal-y表示背景图像在垂直方向平铺；no-repeat表示背景图像不平制。
说明：设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像。

6.3.5.背景图像定位

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

关键字参数的取值及含义如下：
top：将背景图像同元素的顶部对齐。
bottom：将背景图像同元素的底部对齐。
left：将背景图像同元素的左边对齐。
right：将背景图像同元素的右边对齐。
center：将背景图像相对于元素水平居中或垂直居中。

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

长度参数可以对背景图像的位置进行更精确的控制，实际上定位的是图像左上角相对于
元素左上角的位置。

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

使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置对齐。也就是说，百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长度单位定位时，使用背景图像和元素的左上角为对齐基点。

6.4 使用CSS设置表单样式

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

6.4.1.1.修饰文本域

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

6.4.1.2.修饰按钮

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

6.4.1.3.制作登录表单

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

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

7.1 CSS链接的美化

7.1.1.文字链接的美化

在HTML5中，<a></a >标签始终定义超链接，用于从一张页面链接到另一张页面。<a> 元素最重要的属性是href属性，它指示链接的目标，如果未设置href属性，后续多个属性均无法使用，则只是超链接的占位符。设计者为了改变这种最基本的超链接样式，利用前面章节所讲的伪类选择器，按照“a: link→a: visited→ a: hover→a: active→”的顺序，设置不同的链接访问状态效果，为文本超链接添加复杂而多样的样式。

7.1.2.按钮链接的美化

为了让链接外观看起来像按钮特效，设计者会为链接加上不同的边框阴影和相同的背景颜色加以实现。

7.1.3背景链接的美化

除了文字链接和按钮链接，设计者还会为链接设置不同的背景颜色或背景图片，实现背景链接。

7.2 CSS列表的美化

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

在css样式中，主要是通过 list-style-type、list-style-image 和 list-style-position这三个属性改变列表修饰符的类型

此属性用来设置或检索对象的列表项所使用的标记类型。若 list-style-image属性值为none或指定 url 地址的图片不能被显示时，此属性将发生作用。常用的 list-style-type 属性值：

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

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

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

这个属性是设定列表项样式的一个快捷的综合写法。用这个属性可以同时设置列表项类型属性（list-style-type)，列表项图片属性（list-style-image），和列表项位置属性（list-style-position）。

语法：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属性设置表格的边框是否被合并为一个单一的边框，还是按照标准的HTML中那样分开显示。

语法：border-collapse：separate | collapse | inherit

参数：separate是默认值，边框分开不合并，不会忽略border-spacing和empty-cells属性。collapse边框合并，如果相邻，则共用一个边框，会忽略border-spacing和empty-cells属性。 Inherit是从父元素继承值。

7.3.2..border-spacing

border-spacing属性作用等同于标签属性cellspacing，即当表格边框独立时(border-col- lapse 属性等于separate)，相邻单元格边框之间的横向和纵向的间距。

语法:border-spacing:length

参数:length由数字和单位组成的长度值，不允许负值。如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。如果只提供一个length值时，这个值将同时作用于横向和纵向上的间距。

7.3.3.caption-side

caption-side属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption 标签同时使用。

语法:caption-side: top | right | bottom | left

参数:top是默认值，指定标题在表格上边。right指定标题在表格右边。bottom 指定标题在表格下边。left指定标题在表格左边。

7.3.4.empty-cells

empty-cells属性设置或检索当表格的单元格无内容时，是否显示该单元格的边框。只有当表格边框独立时(即border-collapse属性等于separate)此属性才起作用。

语法:empty-cells: show | hide

参数:show是默认值，指定当表格的单元格无内容时，显示该单元格的边框。hide指定当表格的单元格无内容时，隐藏该单元格的边框。

7.4 多媒体的添加与美化

7.4.1.<embed>标签的使用

利用<embed>标签可以在网页中插入各种类型的多媒体文件，但是在使用<embed>标签之前，需要安装相应的插件，否则多媒体文件不能正常播放。

7.4.2.<bgsound>标签的使用

<bgsound>是IE浏览器中设置网页背景音乐的元素，利用它可以将音乐文件放入到网页中又不占页面空间，可以播放的声音文件格式包括MAV,AU,MIDI,MP3等。

7.4.3.HTML5新增的多媒体标签

7.4.3.1.<audio>标签

<audio>标签定义声音，比如音乐或其他音频流，此标签默认是隐藏的。

7.4.3.2.<video>标签

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

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

8.1 水平顶部导航栏

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

8.1.1.1导航栏的创建

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

例如，在<nav>的首尾标签之间使用无序列表<ul>标签配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接，用户可根据实际情况改成具体的URL地址。

8.1.1.2 列表样式的设计

此时会带有<ul>元素的默认样式，即每一列表选项前面有实心点标记，可以利用CSS在<head>标签中进行声明，对列表样式进行改变。

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

8.1.1.3 超链接样式的设计

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

8.1.1.4 鼠标事件

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

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

8.1.2.1导航栏的创建

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

8.1.2.2 列表样式的设计

带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用CSS在<head>标签中进行证明，对列表样式进行改变。同样，使用 list-style-tyle 属性去掉默认属性，设置 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 ，使得超链接成为块级元素，这样才可以为超链接设置像素的宽度。

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

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

8.2.2.1 导航栏的创建

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

8.2.2.2 DIV样式的设计

列表已经去掉了实心点标记和数字，整个div宽度为150像素，边框为1像素的红色实线，背景颜色为淡绿色，“所有商品分类”大标题为16像素的白色字体,并相对 div居中对齐。

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进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

第九章 DIV+CSS布局

9.1 DIV+CSS概述

9.1.1 认识DIV

div 标签在Web 标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以<div></div>的形式存在，中间可以放置任何内容，包括其他的 div标签。
但是在没有CSS 的影响下，每个div标签只占据一行，即一行只能容纳一个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使用选择器设置宽高

把CSS样式改为选择器形式

9.1.2.4 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元素的嵌套

传统的表格布局中，搜索引擎如果遇到多层表格嵌套时，可能抓取不到3层以上的内容，或者会跳过嵌套的内容直接放弃整个页面。
而DIV+CSS布局则不会存在这样的问题，为了实现复杂的布局结构，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 简单性

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

10.1.1.2 动态性

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

10.1.1.3 跨平台性

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

10.1.1.4 安全性

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

10.1.1.5 基于对象的语言

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

10.1.2 JavaScript入门案例

JavaScrip 程序不能独立运行，必须依赖 HTML文件，通常将JavaSenipt代码放置在script 标记内，由浏览器 JavaScript脚本引擎来解释执行。
语法：<script type ="text/javascript">
//(JavaScrijpt 代码)
</script>
说明：
script标记是成对标记，以<script>开始，以</script>结束。type 属性说明脚本的类型，属性值“text/javascnipt”意思是使用Javascript编写的程序是文本文件。script标记既可以放在HIML的头部，也可以放在HTML的主体部分，只是装载的时间不同。

10.1.3 JavaScript放置的位置

10.1.3.1 head标记中的脚本

script标记放在头部head标记中，通JavaScript代码必须定义成函数形式，并在主体body标记内调用或通过事件触发。放在head标记内的脚本在页面装载时同时载入，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。
语法：function functionname(参数1，参数2，.…，参数n）{
函数体语句；
}
说明：
JavaScript 自定义函数必须以 function 关键字开始，然后给自定义函数命名，函数命名时一定遵守标识符命名规范。函数名称后面一定要有一对括号“（）”，括号内可以有参数，也可以无参数，多个参数之间用逗号“，”分隔。函数体语句必须放在大括号“（）”内。

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 事件处理代码中的脚本

JavaScript代码除了上述三种放置位置外，还可直接写在事件处理代码中。

10.2 JavaScript语法

10.2.1 语法基础

10.2.1.1 区分大小写

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

10.2.1.2 变量不区分类型

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

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

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

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

注释就是对代码的解释和说明，目的是为了让别人和自己容易读懂程序。JavaSeript的
注释形式与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 =0,amount=100; //一条语句中的变量声明和初始化

10.2.2.3 变量类型

JavaScript有6种数据类型，主要的类型有 Number 数值型、String字符型、Object对象以Boolean 布尔型，其他两种类型为Null 和Undefined
(1） Number 数值型。JavaScript支持整数和浮点数。整数可以为正数。0或负数：浮点食包含小数点，例如3.53、-534.87等都是浮点数。浮点数还可以采用科学计数法进行表、如3.5EI5表示3.5×10”。

（2）String字符型。字符型数据又称为字符串型，由若干个字符组成，并且用单引号或双引号封装起来，例如：”你好！" " this is string" "学习语言”。
在使用字符串的过程中，有时会遇到一种情况：在一个字符串中需要使用单引号或双引号。正确的方法是在由双引号标记的字符串中引用字符时使用单引号，在由单引号标记的字符串中引用字符时使用双引号，即单引号、双引号必须成对使用相互包含，但不能交叉。
例如：
"热烈欢迎参加'JavaScript技术'研讨的专家"； //正确的用法
"学习不是一件容易”的事件"； //错误的用法
（3） Boolean 布尔型。Boolean 值有 true 和false，这是两个特殊值，可以将他们转操为其他类型的数据，例如可将值为true 的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整0。但不能用tne 表示1或false 表示0。
（4）Undefined数据类型。JavaScript会对未赋值变量赋值为 undefined。
（5）Null 数据类型。这是一个对象，但是为空。因为是对象，所以 typed mIl 返"Objce!"，注意null 是Javascript 保留关键字。
（6）Object类型。除了上面提到的各种常用类型外，对象类型也是JavaSpe中的重要的组成部分。

10.2.3 运算符与表达式

10.2.3.1 算术运算符和表达式

算术运算符负责算术运算，用算术运算符和运算对象（操作数）连接起来符合规则的式子，称为算术表达式。

10.2.3.2 关系运算符和表达式

关系运算符用于比较运算符两端的表达式的值，确定二者的关系，根据运算结果返回一个布尔值。用关系运算符和操作数连接起来符合规则的式子，称为关系表达式。

10.2.3.3 逻辑运算符和表达式

逻辑运算符用来执行逻辑运算，其操作数都应该是布尔型数值和表达式或者可以转为布尔型的数值和表达式，其运算结果返回true或false。用逻辑运算符和操作数连接起来符合规则的式子，成为逻辑表达式

10.2.3.4 赋值运算符和表达式

赋值运算符是JavaScript中使用频率最高的运算符之一。赋值运算符要求其左操作数是个变量、数组元素或对象属性，右操作数是一个任意类型的值，可以为常量、变量、数组元家或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和操作数迩接起来符合规则的式子，称为赋值表达式。

10.2.3.5 条件运算符和表达式

条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成。
语法：变量=表达式1？表达式2：表达式3
说明：
该条件表达式表示，如果表达式1的结果为真（true)，则将表达式2的值赋给变量，
否则将表达式3的值赋给变量。例如，变量 mumber 1、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 条件分支语句

if--else 语句完成了程序流程块中分支功能：如果其中的条件成立，则程序执行紧接着条件的语句或语句块；或者；程序执行else中的语句块。其语法如下：

{
/*条件为真执行的语句*/
}
else
{
/*条件为假执行的语句*/
}
if--else 语句还有一些变形语句。例如，只有部分省略else分支的语句； if… else if….else…多分支语句等。
switch分支语句可以根据一个变量或表达式的不同取值采取不同的处理方法，其语法如下：

switch(表达式)
{
case case1:执行语句1;break;
case case2:执行语句2;break;
case case3:执行语句3;break;
default:默认执行语句;
如果表达式取的值同程序中提供的任何一条语句都不匹配，将执行defanlt中的语句。关键字break 会使代码跳出 switch 语句，如果没有关键字 break，代码就会继续进入下一个case分支。

10.2.4.2 循环语句

JavaScript中的循环用来控制同一段代码执行的次数。for语句是最基本的循环语句，语法如下:

for(变量=开始值；变量<=结束值；变量=变量+步进值）
{
/ *循环体语句 */
}
只要循环的条件成立，循环体就被反复的执行。
for...in 语句与C#中foreach（）语句很像，它循环的范围是一个对象所有的属性或是个数组的所有元素。for…in语句的语法如下：

for(变量in对象或数组)
{
/ *循环体语句 */
}
while 语句所控制的循环，不断地测试条件，如果条件成立，则一直循环，直到条件不在成立。其语法如下：

white（条件）{

/*循环体语句*/
}
do… while 语句表示先执行循环体语句一次，再判断条件是否成立，如果条件还成立，
则再执行循环体语句，直到条件不再成立。其语法如下：

do
{
/*循环体语句*/
}
while(条件）;
break 语句结束当前的各种循环，并执行循环的下一条语句。例如：

var i=0;
for(i=0;i<=5;i++){
if(i==3){
break;
}
document. write("The number is" + i +"<br/>");
}
输出结果为:

The number is 0
The number is 1
The number is 2
continue 语句结束当前的循环，并开始下一轮循环。例如：

var i=0;
for(i=0;i<=5;i++){
if(i==3)continue;
document. write("The number is"+ i +"<br/>);
}
输出结果为

The number is 0
The number is 1
The number is 2
The number is 4
The number is 5

10.2.5 函数

10.2.5.1 定义函数

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

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

10.2.5.2 函数返回值

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

function sum(a,b)
{
x=a+b；
return x；
}
JavaScript中的函数无须对函数的返回值进行申明，直接使用 retum，返回值的类型可以是本节提到的6种类型中的任意一种。

10.2.5.3 函数调用

函数的调用很简单，可以通过其名字加上括号中的参数进行调用。如调用上面的sum函数，可以这样写：sum（5，8）。

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

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

10.3.1.2 属性

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

<script type="text/javascript">
var str = Hello World!;
document. writeln( str. length);
</script>
以上示例定义了一个字符串变量，其实字符串也是一个对象，length作为str对象的属性用来取得字符串的长度。
JavaScript 内建对象的属性可以参阅相关的技术文档，当然在Visual Studio平台中由于有智能感应功能，就可以很方便地访问对象的属性。
访问用户自定义对象属性的方式和访问JavaScript内建对象的属性方式是一样的，例如：

var person= new object();
person.birthday ='1982-09-09';
属性是通过对一个已有对象的新属性进行赋值的方式来创建的，前面提到声明变量时通
常用关键字var，但是创建对象属性和赋值时不使用var。

10.3.1.3 方法

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

var str =Hello World!
document. writeln(str.toUpperCase());
运行结果为：

HELLO WORLD!
以上示例使用了字符串对象的toUpperCase（）方法，其功能是将str字符串全部转变为写字母。

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个像素。

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对象的属性应用和浏览器的关系比较密切，所以在应用这些胜时，一定要注意浏览器之间的兼容性。

10.4 JavaScript事件

10.4.1 事件及事件处理

JavaScript中的事件是可以被 JavaScript侦测到的行为。网页中的每个元素都可以产生某
些可以触发JavaScript函数的事件。例如，在用户单击页面中某按钮时产生一个 onClick事
件。事件可以是用户在某些内容上的单击、鼠标经过特定元素或按下了键盘上的按键；也可
以是某个Web页面加载完成、用户改变了窗口的大小或是滚动了窗口等。
事件处理是对象化编程的一个重要环节，JavaScript会为特定文档元素的特定类型事件
注册一个事件处理程序，该处理程序可以是个函数，也可以是一段代码。事件处理的过程可
以这样表示：发生事件→启动事件处理程序→事件处理程序做出反应。其中，要使事件处理
程序能够启动，必须先告诉对象发生了什么事情，要启动什么处理程序。事件的处理程序可
以是任意JavaScript语句，但是一般用特定的自定义函数来处理。
指定事件处理程序有三种方法：

（1）直接在HTML标记指定。

（2）编写特定对象特定事件的JavaScript。

一般形式：<script language="JavaScript" for="对象" event="事件">

（3）在JavaScript中说明。

一般形式：<主角事件-对象>.<事件>=<事件处理程序>;

10.4.2 常用事件

对于事件的类型，随着HTML5的出现和发展，又新增了HTML5事件、设备事件、触摸事件、手势事件等各种事件，感兴趣的读者可查阅相关资料，本书中不再一一列举。

10.4.3 事件应用举例

事件的应用常见于下面几种场景：鼠标单击某一元素、页面或图像载入、鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键等。下面通过几个示例来学习事件的具体应用。