![HTML+CSS+JavaScript网页制作:Web前端开发(第3版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/108/41865108/b_41865108.jpg)
1.4 HTML5的基本结构
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/15_02.jpg?sign=1739279565-7tXJF9OxUEmCXGuHfVzhYTymqCkb4aXA-0-0a83dd20889f6943111803c4b1b5287e)
2 HTML5的基本结构
每个网页都有其基本的结构,包括HTML的语法结构、文档结构、标签的格式以及代码的编写规范等。
1.4.1 HTML5语法结构
1.标签
HTML文档由标签和受标签影响的内容组成。标签(Tag)能产生所需要的各种效果,其功能类似于一个排版软件,将网页的内容排成理想的效果。标签是用一对尖括号“<”和“>”括起来的单词或单词缩写。各种标签的效果差别很大,但表示形式却大同小异,大多数都成对出现。在HTML中,标签通常都是由开始标签和结束标签组成的,开始标签用“<标签>”表示,结束标签用“</标签>”表示。其格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/15_03.jpg?sign=1739279565-lS1x9emyHXGGMKJREgMc3Wl90Xz0OFdY-0-80c8ec0604128f022e57258164a8df4d)
例如,一级标题标签<h1>表示如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/15_04.jpg?sign=1739279565-oAZ7YyKrxZ6ZCM0GnsTewNVRE3soVGGU-0-0bd041f8f0696cd050379546e1f5f49c)
需要注意以下两点。
①每个标签都要用“<”和“>”括起来,如<p>,<table>,以表示这是HTML代码而非普通文本,“<”“>”与标签名之间不能留有空格或其他字符。
②在标签名前加上符号“/”便是其结束标签,表示该标签内容的结束,如</h1>。标签也有不用</标签>结尾的,称之为单标签。例如,换行标签<br/>。
2.属性
标签仅仅规定这是什么信息,但是要想显示或控制这些信息,就需要在标签后面加上相关的属性。标签通过属性来制作出各种效果,通常都是以“属性名="值"”的形式来表示,用空格隔开后,还可以指定多个属性,并且在指定多个属性时不用区分顺序。其格式为:
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/16_01.jpg?sign=1739279565-60loNl3BNoavKWW9EsvYQSASGUFNEmeD-0-f49da16d358421674ceb867d82b1a7d6)
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=1739279565-BSM6AAJkpblxQGxTbPRLEtN6Iv87w89L-0-9487c1a165833d09c8d502cdc0754747)
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_01.jpg?sign=1739279565-CtVwYKjQGN0onQUMc2vuDaVc9gYwGAt6-0-0629c485c52fc56bd0f9a2e4711e286e)
1.文档类型
在编写HTML5文档时,要求指定文档类型。文档类型用于向浏览器说明当前文档使用的是哪种HTML标准。文档类型声明的格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_02.jpg?sign=1739279565-aT3Skq5rF2Qg0ePWBRtWAXssn2capbt7-0-3bd2833091f3f4a9f789ef5bd6619fd3)
这行代码称为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=1739279565-8tLSqIt6eh43knGewGGPeFbJqlkpajwz-0-32e57e526f83af88877b8e27a1784869)
<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=1739279565-vNCb2pC8qMWX5MemXrCfKcbKHpdjSuZv-0-27e22a74903e7e3028a66ddc2af1c50b)
文档头部内容在开始标签<html>和结束标签</html>之间定义,其内容可以是标题名或文本文件地址、创作信息等网页信息说明。
4.HTML文档编码
HTML5文档直接使用meta元素的charset属性指定文档编码,格式如下。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_05.jpg?sign=1739279565-cHuUJ8IEoQXI4DEYHtRz8zS48h8H0Jnn-0-55b9aefa284c827dc4f7ad9a50178be5)
为了被浏览器正确解释和通过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=1739279565-ux5zZgPThWRWNtJh9BM57Xqsiwm569zL-0-0c092fcb6411507eb25aec73ff719f55)
主体位于头部之后,以<body>为开始标签,</body>为结束标签。它定义网页上显示的主要内容与显示格式,是整个网页的核心。网页中要真正显示的内容都包含在主体中。
![](https://epubservercos.yuewen.com/3CD032/21889224408630006/epubprivate/OEBPS/Images/17_07.jpg?sign=1739279565-yOGXrQE1gwTBAAvIbjf0JqINURSIDszF-0-ce59d26a895761d1c62348827d8eab90)
3 HBuilder X编辑HTML文件-1