l\t本书以“好教、好学、好用”为编写宗旨,将HTML 5、CSS 3、JavaScript和JQuery技术有机地组合起来,系统全面地介绍了前端开发的核心技术及其应用。_x000D_
l\t本书组织结构严谨,章节层次清晰;内容兼顾基础知识和新技术、新应用;实例丰富,设计思路分析和代码注释详实;应用实例典型,实用性强,易学易用。_x000D_
l\t本书提供配套电子课件和实例源代码,读者可登录清华大学出版社官网下载。_x000D_
l\t本书适合作为高等院校计算机、软件工程等专业网页设计、前端设计技术或JavaScript、JQuery课程的教材,也可供Web开发的工程技术人员和研究人员参考。_x000D_
第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 注音标记、