第3章 HTML文本类标记 本章学习目标 . 掌握HTML文本排版标记; . 掌握HTML列表标记。 本章介绍HTML中常用的文本排版标记、列表标记的语法和应用实例。 3.1 文本排版标记 3.1.1 换行标记
在编辑HTML页面的时候,输入的回车符、换行符在浏览器中都无效,显示时并不能 实现回车效果。使用换行标记
可实现网页上的强制换行效果。换行标记
是单 标记。一个
标记表示一个换行,多个
标记表示多次换行,其语法格式如下。
【例3-1】 换行标记示例。示例代码(3-1.html)如下。 例3-1 换行标记示例 第一行文字 第二行文字 第三行文字

第一行文字
第二行文字
第三行文字 浏览器中网页显示效果如图3.1所示。 3.1.2 预定义格式标记
 
预定义格式标记
……
中的文本通常会保留编辑时的空格和换行符。
网页源文件中的多个空格和回车换行操作在浏览器中会被忽略,或者被处理为一个空格。
使用
标记可以保留网页源文件中的设计效果。预定义格式标记是双标记,以
开
·21·

图3.1 换行标记示例
始,以
结束,
和
之间的内容保留编辑时的空格和换行符,文本呈现
为等宽字体,其语法格式如下。 

 
文本内容

 
【例3-2】 预定义格式标记示例。示例代码(3-2.html)如下。 
 
 
例3-2 预定义格式标记示例 
 
 

 
第一行 文字 
第二行文字
第三行文字

 
 
 
浏览器中网页显示效果如图3.2所示。
图3.2 预定义格式标记示例
3.1.3 段落标记
 
段落标记
是双标记,以
开始,以
结束,在
和
之间的内容
·22·

形成一个段落。段落前后内容会自动换行。段前、段后的间距比普通文字的行间距宽。使
用不包含内容的
标记,可以实现换行并输出空行的效果,其语法格式如下。 

段落文字
 
【例3-3】 段落标记示例。示例代码(3-3.html)如下。 
 
 
例3-3 段落标记示例 
 
 
第一行文字
 
第二行文字
 
第三行文字

第一段:杭州,简称"杭",古称临安、钱塘,是浙江省省会、副省级市、杭州都市圈核心城市,国务
院批复确定的中国浙江省省会和全省经济、文化、科教中心、长江三角洲中心城市之一。
 

第二段:杭州地处中国华东地区、钱塘江下游、东南沿海、浙江北部、京杭大运河南端,是环杭州
湾大湾区核心城市、沪嘉杭G60 科创走廊中心城市、国际重要的电子商务中心。
 
 
 
浏览器中网页显示效果如图3.3所示。
图3.3 段落标记示例
3.1.4 标题标记 
标题标记可以实现黑体加粗效果的标题文字输出。标题文字前后自动换行。
标题标记包含6个级别,标题标记中的n可以设置为1~6,编号越小,文字越大。标
题标记是双标记,以开始,以结束,中间的内容显示为标题文字效果,其语法
格式如下。
·23·

 标题文字内容 
【例3-4】 标题标记示例。示例代码(3-4.html)如下。 
 
 
例3-4 标题标记示例 
 
 

一级标题文字
 

二级标题文字
 

三级标题文字
 

四级标题文字
 

五级标题文字
 

六级标题文字
 
 
 
浏览器中网页显示效果如图3.4所示。
图3.4 标题标记示例
3.1.5 上标标记和下标标记 
上标标记是双标记,以开始,以结束,和之间
的文本会以上标的形式显示。下标标记是双标记,以开始,以结
束,和之间的文本会以下标的形式显示,它们的语法格式如下。 
上标文字内容 
下标文字内容 
·24·

【例3-5】 上下标文本标记示例。示例代码(3-5.html)如下。 
 
 
例3-5 上下标文本标记示例 
 
 
数学公式示例:(x+y)2=x2+2xy+y2
 
化学式示例:H2O 
 
 
浏览器中网页显示效果如图3.5所示。
图3.5 上下标文本标记示例
3.1.6 注音标记、和 
注音标记、和都是双标记,用于在元素上添加注音。先在标记
内定义需要注音的元素,然后在内部用标记……指明注音内容,再以
表示注音结束。如果浏览器不支持标记,可以在标记内添加可
选标记……,指明替代显示的内容,它们的语法格式如下。 
 
需要注音的内容
注音内容 
[浏览器不支持时的替代显示内容] 
 
【例3-6】 注音标记示例。示例代码(3-6.html)如下。 
 
 
例3-6 注音标记示例 
 
 
 
杭(hang) 州(zhou) 
 
·25·


 
 
杭州风景名胜区
Hang zhou feng jing ming sheng qu 
 
 
 
浏览器中网页显示效果如图3.6所示。
图3.6 注音标记示例
3.1.7 高亮文本标记 
高亮文本标记是双标记,以开始,以结束,和
之间的文本会以醒目的高亮背景显示,其语法格式如下。 
文本内容 
【例3-7】 高亮文本标记示例。示例代码(3-7.html)如下。 
 
 
例3-7 高亮文本标记示例 
 
 

杭州,简称"杭",古称临安、钱塘。
 
 
 
浏览器中网页显示效果如图3.7所示。
图3.7 高亮文本标记示例
·26·

3.2 列表标记
HTML中的列表标记包括有序列表、无序列表和自定义列表3种类型。不同类型的列
表可以嵌套使用。
3.2.1 有序列表标记
    和
  1.  
有序列表标记
      和
    1. 都是双标记,可以为每个列表项自动添加代表顺序的编号
标识,如阿拉伯数字、字母等,默认是阿拉伯数字。先用
        标记描述一个有序列表项,然
后在内部用
      1. 标记描述有序列表中的每一个列表项,其语法格式如下。 

           

        1. 列表项
          2.  

        2. 列表项
          3.  
…… 

         
【例3-8】 有序列表标记示例。示例代码(3-8.html)如下。 
 
 
例3-8 有序列表标记示例 
 
 

           

        1. 茶
          2.  

        2. 咖啡
          3.  

        3. 牛奶
          4.  

         
 
 
浏览器中网页显示效果如图3.8所示。
图3.8 有序列表标记示例
·27·

3.2.2 无序列表标记
          和
        •  
无序列表标记
            和
          • 都是双标记,可以自动为每个列表项添加符号标识,如圆
点、方块等,默认是黑圆点。先用
              标记描述一个无序列表,然后在内部用
            • 标记描
述无序列表中的每一个列表项,其语法格式如下。 

                 

              • 列表项
                •  

              • 列表项
                •  
…… 

               
【例3-9】 无序列表标记示例。示例代码(3-9.html)如下。 
 
 
例3-9 无序列表标记示例 
 
 

                 

              • 茶
                •  

              • 咖啡
                •  

              • 牛奶
                •  

               
 
 
浏览器中网页显示效果如图3.9所示。
图3.9 无序列表标记示例
3.2.3 自定义列表标记
              、
              和
               
自定义列表标记
              、
              和
              用于描述“项目词语+解释”类型的列表,都是
双标记。先用
              标记声明一个自定义列表,然后在内部用
              标记描述项目词语,再
用
              标记描述解释部分。项目词语部分左对齐显示,解释部分则换行缩进显示,其语
法格式如下。
·28·


               

              项目词语
               

              解释部分
               
…… 

               
【例3-10】 自定义列表标记示例。示例代码(3-10.html)如下。 
 
 
例3-10 自定义列表标记示例 
 
 

               

              apple
               

              苹果
               

              pear
               

              梨
               

               
 
 
浏览器中网页显示效果如图3.10所示。
图3.10 自定义列表标记示例
3.2.4 列表嵌套
列表嵌套是指一个列表内包含其他列表。列表嵌套可以是同种类型的列表嵌套,也可
以是不同类型的列表嵌套。无序列表内嵌套无序列表时,会采用不同的列表符号区分。嵌
入的列表会缩进显示。
【例3-11】 列表嵌套示例。示例代码(3-11.html)如下。 
 
 
 
例3-11 列表嵌套示例 
 
·29·

 

              网站开发技术
               

                 

              1. 静态网页技术
                2.  

                   

                1. HTML
                  2.  

                2. CSS
                  3.  

                3. JavaScript
                  4.  

                4. jQuery
                  5.  

                 

              2. 动态网页技术
                3.  

                   

                • ASP
                  •  

                • JSP
                  •  

                • PHP
                  •  

                • 数据库
                  •  

                     

                  • MySQL
                    •  

                  • Oracle
                    •  

                  • SQL Server
                    •  

                   

                 

               
 
 
浏览器中网页显示效果如图3.11所示。
图3.11 列表嵌套示例
·30·

思考和实践

1. 
问答题
(1)换行标记
               实现的换行,和用空段落标记
              实现的换行有什么
不同? 
(2)保留文本编辑时输入的空格符和回车换行符应该使用什么标记? 
(3)标题标记分为几个级别? 
(4)上下标标记描述的文本,文本字体是怎样的? 文本位置是怎样的? 
(5)浏览器不支持注音标记时,如何设置替代显示的内容? 
(6)列表类型标记有几种? 基本的语法格式是怎样的? 列表标记可以嵌套吗? 
2. 
操作题
应用标题标记、列表标记及列表嵌套设计网页, 12 所示。

效果如图3.


图3.

12 操作题效果图

·31·