第 3 章 学习目的与要求 本章简要介绍HTML,包括HTML网页文件的整体 结构和常用的HTML 标签,同时介绍CSS(Cascading StyleSheet)。通过本章的学习,理解HTML 页面和CSS 基本原理,能够开发静态Web页面。 本章主要内容 ● HTML网页文件结构。 ● HTML基本标签。 ● HTML其他常用标签。 ● CSS。 HTML(HyperTextMarkupLanguage,超文本标记 语言)是Web应用中用于编写网页的语言。HTML 中每 个用来作为标记的符号都可以被看作一条命令,它告诉浏 览器应该如何显示文件的内容。 3.1 HTML网页文件结构 一个完整的HTML文件由标题、段落、表格和文本等 各种嵌入的对象组成,这些对象统称为元素。HTML使用 标记来分隔并描述这些元素。实际上,整个HTML文件就 是由元素与标记组成的。 下面是一个HTML文件的基本结构。 文件开始标记 文件头开始的标记 …文件头的内容 文件头结束的标记 JavaWeb应用开发与项目案例教程 34 文件主体开始的标记 …文件主体的内容 文件主体结束的标记 文件结束标记 从上面的代码可以看出,HTML文件包含文件头和文件体两部分,其中各标记含义 如下。…:在最外层,表示这对标记间的内容是HMTL文件, 其中包括和标记。HTML文件中所有的内容都应该在这两个标记之 间,一个HTML文件总是以开始,以结束。 …:HTML文件的头部标记,通常将这两个标签之间的内容统称 为HTML的头部。文件的头部描述了文件的各种属性和信息,包括文件的标题、在Web 中的位置以及和其他文件的关系等。绝大多数文件头部包含的数据都不会作为内容显示 给读者。 …:用来指明文件的主体区域,网页所要显示的内容都放在这个 标记内,其结束标记指明主体区域的结束。 HTML 文件(包括CSS和JavaScript)可以使用操作系统自带的文本编辑器进行编 辑,也可以使用下列专业的工具来编辑。推荐以下几款常用的编辑器。 Dreamweaver: https://www.adobe.com/products/dreamweaver.html Notepad++: https://notepad-plus-plus.org/ VS Code: https://code.visualstudio.com/ (1)新建HTML 文件,输入以下代码。 Web 页面开发

HTML 开发基础

HTML 是一种用于创建网页的标准标记语言。

(2)另存为HTML文件,文件名为html_test.html。当保存HTML文件时,既可以使 用htm 扩展名,也可以使用html扩展名。两者没有区别,完全根据自己的喜好。 (3)在浏览器中运行这个HTML 文件。 启动系统的浏览器,然后选择“文件”菜单中的“打开文件”命令,或者直接在文件夹中 双击创建的HTML 文件,显示结果如图3-1所示。 第 3 章 HTML和CSS 35 图3-1　显示效果 3.2 HTML基本标签 HTML文件是由各种HTML 元素组成的,如html(HTML 文件的根)元素、head (HTML头部)元素、body(HTML主体)元素、title(HTML标题)元素和p(段落)元素等。 如果一个元素包含另一个元素,它就是被包含元素的父元素,被包含元素称为子元素。这 些元素都是通过由尖括号“<>”组成的标签形式来表现的。 HTML标签通常是由一对尖括号“<>”及标签名组成的。标签分为起始标签(start tag)和结束标签(endtag)两种,两者的标签名称是相同的,只是结束标签多了一个斜杠 “/”。例如,

…

段落标签。

为起始标签,

为结束标签,p为标签名 称,它是英文paragraph(段落)的缩写。HTML 元素指的是从起始标签到结束标签的所有 代码。起始标签和结束标签之间是HTML元素的内容,它既可以是需要显示在网页中的 文字内容,也可以是其他元素。空元素既不包含文本也不包含其他元素。它看起来像是起 始标签和结束标签的结合,由左尖括号开头,接着是元素的名和可能包含的属性,然后是一个 可选的空格和一个可选的斜杠,最后是必有的右尖括号。如定义换行的
就是空元素。 HTML标签名称对大小写不敏感,如

…

和

…

的效果是一样的。 不过,HTML规范推荐使用小写字母表示标签。 HTML标签可以拥有属性。属性总是以名称/值对的形式出现,例如name="value" 并且总是在HTML 元素的开始标签中规定,如图3-2所示。 图3-2　属性和值 下面介绍基本的HTML标签。 1.HTML标题 HTML标题(Heading)是通过

~

等标签进行定义的,此标签只能在 head标签内出现。例如:

最大字号标题

中字号标题

JavaWeb应用开发与项目案例教程 36
最小字号标题
说明:浏览器会自动在标题的前后添加空行。默认情况下,HTML 会自动在块级元 素前后添加一个额外的空行,例如段落、标题元素前后。 2.HTML段落 HTML段落是通过

标签进行定义的。例如: < p > HTML 的英文全称是Hyper Text Markup Language, 它是超文本置标语言的缩写, 是 Internet 上用于编写网页的主要语言。

HTML 中每个用来作为标记的符号都可以被看作一条命令,它告诉浏览器应该如何显示文件的 内容。

说明:浏览器会自动在段落的前后添加空行。(

是块级元素) 3.HTML 注释 HTML注释是通过 标签进行定义的。例如: 说明:用于注释HTML源码,只能在源码中看到,不在HTML效果中展示。 4.HTML 图像 HTML图像是通过 标签进行定义的。例如: 说明:图像的名称和宽、高是以属性的形式提供的。 5.表格 表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分 割为若干单元格(由
标签定义)。数据单元格可以包含文本、图片、列表、段落、表 单、水平线、表格等。例如:
row 1,column 1 row 1, column 2
row 2,column 1 row 2,column 2
浏览器显示结果: row1,column1 row1,column2 row2,column1 row2,column2 第 3 章 HTML和CSS 37 6.表单 表单是一个包含表单元素的区域。表单元素允许用户在表单中(如文本域、下拉列表、 单选按钮、复选框等)输入信息,然后服务器端可以获得用户输入的数据。表单使用表单标 签(
)定义。 … input 元素 …< /form> 多数情况下被用到的表单标签是输入标签()。输入类型是由类型属性 (type)定义的。大多数经常被用到的输入类型如下。 1)文本域 当用户要在表单中键入字母、数字等内容时,就会用到文本域。 姓名:
年龄:
浏览器显示结果: 注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是20 个 字符。 2)单选按钮 当用户从若干给定的选择中选取其一时,就会用到单选按钮。
男
女
浏览器显示结果: 注意:选项只能从中选取其一。 JavaWeb应用开发与项目案例教程 38 3)复选框 当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。
我喜欢苹果
我喜欢香蕉
浏览器显示结果: 4)表单的动作属性(Action)和确认按钮 当用户单击“确认”按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义 了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关 的处理。
用户名: 密码:
浏览器显示结果: 在上面的文本框内输入用户名和密码,然后单击“确认”按钮,那么输入数据会传送到 “login.jsp”的页面。该页面将验证用户是否为合法用户。 3.3 HTML其他常用标签 1.超链接 Web上的网页都是互相链接的,通过超链接可以链接到其他页面,这里的超链接就是 具有链接能力的文字或者图片。可以链接文本、媒体等,了解更多内容的接口。 1)建立超链接标签 建立超链接的标签为,基本格式为: 超链接名称 第 3 章 HTML和CSS 39 例如: < a href="http://www.ascenttech.com.cn/ruanjianjishufuwu.htm" target="_blank" > 软件技术服务 属性href指定了链接到的目标地址,该地址可以是文件所在位置,也可以是一个 URL,只有正确指定目标地址,才能正确访问需要的资源。 属性target用于指定打开链接的目标窗口,其默认方式是原窗口。其他的取值如表3-1 所示。 表3-1 超链接标签的属性 属 性 值描 述 parent 在上一级窗口打开,一般在分帧的框架页面中使用 blank 在新窗口打开 self 在同一帧或窗口中打开,和默认值相同 top 在浏览器的整个窗口中打开,忽略任何框架 其中,超链接名称可以是文字,也可以是图像或其他网页元素。文本会带有下画线并 且与其他文字的颜色有区别,图形通常带有边框显示。当用鼠标单击该元素时,就会跳转 到链接地址所指定的位置。 2)链接的路径 在超链接中,文件的存放位置和路径以及URL必须指定清楚才能正确链接,这种链接 路径分为绝对路径、相对路径两种。 绝对路径是主页上的文件或目录在硬盘上的真正路径,使用绝对路径作为链接路径比 较清晰,但是也存在一定的缺陷,比如把文件夹改名或者移动以后,相关的链接都将失效, 这样就必须对所有HTML文件的链接重新编写,会很麻烦。比如有个页面index.htm,该 页面的绝对路径为D:\AcesysHtml\index.htm,页面中有一个图片位置为D:\ AcesysHtml\img\buy.jpg,如果在这台机器上可以很顺利地通过页面访问这个图片,但是 如果将这些文件移动到其他位置进行发布,没有放到D盘中,那么就会因为这个路径的指 定而找不到该图片。典型的绝对路径格式为:通信协议://服务器地址:通信端口/文件位 置……/文件名。 为了解决绝对路径不能随便移动或修改文件的问题,可以使用相对路径来指定链接的 位置。相对路径是以当前文件所在的路径为基准,进行相对文件的查找。一个相对的 URL不包括协议和主机信息,表示它的路径与当前文档的访问协议和主机名相通。相对 路径的好处是只要相关的文件相对位置没有发生改变就可以访问到,比如前面提到的图片 和页面之间的相对路径就是img\buy.jpg,也就是可以忽略二者共同的路径部分,只写相对 的部分,这样即使它们被移动了位置,只要它们是同时被移动,相对位置没有改变,就不会 出现访问出错。 在描述相对路径中,在路径前加../表示上一级目录中的文件,如果上两级则表示 为../../,那么相对路径的几种写法如下。 ● product.htm,表示跟本文件在同一目录下。 JavaWeb应用开发与项目案例教程 40 ● ../product.htm,表示是上一级目录下的文件。 ● product/product.htm,表示当前目录下的文件夹product下的文件。 3)超链接的应用 假设有3个文件,分别为index.html、itservice.html、products.html。其中,index.html 是起始页面,itservice.html和products.html在product文件夹下,product文件夹与index. html是在同一级别,在index.html中可以链接到后面两个页面上,index.html的代码 如下。 AscentWeb 电子商务

加拿大·亚思晟科技

Quality is everything!

 2.HTML框架结构标签() (1)框架结构标签()定义如何将窗口分割为框架。 (2)每个frameset定义了一系列行或列。 (3)rows/columns的值规定了每行或每列占据屏幕的面积。 通过使用框架,可以在同一个浏览器窗口中显示不只一个页面。每份HTML文件称 为一个框架,并且每个框架都独立于其他框架。 框架结构HTML文件frameset.html如下。 HTML Frameset 第 3 章 HTML和CSS 41 HTML文件frame_a.html如下。

我是第一列

HTML文件frame_b.html如下。

我是第二列

在上面的这个例子中设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 30%;第二列被设置为占据浏览器窗口的70%。HTML文件frame_a.htm 被置于第一个 列中,而HTML文件frame_b.htm 被置于第二列中,效果如图3-3所示。 图3-3　框架使用效果 3.HTML区块 HTML区块元素:大多数HTML元素为块级元素或内联元素。 (1)块级元素:通常在浏览器显示时会以新行开始(和结束),例如: