- HTML+CSS+JavaScript网页制作:Web前端开发(第3版)
- 刘瑞新 张兵义 朱立等编著
- 1501字
- 2021-12-17 17:37:36
1.4 HTML5的基本结构
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/15_02.jpg?sign=1739360943-tZqWQq0oYgkXmknz7TW9wEakUUzbyVzn-0-6999445415fd5150e9ef75e3a723dabb)
2 HTML5的基本结构
每个网页都有其基本的结构,包括HTML的语法结构、文档结构、标签的格式以及代码的编写规范等。
1.4.1 HTML5语法结构
1.标签
HTML文档由标签和受标签影响的内容组成。标签(Tag)能产生所需要的各种效果,其功能类似于一个排版软件,将网页的内容排成理想的效果。标签是用一对尖括号“<”和“>”括起来的单词或单词缩写。各种标签的效果差别很大,但表示形式却大同小异,大多数都成对出现。在HTML中,标签通常都是由开始标签和结束标签组成的,开始标签用“<标签>”表示,结束标签用“</标签>”表示。其格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/15_03.jpg?sign=1739360943-GaE8p285kvuVwk7zmgEBTzHhdydsG8WC-0-acfc74c0ec1295f15726418ade9f6a0a)
例如,一级标题标签<h1>表示如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/15_04.jpg?sign=1739360943-VISmxu0rYU0v2Yv6aE3ZI6INQK6YUgB9-0-020446c461d132e9e4e0b1b2e94900e2)
需要注意以下两点。
①每个标签都要用“<”和“>”括起来,如<p>,<table>,以表示这是HTML代码而非普通文本,“<”“>”与标签名之间不能留有空格或其他字符。
②在标签名前加上符号“/”便是其结束标签,表示该标签内容的结束,如</h1>。标签也有不用</标签>结尾的,称之为单标签。例如,换行标签<br/>。
2.属性
标签仅仅规定这是什么信息,但是要想显示或控制这些信息,就需要在标签后面加上相关的属性。标签通过属性来制作出各种效果,通常都是以“属性名="值"”的形式来表示,用空格隔开后,还可以指定多个属性,并且在指定多个属性时不用区分顺序。其格式为:
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/16_01.jpg?sign=1739360943-UEhSVyTFFuAJ59mMciJ34xfmnGCJvsIJ-0-0ab54fc4abb714235a75c3295cb9442b)
3.元素
元素指的是包含标签在内的整体,元素的内容是开始标签与结束标签之间的内容。没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。
1.4.2 HTML5编写规范
页面的HTML代码书写必须符合HTML规范。具有良好结构的文档可以很好地工作于所有的浏览器,并且可以向后兼容。
1.标签的规范
①标签分单标签和双标签,双标签往往是成对出现的,所有标签(包括空标签)都必须关闭,如<br/>、<img/>、<p>…</p>等。
②标签名和属性建议都用小写字母。
③多数HTML标签可以嵌套,但不允许交叉。
2.属性的规范
①根据需要可以使用该标签的所有属性,也可以只用其中的几个属性。在使用时,属性之间没有顺序。
②属性值都要用双引号括起来。
③并不是所有的标签都有属性,如换行标签就没有属性。
3.元素的嵌套
①块级元素可以包含行级元素或其他块级元素,但行级元素却不能包含块级元素,它只能包含其他行级元素。
②有几个特殊的块级元素只能包含行级元素,不能再包含块级元素,这几个特殊的标签是:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、<dt>。
4.代码的缩进
HTML代码并不要求在书写时缩进,但为了文档的结构性和层次性,建议初学者在使用标记时首尾对齐,内部的内容向右缩进几格。
1.4.3 HTML5文档结构
HTML5文档是一种纯文本格式的文件,文档的基本结构如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/16_02.jpg?sign=1739360943-B9iiH2CHiAAfI4LKoeRB7EHuLBIqhSUT-0-9a9df229974da7c8d2c0574009f26575)
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_01.jpg?sign=1739360943-fqa5Uu3pWMYzL7waYdoA3St0KnUATFqp-0-bbbb09d8a471c789fe117ca2ff77c40d)
1.文档类型
在编写HTML5文档时,要求指定文档类型。文档类型用于向浏览器说明当前文档使用的是哪种HTML标准。文档类型声明的格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_02.jpg?sign=1739360943-ypgYHgIXvVodW3uyBixBSbdWAIlne0To-0-7ff6bcc1a83c68cb2ff8326c5c60bc43)
这行代码称为doctype声明。doctype是document type(文档类型)的简写。要建立符合标准的网页,doctype声明是必不可少的关键组成部分。doctype声明必须放在每一个HTML文档的最顶部,在所有代码和标签之前。
2.HTML文档标签<html>…</html>
HTML文档标签的格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_03.jpg?sign=1739360943-uYaAovuONMwhYy1DXAeFAviLIUIZegmH-0-e5114af87575ad2e0896f29fff904e16)
<html>处于文档的最前面,表示HTML文档的开始,即浏览器从<html>开始解释,直到遇到</html>为止。每个HTML文档均以<html>开始,以</html>结束。
3.HTML文档头标签<head>…</head>
HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_04.jpg?sign=1739360943-isLjdXsnOzUhzW9xMvAFNHCrG1ljidsF-0-a26d90e0a2f0eacacd2d088e8b1b2a9c)
文档头部内容在开始标签<html>和结束标签</html>之间定义,其内容可以是标题名或文本文件地址、创作信息等网页信息说明。
4.HTML文档编码
HTML5文档直接使用meta元素的charset属性指定文档编码,格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_05.jpg?sign=1739360943-pdNobtN75UWgcGiKiD7Y8qmuccC3PrSD-0-107373e9a4d9539aa3b2bacd9fce3d2d)
为了被浏览器正确解释和通过W3C代码校验,所有的HTML文档都必须声明它们所使用的语言编码。文档声明的编码应该与实际的编码一致,否则就会呈现为乱码。UTF-8是世界通用的HTML语言编码,用户一般使用UTF-8来指定文档编码。
5.HTML文档主体标签<body>…</body>
HTML文档主体标签的格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_06.jpg?sign=1739360943-zcAxwkaDF6X4JadTSUxPR2Ew7VQi9o1d-0-1075ad7ee875bbe4aee55b0b119b9e0c)
主体位于头部之后,以<body>为开始标签,</body>为结束标签。它定义网页上显示的主要内容与显示格式,是整个网页的核心。网页中要真正显示的内容都包含在主体中。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_07.jpg?sign=1739360943-yNXV1aZhDiYBobai9cqck4ktydQGQxxd-0-a97629c7bf68dd5a92bf0f1f31fb872b)
3 HBuilder X编辑HTML文件-1