【无标题】

javaweb

网页开发基础

HTML 技术
1.1.1 HTML简介
HTML 是英文 hyper Text Markup Language 的缩写，中文译为“超文本标记语言”，其主要作用是通过 HTML 标记对网页中的文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件，它可以用记事本打开，所以简单的 HTML 代码可以在记事本中编写。编写完成后，将文件后缀名修改为“.Ihtml”即可生成一个 HTML网页。在实际开发中，项目的静态页面通常由网页制作人员设计和制作，开发人员只需了解页面元素，能够使用和修改页面中的元素，并在项目运行时能够展示出相应的后台数据即可。网页制作人员通常会使用一些专业软件来创建 HTML 页面，由于本教材中 HTML 技术只作为 Java Web学习的辅助技术，所以这里不会详细介绍如何使用专业工具制作网页，只需要读者了解页面元素的构成，会调试基本的页面效果即可。
了解了什么是 HTML 后，接下来通过一个基本的 HTML 文档来讲解其内部的构成
1.标记
标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 标准规范，如文件 1-1 中使用的是 HTML 4.01 版本。网页必须在开头处使用标记为所有的 HTML 文档指定 HTML 版本和类型，只有这样浏览器才能将该网页作为有效的 HTML 文档,并按指定的文档类型进行解析。标记和浏览器的兼容性相关，删除后，会把如何展示 HTML 页面的权利交给浏览器，这时，有多少种浏览器，页面就有可能有多少种显示效果，在实际开发中，这是不被允许的。
2.标记
标记位于标记之后，也称为根标记，用于告知浏览器其自身是一个HTML 文档，标记标志着 HTML 文档的开始，标记标志着 HTML 文档的结束，在它们之间的是文档的头部和主体内容。标记用于定义 HTML 文档的头部信息，也称为头部标记，紧跟在标记之后
3.标记
要用来封装其他位于文档头部的标记，例如

标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有预制作文本、图像、音频和视频等信息都必须位于标记内，标记中的信息才是最终展示aa Web给用户看的。一个 HTML 文档只能含有一对标记，且标记必须在标记内，颖面元素 位于头部标记之后，与标记是并列关系。 了解了文件 1-1 中的 HTML标记后，接下来讲解一下 HTML 文件的创建以及运行，具体如下。 事如文件

需要注意的是，读者在编写 HTML 文件时，可以使用系统自带的记事本编写，也可以使用EditPlus、UltraEdit 或 Eclipse 等工具编写。当使用工具创建 HTML 文件时，文件中的基本标记会被自动创建，编辑工具还会有代码颜色区分或者代码提示功能，开发者只需根据需求完善功能代码即可。工具的使用有助于提高编码效率，减少出错率。本章中的 HTML 都是在记事本中编写的，读者学习时可自己选择是否使用工具辅助编写。
1.1.2 单标记和双标记
不同标记描述的内容在浏览器中的显示效果是不一样的。页面中的信息必须放在相应的HTML 标记中，才能被浏览器正确解析。大部分标记都是成对出现的，如头部标记、主体标记，然而也有单个出现的标记，如水平线标记

---

。通常将 HTML 标记分为两大类，分别是“单标记”与“双标记”，对这两个标记的具体介绍如下。
1.单标记
单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下。
<标记名 7>
例如，标记

---

就是单标记，该标记用于定义一条水平线。需要注意的是，在标记名与“”之间有一个空格，虽然在显示效果上有没有空格都一样，但是按照规范的要求，建议加上空格。
2.双标记
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：
<标记名>内容</标记名》
在上述的语法中，<标记名>表示该标记的作用开始，一般称为开始标记（Start Tag )，</标记
名>表示该标记的作用结束，一般称为结束标记（End Tag ）。和开始标记相比，结束标记只是在前面加了一个关闭符“\”。例如，文件 1-1 中的、等都是双标记。

1.2
CSS技术
1.2.1 简介
CSS 是 Cascading Style Sheet 的缩写，译作“层叠样式表单”，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在实际开发中，主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）图片的外形（宽高、边框样式、边距等】以及版面的布局等外观显示样式。
CSS 定义的规则具体如下：
选择器(属性 1:属性值 1;属性 2:属性值 2；属性 3:属性值 3；）在上述的样式规则中，选择器用于指定 CSS 样式作用的 HTML 对象，花括号内的属性是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）连接，多个“键值对”之间用“;”（英文分号）进行分隔。接下来通过 CSS 样式对

标记进行设置，具体示例如下：divi border: 1px solid red; width: 600px; height: 400px;】
上面的代码就是一个完整的 CSS 样式。其中，div 为选择器，表示 CSS 样式作用的 HTML对象；border、width 和 height 为 CSS 属性，分别表示边框、宽度和高度，其中，border 属性有 3 个值“1px solid red,”分别表示该边框为 1 像素、实心边框线、红色。

在CSS 中，通常使用像素单位 px 作为计量文本、边框等元素的标准量，px 是相对于显示子元素设置为 50%，那么子元素所呈现的宽度为 200px。
在 CSS 中颜色的取值方式有3种。
•预定义的颜色值：如 red、green、blue 等。
•十六进制：如#FF0000、#FF6600、#29D794 等。实际工作中，十六进制是最常用的定
义颜色的方式。
。 RGB 代码：如红色可以用 rgb(255,0,0)或 rgb(100%,0%,0%)来表示。如果使用 RGB 代
码百分比方式取颜色值，即使其值为 0，也不能省略百分号，必须写为0%。
1.2.2 CSS样式的引用方式
要想使用 CSS 修饰网页，就需要在 HTML 文档中引入 CSS。引入 CSS 的方式有 4 种，分
别为链入式、行内式（也称为内联样式）、内嵌式和导入式。下面对开发中常用的内嵌式和链入
式这 2种引入方式进行讲解，具体如下。
1.内嵌式
内嵌式是将 CSS 代码集中写在 HTML 文档的头部标记中，并用

2.链入式
链入式是将所有的样式放在一个或多个以.css 为扩展名的外部样式表文件中，通过<link /5
标记将外部样式表文件链接到 HTML 文件中，其基本语法格式如下：
head>

在上面语法中，标记需要放在头部标记中，并且必须指定标记的 3 个属性，具体如下： 。 href：定义所链接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。 • type:定义所链接文档的类型，这里需要指定为“text/css”，表示链接的外部文件为CSS。。 rel：定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。接下来通过修改文件 1-10 来演示链入式 CSS 的引用方式。具体步骤如下。 （1）创建样式表，书写 CSS 样式 在 chapter01 文件夹中创建一个名称为 style.css 的文件，使用记事本打开后，将文件 1-10中标记之间的内容复制到 style.css 中并保存。

1.2.3 CSS 选择器和常用属性
要想将 CSS 样式应用于特定的 HTML 元素，首先需要找到该目标元素。在 CSS 中，执行这
一样式任务的部分被称为选择器，本小节将对 CSS 基础选择器进行介绍，具体如下。
1.标记选择器
标记选择器是指用 HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定
统一的样式。其基本语法格式如下：
标记名(属性 1:属性值 1；属性 2:属性值 2；属性 3:属性值 3；1
上述语法中，所有的 HTML 标记都可以作为标记选择器的标记名，例如标记、

标记、

标记等。用标记选择器定义的样式对页面中该类型的所有标记都有效，这是它的优点,
但同时这也是其缺点，因为这样不能设计差异化样式。
2.类选择器
类选择器使用“”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下:
.类名{属性 1:属性值 1；属性 2:属性值 2；属性 3:属性值 3；1
上述语法中，类名即为 HTML 页面中元素的 class 属性值，大多数 HTML 元素都可以定义
class 属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。
3. id 选择器
id 选择器使用“#”进行标识，后面紧跟 id 名，其基本语法格式如下：
#id 名1属性 1:属性值 1;属性 2:属性值 2;属性 3:属性值 3；）
上述语法中，id 名即为 HTML 页面中元素的 id 属性值，大多数 HTML 元素都可以定义 id 属
性，元素的 id 值是唯一的，只能对应于文档中某一个具体的元素。
4.通配符选择器
素。其基本语法格式如下：
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元
*（属性 1:属性值 1；属性 2:属性值 2；属性 3:属性值 3；）