案例2 公司介绍网页
上网时，我们看到的大多数网页内容都非常繁杂。就网页上的文本来说，不仅有段落，还有标题、水平线、特殊字符等。本案例通过创建小米公司介绍网页，介绍如何将这些文本内容添加到网页上，在知识点中介绍HTML5文档的基本结构、HTML标记及其属性、HTML文本标记等内容。
2.1 案例描述
创建小米公司介绍网页，网页上有标题、水平线、段落文本，还有版权信息等，网页浏览效果如图2-1所示。
图2-1 公司简介
2.2 案例实现
创建小米公司介绍网页的步骤如下。
1.案例分析
图2-1所示的网页内容由4部分构成，分别为标题、水平线、段落文本和版权信息。标题使用<h2>标记定义，水平线使用<hr>标记定义，段落文本使用<p>标记定义，版权信息中的版权符号使用特殊字符©定义。
微课2-1：案例实现
2.新建项目
在HBuilderX中新建项目project02，设置项目存放位置为E:/网页设计/源代码，选择模板类型为“空项目”，单击“创建”按钮。
3.在项目中创建网页文件
在project02中新建HTML文件，设置文件名为example.html。
4.输入网页代码
根据案例分析，使用相应的HTML标记来构建网页结构，代码如下。
5.保存并浏览网页
网页浏览效果如图2-1所示。
2.3 相关知识点
2.3.1 HTML5文档的基本结构
使用HBuilderX新建网页文件时会自动生成一些源代码，这些源代码构成了HTML5文档的基本结构，HTML5文档的基本结构代码如下。
微课2-2：HTML5文档的基本结构
其中主要包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记。
1.<! DOCTYPE >
<!DOCTYPE>位于文档的最前面，用于向浏览器说明当前文档使用哪种标准规范。HTML5文档中的文档类型声明非常简单，代码如下。
必须在文档开头使用<!DOCTYPE>为HTML文档指定文档类型，只有这样，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。<!DOCTYPE>既可以用大写字母，又可以用小写字母，这对整个文档格式并没有影响。
2.<html>
<html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。
3.<head>
<head>标记用于定义HTML文档的头部信息，也称为头部标记。<head>标记紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记，如<title>、<meta>、<link>和<style>等，用来描述文档的标题、作者以及样式表等。
一个HTML文档只能含有一对<head>标记。
4.<body>
<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内。
一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>标记之后，与<head>标记是并列关系。
2.3.2 HTML标记及其属性
前面介绍的<html>标记、<head>标记和<body>标记都是HTML文档的基本标记，除了这些标记，HTML5还提供了大量其他标记。下面对标记及标记的属性进行简要说明。
1.标记
在HTML文档中，带有“< >”的元素称为HTML标记。HTML文档由标记和标记中的内容组成。标记可以产生所需的各种效果。HTML标记也称为HTML元素，本书中统称为HTML标记。
标记常用的格式如下。
例如：
标记的规则如下。
（1）标记以“<”开始，以“>”结束。
（2）标记一般由开始标记和结束标记组成，结束标记带有“/”，这样的标记称为双标记。
（3）少数标记只有开始标记，无结束标记，这样的标记称为单标记，如<hr />。在HTML5中，单标记可以省略“/”，即写成<hr>的形式。
（4）标记不区分大小写，但一般用小写。
（5）可以同时使用多个标记共同作用于网页中的内容，各标记之间的顺序不限。
2.标记的属性
许多标记还包括一些属性，以便对标记作用的内容进行更详细的控制。标记可以通过不同的属性实现各种效果。
属性在标记中的使用格式如下。
例如：
超链接标记<a>的属性href用于设置超链接的目标地址。
属性的规则如下。
（1）所有属性必须包含在开始标记里，不同属性用空格隔开。有的标记无属性。
（2）属性值用双引号引起来，放在相应的属性之后，用等号分隔；未设置属性值时采用其默认值。
（3）属性之间的顺序不限。
3.标记的嵌套
标记里面还可以包含其他标记，称为标记嵌套。例如：
在上述代码中，<p>标记里面包含了<strong>标记，<p>标记称为父标记，<strong>标记称为子标记。在标记嵌套时，必须先结束里面的标记，再结束外面的标记，不要出现交叉嵌套。
4.注释标记
如果需要在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下。
例如：
下面详细介绍HTML5中的文本标记。
2.3.3 HTML文本标记
HTML文本标记有标题标记<h1>～<h6>，段落标记<p>，水平线标记<hr>，换行标记<br>，字体样式标记<strong>、<em>、<del>、<ins>和特殊字符等。下面详细讲解这些标记。
微课2-3：HTML文本标记
1.标题标记
标题标记的语法格式如下。
说明 标题标记用于定义文档中的标题，其中n为1～6的数字，h1表示一级标题，h6表示六级标题，一级标题的文字最大，六级标题的文字最小。
用标题标记定义的标题文字在浏览器中默认都以粗体显示，而且标题文字单独显示为一行。
例2-1 在项目project02中新建一个网页文件，在代码中使用标题标记，将文件保存为example01.html。代码如下。
浏览网页，效果如图2-2所示。
图2-2 标题标记
2.段落标记
段落标记的语法格式如下。
说明 “p”是英文“paragraph”（段落）的缩写。<p>和</p>之间的文字表示一个段落，多个段落需要用多对<p>标记定义。
<p>标记示例见2.2节。
3.水平线标记
水平线标记的语法格式如下。
说明 “hr”是英文“horizontal rule”（水平线）的缩写。水平线标记的作用是绘制一条水平线。该标记为单标记。
<hr>标记示例见2.2节。
4.换行标记
换行标记的语法格式如下。
说明 “br”是英文“break”的缩写。换行标记的作用是强制换行。该标记为单标记。
例2-2 在项目project02中新建一个网页文件，在代码中使用换行标记，将文件保存为example02.html。代码如下。
浏览网页，效果如图2-3所示。
图2-3 换行标记
注意 使用<br>标记换行后，换行后的文字和上面的文字保持相同的属性，仍然是同一个段落，也就是说，<br>使文字换行不分段。
5.字体样式标记
字体样式标记用于设置文字的粗体、斜体、删除线和下画线效果。
（1）<strong>文本内容</strong>：文本以粗体显示。
（2）<em>文本内容</em>：文本以斜体显示。
（3）<del>文本内容</del>：文本添加删除线显示。
（4）<ins>文本内容</ins>：文本添加下画线显示。
例2-3 在项目project02中新建一个网页文件，在代码中使用字体样式标记，将文件保存为example03.html。代码如下。
浏览网页，效果如图2-4所示。
6.特殊字符
在网页设计过程中，除了文字，有时还需要插入一些特殊字符，如版权符号、注册商标、货币符号等。这些字符需要用一些符号代码来表示。表2-1列出了常用特殊字符的符号代码。
图2-4 字体样式标记
表2-1 常用特殊字符的符号代码
特殊字符示例见2.2节。
注意 输入特殊字符的符号代码时，必须区分大小写，而且字母后面的分号不能省略。
案例小结
本案例介绍了使用标题标记、水平线标记和段落标记等创建公司介绍网页，在知识点中主要介绍了HTML5文档的基本结构以及常用的文本标记，熟练使用这些文本标记可以更好地创建基于文本内容的页面。
习题与实训
一、单项选择题
1.网页的主体内容写在哪个标记内部？（ ）
A.<body>
B.<head>
C.<p>
D.<html>
2.以下标记中，用于设置页面标题的是（ ）。
A.<title>
B.<caption>
C.<head>
D.<html>
3.HTML指的是（ ）。
A.超文本标记语言（Hyper Text Markup Language）
B.家庭工具标记语言（Home Tool Markup Language）
C.超链接和文本标记语言（Hyperlink and Text Markup Language）
D.样式表（CSS）和JavaScript
4.用HTML5编写一个简单的网页时，网页的基本结构是（ ）。
A.<html> <head>...</head> <frame>...</frame> </html>
B.<html> <title>...</title> <body>...</body> </html>
C.<html> <title>...</title> <frame>...</frame> </html>
D.<html> <head>...</head> <body>...</body> </html>
5.以下标记中，没有对应的结束标记的是（ ）。
A.<body>
B.<br>
C.<html>
D.<title>
6.<title>和</title>必须包含在下述哪对标记中？（ ）
A.<body>和</body>
B.<table>和</table>
C.<head>和</head>
D.<p>和</p>
7.用于将文本以粗体显示的HTML标记是（ ）。
A.<bold>
B.<bb>
C.<strong>
D.<bld>
8.在下列HTML标记中，哪个用于换行？（ ）
A.<br>
B.<enter>
C.<break>
D.<b>
9.在下列HTML标记中，哪个用于定义文字最大的标题？（ ）
A.<h6>
B.<h5>
C.<h2>
D.<h1>
二、判断题
1.网页文件是用一种标记语言书写的，这种语言称为超文本标记语言（Hyper Text Markup Language，HTML），制作一个网站就等于制作一个网页。（ ）
2.网站的首页文件通常是“index.html，index.htm，Default.htm，Default.html”，它必须存放在网站的根目录中。（）
3.HTML5标记是不区分大小写的，但通常用小写。（ ）
4.如果文本中需要换行，则可以使用换行标记<br>。（ ）
5.<hr>标记可以在网页中生成一条水平分隔线，它不需要结束标记。（ ）
6.标题标记<h1>～<h6>都有换行的功能。（ ）
2-4：实训参考步骤
三、实训练习
1.创建幽默段子文本页面，效果如图2-5所示。网页中的标题为“幽默段子”，副标题为“来源：笑话集”，其他为水平线和段落文字。
2.创建古诗欣赏文本页面，效果如图2-6所示。网页中的标题为“过零丁洋”，副标题为“文天祥[宋代]”和“注释”，其他为段落文字。
图2-5 幽默段子
图2-6 古诗欣赏