第3章HTML基本标签
在HTML里的每一个标签都有其自身的意义。
HTML标签由开始标签和结束标签组成，开始标签是被尖括号包围的元素名，结束标签是被尖括号包围的斜杠加元素名，如和。
某些HTML元素没有结束标签，如
。
本章要点：标题文字标签的语法嵌套标签的语法
3.1标题文字标签
就像新闻和报纸中的标题一样，在网页中标题文字能直接反映相关主题，意义至关重要。
HTML中的标题文字是通过—
HTML标签由开始标签和结束标签组成，开始标签是被尖括号包围的元素名，结束标签是被尖括号包围的斜杠加元素名，如和。
某些HTML元素没有结束标签，如
。
本章要点：标题文字标签
HTML中的标题文字是通过
—等标签进行定义的。
3.1.1标题文字标签——
—作为标题文字标签，依据重要性递减。
使用标签可以增加权重，使页面的层级关系更清楚，让搜索引擎更好地抓取页面的主题，有利于搜索引擎搜索到用户的页面。
其语法如下：
这是一级标题
这是二级标题
这是三级标题
这是四级标题
这是五级标题
这是六级标题
在标题文字标签中，HTML自动在一个标题元素前后各添加一个空行。
其中的字号从到由大变小。
根据网页的定位、类型、用户搜索习惯等因素综合考虑，不同网站对标题标签的使用都不相同。
（1）一级标题，它的地位在页面中跟关键字的地位一样重要。
一些大型网站将用在LOGO上，这样的优点是：它概括了整个页面的内容，而且LOGO离“body”
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
很近，方便搜索引擎最快地抓取主题，如图3-1所示。
h1
图3-1一级标题
（2）二级标题，主要出现在页面的主体内容的文章标题和栏目标题上。
三列结构一般在中间，二列结构一般在重要的一边。
可与搭配使用，如图3-2所示。
h2
图3-2二级标题
（3）三级标题，一般在主要页面的边侧栏。
是它的辅助，出现频率不高。
根据排版页面层级关系不能太深，所以、、一般出现较少，如图3-3所示。
•18•
第3章HTML基本标签
h3
h3
图3-3三级标题
下面具体写一个标题文字标签的程序代码。
实例3-1：通过标签来实现不同标题文字效果
中国旅游 旅游景点大全
华北地区
名胜古迹
北京旅游
故宫博物院
乾清宫
运行代码后效果如图3-4所示。
图3-4不同标题文字的效果
从图3-4中很直观地看出，6种不同效果的网页标题文字。
•19•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.1.2标题文字对齐方式属性——align
在HTML中，没有设置属性的前提下，默认的标题文字是左对齐的，基于排版需要，用户可以设置标题文字的对齐方式。
对齐方式的属性是“align”，它设置在标签中。
“align”的属性值包括左对齐（left）、居中对齐（center）和右对齐（right）3种对齐方式。
其语法如下：
实例3-2：将标题文字设置不同对齐方式
中国旅游 旅游景点大全
华北地区名胜古迹
运行代码后效果如图3-5所示。
图3-5标题文字的对齐方式
3.2内容标签
为使网页中的内容更加丰富多彩，HTML提供了不同的内容标签，主要包括文字标签
•20•
第3章HTML基本标签
、段落标签、图片标签![]()
、表格标签
等标签，通过相应的属性设置，可使内容在网页中呈现出不同的效果。
具体的语法和代码，在后面的章节中将详细讲解。
3.3注释标签
注释标签-->用来在HTML文档中插入注释。
用户可使用注释对代码进行解释，便于在以后对代码进行编辑。
注释会被浏览器忽略。
用户也可以针对程序，在注释内容中编写相关的信息。
在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。
一个好的习惯是把注释放入注释文本中，这样可避免版本较低的浏览器把它们显示为纯文本。
其语法如下：
--这是一段注释，不会在浏览器中显示-->
实例3-3：使用注释标签编辑注释文字
注释标签的使用 --注释对代码进行解释，也便于在以后对代码进行编辑-->运行代码后，观察注释不会在浏览器中显示。
运行代码后效果如图3-6所示。
图3-6注释标签的使用
注释标签不支持任何标准属性。
•21•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.4嵌套标签
所谓嵌套指一个元素里面包含另一个元素。
在HTML中，大部分标签是允许嵌套的，嵌套标签中各个的属性是通用的。
下面以文字效果为例，通过几个实例学习嵌套标签应如何使用。
实例3-4：输入“注意：使用嵌套标签时，必须保持标签的完整性”。
其中，“注意”使用“黑体”；将“使用嵌套标签时”文字倾斜；“必须保持标签的完整性”加下划线。
并将其分成3行文字
嵌套标签的使用 注意
使用嵌套标签时
必须保持标签的完整性
运行代码效果如图3-7所示。
图3-7代码运行效果
以上代码中，标签包含有文字、斜体、下划线3个不同的标签。
下面将文字设置成一行，使用嵌套标签来同时改变文字的效果。
（1）将实例3-4中的文字在一行显示，并且将字体都改为“黑体”，使文字倾斜。
主体改动的代码如下：
注意，使用嵌套标签时，必须保持标签的完整性。
•22•
第3章HTML基本标签
运行代码后效果如图3-8所示。
图3-8代码运行效果
从图3-8中就可以看出，文本显示效果同时发生了变化。
从改动的代码中不难发现，斜体标签已经嵌套在文字标签中了，这样使得相关文字的字体和倾斜的效果就会同时呈现。
（2）将实例3-4中的文字字体都改为“黑体”，并将文字倾斜，在文字“完整性”下方加上下划线。
主体改动的代码如下：
注意，使用嵌套标签时，必须保持标签的完整性。
运行代码后效果如图3-9所示。
图3-9代码运行效果
在改动的代码中，用户在文字标签中嵌套了斜体标签，斜体标签中又嵌套了下划线标签，这样，相关文字的下划线效果也会同时呈现。
•23•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
在HTML中，标签是可以嵌套多层的，层数越深，文字的属性就越多。
使用嵌套标签时，必须保持标签的完整性。
开始和结束标签缺一不可，且位置也不能同其他嵌套的标签互换。
如文字是不对的。
3.5难点解析
本章难点是嵌套标签的使用。
如果源文件区域有多个标签嵌套，就需要所有被嵌套的标签都加载完成，浏览器才能正常显示。
有两种代码的写法：
--写法1-->内容代码2内容代码3内容代码4...--写法2-->内容代码2内容代码3内容代码4...
在制作网页时，一般情况下用户可能会使用写法1的嵌套。
如果对用户体验要求高，同时在一些地方嵌入的脚本会影响到页面显示，就需要用写法2的方式来书写源代码，以保证用户体验。
在页面的设计中减少嵌套的层次，可以加快浏览器的加载速度。
3.6高手训练营
1．HTML基本的标签都有哪些？
2．什么是嵌套标签？它的语法形式是怎样？
3．将实例3-2中的、标签代码添加相应的注释内容。
4．将以下文字，每一句话显示为一行，其中，每行居中对齐，写出相应的代码。
当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。
有人用大的显示器，有人用小的。
每次用户调整窗口大小时，文本都将被重新格式化。
不要想在编辑器中写一些空行和空格来协助排版。
•24•
声明：
该资讯来自于互联网网友发布，如有侵犯您的权益请联系我们。
标签：
#文件
#尺寸
#文件
#打不开
#文件
#文件
#文件
#文件
相关文章
3.1.1标题文字标签——
—作为标题文字标签，依据重要性递减。
使用标签可以增加权重，使页面的层级关系更清楚，让搜索引擎更好地抓取页面的主题，有利于搜索引擎搜索到用户的页面。
其语法如下：
这是一级标题
这是二级标题
这是三级标题
这是四级标题
这是五级标题
这是六级标题
在标题文字标签中，HTML自动在一个标题元素前后各添加一个空行。
其中的字号从到由大变小。
根据网页的定位、类型、用户搜索习惯等因素综合考虑，不同网站对标题标签的使用都不相同。
（1）一级标题，它的地位在页面中跟关键字的地位一样重要。
一些大型网站将用在LOGO上，这样的优点是：它概括了整个页面的内容，而且LOGO离“body”
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
很近，方便搜索引擎最快地抓取主题，如图3-1所示。
h1
图3-1一级标题
（2）二级标题，主要出现在页面的主体内容的文章标题和栏目标题上。
三列结构一般在中间，二列结构一般在重要的一边。
可与搭配使用，如图3-2所示。
h2
图3-2二级标题
（3）三级标题，一般在主要页面的边侧栏。
是它的辅助，出现频率不高。
根据排版页面层级关系不能太深，所以、、一般出现较少，如图3-3所示。
•18•
第3章HTML基本标签
h3
h3
图3-3三级标题
下面具体写一个标题文字标签的程序代码。
实例3-1：通过标签来实现不同标题文字效果
中国旅游 旅游景点大全
华北地区
名胜古迹
北京旅游
故宫博物院
乾清宫
运行代码后效果如图3-4所示。
图3-4不同标题文字的效果
从图3-4中很直观地看出，6种不同效果的网页标题文字。
•19•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.1.2标题文字对齐方式属性——align
在HTML中，没有设置属性的前提下，默认的标题文字是左对齐的，基于排版需要，用户可以设置标题文字的对齐方式。
对齐方式的属性是“align”，它设置在标签中。
“align”的属性值包括左对齐（left）、居中对齐（center）和右对齐（right）3种对齐方式。
其语法如下：
实例3-2：将标题文字设置不同对齐方式
中国旅游 旅游景点大全
华北地区名胜古迹
运行代码后效果如图3-5所示。
图3-5标题文字的对齐方式
3.2内容标签
为使网页中的内容更加丰富多彩，HTML提供了不同的内容标签，主要包括文字标签
•20•
第3章HTML基本标签
、段落标签、图片标签![]()
、表格标签
等标签，通过相应的属性设置，可使内容在网页中呈现出不同的效果。
具体的语法和代码，在后面的章节中将详细讲解。
3.3注释标签
注释标签-->用来在HTML文档中插入注释。
用户可使用注释对代码进行解释，便于在以后对代码进行编辑。
注释会被浏览器忽略。
用户也可以针对程序，在注释内容中编写相关的信息。
在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。
一个好的习惯是把注释放入注释文本中，这样可避免版本较低的浏览器把它们显示为纯文本。
其语法如下：
--这是一段注释，不会在浏览器中显示-->
实例3-3：使用注释标签编辑注释文字
注释标签的使用 --注释对代码进行解释，也便于在以后对代码进行编辑-->运行代码后，观察注释不会在浏览器中显示。
运行代码后效果如图3-6所示。
图3-6注释标签的使用
注释标签不支持任何标准属性。
•21•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.4嵌套标签
所谓嵌套指一个元素里面包含另一个元素。
在HTML中，大部分标签是允许嵌套的，嵌套标签中各个的属性是通用的。
下面以文字效果为例，通过几个实例学习嵌套标签应如何使用。
实例3-4：输入“注意：使用嵌套标签时，必须保持标签的完整性”。
其中，“注意”使用“黑体”；将“使用嵌套标签时”文字倾斜；“必须保持标签的完整性”加下划线。
并将其分成3行文字
嵌套标签的使用 注意
使用嵌套标签时
必须保持标签的完整性
运行代码效果如图3-7所示。
图3-7代码运行效果
以上代码中，标签包含有文字、斜体、下划线3个不同的标签。
下面将文字设置成一行，使用嵌套标签来同时改变文字的效果。
（1）将实例3-4中的文字在一行显示，并且将字体都改为“黑体”，使文字倾斜。
主体改动的代码如下：
注意，使用嵌套标签时，必须保持标签的完整性。
•22•
第3章HTML基本标签
运行代码后效果如图3-8所示。
图3-8代码运行效果
从图3-8中就可以看出，文本显示效果同时发生了变化。
从改动的代码中不难发现，斜体标签已经嵌套在文字标签中了，这样使得相关文字的字体和倾斜的效果就会同时呈现。
（2）将实例3-4中的文字字体都改为“黑体”，并将文字倾斜，在文字“完整性”下方加上下划线。
主体改动的代码如下：
注意，使用嵌套标签时，必须保持标签的完整性。
运行代码后效果如图3-9所示。
图3-9代码运行效果
在改动的代码中，用户在文字标签中嵌套了斜体标签，斜体标签中又嵌套了下划线标签，这样，相关文字的下划线效果也会同时呈现。
•23•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
在HTML中，标签是可以嵌套多层的，层数越深，文字的属性就越多。
使用嵌套标签时，必须保持标签的完整性。
开始和结束标签缺一不可，且位置也不能同其他嵌套的标签互换。
如文字是不对的。
3.5难点解析
本章难点是嵌套标签的使用。
如果源文件区域有多个标签嵌套，就需要所有被嵌套的标签都加载完成，浏览器才能正常显示。
有两种代码的写法：
--写法1-->内容代码2内容代码3内容代码4...--写法2-->内容代码2内容代码3内容代码4...
在制作网页时，一般情况下用户可能会使用写法1的嵌套。
如果对用户体验要求高，同时在一些地方嵌入的脚本会影响到页面显示，就需要用写法2的方式来书写源代码，以保证用户体验。
在页面的设计中减少嵌套的层次，可以加快浏览器的加载速度。
3.6高手训练营
1．HTML基本的标签都有哪些？
2．什么是嵌套标签？它的语法形式是怎样？
3．将实例3-2中的、标签代码添加相应的注释内容。
4．将以下文字，每一句话显示为一行，其中，每行居中对齐，写出相应的代码。
当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。
有人用大的显示器，有人用小的。
每次用户调整窗口大小时，文本都将被重新格式化。
不要想在编辑器中写一些空行和空格来协助排版。
•24•
声明：
该资讯来自于互联网网友发布，如有侵犯您的权益请联系我们。
标签：
#文件
#尺寸
#文件
#打不开
#文件
#文件
#文件
#文件
相关文章
使用
其语法如下：
这是一级标题
这是二级标题
这是三级标题
这是四级标题
这是五级标题
这是六级标题
在标题文字标签中，HTML自动在一个标题元素前后各添加一个空行。其中的字号从
到由大变小。
根据网页的定位、类型、用户搜索习惯等因素综合考虑，不同网站对标题标签的使用都不相同。
（1）一级标题，它的地位在页面中跟关键字的地位一样重要。
一些大型网站将用在LOGO上，这样的优点是：它概括了整个页面的内容，而且LOGO离“body”
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
很近，方便搜索引擎最快地抓取主题，如图3-1所示。
h1
图3-1一级标题
（2）二级标题，主要出现在页面的主体内容的文章标题和栏目标题上。
三列结构一般在中间，二列结构一般在重要的一边。
可与搭配使用，如图3-2所示。
h2
图3-2二级标题
（3）三级标题，一般在主要页面的边侧栏。
是它的辅助，出现频率不高。
根据排版页面层级关系不能太深，所以、、一般出现较少，如图3-3所示。
•18•
第3章HTML基本标签
h3
h3
图3-3三级标题
下面具体写一个标题文字标签的程序代码。
实例3-1：通过标签来实现不同标题文字效果
中国旅游 旅游景点大全
华北地区
名胜古迹
北京旅游
故宫博物院
乾清宫
运行代码后效果如图3-4所示。
图3-4不同标题文字的效果
从图3-4中很直观地看出，6种不同效果的网页标题文字。
•19•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.1.2标题文字对齐方式属性——align
在HTML中，没有设置属性的前提下，默认的标题文字是左对齐的，基于排版需要，用户可以设置标题文字的对齐方式。
对齐方式的属性是“align”，它设置在标签中。
“align”的属性值包括左对齐（left）、居中对齐（center）和右对齐（right）3种对齐方式。
其语法如下：
实例3-2：将标题文字设置不同对齐方式
中国旅游 旅游景点大全
华北地区名胜古迹
运行代码后效果如图3-5所示。
图3-5标题文字的对齐方式
3.2内容标签
为使网页中的内容更加丰富多彩，HTML提供了不同的内容标签，主要包括文字标签
•20•
第3章HTML基本标签
、段落标签、图片标签![]()
、表格标签
等标签，通过相应的属性设置，可使内容在网页中呈现出不同的效果。
具体的语法和代码，在后面的章节中将详细讲解。
3.3注释标签
注释标签-->用来在HTML文档中插入注释。
用户可使用注释对代码进行解释，便于在以后对代码进行编辑。
注释会被浏览器忽略。
用户也可以针对程序，在注释内容中编写相关的信息。
在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。
一个好的习惯是把注释放入注释文本中，这样可避免版本较低的浏览器把它们显示为纯文本。
其语法如下：
--这是一段注释，不会在浏览器中显示-->
实例3-3：使用注释标签编辑注释文字
注释标签的使用 --注释对代码进行解释，也便于在以后对代码进行编辑-->运行代码后，观察注释不会在浏览器中显示。
运行代码后效果如图3-6所示。
图3-6注释标签的使用
注释标签不支持任何标准属性。
•21•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.4嵌套标签
所谓嵌套指一个元素里面包含另一个元素。
在HTML中，大部分标签是允许嵌套的，嵌套标签中各个的属性是通用的。
下面以文字效果为例，通过几个实例学习嵌套标签应如何使用。
实例3-4：输入“注意：使用嵌套标签时，必须保持标签的完整性”。
其中，“注意”使用“黑体”；将“使用嵌套标签时”文字倾斜；“必须保持标签的完整性”加下划线。
并将其分成3行文字
嵌套标签的使用 注意
使用嵌套标签时
必须保持标签的完整性
运行代码效果如图3-7所示。
图3-7代码运行效果
以上代码中，标签包含有文字、斜体、下划线3个不同的标签。
下面将文字设置成一行，使用嵌套标签来同时改变文字的效果。
（1）将实例3-4中的文字在一行显示，并且将字体都改为“黑体”，使文字倾斜。
主体改动的代码如下：
注意，使用嵌套标签时，必须保持标签的完整性。
•22•
第3章HTML基本标签
运行代码后效果如图3-8所示。
图3-8代码运行效果
从图3-8中就可以看出，文本显示效果同时发生了变化。
从改动的代码中不难发现，斜体标签已经嵌套在文字标签中了，这样使得相关文字的字体和倾斜的效果就会同时呈现。
（2）将实例3-4中的文字字体都改为“黑体”，并将文字倾斜，在文字“完整性”下方加上下划线。
主体改动的代码如下：
注意，使用嵌套标签时，必须保持标签的完整性。
运行代码后效果如图3-9所示。
图3-9代码运行效果
在改动的代码中，用户在文字标签中嵌套了斜体标签，斜体标签中又嵌套了下划线标签，这样，相关文字的下划线效果也会同时呈现。
•23•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
在HTML中，标签是可以嵌套多层的，层数越深，文字的属性就越多。
使用嵌套标签时，必须保持标签的完整性。
开始和结束标签缺一不可，且位置也不能同其他嵌套的标签互换。
如文字是不对的。
3.5难点解析
本章难点是嵌套标签的使用。
如果源文件区域有多个标签嵌套，就需要所有被嵌套的标签都加载完成，浏览器才能正常显示。
有两种代码的写法：
--写法1-->内容代码2内容代码3内容代码4...--写法2-->内容代码2内容代码3内容代码4...
在制作网页时，一般情况下用户可能会使用写法1的嵌套。
如果对用户体验要求高，同时在一些地方嵌入的脚本会影响到页面显示，就需要用写法2的方式来书写源代码，以保证用户体验。
在页面的设计中减少嵌套的层次，可以加快浏览器的加载速度。
3.6高手训练营
1．HTML基本的标签都有哪些？
2．什么是嵌套标签？它的语法形式是怎样？
3．将实例3-2中的、标签代码添加相应的注释内容。
4．将以下文字，每一句话显示为一行，其中，每行居中对齐，写出相应的代码。
当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。
有人用大的显示器，有人用小的。
每次用户调整窗口大小时，文本都将被重新格式化。
不要想在编辑器中写一些空行和空格来协助排版。
•24•
声明：
该资讯来自于互联网网友发布，如有侵犯您的权益请联系我们。
标签：
#文件
#尺寸
#文件
#打不开
#文件
#文件
#文件
#文件
相关文章
根据网页的定位、类型、用户搜索习惯等因素综合考虑，不同网站对标题标签的使用都不相同。
（1）
一级标题，它的地位在页面中跟关键字的地位一样重要。
一些大型网站将用在LOGO上，这样的优点是：它概括了整个页面的内容，而且LOGO离“body”
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
很近，方便搜索引擎最快地抓取主题，如图3-1所示。
h1
图3-1一级标题
（2）二级标题，主要出现在页面的主体内容的文章标题和栏目标题上。
三列结构一般在中间，二列结构一般在重要的一边。
可与搭配使用，如图3-2所示。
h2
图3-2二级标题
（3）三级标题，一般在主要页面的边侧栏。
是它的辅助，出现频率不高。
根据排版页面层级关系不能太深，所以、、一般出现较少，如图3-3所示。
•18•
第3章HTML基本标签
h3
h3
图3-3三级标题
下面具体写一个标题文字标签的程序代码。
实例3-1：通过标签来实现不同标题文字效果
中国旅游 旅游景点大全
华北地区
名胜古迹
北京旅游
故宫博物院
乾清宫
运行代码后效果如图3-4所示。
图3-4不同标题文字的效果
从图3-4中很直观地看出，6种不同效果的网页标题文字。
•19•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.1.2标题文字对齐方式属性——align
在HTML中，没有设置属性的前提下，默认的标题文字是左对齐的，基于排版需要，用户可以设置标题文字的对齐方式。
对齐方式的属性是“align”，它设置在标签中。
“align”的属性值包括左对齐（left）、居中对齐（center）和右对齐（right）3种对齐方式。
其语法如下：
实例3-2：将标题文字设置不同对齐方式
中国旅游 旅游景点大全
华北地区名胜古迹
运行代码后效果如图3-5所示。
图3-5标题文字的对齐方式
3.2内容标签
为使网页中的内容更加丰富多彩，HTML提供了不同的内容标签，主要包括文字标签
•20•
第3章HTML基本标签
、段落标签、图片标签![]()
、表格标签
等标签，通过相应的属性设置，可使内容在网页中呈现出不同的效果。
具体的语法和代码，在后面的章节中将详细讲解。
3.3注释标签
注释标签-->用来在HTML文档中插入注释。
用户可使用注释对代码进行解释，便于在以后对代码进行编辑。
注释会被浏览器忽略。
用户也可以针对程序，在注释内容中编写相关的信息。
在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。
一个好的习惯是把注释放入注释文本中，这样可避免版本较低的浏览器把它们显示为纯文本。
其语法如下：
--这是一段注释，不会在浏览器中显示-->
实例3-3：使用注释标签编辑注释文字
注释标签的使用 --注释对代码进行解释，也便于在以后对代码进行编辑-->运行代码后，观察注释不会在浏览器中显示。
运行代码后效果如图3-6所示。
图3-6注释标签的使用
注释标签不支持任何标准属性。
•21•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.4嵌套标签
所谓嵌套指一个元素里面包含另一个元素。
在HTML中，大部分标签是允许嵌套的，嵌套标签中各个的属性是通用的。
下面以文字效果为例，通过几个实例学习嵌套标签应如何使用。
实例3-4：输入“注意：使用嵌套标签时，必须保持标签的完整性”。
其中，“注意”使用“黑体”；将“使用嵌套标签时”文字倾斜；“必须保持标签的完整性”加下划线。
并将其分成3行文字
嵌套标签的使用 注意
使用嵌套标签时
必须保持标签的完整性
运行代码效果如图3-7所示。
图3-7代码运行效果
以上代码中，标签包含有文字、斜体、下划线3个不同的标签。
下面将文字设置成一行，使用嵌套标签来同时改变文字的效果。
（1）将实例3-4中的文字在一行显示，并且将字体都改为“黑体”，使文字倾斜。
主体改动的代码如下：
注意，使用嵌套标签时，必须保持标签的完整性。
•22•
第3章HTML基本标签
运行代码后效果如图3-8所示。
图3-8代码运行效果
从图3-8中就可以看出，文本显示效果同时发生了变化。
从改动的代码中不难发现，斜体标签已经嵌套在文字标签中了，这样使得相关文字的字体和倾斜的效果就会同时呈现。
（2）将实例3-4中的文字字体都改为“黑体”，并将文字倾斜，在文字“完整性”下方加上下划线。
主体改动的代码如下：
注意，使用嵌套标签时，必须保持标签的完整性。
运行代码后效果如图3-9所示。
图3-9代码运行效果
在改动的代码中，用户在文字标签中嵌套了斜体标签，斜体标签中又嵌套了下划线标签，这样，相关文字的下划线效果也会同时呈现。
•23•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
在HTML中，标签是可以嵌套多层的，层数越深，文字的属性就越多。
使用嵌套标签时，必须保持标签的完整性。
开始和结束标签缺一不可，且位置也不能同其他嵌套的标签互换。
如文字是不对的。
3.5难点解析
本章难点是嵌套标签的使用。
如果源文件区域有多个标签嵌套，就需要所有被嵌套的标签都加载完成，浏览器才能正常显示。
有两种代码的写法：
--写法1-->内容代码2内容代码3内容代码4...--写法2-->内容代码2内容代码3内容代码4...
在制作网页时，一般情况下用户可能会使用写法1的嵌套。
如果对用户体验要求高，同时在一些地方嵌入的脚本会影响到页面显示，就需要用写法2的方式来书写源代码，以保证用户体验。
在页面的设计中减少嵌套的层次，可以加快浏览器的加载速度。
3.6高手训练营
1．HTML基本的标签都有哪些？
2．什么是嵌套标签？它的语法形式是怎样？
3．将实例3-2中的、标签代码添加相应的注释内容。
4．将以下文字，每一句话显示为一行，其中，每行居中对齐，写出相应的代码。
当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。
有人用大的显示器，有人用小的。
每次用户调整窗口大小时，文本都将被重新格式化。
不要想在编辑器中写一些空行和空格来协助排版。
•24•
声明：
该资讯来自于互联网网友发布，如有侵犯您的权益请联系我们。
标签：
#文件
#尺寸
#文件
#打不开
#文件
#文件
#文件
#文件
相关文章
h1 图3-1一级标题
（2）
二级标题，主要出现在页面的主体内容的文章标题和栏目标题上。
三列结构一般在中间，二列结构一般在重要的一边。
可与搭配使用，如图3-2所示。
h2
图3-2二级标题
（3）三级标题，一般在主要页面的边侧栏。
是它的辅助，出现频率不高。
根据排版页面层级关系不能太深，所以、、一般出现较少，如图3-3所示。
•18•
第3章HTML基本标签
h3
h3
图3-3三级标题
下面具体写一个标题文字标签的程序代码。
实例3-1：通过标签来实现不同标题文字效果
中国旅游 旅游景点大全
华北地区
名胜古迹
北京旅游
故宫博物院
乾清宫
运行代码后效果如图3-4所示。
图3-4不同标题文字的效果
从图3-4中很直观地看出，6种不同效果的网页标题文字。
•19•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.1.2标题文字对齐方式属性——align
在HTML中，没有设置属性的前提下，默认的标题文字是左对齐的，基于排版需要，用户可以设置标题文字的对齐方式。
对齐方式的属性是“align”，它设置在标签中。
“align”的属性值包括左对齐（left）、居中对齐（center）和右对齐（right）3种对齐方式。
其语法如下：
实例3-2：将标题文字设置不同对齐方式
中国旅游 旅游景点大全
h2 图3-2二级标题
（3）
三级标题，一般在主要页面的边侧栏。
是它的辅助，出现频率不高。
根据排版页面层级关系不能太深，所以、、一般出现较少，如图3-3所示。
•18•
第3章HTML基本标签
h3
h3
图3-3三级标题
下面具体写一个标题文字标签的程序代码。
实例3-1：通过标签来实现不同标题文字效果
中国旅游 旅游景点大全
华北地区
名胜古迹
北京旅游
故宫博物院
乾清宫
运行代码后效果如图3-4所示。
图3-4不同标题文字的效果
从图3-4中很直观地看出，6种不同效果的网页标题文字。
•19•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.1.2标题文字对齐方式属性——align
在HTML中，没有设置属性的前提下，默认的标题文字是左对齐的，基于排版需要，用户可以设置标题文字的对齐方式。
对齐方式的属性是“align”，它设置在标签中。
“align”的属性值包括左对齐（left）、居中对齐（center）和右对齐（right）3种对齐方式。
其语法如下：
实例3-2：将标题文字设置不同对齐方式
中国旅游 旅游景点大全
根据排版页面层级关系不能太深，所以
、、一般出现较少，如图3-3所示。
•18•
第3章HTML基本标签
h3
h3
图3-3三级标题
下面具体写一个标题文字标签的程序代码。
实例3-1：通过标签来实现不同标题文字效果
中国旅游 旅游景点大全
华北地区
名胜古迹
北京旅游
故宫博物院
乾清宫
运行代码后效果如图3-4所示。
图3-4不同标题文字的效果
从图3-4中很直观地看出，6种不同效果的网页标题文字。
•19•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.1.2标题文字对齐方式属性——align
在HTML中，没有设置属性的前提下，默认的标题文字是左对齐的，基于排版需要，用户可以设置标题文字的对齐方式。
对齐方式的属性是“align”，它设置在标签中。
“align”的属性值包括左对齐（left）、居中对齐（center）和右对齐（right）3种对齐方式。
其语法如下：
实例3-2：将标题文字设置不同对齐方式
中国旅游 旅游景点大全
一般出现较少，如图3-3所示。
•18•
第3章HTML基本标签
h3
h3
图3-3三级标题
下面具体写一个标题文字标签的程序代码。
实例3-1：通过标签来实现不同标题文字效果
中国旅游 旅游景点大全
华北地区
名胜古迹
北京旅游
故宫博物院
乾清宫
运行代码后效果如图3-4所示。
图3-4不同标题文字的效果
从图3-4中很直观地看出，6种不同效果的网页标题文字。
•19•
HTML/CSS网页设计与开发一站式学习——难点/案例/练习
3.1.2标题文字对齐方式属性——align
在HTML中，没有设置属性的前提下，默认的标题文字是左对齐的，基于排版需要，用户可以设置标题文字的对齐方式。
对齐方式的属性是“align”，它设置在标签中。
“align”的属性值包括左对齐（left）、居中对齐（center）和右对齐（right）3种对齐方式。
其语法如下：
实例3-2：将标题文字设置不同对齐方式
中国旅游 旅游景点大全
旅游景点大全
华北地区
名胜古迹
北京旅游
故宫博物院
乾清宫
运行代码后效果如图3-4所示。图3-4不同标题文字的效果 从图3-4中很直观地看出，6种不同效果的网页标题文字。
•19• HTML/CSS网页设计与开发一站式学习——难点/案例/练习 3.1.2标题文字对齐方式属性——align 在HTML中，没有设置属性的前提下，默认的标题文字是左对齐的，基于排版需要，用户可以设置标题文字的对齐方式。
对齐方式的属性是“align”，它设置在
“align”的属性值包括左对齐（left）、居中对齐（center）和右对齐（right）3种对齐方式。
其语法如下：
图3-5标题文字的对齐方式 3.2内容标签 为使网页中的内容更加丰富多彩，HTML提供了不同的内容标签，主要包括文字标签 •20• 第3章HTML基本标签 、段落标签
、图片标签、表格标签
