网页设计与制作教程思维导图模板_ProcessOn思维导图、流程图

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

1.1 认识网页和网站

网站：是指在互联网上，根据一定的规则，使用 HTML（超文本标记语言）等工具制作的相关网页的集合。

网页：是构成网站的基本元素，包含文字、图片、链接、多媒体等各种信息，可以展示丰富的内容，用户通过在浏览器中输入网址来访问特定的网页，从而获取信息。

1.2 网页的基本构成元素

1.2.1.文本

体积小传输快

1.2.2.图片和动画

生动

1.2.3.超链接

可从一个位置到另一个位置

1.2.4.音频和视频

使网页多样化

1.2.5.交互表单

可收集用户信息

1.2.6.其他常见元素

可使页面活泼

1.3 页面布局结构

1.4 Web前端技术简介

1.4.1 初识WEB前端

是基于互联网的、通过超链接将多个文档等资源连接起来形成的信息系统，方便人们浏览、共享和交互信息

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

HTML：设计页面结构决定是用文字图片

CSS：页面样式文件,决定加粗或居中

JavaScript ：是一种前端编程语言、动态技术，用于为网页添加动态交互功能，如表单验证、页面特效、动画等，也可用于服务器端开发（Node.js）等多种场景

1.4.3 前端开发工具

1.浏览器

2.网页编辑器

3.切图软件

1.5 HTML语法基础

1.5.1 HTML概述

1.语言

2.超文本

3.标记

1.5.2HML基本结构

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

标记范围，超出标签之外的内容不出现在页面上

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

定义HIML文档。

3.文档编码

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

主体部分

1.6 创建HTML文档

子主题

1.7 网页头部标签

1.7.1<title>标签

设置标题

1.7.2<meta>标签

1.keywords

设置关键字

2.description

描述页面面内容

1.7.3 <link>标签

样式脚本

1.7.4 <script>标签

指定文件路径、类型

1.8 HTML5文档注释和特殊符号

1.8.1 注释

ctrl+/

1.8.2 特殊符号

空格、<、>、"、©

实践代码

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

2.1 文字与段落排版

段落标签

<p>.....<p>可以成一行

align可以设置对齐方式的 center left right

标题标签

<h2>标题的作用变大和加粗

换行标签

可以换行

水平线标签

<hr/>里可以设置宽度（size)和颜色(color)

预格式化标签

<pre></pre>可以让换行和空格有效果

缩排标签

<blockquote><blockqoute/>通常会左右缩进有时使用斜体，一般用来引用

2.2 超链接

1 超链接的定义

是一个网页指向另一个目标的连接关系

2 超链接的分类

根据链接目标文件不同可分：页面超链接、锚点超链接、电子邮件超链接

根据超链接单击对象的不同可分：文字超链接、图片超链接、图像映射等

3 路径

URL（统一资源定位器）：指的是每个网站都有独立的位置

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

指向其他页面的超链接

指向书签的超链接

当文章长的时候就可以点标签就到要去的地方。先要用<a>标签对网页元素做记号，语法为<a name="记号名">目标文本附近的内容</a>,再设置一个指向页面书签内的标签，语法为<a href="记号名”>热点文本</a>。

指向下载文件的超链接

指向电子邮件的超链接

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <a href="mailto:gdnanfang@163.com">和我联系</a> </html>

2.3 图像

2.3.1.1 常见的网页图像格式

网页图像的格式：GIF、JPEG、PNG

2.3.1.2 使用网页图像的要点

使用网页图像的使用要点：（1）、图片体积过大就不适合网络传输 (2)、页面不要太潮的动画（3）、在同一文件多次使用的图像时，使用相对路径查找该图像。

设置图像大小

图像的边框

图像超链接

设置网页背景图像

图文混排

<h1 align="center">江西</h1> <hr color="#ff0000" size="10px"/> <img src="img/微信图片_20240913200903.png" align="right" /> <p>随便涂鸦：面对整张的白纸，整版的白屏，无从开始，肯定恐怖。<br /> 你会想：我还是看看邮件或是小憩一会了吧！记住，千万别这样。<br /> 马上开始写，你写什么没有关系，只要你开始写了，什么都好办了。 </p>

2.4 列表

无序列表

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

就近原则，自己没有问爸爸要

有序列表

嵌套列表

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

3.1 表格概述

<table><table> 标记表格所以内容

<caption></caption> 标记标题

<tr></tr> 标记行

<th></th> 标记表头

<td></td>标记列

3.2 表格属性的设置

语法：<table border="" bordercolor="" bordercolorlight="" bordercolordarkn ">...</table>

borde 表示表格边框粗细

bordercolorlight 表示表格亮边框颜色

bordercolor 表示表格边框颜色

bordercolordark 表示表格暗边形颜色

width宽度 height 高度可以设置长度单位或百分比

设置宽高没办法放下内容时，宽生效，高不生效

设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整，是响应式布局。

语法：.<table bgcolor=""background ="">....</table>

设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背量图像效果。

语法：<table cellspacing="" cellpadding =""</table>

（1)cellspacing。值的单位为像素或百分比，默认值为2px。

（2)cellpadding。值的单位为像素或百分比

语法为：<table align ="left|center|right">...</table>

通过设置表格标记的align属性，来调整表格水平对齐方式。取值left是居左、center是居中

语法：<table align="center"> <tr align="left I center I right" valign="top I middle I bottom" > <td>...</td> </tr>

说明:left表示设置行内容居左对齐；center表示设置行内容居中对齐；right表示设置行内容居右对齐。top表示设置行内容顶部对齐；middle表示设置行内容居中对齐；bottom 表示设置行内容底部对齐。其中行垂直居中对齐属性值与行水平居中对齐属性值不同。

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

rowspan 跨行 colspan 跨列

3.3 表格嵌套

<body> <h4 align="center">嵌套表格布局页面</h4> <table width="660px" border="1" align="center" bordercolor="#3333f"> <td height="100">  <table width="100%" border="1" bordercolor="red"> <tr height="50" align="center"> <td rowspan ="2" width="100">logo</td> <td>广告条</td> </tr> <tr height="50"align="center"> <td>导航</td> </tr> </table> </td> <tr> <td height="300"> <table width="100%"border="I" bordercolar="#33f99"> <tr align=" center"> <td height="300" widih="30%">左栏目</td><td height="300" width="70%">正文内容</td> </tr> </table> </td> </tr> <tr align="center"> <td height="100">版权信息</td> </tr> </table> </body> </html>

3.4 表单

定义域和域标题

语法：

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

单行文本输入框

密码输入框

密码输入框中可以输入任意类型的数据，与单行文本输入框有所不同，这些数据不是实时地显示在页面上，而是被显示字符“.”所取代，这样设计可以保障用户输入的密码不被泄露。

语法:

单选按钮

可以实现向表单中插入一个单选按钮，用户可以用这个按钮在网页上选择某一选项，语法为：<input name =" " type="radio" value="" checked/>

复选框

语法:

checked是默认勾选，可以取消那个勾选。向表单中插人一个复选框用户利用复选框在网页上设置多项选择。

单选按钮

可以实现向表单中插入一个单选按钮，用户可以用这个按钮在网页上选择某一选项，语法为：<input name =" " type="radio" value="" checked/>

图像按钮

提交按钮

这个的作用是将信息提交给服务器，语法为：<input name ="" type ="submit" value="提交"/>

重置按钮

可以将所有信息重置，语法为：<input name="" type="reset" value=""/>

普通按钮

可以将不通过表单来完成，可以通过按钮绑定事件代码来完成这个事。语法：<input name="" type="button" value="" onclick=""/>

文件选择框

可以向表单插入文件。语法：< input name ="' type="file" value=""/>

隐藏框

用户提交表单时，隐藏框的信息也会一起提交到服务器，但隐藏框在网页中是不可见的。语法: <input name="" type="hidden"value=""/>

多行文本输入框

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

下拉列表框

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

第四章 css样式基础

4.1 CSS概述

CSS的基本概念

层叠样式表，是一种用来描述网页外观的样式语言。它可以控制网页的布局、颜色、字体、大小等各种视觉效果。

传统HTML的缺点

维护困难

标记不足

网页过“胖”

定位困难

CSS的特点和优势

表现和内容分离

增强了网页的表现力

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

CSS的编写规则

目录结构命名规则

样式文件的命名规则

.选择器的命名规则

CSS代码注释

4.2 CSS语法基础

CSS基本语法

基本语法

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

CSS选择器类型

标记选择器

class选择器也叫“类”选择器，可以给指定的标签设置一个class属性和class值然后通过class选择器找到对应的标签，为其设置class值。

class选择器

class 选择器以 “.” 开头，后面跟着类名。可以将相同的样式应用于多个不同的元素，只要这些元素具有相同的类名。例如，“.my-class” 选择器将选择所有具有 “my-class” 类名的元素。

ID选择器

ID 选择器以 “#” 开头，后面跟着 ID 名称。ID 选择器在整个网页中必须是唯一的，只能应用于一个元素。例如，“#my-id” 选择器将选择具有 “my-id” ID 名称的元素。

伪类选择器

伪类选择器用于选择处于特定状态的元素。例如，“:hover” 伪类选择器将选择鼠标悬停在其上的元素，“:active” 伪类选择器将选择正在被激活的元素（如被点击的链接）。

CSS选择器声明

集体生明

可以将多个选择器组合在一起，使用相同的声明块。这样可以减少代码量，提高代码的可读性。例如，“h1, h2, h3 { color: blue;}” 表示将标题一、标题二和标题三的文本颜色都设置为蓝色。

全局声明

使用 “” 选择器可以选择网页中的所有元素，进行全局样式声明。例如，“ {margin: 0; padding: 0;}” 表示将网页中所有元素的外边距和内边距都设置为 0。

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

派生选择器可以根据元素之间的关系来选择元素。例如，“div p” 选择器将选择所有在<div>元素内部的<p>元素

4.3 CSS引入方式

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

基本语法

在 HTML 元素的 “style” 属性中直接编写 CSS 样式。例如，“<p style="color: red; font-size: 16px;">这是一个段落。</p>”

语法说明

内联样式表的优先级最高，但会使 HTML 代码变得冗长，不利于维护和更新。一般只在需要为单个元素设置特殊样式时使用。

内部样式表

基本语法

在 HTML 文件的<head>标签中使用<style>标签来定义 CSS 样式。例如，“<head> <style> p { color: red; font-size: 16px; } </style> </head>”

语法说明

内部样式表的作用范围仅限于当前 HTML 文件，可以为多个元素设置样式。但如果多个 HTML 文件需要相同的样式，使用内部样式表会导致代码重复。

外部样式表

链接外部样式表

在 HTML 文件的<head>标签中使用<link>标签来链接外部 CSS 文件。例如，“<head> <link rel="stylesheet" href="styles.css"> </head>”。

导入外部样式表

在 CSS 文件中使用 “@import” 规则来导入其他 CSS 文件。例如，“@import url ('styles2.css');”。导入外部样式表可以将多个 CSS 文件组合在一起，方便管理和维护。但过多的导入可能会影响网页的加载速度。

4.4 CSS的属性单位

长度、百分比单位

相对类型

相对单位是相对于其他元素或浏览器窗口的大小来计算的。例如，“em” 是相对于字体大小的单位，“%” 是相对于父元素的大小的百分比单位。相对单位的优点是可以使网页在不同的设备和屏幕尺寸上自适应。

绝对类型

绝对单位是固定的物理单位，如 “px”（像素）、“pt”（磅）、“cm”（厘米）等。绝对单位的优点是可以精确控制元素的大小，但在不同的设备和屏幕尺寸上可能会出现显示不一致的情况

色彩单位

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

绝对单位是固定的物理单位，如 “px”（像素）、“pt”（磅）、“cm”（厘米）等。绝对单位的优点是可以精确控制元素的大小，但在不同的设备和屏幕尺寸上可能会出现显示不一致的情况

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

可以直接使用颜色的名称来表示颜色，如 “red” 表示红色，“blue” 表示蓝色等。但颜色名称的数量有限，不能满足所有的颜色需求。

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

使用 RGB 函数可以指定颜色的红、绿、蓝三个分量的值，其中 x、y、z 分别表示红、绿、蓝三个分量的值，取值范围为 0-255。例如，“rgb (255,0,0)” 表示红色。

4.5.CSS继承与层叠

CSS 的继承是指某些样式属性可以从父元素传递给子元素。

4.6 元素类型

块级元素

块级元素在网页中独占一行，并且可以设置宽度、高度、边距等属性。常见的块级元素有<div>、<p>、<h1>-<h6>等。块级元素可以包含其他块级元素和行级元素

行级元素

行级元素不会独占一行，而是在一行内与其他行级元素并排显示。行级元素不能设置宽度和高度，只能通过字体大小等属性来间接影响其显示大小。常见的行级元素有<span>、<a>、<img>等。行级元素可以包含文本和其他行级元素。

列表项元素

列表项元素通常用于创建列表，如无序列表<ul>和有序列表<ol>中的<li>元素。列表项元素可以设置各种样式属性，并且可以包含其他元素

4.6.4.隐藏元素

可以使用 CSS 的 “display:none” 属性将元素隐藏起来，使其在网页中不可见。隐藏元素仍然存在于 HTML 文档中，但不会被显示出来。可以通过 JavaScript 等方式来控制隐藏元素的显示和隐藏。

第五章 CSS盒模型

5.1盒模型的定义

5.2 CSS元素的高度和宽度

5.3 边距设置和边框设置

外边距设置

上外边距

div{ margin-top: ; }

右外边距

div{ margin-left: ; }

下外边距

div{ margin-bottom: ; }

左外边距

div{ margin-right: ; }

外边距

div{ margin： }

外边距的合并

行级元素外边距合并

div{ display:inline}

块级元素外边距合并

div{ display: block; }

内边距设置

div{ padding: 20px; }

边框设置

上边框

div{ border-top: 10px #fff solid; }

右边框

div{ border-left: 10px #0000ff solid; }

下边框

div{ border-bottom: 10px #000 solid; }

左边框

div{ border-right: 10px #ff0000 solid; }

边框样式

div{ border-top: 10px #fff dashed; border-right: thin #ff0000 dashed; }

边框宽度

边框颜色

div{ border-color： }

新增边框属性

圆角边框

div{ border-radius: 20px; }

阴影边框

div{ box-shadow:-20px 10px 30px #ff0000; }

-20px是右偏移量 10px是下偏移量 30px阴影的宽度

图片绘制边框

div{ margin: 100px; border: 50px solid lawngreen; border-image: url(img/border.jpg)5 10 round; }

5.4 CSS元素的定位

static 定位

static是html元素的基本元素，大多数普通的网页元素在没有特殊定位需求时都用 static 定位。例如，普通的文本段落、图片、列表等元素默认都是 static 定位。不能通过 top、bottom、left、right 属性来改变其位置。这些属性对于 static 定位的元素没有任何效果

relative定位

相对定位是相对于它在正常文档流中的位置进行偏移。

absolute定位

相对浏览器绝对定位

position:absolute; bottom: 30px; right: 40px;

相对父盒子绝对定位

position:relative;

fixed定位

5.5 CSS元素的浮动

盒子的浮动添加

盒子的浮动清除

clear：both；

第六章元素应用CSS

6.1 使用CSS设置字体样式

字体类型

使用 CSS 可以轻松地设置网页中的字体类型。通过font-family属性，可以指定一种或多种字体，浏览器会按照指定的顺序依次尝试加载字体。例如，可以设置为font-family: "Helvetica Neue", Arial, sans-serif;，如果用户的系统中没有 “Helvetica Neue” 字体，浏览器会尝试加载 Arial 字体，如果也没有，则会使用默认的 sans-serif 字体,有一些只可以对英文设置。

字体大小

font-size属性用于设置字体的大小。可以使用像素（px）、百分比（%）、em 等单位来指定字体大小。例如，font-size: 16px;表示字体大小为 16 像素。不同的单位有不同的特点，像素是绝对单位，而百分比和 em 是相对单位，会根据父元素的字体大小进行调整

字体粗细

通过font-weight属性可以设置字体的粗细程度。常见的值有normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细）等，也可以使用数字值，如100到900，其中400相当于normal，700相当于bold

字体倾斜

可以使用font-style属性将字体设置为倾斜。值为italic表示斜体，oblique也可以产生倾斜的效果，但与italic的实现方式可能不同

用<span>标签可以对单独一段字来设置字体或大小等等，并且不会换行，<id>就会换行。

6.2 使用CSS设置文本样式

文本水平对齐方式

text-align属性用于设置文本的水平对齐方式。可以设置为left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）等

行高

line-height属性指定文本行的高度。可以使用像素、百分比、em 等单位来设置行高。合理设置行高可以提高文本的可读性

文本的修饰.

text-decoration属性可以为文本添加修饰，如underline（下划线）、overline（上划线）、line-through（删除线）等，也可以设置为none去除文本的修饰

段落首行缩进

可以使用text-indent属性来设置段落的首行缩进。例如，text-indent: 2em;表示首行缩进两个字符的宽度

首字下沉

虽然 CSS 没有直接提供首字下沉的属性，但可以通过一些技巧来实现。例如，可以使用伪元素::first-letter来选择段落的第一个字符，并对其进行样式设置，如增大字体、改变颜色等，从而实现类似首字下沉的效果。不可以设置行高。

字符间距

letter-spacing属性用于设置字符之间的间距。可以使用像素、em 等单位来指定间距的值

文本的截断

在某些情况下，可能需要对过长的文本进行截断。可以使用text-overflow属性结合overflow和white-space属性来实现文本的截断效果。例如，设置overflow: hidden; white-space: nowrap; text-overflow: ellipsis;可以在文本过长时显示省略号

文本的颜色

使用color属性可以设置文本的颜色。可以使用颜色名称（如red、blue等）、十六进制值（如#FF0000表示红色）、RGB 值（如rgb(255, 0, 0)也表示红色）等方式来指定颜色

文本的背景颜色

通过background-color属性可以为文本设置背景颜色。同样，可以使用颜色名称、十六进制值、RGB 值等方式来指定背景颜色

6.3 使用CSS设置图像样式

设置图像边框

使用border属性可以为图像添加边框。可以设置边框的宽度、样式（如实线、虚线等）和颜色。例如，border: 1px solid black;表示为图像添加一个 1 像素宽的黑色实线边框

图像缩放

可以使用width和height属性来调整图像的大小。也可以使用max-width和max-height属性来限制图像的最大尺寸，以防止图像过大而破坏页面布局

设置背景图像

通过background-image属性可以为元素设置背景图像。例如，background-image: url('image.jpg');表示将 “image.jpg” 作为背景图像

设置背景重复

background-repeat属性用于控制背景图像的重复方式。可以设置为repeat（水平和垂直方向都重复）、repeat-x（水平方向重复）、repeat-y（垂直方向重复）、no-repeat（不重复）等

背景图像定位

使用关键字进行背景定位

可以使用关键字如top、bottom、left、right、center等来定位背景图像。例如，background-position: center top;表示将背景图像定位在元素的顶部中央

使用长度进行背景定位

可以使用像素、厘米等长度单位来指定背景图像的位置。例如，background-position: 50px 100px;表示将背景图像向右移动 50 像素，向下移动 100 像素

使用百分比进行背景定位

以元素的尺寸为基准，使用百分比来指定背景图像的位置。例如，background-position: 50% 50%;表示将背景图像定位在元素的中心

6.4 使用CSS设置表单样式

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

修饰文本域

可以使用 CSS 来设置文本域的边框、背景颜色、字体样式等。例如，textarea { border: 1px solid #ccc; background-color: #f9f9f9; font-size: 14px; }可以为文本域添加一个灰色的边框、设置背景颜色为浅灰色，并设置字体大小为 14 像素

修饰按钮

可以通过 CSS 来改变按钮的外观，如颜色、大小、边框等。例如，button { background-color: #007bff; color: white; border: none; padding: 10px 20px; }可以将按钮的背景颜色设置为蓝色，文字颜色设置为白色，去除边框，并设置内边距为 10 像素和 20 像素

制作登录表单

可以使用 CSS 来美化登录表单，包括设置表单的布局、输入框的样式、按钮的样式等。例如，可以使用display: flex;和flex-direction: column;来设置表单的布局为垂直排列，使用input[type="text"], input[type="password"] { border: 1px solid #ccc; padding: 5px; }来设置输入框的边框和内边距，使用button { background-color: #007bff; color: white; border: none; padding: 10px 20px; }来设置登录按钮的样式

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

7.1 CSS链接的美化

文字链接的美化

可以通过修改文字链接的颜色、字体、大小等属性来使其更加突出和吸引人。例如，设置链接在未被访问时为蓝色，鼠标悬停时变为橙色，已访问过的链接为紫色。还可以添加下划线、删除线等装饰效果，或者使用 CSS 的 text-decoration 属性来控制链接的装饰样式。通过设置链接的字体加粗、斜体等属性，可以进一步增强其视觉效果。

按钮链接的美化

将链接设计成按钮的样式，可以增加其可点击性和吸引力。可以使用 CSS 的 borderbackground-color、color 等属性来设计按钮的外观。为按钮添加鼠标悬停效果，如改变背景颜色、边框颜色或字体颜色等，以增强用户的交互体验。可以使用 CSS 的 box-shadow 属性为按钮添加阴影效果，使其看起来更加立体。

背景链接的美化

为链接设置背景图片，可以使链接更加个性化和吸引人。可以使用 CSS 的 background-image 属性来设置背景图片。可以通过调整背景图片的大小、位置和重复方式等属性，来达到最佳的视觉效果。结合文字链接的美化方法，可以使背景链接更加突出和易于识别。

7.2 CSS列表的美化

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

通过设置 list-style-type 属性，可以改变列表项的标记类型。例如，可以将默认的圆点标记改为方块、数字、字母等。可以使用 CSS 的自定义列表项标记，通过设置 list-style-image 属性来使用自定义的图片作为列表项标记。

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

使用 list-style-image 属性可以指定一个图片作为列表项的标记。可以是本地图片路径或网络图片链接。可以调整图片的大小、位置和重复方式等属性，以适应不同的列表布局。

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

list-style-position 属性用于控制列表项标记的位置。可以设置为 inside（在列表项内部）或 outside（在列表项外部）。根据不同的设计需求，选择合适的列表项位置可以使列表更加整洁和美观。

复合列表样式（list-style）

list-style 属性是一个复合属性，可以同时设置列表项的标记类型、图像和位置。使用复合属性可以简化 CSS 代码，提高代码的可读性和可维护性。

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

除了使用 list-style-image 属性，还可以通过设置列表项的背景图像来实现自定义的列表项标记。可以使用 CSS 的 background-position 和 background-repeat 属性来调整背景图像的位置和重复方式。

7.3 CSS表格的美化

border-collapse

border-collapse 属性用于设置表格的边框合并方式。可以设置为 collapse（合并边框）或 separate（不合并边框）。合并边框可以使表格看起来更加简洁和整洁，而不合并边框则可以使表格的边框更加明显和突出

border-spacing

border-spacing 属性用于设置表格边框之间的间距。可以设置为一个具体的像素值或百分比。调整边框间距可以使表格的布局更加合理和美观

caption-side

caption-side 属性用于设置表格标题的位置。可以设置为 top（在表格上方）、bottom（在表格下方）、left（在表格左侧）或 right（在表格右侧）。根据表格的布局和设计需求，选择合适的标题位置可以使表格更加易于阅读和理解。

empty-cells

empty-cells 属性用于设置表格中空白单元格的显示方式。可以设置为 show（显示空白单元格）或 hide（隐藏空白单元格）。隐藏空白单元格可以使表格看起来更加整洁和紧凑。

7.4 多媒体的添加与美化

<bgsound>标签的使用

<bgsound> 标签用于在网页中添加背景音乐。可以通过设置 src 属性来指定音乐文件的路径，设置 loop 属性来控制音乐的播放次数,现在已经停止更新，用不了了。

HTML5新增的多媒体标签

<audio>标签

概念与用途：HTML5 用于嵌入音频，可添加背景音乐等。属性：src指定音频路径。controls提供播放控制界面。autoplay自动播放，需谨慎使用。loop循环播放。preload指定预加载方式。支持格式：MP3、WAV、Ogg 等，不同浏览器有差异。兼容性与替代方案：旧浏览器可用 Flash 等作为替代。

<video>标签

概念与用途：嵌入视频，用于播放宣传片等。属性：src指定视频路径。controls提供播放控制界面。autoplay自动播放可能影响体验。loop循环播放。preload指定预加载方式。width和height设置播放器尺寸。支持格式：MP4、WebM、Ogg 等。

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

8.1 水平顶部导航栏

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

导航栏的创建

通常使用 HTML 的无序列表（<ul>）和列表项（<li>）来创建导航栏的基本结构。通过 CSS 对列表进行样式设置，去除默认的列表样式，如项目符号等，使其呈现为水平排列的导航栏

列表样式的设计

设置列表的宽度、高度、背景颜色等属性，使其适应页面布局。可以使用 CSS 的display: inline-block属性将列表项设置为水平排列，同时调整间距和对齐方式

超链接样式的设计

对导航栏中的超链接进行样式设置，包括字体颜色、字体大小、下划线等。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果

鼠标事件

可以通过 JavaScript 或 CSS 的:active伪类来实现鼠标点击时的效果，如改变颜色、添加阴影等。同时，可以设置鼠标移入和移出时的过渡效果，使交互更加平滑

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

导航栏的创建

与简单水平导航栏类似，使用无序列表和列表项创建基本结构。但需要在其中添加子菜单的容器，通常使用另一个无序列表来表示子菜单

列表样式的设计

除了设置主菜单的列表样式外，还需要对子菜单的列表样式进行设计。可以设置子菜单的显示位置、背景颜色、边框等属性

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

通过 CSS 的display:none属性将子菜单初始设置为隐藏状态。当鼠标悬停在主菜单上时，使用:hover伪类将子菜单显示出来。可以使用 JavaScript 来实现更加复杂的交互效果，如延迟显示、动画效果等

DIV样式的设计

可以使用<div>标签来包裹导航栏，设置其宽度、高度、背景颜色等属性，使其适应页面布局。同时，可以使用 CSS 的定位属性来调整导航栏的位置

超链接样式的设计

与简单水平导航栏类似，对主菜单和子菜单中的超链接进行样式设置，增加交互效果

鼠标事件

除了主菜单的鼠标事件外，还需要对子菜单的鼠标事件进行处理。当鼠标移入子菜单时，保持子菜单的显示状态；当鼠标移出子菜单时，延迟隐藏子菜单，以提高用户体验

8.2 纵向侧边导航栏

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

导航栏的创建

使用无序列表和列表项创建导航栏的基本结构。将列表设置为垂直排列，通过 CSS 的display:block属性实现

DIV样式的设计

使用<div>标签包裹导航栏，设置其宽度、高度、背景颜色等属性。可以使用 CSS 的定位属性将导航栏固定在页面的侧边

列表样式的设计

设置列表项的宽度、高度、背景颜色、边框等属性。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果

超链接样式的设计

对导航栏中的超链接进行样式设置，包括字体颜色、字体大小、下划线等。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果

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

导航栏的创建

与简单纵向导航栏类似，使用无序列表和列表项创建基本结构。在其中添加子菜单的容器，通常使用另一个无序列表来表示子菜单

DIV样式的设计

设置<div>标签的宽度、高度、背景颜色等属性，使其适应页面布局。可以使用 CSS 的定位属性将导航栏固定在页面的侧边

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

通过 CSS 的display:none属性将子菜单初始设置为隐藏状态。当鼠标悬停在主菜单上时，使用:hover伪类将子菜单显示出来。可以使用 JavaScript 来实现更加复杂的交互效果，如延迟显示、动画效果等

列表样式的设计

设置主菜单和子菜单的列表样式，包括宽度、高度、背景颜色、边框等属性。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果

超链接样式的设计

对主菜单和子菜单中的超链接进行样式设置，增加交互效果

8.3 底部固定导航栏

导航栏的创建

使用无序列表和列表项创建导航栏的基本结构。将其定位在页面的底部，可以使用 CSS 的position:fixed属性实现

列表样式的设计

设置列表项的宽度、高度、背景颜色、边框等属性。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果

菜单固定底部的设计

通过 CSS 的bottom:0属性将导航栏固定在页面的底部。可以设置导航栏的宽度、高度等属性，使其适应页面布局

超链接样式的设计

对导航栏中的超链接进行样式设置，包括字体颜色、字体大小、下划线等。可以使用:hover伪类来设置鼠标悬停时的样式，增加交互效果

鼠标事件

可以通过 JavaScript 或 CSS 的:active伪类来实现鼠标点击时的效果，如改变颜色、添加阴影等。同时，可以设置鼠标移入和移出时的过渡效果，使交互更加平滑

第九章 DIV+CSS布局

9.1 DIV+CSS概述

认识DIV

定义和作用：DIV 是 HTML 中的块级元素，它可以用来划分网页的不同部分，就像在一张纸上划分不同的区域一样。例如，可以用一个 DIV 包裹网页的头部内容（如网站 logo、导航菜单），另一个 DIV 包裹主体内容（如文章、图片），还有一个 DIV 包裹底部内容（如版权信息、联系方式）。

DIV的宽高设置

宽高属性

在 CSS 中，width和height是用于设置元素宽高的属性。它们可以应用于 DIV 元素来控制其大小

div标签内直接设置宽高

除了在 CSS 文件或<style>标签中设置宽高，还可以直接在 DIV 标签内部使用style属性来设置。

div使用选择器设置宽高

除了在标签内直接设置，还可以利用CSS选择器来设置DIV的宽高。先定义好合适的选择器（比如类选择器、ID选择器等），然后在对应的CSS规则中设置“width”和“height”属性的值，这样就可以批量地或者有针对性地对符合选择器条件的DIV元素进行宽高设置。

div高度的百分比设置问题

当设置DIV高度为百分比时，情况会相对复杂一些。它的实际高度往往取决于其上级元素（父元素）的高度。如果父元素没有明确设置高度，那么子元素（DIV）设置的百分比高度可能无法按照预期显示，因为浏览器无法确定其具体的参照高度值，所以在使用百分比设置DIV高度时要特别注意其父元素的高度设置情况。

9.2 DIV+CSS的应用

DIV元素的布局技巧

当设置DIV高度为百分比时，情况会相对复杂一些。它的实际高度往往取决于其上级元素（父元素）的高度。如果父元素没有明确设置高度，那么子元素（DIV）设置的百分比高度可能无法按照预期显示，因为浏览器无法确定其具体的参照高度值，所以在使用百分比设置DIV高度时要特别注意其父元素的高度设置情况。

DIV元素的宽度自适应

DIV元素可以设置为宽度自适应的模式。这意味着它能够根据其内部包含内容的多少或者浏览器窗口的大小变化而自动调整自身的宽度。通常可以通过一些CSS属性和值的设置来达到这个效果，比如使用“width: auto;”或者结合一些弹性布局相关的属性等，这样能让网页在不同设备的不同屏幕宽度下都有较好的显示效果。

DIV内容的居中

要实现DIV内容的居中，可以采用多种方法。可以在DIV内部对文本等内容通过CSS的文本对齐属性（如“text-align: center;”）进行水平居中设置；对于DIV内部包含的其他元素（如图片等），可能需要结合一些布局属性（如相对定位、绝对定位等）以及设置相应的偏移量来实现居中效果，从而让整个DIV中的内容在视觉上呈现出居中的状态

DIV元素的嵌套

DIV元素可以相互嵌套使用。即将一个DIV作为另一个DIV的子元素放置在其内部。通过这种嵌套方式，可以构建出更加复杂和层次分明的网页结构。比如可以用外层DIV来控制整体的布局框架，内层DIV来分别放置不同类型的内容，并且可以针对不同层次的DIV分别设置不同的样式，以实现丰富多样的页面效果。

9.3 DIV+CSS的典型布局

左中右布局

这是一种常见的网页布局方式。通过合理运用DIV元素以及CSS的相关属性，将页面从左到右划分为三个主要区域，分别放置不同的内容。通常会涉及到设置DIV的宽度、浮动属性等，以实现三个区域的并列排列，并且每个区域可以根据需要设置各自不同的内容和样式。

上中下布局

同样是较为常见的布局形式。利用DIV元素和CSS属性把页面从上到下分成三个主要部分，分别用于承载不同的内容。可能会通过设置高度、边距等属性来明确各个部分的界限和外观，使得页面呈现出清晰的上中下分层结构，方便用户浏览和理解网页内容。

混合布局

混合布局就是综合了左中右布局和上中下布局等多种布局方式的特点。在一个网页页面中，既存在着横向的区域划分（类似左中右布局），又存在着纵向的区域划分（类似上中下布局）。通过巧妙地运用DIV元素和CSS属性对不同区域进行设置和组合，可以构建出更加复杂、功能更全、视觉效果更丰富的网页页面布局，以满足不同的网页设计需求。

第十章 JavaScript的应用

10.1 JavaScript概述

JavaScript简介

简单性

动态性

跨平台性

安全性

基于对象的语言

JavaScript入门案例

JavaScript放置的位置

head标记中的脚本

将 JavaScript 代码放在 head 标记中，可以在页面加载之前执行脚本。这适用于需要在页面加载之前进行一些初始化操作的情况，如设置全局变量、定义函数等。

body标记中的脚本

将 JavaScript 代码放在 body 标记中，可以在页面加载完成后执行脚本。这适用于需要在页面加载完成后进行一些操作的情况，如操作页面元素、响应用户事件等。

外部js文件中的脚本

将 JavaScript 代码放在外部 js 文件中，可以提高代码的可维护性和可重用性。可以在多个页面中引用同一个外部 js 文件，避免了代码的重复编写。

事件处理代码中的脚本

将 JavaScript 代码放在事件处理函数中，可以在特定的事件发生时执行脚本。例如，可以在按钮点击事件、表单提交事件等处理函数中编写 JavaScript 代码。

10.2 JavaScript语法

语法基础

区分大小写

JavaScript 是区分大小写的语言，这意味着变量名、函数名、关键字等都必须严格区分大小写。例如，变量名“myVariable”和“MyVariable”是两个不同的变量。

变量不区分类型

在 JavaScript 中，变量在声明时不需要指定类型，可以在运行时动态地改变变量的类型。这使得 JavaScript 更加灵活，但也可能导致一些潜在的问题，如类型错误等。

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

虽然在 JavaScript 中每行代码结尾可以省略分号，但为了提高代码的可读性和可维护性，建议在每行代码结尾加上分号。

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

JavaScript 支持单行注释和多行注释，单行注释以“//”开头，多行注释以“/”开头和“/”结尾。

10.2.2 标识符和常用变量

标识符

标识符是用来命名变量、函数、对象等的名称。在 JavaScript 中，标识符必须以字母、下划线或美元符号开头，后面可以跟字母、数字、下划线或美元符号。

变量声明

在 JavaScript 中，可以使用“var”、“let”或“const”关键字来声明变量。“var”关键字是传统的变量声明方式，但存在一些问题，如变量提升等。“let”和“const”关键字是 ES6 引入的新的变量声明方式，它们可以避免一些“var”关键字带来的问题。

变量类型

JavaScript 中的变量类型包括数字、字符串、布尔值、对象、数组等。变量的类型可以在运行时动态地改变。

运算符与表达式

算术运算符和表达式

JavaScript 中的算术运算符包括加（+）、减（-）、乘（）、除（/）、取余（%）等。算术表达式是由算术运算符和操作数组成的表达式。

关系运算符和表达式

JavaScript 中的关系运算符包括等于（==）、不等于（!=）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）等。关系表达式是由关系运算符和操作数组成的表达式，其结果为布尔值。

逻辑运算符和表达式

JavaScript 中的逻辑运算符包括与（&&）、或（||）、非（!）等。逻辑表达式是由逻辑运算符和操作数组成的表达式，其结果为布尔值。

赋值运算符和表达式

JavaScript 中的赋值运算符包括等于（=）、加等于（+=）、减等于（-=）、乘等于（=）、除等于（/=）等。赋值表达式是由赋值运算符和操作数组成的表达式，其结果为赋值后的值。

条件运算符和表达式

JavaScript 中的条件运算符（?:）也称为三元运算符，它是一种简洁的条件判断表达式。其语法为：条件? 表达式 1 : 表达式 2。如果条件为真，则返回表达式 1 的值；如果条件为假，则返回表达式 2 的值。

逗号运算符和表达式

JavaScript 中的逗号运算符（,）可以用来分隔多个表达式，其结果为最后一个表达式的值。

程序设计

条件分支语句

JavaScript 中的条件分支语句包括 if 语句、if...else 语句、if...else if...else 语句、switch 语句等。这些语句可以根据不同的条件执行不同的代码块。

循环语句

JavaScript 中的循环语句包括 for 循环、while 循环、do...while 循环等。这些语句可以重复执行一段代码，直到满足特定的条件为止。

函数

定义函数

在 JavaScript 中，可以使用函数声明和函数表达式两种方式来定义函数。函数声明的语法为：function 函数名(参数列表) {函数体}。函数表达式的语法为：var 函数名 = function(参数列表) {函数体}。

函数返回值

函数可以返回一个值，也可以不返回值。如果函数需要返回一个值，可以使用“return”语句来返回值。

函数调用

函数可以通过函数名和参数列表来调用。在调用函数时，需要将实际参数传递给函数的形式参数。三、JavaScript 对象

JavaScript对象

对象基础

概述

JavaScript 是一种基于对象的语言，对象是 JavaScript 中的基本数据类型之一。对象由属性和方法组成，可以通过对象字面量、构造函数等方式来创建对象。

属性

对象的属性是描述对象特征的变量。可以通过点运算符（.）或方括号运算符（[]）来访问对象的属性。

方法

对象的方法是描述对象行为的函数。可以通过点运算符（.）或方括号运算符（[]）来调用对象的方法。

10.3.2 常用对象

window对象

window 对象是浏览器的顶级对象，它代表浏览器窗口。可以通过 window 对象来访问浏览器的各种功能，如打开新窗口、关闭窗口、获取窗口大小等。

document对象

document 对象代表当前网页的文档对象。可以通过 document 对象来访问网页的各种元素，如 HTML 元素、表单元素、图像元素等。

location对象

location 对象代表当前网页的 URL 地址。可以通过 location 对象来获取当前网页的 URL、刷新页面、跳转到新页面等。

navigator对象

navigator 对象代表浏览器的信息。可以通过 navigator 对象来获取浏览器的名称、版本、操作系统等信息。

screen对象

screen 对象代表用户的屏幕信息。可以通过 screen 对象来获取屏幕的宽度、高度、颜色深度等信息。

10.4 JavaScript事件

事件及事件处理

事件是用户与网页交互时发生的动作，如鼠标点击、键盘按下、页面加载等。事件处理是指当事件发生时执行的代码。可以通过在 HTML 元素上添加事件属性或使用 JavaScript 代码来注册事件处理函数。

常用事件

JavaScript 中有很多常用的事件，如 click 事件（鼠标点击事件）、keydown 事件（键盘按下事件）、load 事件（页面加载事件）、submit 事件（表单提交事件）等。

事件应用举例

例如，可以通过 click 事件来实现按钮的点击效果，通过 keydown 事件来实现键盘输入的响应，通过 load 事件来实现页面加载完成后的初始化操作等