HTML文本类标记 课件3.1文本排版标记.pptx

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

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

3、落标记段落标记是双标记，以开始，以结束，在和之间的内容形成一个段落。段落前后内容会自动换行。段前、段后的间距比普通文字的行间距宽。使用不包含内容的标记，可以实现换行并输出空行的效果。语法格式如下。段落文字3.1.3段落标记例3-3 段落标记示例。示例代码(3-3.html)如下。例3-3 段落标记示例第一行文字第二行文字第三行文字第一段：.之一。第二段：.中心。3.1.3段落标记浏览器中网页显示效果如图3.3所示。3.1.4标题标记标题标记可以实现黑体加粗效果的标题文字输出。标题文字前后自动换行。标题标记包含6个级别，标题标记中的n可以设置为1-6，编号越小，文字越大。标题标记是双标记，以开始

4、，以结束，中间的内容显示为标题文字效果。语法格式如下。标题文字内容3.1.4标题标记例3-4标题标记示例。示例代码(3-4.html)如下。例3-4标题标记示例一级标题文字二级标题文字三级标题文字四级标题文字五级标题文字六级标题文字3.1.4标题标记浏览器中网页显示效果如图3.4所示。3.1.5上下标标记和上标标记是双标记，以开始，以结束，和之间的文本，会以上标的形式显示。下标标记是双标记，以开始，以结束，和之间的文本，会以下标的形式显示。语法格式如下。上标文字内容下标文字内容3.1.5上下标标记和例3-5 上下标文本标记示例。示例代码(3-5.html)如下。例3-5 上下标文本标记示例数学

5、公式示例：(x+y)2=x2+2xy+y2化学式示例：H2O3.1.5上下标标记和浏览器中网页显示效果如图3.5所示。3.1.6注音标记、和注音标记、和都是双标记，用于在元素上添加注音。先在标记内定义需要注音的元素，然后在内部用标记指明注音内容，再以表示注音结束。如果浏览器不支持标记，可以在标记内添加可选标记，指明替代显示的内容。语法格式如下。需要注音的内容注音内容浏览器不支持时的替代显示内容3.1.6注音标记、和例3-6注音标记示例。示例代码(3-6.html)如下。例3-6注音标记示例 杭(hang)州(zhou)杭州风景名胜区hang zhou feng jing ming sheng qu3.1.6注音标记、和浏览器中网页显示效果如图3.6所示。3.1.7高亮文本标记高亮文本标记是双标记，以开始，以结束，和之间的文本，会以醒目的高亮背景显示。语法格式如下。文本内容3.1.7高亮文本标记例3-7 高亮文本标记示例。示例代码(3-7.html)如下。例3-7 高亮文本标记示例杭州，简称“杭”，古称临安、钱塘。3.1.7高亮文本标记浏览器中网页显示效果如图3.7所示。