-
1 知识链接
-
2 任务实现
-
3 同步实训
【问题引入】
开发环境搭建好后就可以着手做Web页面了，首先进行系统静态页面的设计与制作，网络留言系统需要制作哪些静态页面呢？
【实现思路】
根据对系统功能的分析，系统的静态页面如表1-5所示。
表1-5 在线用户注册登录系统主要页面
| 模块 | 页面名称 | 页面功能 |
| 查看、添加留言模块 | index.html | 该页面具备分页查看所有留言及添加留言功能 |
| 管理员登录模块 | login.html | 输入用户名及密码进行登录 |
| 找密码模块 | lost.html | 输入用户名页面 |
| dolost.html | 根据lost.html输入的存在的用户名设置新密码 | |
| 删除留言模块 | admin.html | 显示所有留言信息，并可通过每条留言后的超级链接对用户的留言进行删除 |
| 出错模块 | error.html | 出错页面 |
【知识链接】
1．HTML基本结构
HTML超文本文档分为文档头和文档体两部分，在文档头里对这个文档进行一些必要的定义，文档体中是要显示的各种文档信息。
HTML是一种树形结构的文档（如图1-28所示），<html>是根（root）节点；<head>、<title>、<body>是<html>的子（children）节点，它们互相之间是兄弟（sibling）节点；<body>下面是另一层子节点<table>、<p>等。
2．HTML基本结构所涉及的标记
HTML的语法是HTML语言的组织规范和使用标准。参照上面的基本结构，我们以列表的形式讲解它所涉及的HTML基本标记，如表1-6所示。这些基本标记是组成一个网页的最基本的HTML标记。
图1-28 HTML的基本结构
表1-6 HTML的基本标记
| 类型名称 | 标记 | 描述 |
| 文件类型 | <html></html> | 放在文件开头与结尾，标记HTML语言的开始与结束 |
| 文件标题 | <title></title> | 用来指定文件的标题内容 |
| 文档头 | <head></head> | 用来加入描述性文字，如主题 |
| 文档体 | <body></body> | 加入文件的主要内容 |
3．HTML常用标记
（1）结构标记，如表1-7所示。
表1-7 结构标记
| 类型名称 | 标记 | 描述 |
| 标题 | <h?></h?>（其中?可以是从1到6的数字） | 表示标记中的字体是按照标题方式显示的，标题分为6种，不同的数字表示不同的大小 |
| 对齐方式 | align=left|center|right | 选择对齐方式是左对齐、居中对齐还是右对齐 |
| 区块 | <div></div> | 表示一块可显示HTML的区域 |
（2）字体外观标记，如表1-8所示。
表1-8 字体外观标记
| 类型名称 | 标记 | 描述 |
| 字体大小 | <font size=?></font>（从1到7） | 设置字体的大小 |
| 字体颜色 | <font color="#??????"></font> | 设置字体颜色，颜色一般使用6位16位的字符（0～F） |
| 加粗 | <B></B> | 使标记中间的文字显示为粗体 |
| 斜体 | <I></I> | 使标记中间的文字显示为斜体 |
| 预定格式 | <pre></pre> | 保留文件中空格的大小 |
（3）链接标记，如表1-9所示。
表1-9 链接标记
| 类型名称 | 标记 | 描述 |
| 链接 | <a href="URL"></a> | 链接到URL的地址 |
续表
| 类型名称 | 标记 | 描述 |
| 链接到锚点 | <a name="***"></a> | 设定锚点名称为*** |
| <a href="URL#***"></a> | 锚点在另一个文件时的链接 | |
| <a href="#***"></a> | 锚点在当前文件时的链接 | |
| 链接到目标 | <a href="URL" target="***"></a> | 如果target的值等于_blank，单击链接后将会打开一个新的浏览器窗口来浏览新的HTML文档 |
| 邮件链接 | <a href="mailto:email"></a> | 创建了一个自动发送电子邮件的链接，mailto:后边紧跟着想要发送到的那个电子邮件地址 |
| 图像链接 | <img src="URL" alt="***"> | URL指明插入图像的地址，alt指出了如果没有办法显示图形则显示什么样的文字 |
（4）格式控制标记，如表1-10所示。
表1-10 格式控制标记
| 类型名称 | 标记 | 描述 |
| 段落 | <p></p> | 用来创建一个段落，在此标识对之间加入的文本将按照段落的格式显示在浏览器中 |
| 空格 |   | 用来插入空格 |
| 换行 | <br> | 用来创建一个回车换行 |
| 横线 | <hr> | 用来在网页中添加横线 |
（5）表单标记，如表1-11所示。网页中具有可输入表项及项目选择控制的栏目称为表单，它是网页与用户交互信息的主要手段，在HTML页面中起着重要的作用。
表1-11 表单标记
| 类型名称 | 标记 | 描述 |
| 表单 | <form></form> | 创建表单，主要属性如表1-12所示 |
| 单行文本框 | <input type="text" size="" maxlength=""> | 单行的文本输入区域 |
| 按钮 | <input type="submit"> | 将表单内容提交给服务器的按钮 |
| <input type="reset"> | 将表单内容全部清除再重新填写的按钮 | |
| <input type="button"> | 普通按钮 | |
| 复选框 | <input type="checkbox" checked> | 一个复选框，checked属性用来设置该复选框默认时是否被选中 |
| 隐藏域 | <input type="hidden"> | 隐藏区域，用户不能在其中输入，用来预设某些要传送的信息 |
| 图像替代 | <input type="image" src="URL"> | 使用图像来代替submit按钮，图像的源文件名由src属性指定，用户单击后表单中的信息和单击位置的X、Y坐标一起传送给服务器 |
| 密码框 | <input type="password"> | 输入密码的区域，当用户输入密码时区域内将会显示*号 |
| 单选按钮 | <input type="radio"> | 单选按钮类型，checked属性用来设置该单选按钮默认时是否被选中 |
续表
| 类型名称 | 标记 | 描述 |
| 下拉菜单 | <select name="***"></select> | 定义下拉菜单的选项名称 |
| <option value="***">????</option> | 在菜单中的选项内容及取值 | |
| 文本域 | <textarea name="" rows="" cols=""></textarea> | 用来创建一个可以输入多行的文本框，textarea具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数 |
表1-12 <form></form>标签的主要属性
| 属性名称 | 属性值 | 功能 |
| action | URL | 设置处理表单的程序 |
| method | post、get | 设置发送表单的HTTP方法 |
| enctype | contentType | 设置发送表单内容的属性 |
| target | frametarget | 设置显示表单内容的窗口 |
| onsubmit | script | 设置被发送的事件 |
（6）列表标记，如表1-13所示。
表1-13 列表标记
| 类型名称 | 标记 | 描述 |
| 无序列表 | <ul> <li>第一项 <li>第二项 <li>第三项 </ul> | 无序列表使用的一对标记是<ul></ul>，每一个列表项前使用<li> |
| 有序列表 | <ol> <li>第一项 <li>第二项 <li>第三项 </ol> | 有序列表使用标记<ol></ol>，每一个列表项前使用<li>。每个项目都有前后顺序之分，多数用数字表示 |
| 自定义列表 | <dl> <dt>第一项<dd>叙述第一项的定义 <dt>第二项<dd>叙述第二项的定义 <dt>第三项<dd>叙述第三项的定义 </dl> | 定义性列表可以用来给每一个列表项再加上一段说明性文字。在应用中，列表项使用标记<dt>标明，说明性文字使用<dd>表示 |
（7）表格标记，如表1-14所示。表格是网页设计中最常用的对象之一，主要有两方面的用途：一是用于网页中普通表格的绘制；二是用表格进行页面布局。
表1-14 表格标记
| 类型名称 | 标记 | 描述 |
| 表格 | <table></table> | 表格的开始和结束 |
| 行 | <tr></tr> | 定义表格的行 |
| 表头 | <th></th> | 定义表格中的表头 |
| 表元 | <td></td> | 定义表格中的具体文本 |
| 标题 | <caption></caption> | 要为表格加上一个标题，可以使用<caption valign=#></caption>标记，其中#=top、bottom分别表示表格的标题在上部或下部 |
在浏览器显示表格时，表格的整体外观是由<table>标记的属性决定的。<table>标记的主要属性如表1-15所示。
表1-15 <table>标记的主要属性
| 属性名称 | 属性值 | 功能 |
| border | size | 设置表格边框大小 |
| width | size | 设置表格宽度 |
| height | size | 设置表格高度 |
| cellspacing | size | 设置单元格间距 |
| cellpadding | size | 设置单元格的填充距 |
| background | URL | 设置表格的背景图像 |
| bgcolor | color | 设置表格的背景颜色 |
<tr>标记的一些属性可以用来定制表格的行。<tr>标记的常用属性如表1-16所示。
表1-16 <tr>标记的常用属性
| 属性名称 | 属性值 | 功能 |
| align | left、right、center | 设置行对齐方式 |
| valign | top、middle、bottom、baseline | 设置行中单元格的垂直对齐方式 |
| bgcolor | color | 设置单元格的背景颜色 |
| bordercolor | color | 设置单元格的边框颜色 |
<td>标记的一些属性可以用来定制表格中的单元格。<td>标记除具有<tr>标记的一般属性外还有一些属性，如表1-17所示。
表1-17 <td>标记的常用属性
| 属性名称 | 属性值 | 功能 |
| rowspan | num | 设置单元格所占的行数 |
| colspan | num | 设置单元格所占的列数 |
在HTML中虽然有很多标签都可以控制页面的效果，但是它们的功能都很有限，CSS就是要将网页的效果实现得更完美一些。CSS（Cascading Style Sheets）称为层叠样式单或层叠样式表。CSS是每一个网页设计人员的必修课，目前各浏览器普遍支持的是CSS 3.0。
3．网页加载CSS的方式
可以使用以下4种方式将CSS样式加载到网页中：
页面内嵌法：将样式表直接写在页面代码的头元素部分（Head区域）。
外部链接法：将样式表写在一个独立的CSS文件中，然后在页面Head区域使用HTML的Link对象调用。例如：
<link href="css/style.css" rel="stylesheet"type="text/css" />
外部导入法：与外部链接法类似，用@import导入外部的CSS文件。例如：
<style type="text/css">
<!--
@import url("../css/style.css")
-->
</style>
内联定义法：在对象的标记内使用对象的Style属性定义适用的样式表属性。例如：
<input style="border:1px" name="uname"type="text">
4．样式规则选择器
一个样式（Style）的基本语法由三部分构成：选择器、属性和属性值，即：
选择器{
对象的属性1: 属性值1;
…
对象的属性n: 属性值n;
}
选择器主要有3种：标签选择器、类选择器、ID选择器。
（1）HTML标签选择器。在HTML页面中使用的标签，如果在CSS中被定义，那么此网页中的所有该标签都将按照CSS中定义的样式显示。例如：
<style>
p{font-weight:bold;}
</style>
（2）类选择器。
使用HTML标签的class属性引入CSS中定义的样式规则的名字，称为类选择器，class属性指定的样式名字必须以“.”开头。例如：
<style type="text/css">
.mycss{
font-weight:bold;
}
</style>
在页面中使用类选择器：
<p>这是个段落</p>
（3）ID选择器。ID属性用来定义某一特定的HTML元素，ID选择器定义的CSS名称必须以“#”开头，例如：
<style type="text/css">
#mycss{
font-weight:bold;
}
</style>
在页面中使用类选择器：
<p id="mycss">这是个段落</p>
5．常用CSS属性
（1）常用文本属性，如表1-18所示。
表1-18 常用文本属性
| 属性 | 描述 |
| line-height | 设置行高（即行间距），常用取值为25px、28px |
| text-align | 设置对齐方式，常用取值为left、right、center |
| letter-spacing | 设置字符间距，常用取值为3px、8px |
| text-decoration | 设置文本修饰，常用取值为underline（下划线）、none |
| white-space | 规定如何处理空白，常用取值为nowrap（不换行） |
（2）常用字体属性，如表1-19所示。
表1-19 常用字体属性
| 属性 | 描述 |
| font | 在一个声明中设置字体的所有样式属性 |
| font-family | 定义字体类型，例如：font-family:宋体; |
| font-size | 定义字体大小 |
| font-weight | 定义字体粗细 |
（3）常用背景属性，如表1-20所示。
表1-20 常用背景属性
| 属性 | 描述 |
| background | 在一个声明中设置所有的背景属性 |
| 设置元素的背景颜色 | |
| background-image | 设置元素的背景图像 |
| background-position | 设置背景图像的开始位置 |
| background-repeat | 设置是否及如何重复背景图像 |
（4）CSS 外边距属性（Margin），如表1-21所示。
表1-21 CSS外边距属性
| 属性 | 描述 |
| 在一个声明中设置所有的外边距属性 | |
| 设置元素的下外边距 | |
| 设置元素的左外边距 | |
| 设置元素的右外边距 | |
| 设置元素的上外边距 |
（5）CSS内边距属性（Padding），如表1-22所示。
表1-22 CSS内边距属性
| 属性 | 描述 |
| 在一个声明中设置所有的内边距属性 | |
| padding-bottom | 设置元素的下内边距 |
| 设置元素的左内边距 | |
| 设置元素的右内边距 | |
| padding-top | 设置元素的上内边距 |
（6）CSS尺寸属性（Dimension），如表1-23所示。
表1-23 CSS尺寸属性
| 属性 | 描述 |
| 设置元素的高度 | |
| width | 设置元素的宽度 |
