本书系统地介绍了网站制作中各种常用的HTML标签和CSS属性,以及网站各个部分和各种布局的实现方法,还提供了大量实例来引导读者学习,力求让读者获得真正实用的知识。本书涉及面广,从HTML到CSS样式,再到脚本语言,涵盖网站开发的很多重要知识。本书附带1张光盘,收录了本书配套多媒体教学视频及涉及的源文件,便于读者**、直观地学习。
全书共有21章,分为3篇。第1篇讲解了网站开发基础、超链接、图像、表格、多媒体元素、框架、列表、表单;第2篇讲解了CSS样式、属性、脚本、事件;第3篇讲解了网站开发实例,详细介绍了创建博客的过程和方法,以及网站常用模块的设计方法,让读者通过实例来提高实战水平。
本书适合所有想学习HTML与CSS网站开发技术的初、中级读者快速入门,也适合大中专院校的师生和培训班的学员作为教材使用。 零点起飞学HTML+CSS-附DVD光盘.含26.9小时教学视频与大量实例源代码_顼宇峰 编_清华大学出版社_

第3章 网站中的文本样式标签
一个网站是由文字、图片、视频、音频等元素组成的,而且文字是网站构成和表现网站的重要元素。通过浏览文字可以看到网站所要传达的信息。一个好的网站,文字样式的设置是非常重要的,它直接影响网站的整体效果。在制作网站时,网站设计师都会使用设置好的文本来修饰网站。本章将会讲解如何用文本标签来设置文本样式。
3.1 设置标题字体
标题是一段内容的简介。通过标题,我们就可以了解文章内容所要表达的**,所以标题是网站中的必要部分。有了标题后,为了可以吸引到更多的浏览者阅读网站内容,就得对标题字体做出修饰,使标题更明显和漂亮,更容易被浏览者注意到。
标题的字体标签以几种固定的字号来显示标题。它的设置是通过来实现的,将要显示的标题文字包含在和里面即可。其语法结构如下所示:

标题文字

其中,为起始标签,为结束标签。其中,#可以为1、2、3、4、5、6,这是标题的有效值范围,它只有
这六种样式。如果想每个标题都达到同样的效果,只需要重复地使用标题的样式。
【示例3.1】下面是标签的一个具体实例,代码如下:

正在使用标题标签


效果如图3.1所示。
图3.1 标题标签
效果图
使用
可以用来区分标题的大小。通常情况下,默认**个标题为
,其字体是*大的,当后面多增加一个标题,后面的标题字体就会变小,依此类推。
【示例3.2】下面是多个标题的书写格式和效果体现。代码如下:

这里是h1标题
这里是h2标题

这里是h3标题

这里是h4标题

这里是h5标题

这里是h6标题


效果如图3.2所示。
图3.2 使用多个标题标签效果图
3.2 设置网页文字样式
标题字体定义之后,就要开始定义网页中文字的样式,
标签是专门定义网页文字的标签。它可以定义文字的字体、字号、颜色等属性。在这一节将详细讲解标签里的字体大小属性和字体风格属性。
3.2.1 设置文本大小
设置字体大小可以使用标签里的属性,属性用来设定文本字号,取值范围是1~7。其语法结构如下所示:

文本内容

其中,是起始标签,为结束标签。在font后加一个空格再写上标签。其中,size默认值为3。size=7是*大的字体,数字越小字体也就会越小。
【示例3.3】下面是不同size属性值的使用比较,代码如下:

设置字体大小为1

设置字体大小为2

设置字体大小为3

设置字体大小为4

设置字体大小为5

设置字体大小为6

设置字体大小为7

效果如图3.3所示。
图3.3 使用不同size属性值的效果图
3.2.2 设置文本字体

标签中的属性是用来设定文本所使用的字体,它和标签一样都是写在里面的。通过设置不同的字体,可以使网站更加漂亮,更加的吸引浏览者。其语法形式如下所示:

文本内容

标签写法和标签一样,这里就不再多讲。“”里所填写的风格也可以是多个,中间用英文逗号隔开。使用多个风格是为了让浏览器在读取网站字体风格时找不到**种风格,可以再选择第二种风格,依此类推。通常情况下,设计师不会在里面写太多的风格,一般都是三到四个风格。
【示例3.4】下面是具有多个风格的字体效果,代码如下:

设置文本字体为黑体
设置文本字体为宋体

效果如图3.4所示。
?注意:一般常用的中文字体风格有宋体、黑体,常用的英文字体风格有Arial、Times New
Roman。
图3.4 使用多个face风格的效果图
3.3 文本布局标签
一个网页中的文本不仅要设置好它的样式,还要对文本进行布局。通过对文本的布局来达到网站内容清晰整洁的效果。做好文本布局,可以让浏览者更好地接受网站的内容。这一节将学习常用的文本布局标签。
3.3.1 缩进标签



是段落缩进标签,用来对文本内容进行缩进。

标签是对一整段内容的缩进,而不是首行的缩进,它会在整段的左右两边都进行缩进。一般

标签的缩进是用来表示引用的内容。其语法结构如下所示:


一段文本内容


其中

为起始标签,
为结束标签。

标签是写在里面的。把引用的文本内容放在

标签里,便可以直接使用。

标签有自动换行功能,它会把引用的文本内容作为一个独立段落来处理,所以前后不需要再写段落的标签。
【示例3.5】下面是

标签的使用效果,其中只有第二段使用了缩进元素,代码如下:

HTML英文全称为Hyper Text Markup
Language,中文名称为超文本标记语言。HTML是一种标记语言,也就是由标记标签组成的语言,是目前网络上应用得*广泛的语言,也是构成网站页面的主要基本语言。

HTML英文全称为Hyper Text Markup
Language,中文名称为超文本标记语言。HTML是一种标记语言,也就是由标记标签组成的语言,是目前网络上应用得*广泛的语言,也是构成网站页面的主要基本语言。


HTML英文全称为Hyper Text Markup
Language,中文名称为超文本标记语言。HTML是一种标记语言,也就是由标记标签组成的语言,是目前网络上应用得*广泛的语言,也是构成网站页面的主要基本语言。

效果如图3.5所示。







图3.5
使用
标签效果图
3.3.2 保留格式标签

标签可定义预格式化的文本,用来保留文本中的空格和换行。就算在代码中不使用空格和换行的标签,而是手动对它进行空格和换行,浏览器显示出来的效果也和代码中的效果相同。其语法如下所示:

文本内容



标签的用法和
标签的用法是一样的,这里就不再多讲。
【示例3.6】下面是使用
标签的效果,代码如下:




这是保留原始格式的文本,现在开始手动换行和空格,而不使用换行和空格标签。
这是文本行的效果。

第1篇 HTML网站开发
第1章 网站开发基础
1.1 网站的基本概念
1.2 网站的基本架构
1.3 web浏览器
1.3.1 Web浏览器标准
1.3.2 常见Web浏览器
1.4 HTML和XHTML
1.4.1 了解HTML和XHTML
1.4.2 HTML和xHTML的编辑工具
1.5 常见颜色单位
1.6 常见ASCII代码
1.7 常见长度单位
1.8 本章 小结
1.9 本章 习题
第2章 HTML基础
第3章 网站中的文本样式标签
第4章 超链接
第5章 图像的使用
第6章 表格的使用
第7章 多媒体元素
第8章 框架
第9章 列表元素
第10章 表单元素
第11章 网站布局
第2篇 CSS样式
第12章 CSS样式基础知识
第13章 CSS属性
第14章 CSS伪类和伪元素
第15章 脚本
第16章 事件
第17章 语法规范和文档类型声明
第18章 XHTML模块化和结构化
第3篇 网站开发实例
第19章 博客雏形
第20章 网站常用模块
第21章 整合我的博客