网页设计与制作教程

2024-12-26 11:40:56   0  举报





AI智能生成

"网页设计与制作教程"是一本深入浅出地讲解网页设计基础知识和实践技巧的参考书。它涵盖了HTML、CSS和JavaScript等核心语言，以及响应式设计、用户体验设计等现代网页设计概念。书中提供了丰富的实例和练习题，帮助读者快速掌握网页设计与制作的技能。无论是初学者还是有一定基础的网页设计师，都可以从这本书中受益匪浅。通过本书的学习，读者可以设计出功能强大、界面美观的网页，为互联网用户提供优质的浏览体验。

网页设计

大学

思维导图

作者其他创作

大纲/内容

第六章元素应用CSS

6.1 使用CSS设置字体样式

6.1.1.字体类型

格式如下：fonl-family:宇体名称

参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。
说明：用 font-family 属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows 系统，其字体名就如 Word中的“字体”列表中所列出的字体名称。

6.1.2.字体大小

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

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

6.1.3.字体粗细

语法：font-weight:bold I number I normal I lighter/100-900;

参数：normal 表示默认字体，bold 表示粗体，bolder 表示粗体再加粗，ligiter表示比赛字体还细，100~900共分为9个层次（100、200、…·、900，数字越小字体越细、数字越大，字体越粗，数字值400相当于关键字 normal，700等价于bold)。
说明：设置文本字体的粗细

6.1.4.字体倾斜

语法：font-style;normallitalicloblique;

参数：nommal为“正常”（默认值)，italic为“斜体”，oblique 为“倾斜体”。
说明：设置文本字体的倾斜

6.2 使用CSS设置文本样式

6.2.1.文本水平对齐方式

使用 text-align属性可以设置元素中文本的水平对齐方式。语法：tert-align:left | right | center | justify;

参数：left 为左对齐，right为右对齐，center为居中，justify 为两端对齐
说明：设置对象中文本的对齐方式

6.2.2.行高

段落中两行文本之间垂直的距离称为行高。在HTML中是无法控制行高的，在CSS样式中，使用line-beight属性控制行与行之间的垂直间距。语法：line-beigh;lenghl normal;

说明：设置对象的行高。（height大于或者等于100）

6.2.3.文本的修饰

使用CSS样式可以对文本进行简单的修饰，lext属性所提供的text-decoration属性，主要实现文本加下划线、顶线、删除线及文本闪烁等效果。语法：et-decoration:underlinel blink| overline | line-through I none;

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

6.2.4.段落首行缩进

语法：text-indent:length;

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

6.2.5.首字下沉

在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉是指设置段落的第一行第个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。

在CSS样式中伪对象“：first-letter”可以实现对象内第一个字符的样式控制。（伪类选择器：）（会跟行高冲突）

6.2.6.字符间距

letter-spacing 为字符间距属性，可以设置字符与字符间的距离。语法：letar-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);
color:rgb(0%,0%,80%);

/*规定颜色值为颜色名称的颜色*/
/*规定颜色值为十六进制值的颜色*/
/*规定颜色值为rgb代码的颜色*/
/*规定颜色值为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时，则显示为没有边框

6.3.2.图像缩放

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

6.3.3.设置背景图像

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

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

6.3.4设置背景重复

背景重复（background-repeat)属性的主要作用是设置背景图片以何种方式在网页中示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节大小。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只者沿着一个方向平铺，可以使用 background-repeat属性来控制。语法：background-repeat:repeat 1 no-repeat 1 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 属性，后续多个属性均无法使用，则只是超链接的占位符。
在谷歌浏览器中，鼠标悬停链接时无明显效果，其余链接的默认外观如图7-1所示。设计者为了改变这种最基本的超链接样式，利用前面章节所讲的伪类选择器，按照'a:link→a:visited→a:hover→a:active→”的顺序，设置不同的链接访问状态效果，为文本超链接添加复杂而多样的样式

7.1.2.按钮链接的美化

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

7.1.3背景链接的美化

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

7.2 CSS列表的美化

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

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

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）

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>和有列表<al>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接就址当前设置为空链接

8.1.2.2 列表样式的设计

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

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

为了使有序列表的二级菜单隐藏起来，需要设置display 属性为 none。

为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block。

为了二级菜单能在从属的一级菜单正下方显示，需要设置二级菜单的绝对定位及一级菜
单的相对定位

8.1.2.4 DIV样式的设计

普通的纵向导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级
速。区别于水平导航栏，纵向导航栏不需要设置列表选项<li>的浮动属性。
在<nav>的首尾标签之间使用<div>标签创建菜单范围，结合无序列表<ul>标签和列表选
项>标签创建菜单选项（空格：下一级）

8.1.2.5 超链接样式的设计

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

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 宽高属性

9.1.2.2 div标签内直接设置宽高

9.1.2.3 div使用选择器设置宽高

把CSS样式改为选择器形式

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

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧

由于用户的计算机显示屏分辨率不同，因此在布局页面时，要充分考虑页面内容的布局宽度情况，并保证页面整体内容在页面居中。一旦内容宽度超过显示宽度，页面将出现水平滚动条。应尽量保证网页只有垂直滚动条，才符合用户的习惯，所以高度不需要考虑，一般都是由页面内容决定网页高度即可。

网页设计与制作教程又因为浏览器的兼容情况，所以在布局页面前，设计者一定要把页面的默认边距清除。传统的表格布局时，可以使用属性“align：center；”设置表格居中问题，但是DIV的居中
是没有属性可以设置的，只能通过CSS样式控制其位置。使div元素水平居中的方法有多种，常用的方法是用CSS设置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-mai是视觉集中点，放置主要内容，div-right是表单或链接等。而左中右三个区域一并被包含在一个大的div-all中。

9.3.2 上中下布局

上中下布局符合许多网站共同的特点，即div-top是导航或者横幅广告，diw-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依赖测览器,与操作环境无关,只要能运行浏览器的计算机、支持 JavaScn 的浏览器就可以正确执行。

10.1.1.4 安全性

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

10.1.1.5 基于对象的语言

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

10.1.2 JavaScript入门案例

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

说明:
script标记是成对标记,以<script>开始,以</script>结束。type属性说明脚本的类型,属性值"text/javascript"意思是使用Javascript编写的程序是文本文件。script标记既可以放在HIML的头部,也可以放在HTML的主体部分,只是装载的时间不同。

10.1.3 JavaScript放置的位置

10.1.3.1 head标记中的脚本

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

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 变量不区分类型

JavaScript中变量声明,采用其弱类型,即变量在使用前无须进行变量数据类型声明,而由解释器在运行时检查其数据类型,根据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、33com、case、switch等。

10.2.2.2 变量声明

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

变量声明格式如下:
var count;//单个声明var count,amount,level;//用单个var关键字声明的多个变量lvar count=0amount=100;//一条语句中的变量声明和初始化
var count,amount,level;//用单个var关键字声明的多个变量
var count=0amount=100;//一条语句中的变量声明和初始化

10.2.2.3 变量类型

JavaScript有6种数据类型,主要的类型有Number数值型、String 字符型、Object对象，以及Boolean 布尔型,其他两种类型为Null和Undefined。

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的值赋给变量。例如,变量number l、number2比较大小,将较大的数赋值给变量max,

10.2.3.6 逗号运算符和表达式

逗号运算符是一个二元运算符,逗号运算符的优先级最低,由逗号运算符和操作数连接起来符合规则的式子,称为逗号表达式,其运算规则是先计算第一个表达式的值,再计算第二个表达式的值,依次类推,计算完所有表达式的值,运算结果为最后一个表达式的值

10.2.4 程序设计

10.2.4.1 条件分支语句

if···else语句完成了程序流程块中分支功能:如果其中的条件成立,则程序执行紧接着条件的语句或语句块;否则;程序执行else中的语句或语句块。

10.2.4.2 循环语句

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

10.2.5 函数

10.2.5.1 定义函数

由事件驱动或当它被调用时执行的可重复使用的代码块称为函数,将脚本编写为函数,这样就可以实现按需调用相应的代码函数。
函数在页面起始位置定义,即网页的$1\lt head\gt $部分或定义在外部JS文件里面,然后进行外部调用。

function 函数名（var1，var2，var3）

{

/*函数代码*/

}

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

10.2.5.2 函数返回值

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

function sum（a，b）

{

x=a+b；

return x；

}

return返回，返回值的类型有六种。

10.2.5.3 函数调用

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

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述

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

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

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

10.3.1.2 属性

属性是对象的特性值的表述

10.3.1.3 方法

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

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（）打开新窗口。

（3）关闭窗口。用close（）关闭窗口。

（4）系统对话框：alert（），confirm（），prompt（）。

（5）history历史对象：back（）后退，forward（）前进，go（）在历史的指定范围内指定的URL访问地址

10.3.2.2 document对象

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

（1） document对象属性。

（2）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 事件及事件处理

指定事件处理程序有三种方法：

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

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

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

（3）在JavaScript中说明。

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

10.4.2 常用事件

10.4.3 事件应用举例

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

第一章网页基础知识

1.1 认识网页和网站

1.1.1 网页、网站

1.1.1.1 网页

是由多行 HTML 代码和一个界面组成，又称Web页，实际上是一个文件，里面可以包含文字、图像、声音、视频等信息。网页可以看成是网站的一个元素，是用户访问网站时最直接接触到的部分

1.1.1.2 网站

Web网站也称网站，www信息是由无数的Web站点组成的，是一个存放网络服务器上的完整信息的集合体，它包含一个或多个网页。这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果

1.1.1.3 常用术语

1.1.2 静态网页和动态网页

1.1.2.1 静态网页

指客户端与服务器端不发生交互，访问者只能被动地浏览网站建设者提供的网页内容。其特点是网页内容不会发生变化，除非网页设计者修改了网页的内容，信息流向是单向的

1.1.2.2 动态网页

指浏览器可以和服务器数据库进行实时数据交流的交互网页。动态网页可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等，信息流向是双向的

只有HTML、CSS是静态网页，加了JavaScript是动态网页

1.2 网页的基本构成元素

1.2.1 文本

文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体

1.2.2 图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片

1.2.3 超链接

超链接技术是WWW流行起来的最主要的原因

1.2.4 音频视频

音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3

1.2.5 交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端

1.2.6 其他常见元素

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮Javaserip与Activex等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上好乐、电子商务等方面也有着不可忽视的作用

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

每一个网站都有一个主色调（常见色调：红色、蓝色、绿色）

1.4 Web前端技术简介

1.4.1 初识Web前端

Web前端即指平时上网浏览的网页，如上网浏览新闻，查询快递信息，淘宝购物等都是在浏览网页

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 浏览器

1.4.3.2 网页编辑器

1.4.3.3 切图软件

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

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

1.5.1.2 超文本

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

1.5.1.3 标记

由一系列成对出现的元素标签嵌套组合而成。这些标签用“<”和“>”括起来。它们称为标记也称标签

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>…</ head>，HTML 文档包括头部( head) 和主体( body)。HTML 文档头标签的格式为< head>头部的内容</ head>，文档头部内容在开始标签<html>和结束标签</html>。

1.5.2.3 文档编码

文档编码基本形式如下：<metacharset="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>标签

定义：页面标题标签，这个标签只能应用于<head>与</head>之间。<tite>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。页面标题标签。它将HTM文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<tite>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。

基本形式：<title>标题<\title>

1.7.2 <meta>标签

1.7.2.1 keywords

定义：是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。

基本形式：<meta name="keywords" content="xxx"/>

1.7.2.2 description

定义：用来告诉搜索引擎网站主要内容

基本形式：<meta name="description” content="xxx"/>

1.7.3 <link>标签

定义：用来链接外部资源和当前HTML文档（引入“xxx”文件）。

基本形式：<link rel="stylesheet" href="css/index.css" type="text/css"/>

1.7.4 <script>标签

定义：脚本标签，用于HTML文档定义客户端脚本信息。

基本形式·：<script src="js/index.js" type="text/javascript"></script>

1.8 HTML5文档注释和特殊符号

1.8.1 注释

为增加 HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5 使用<！--->标签为文档进行注释，注释标签以“<！--”开头，以“-->”结束，中间的“….”替换为注释文字内容即可。<！--...-->标签支持单行和多行注释

快捷键：Ctrl+斜杠键

基本形式：

1.8.2 特殊符号

由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。
常用的特殊符号及对应的字符，这些字符实体都以“&”开头，以“；”结尾。

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

2.1 文字与段落排版

2.1.1 段落标签

段落标签的语法为:<p align="leftlcenterlright">文字</p>

2.1.2 标题标签

标题文字标签的格式为:<h #align="leftlcenterlright">标题文字</h#>

2.1.3 换行标签

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

2.1.4 水平线标签

水平线标签的格式为:<hr align="left|centerlrght"size="横线粗细"width="横线长度"color="横线色彩"noshade ="noshade" />

2.1.5 预格式化标签

展示空格和标签，换行

2.1.6 缩排标签

缩排标签的语法为:<blockquote>文本</blockquote>

2.1.7 案例

2.2 超链接

2.1.1 超链接简介

2.1.1.1 超链接的定义

所谓超链接(Hyperink)，是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至一个应用程序

2.1.1.2 超链接的分类

根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等

2.1.1.3 路径

2.2.2 超链接的应用

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

HTML 使用<a>标签来建立一个链接，通常<a>标签又称为锚。建立超链接的标签以<a>开始，以</a>结束

2.2.2.2 指向其他页面的超链接

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

2.2.2.3 指向书签的超链接

2.2.2.4 指向下载文件的超链接

2.2.2.5 指向电子邮件的超链接

2.3 图像

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

2.3.1.1 常见的网页图像格式

GIF、JPEG、PNG

2.3.1.2 使用网页图像的要点

(1) 高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选图像不要超过8KB，如必须选用较大图像时，可先将其分成若干小图像，显示时再通过将这些小图像拼合起来。
(2) 网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。
(3) 如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到文件所在的位置。例如，文件X. Y与A 文件夹在同一目录下，那么文件B. A在目录 A下的B文件夹中，它对于文件X. Y 的相对路径则为A/B/B.A。

2.3.2 图像标签

2.3.2.1 图像的替换文本说明

在HTML中，用<img>标签在网页中添加图像，图像是以嵌入的方式添加到网页中能图像标签的格式:
<img src="图像文件名"alt="替代文字 tile="鼠标悬停提示文字"width="图像宽度" height="图像言度"border="边框宽度"align="环绕方式|对齐方式"/>

2.3.2.2 设置图像大小

在HTML中，通过img标签的属性width和height来调整图像大小，其目的是通过图像的高度和宽度加快图像的下载速度。默认情况下，页面中显示的是图像的原始大小，如果不设置width和height属性，浏览器就要等到图像下载完毕才显示网页，因此延缓其他页面元素的显示。比例很重要
width和height的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比

2.3.2.3 图像的边框

在网页中显示的图像如果没有边框，会显得有些单调，可以通过img标签的borde跳为图像添加边框，添加边框后的图像显得更醒目、美观

2.3.3 图像超链接

图像也可作为超链接热点，单击图像则跳转到被链接的文本或其他文件。语法:< img src="图像文件名"/>例如，制作产品图像的超链接

2.3.4 设置网页背景图像

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

2.3.5 图文混排

图文混排技术是指设置图像与同一行中的文本、图像、插件或其他元素的对齐方式制作网页时往往要在网页中的某个位置插入一个图像，使文本环绕在图像的周围。img标的ahin 属性用来指定图像与周围元素的对齐方式，实现图文混排效果

2.4 列表

2.4.1 无序列表

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

在<ul>后指定符号的样式，可设定直到</ul>的加重符号

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

在<i>后指定符号的样式，可以设置从该<li>起直到</ul>的项目符号。（就近原则）

2.4.2 有序列表

有序列表是一个有特定顺序的列表项的集合。在有列表中，各个列表项有先后顺岸之分，它们之间以编号来标记。使用<ol>标签可以建立有序列表，表项的标签仍为<li>

2.4.3 定义列表

定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一列实物以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML标签:<dl>标签<dt>和<dd>标签。

2.4.4 嵌套列表

所谓嵌套列表，就是无序列表与有序列表出嵌套混合使用

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

3.1 表格概述

3.1.1 表格的结构

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

3.1.2 表格的基本语法

在HTML中，常用表格主要通过5个标记来构成:<table>，<caption>，<th>，<tr>和<td>

3.2 表格属性的设置

3.2.1 表格边框属性

设置表格标记中的边框属性可以改变表格的外观。表格边框属性如表3-3所示。表中的属性同样适用于单元格。
语法:<table border="" bordercolor=" " bordercolorlight=" " bordercolordark = " " >...</table>

3.2.2 表格的宽度和高度属性

通过设置width属性和height，属性可以设置表格的宽度和高度,
语法:<table width =" height=" " >… </table>

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

设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。
语法:<table bgcolor= " " background = " " >·..</table>

3.2.4 表格边框样式属性

设置表格标记中的frame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。
语法:<table frame="" rules="">……内容….</table>

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

单元格间距：设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔，使网页中的表格内容稍微松散一些。语法:
<table cellspacing=" " cellpadding= " "</table>
(1)cellspacing。值的单位为像素或百分比，默认值为2px。
(2)cellpadding。值的单位为像素或百分比，留白

3.2.6 表格水平对齐属性

通过设置表格标记的align属性，可以设定表格在水平方向上的对齐方式。对齐方式有居左、居中、居右3种。
语法:<table align =" leftl center | right" >…</table>
说明:align属性的取值可以为left(默认居左)、center(居中)和right(居右)。

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

表格行tr标记的属性用于设置表格某一行的样式，其属性设置如表3-5 所示
通过t标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐居中对齐和居右对齐。通过t标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。
语法:<table align = " center" >
<tr align=" left | center | right" valign=" top l middle l bottom" >

td>....·.</td>
</tr>
.....

</table>

3.2.8 设置单元格的属性

表格的列(td)标记的属性可以设置表格单元格的显示风格。d标记常用的属性如表3-6 所示。(就近原则)

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

3.2.9.1 单元格跨行

使用单元格td标记的 rowspan（行）属性可以设置单元格跨行合并。
语法:<ld rwspan="行教" >…</d>
说明:mowspan属性可以设置单元格跨行。通过rowspan="n”(n是正整数)，可以设置某一单元格跨n行，当前行下的n-1行内的单元格数量都需要减少一个，即少定义一个td 标记。

3.2.9.2 单元格跨列

使用单元格td标记的colspan（列）属性可以设置单元格跨列合并。
语法:<td colspan="列数">…</td>
说明:colspan属性可以设置单元格跨列。通过colspan="n"(n是正整数)，可以设置某一单元格跨n列，当前行内的单元格数量需要减少n-1个，即删除n-1个td标记。

3.3 表格嵌套

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

3.4 表单

3.4.1 表单标记

表单fomm 标记为成对标记，以<form>开始和</form>结束。表单定义了采集数据的范围，其所包含的数据内容将被完整地提交给服务器。

3.4.2 定义域和域标题

利用eldset标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行分组，Geldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到eldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果或者可创建一个子表单来处理这些元素。legend标记为eldset标记定义域标题

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

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

设置input标记的type 属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输人任意类型的数据，但是输人的数据只能单行显示，不能换行。
语法:<input name=" " type= " text" maxlength=" " size=" " value=" " readonly/>

3.4.3.2 密码输入框

设置input 标记的type属性值为password，可以实现向表单中插人一个密码输入框。密码输人框中可以输入任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“·”所取代，这样设计可以保障用户输人的密码不被泄露。
语法:<input name = " " type=" password" maxlength =" " size = " " />

3.4.3.3 复选框

设置 input标记的type 属性值为checkbox（复选框），可以实现向表单中插入一个复选框，用户利用复选框在网页上设置多项选择。checked:默认勾选选项。
语法:<input name=" " type=" checkbox" value = " " checked/>

3.4.3.4 单选按钮

设置input标记的type属性值为radio（单选按钮），可以实现向表单中插入一个单选按钮，用户可利用单选按钮在网页上为某一选择设置多个单选项。checked:默认勾选选项。
语法:<input name=" " type= " radio" value =" " checked/>

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 重置按钮

设置impu标记的type属性值为reset（重置）,可以实现向表单中插人一个重置按钮，重置按钒用于将表单中所有的输入信息清空，然后让用户可以重新填写。
语法:<input name =" " type = " reset" value = " " />

3.4.3.8 普通按钮

设置impu 标记的type属性值为button（普通按钮），可以通过value来设置按钮名字，可以实现向表单中插入一个普通按钮。普通按钮在网页设计中非常有用，如果不通过表单提交按钮来处理事件，则可以给普通按钮绑定事件代码来实现所需的功能。aleeert(弹框)
语法:<imput name ="" type =" button" yalue = " "

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 多行文本输入框

textarea（文本域）标记可以向表单中插人多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。
语法:<textarea name=""rows=""cols=""wrap=""/>初始信息内容</textarea>

3.4.5 下拉列表框

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

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

第四章 CSS样式基础

4.1 CSS概述

4.1.1.CSS的基本概念

CSS 全称为“Cascading Style Sheet”，中文解释为“层叠样式表”，它是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式。在网页设计时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，既可以改变同一页面的不同部分效果，也可以改变同一个网站中不同网页的外观和格式。

HTML（页面结构文件）

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.目录结构命名规则

4.1.4.2.样式文件的命名规则

4.1.4.3.选择器的命名规则

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择器，做到“见名知义”，这样就节省了查找样式的时间。样式名必须能够表示样式的大概含义（禁止出现如 Divl，Div2和Style等自名

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.基本语法

4.2.1.2.语法说明

(1) 选择器。选择器可以是 HTML 标记名称或者属性的值，也可以是自定义的标识符。
(2) 属性/属性值对。“属性：属性值”必须一一对应，属性与属性值之间必须用“：”连接，每个属性/属性值对之间用分号 (；)隔开。
(3) 属性。在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号(-)分隔，例如背景颜色属性background-color;而在脚本语言中, 对象属性则连写成 backgroundColor。在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写

4.2.2.CSS选择器类型

4.2.2.1.标记选择器

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

4.2.2.2.class选择器

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

4.2.2.3.ID选择器

ID选择器用来对某个单一元素定义单独的样式。ID选择器只能在HTML页面中使用次，针对性更强。定义I选择器时，需要在id名称前加一个“#”。接下来通过实例来演示ID 选择器

4.2.2.4.伪类选择器

前面介绍的选择器都是能够与HTML中具体标记对应的，但是像段落的第1行，超链接访问前与访问后等，就没有H1ML标记与之对应，从而也没有简单的CSS选择器应用，为此CSS引进了伪类选择器。常用伪类见表4-2.（href跳转

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派生选择器（上下文选择器）

代码如下:
<p><slrong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用<strong></p><o]>
<li>< strong>我是斜体字,这是因为 strong 元素位于 |i 标记内</ strong></li><li>我是正常的字体</li>
</ol>

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.链接外部样式表

4.3.3.2.导入外部样式表

4.4 CSS的属性单位

4.4.1.长度、百分比单位

4.4.1.1.相对类型

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

4.4.1.2.绝对类型

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

4.4.2.色彩单位

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

divl
color:#FF0000;

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

在CSS 中也提供了与HTML一样的用色彩英文名称表示色彩的方式

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继承与层叠

CSS继承即子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记，值得注意的是，并不是所有的属性都会自动传给子元素，有的属性不会继承父标记的属性值，例如边框属性就是非继承的。

CSS的全称是“层叠样式表”，层叠特性和“继承”不一样，可以把层叠特性理解成“冲突”的解决方案，即对同一内容设置了多个不同类型样式产生冲突时的处理，CSS规定如下优先级为：行内样式>id样式>class样式>标记样式

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盒模型的定义

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

5.2 CSS元素的高度和宽度

5.2.1 盒模型的宽度

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

5.2.2 盒模型的高度

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

5.3 边距设置和边框设置

5.3.1 外边距设置

5.3.1.1 上外边距

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

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

5.3.1.2 右外边距

语法:margin-right:length | percent | auto
参数:同 margin-top。
说明:同 margin-top。

5.3.1.3 下外边距

语法:margin-bottom: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值，区别于外边距，内边距不可以使用负值

padding: 30px;

5.3.4 边框设置

5.3.4.1上边框

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

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

5.3.4.2右边框

语法:border-top:border-stylelborder-widthl border-color

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

5.3.4.3下边框

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

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

5.3.4.4 左边框