- 剑指大前端全栈工程师（全2册）
- 贾志杰 史广 赵东彦编著
- 2259字
- 2024-12-28 11:22:30
2.2 HTML基本结构
HTML文档一般应包含两部分，即头部区域和主体区域。HTML文档的基本结构由3个标签负责组织：<html>、<head>、<body>，其中<html>标签标识HTML文档，<head>标签标识头部区域，而<body>标签标识主体区域。
HTML的基本结构如下：
HTML5元素的内容一般是以起始标签<元素名>开始，以结束标签</元素名>终止，如<title>网页标题</title>。浏览器解析标签中的内容后在网页上展示给用户，使用VS Code开发工具，根据基本结构编写第1个页面，如例2-1所示。
【例2-1】 HTML5第1个页面
其中，<title>标签包含的内容显示在标题栏中，而<body>标签包含的内容显示在网页中，页面显示效果如图2-2所示。
图2-2 第1个HTML5页面
2.2.1 HTML骨架
1．文档类型声明<！DOCTYPE>
DOCTYPE文档声明，它是Document Type Definition的英文缩写，意思是文档类型定义，在HTML文档中，用来指定页面所使用的HTML（或者XHTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，HTML里的标识和CSS才能正常生效。它一般定义在页面的第1行，在<html>标签之前。
在HTML4中，文档类型的声明方法如下：
在HTML5中对文档类型的声明进行了简化，声明方法如下：
2．根标签<html>
<html>用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件，所有的HTML文件都要被<html>开始标签和结束标签</html>包裹，在它之间包含了两个重要的元素标签：<head>头部标签和<body>主体标签。
3．头标签<head>
<head>标签中的内容不会显示在网页的页面中。<head>一般包含<title>和<meta>标签，用于声明页面标题、字符集和关键字等。
1）标题标签<title>
<title>用于定义文档的标题，其内容显示在浏览器窗口的标题栏或状态栏上。<title>标签是<head>标签中唯一必须包含的，而且在<title>标签内容中写和网页相关的关键词有利于SEO优化。
2）元数据标签<meta>
<meta>标签可提供有关页面的元信息（meta-information），例如针对搜索引擎和更新频度的描述和关键词。通常<meta>标签用于定义网页的字符集、关键词、描述、作者等信息。
（1）字符集声明，charset属性为HTML5新增的属性，用于声明字符编码。在理论上，可以使用任何字符编码，但并不是所有浏览器都能够理解它们。某种字符编码使用的范围越广，浏览器就越有可能理解它，目前使用最广的字符集是UTF-8，因为UTF-8是国际通用字库。以后我们统统使用UTF-8字符集，这样就会避免出现字符集不统一而引起乱码的情况了。
以UTF-8字符集为例，下面两种字符集声明写法效果一样：
或
（2）关键词声明，keywords用来告诉搜索引擎网页的关键字是什么，用法如下：
（3）页面描述，description用来告诉搜索引擎网站主要内容的描述，用法如下：
（4）页面作者，标注网页的作者，用法如下：
（5）刷新页面，以每30s刷新一次页面为例，用法如下：
4．主体标签<body>
主体<body>标签是定义文档的主体，其设置的内容是读者实际看到的网页信息。在主体<body>标签中可以放置网页中所有的内容，例如文本、超链接、图像、表格、列表等。
设置<body>标签属性可以改变页面的显示效果，<body>标签属性、取值及描述如表2-1所示。
表2-1 <body>标签属性、值及描述
body属性的基本用法，示例代码如下：
2.2.2 基本语法
HTML文档结构主要由若干标签（标记）构成，HTML5根据Web标准，重新定义了一套在HTML4基础上修改而来的语法，以便各个浏览器在运行HTML时能够符合通用标准。
1．内容类型
HTML5文档的扩展名为.html或.htm，内容类型为text/html。
2．化繁为简
HTML5对比之前的XHTML做了大量的简化工作，具体如下：
（1）以浏览器的原生能力代替复杂的JavaScript。
（2）DOCTYPE被简化到极致。
（3）字符集声明被简化。
（4）简单强大的API。
3．标签类型
1）单标签
基本语法如下：
常用的单标签有<br>、<hr>、<link>、<input/>等。
2）双（成对）标签
基本语法如下：
常用的双标签有<html></html>、<body></body>、<strong></strong>、<div></div>等。
4．标签省略
在HTML5中，元素的标签分为3种类型：可以省略全部标签的元素、可以省略结束标签的元素、不允许写结束标签的元素。下面介绍这3种类型各包括哪些标签。
（1）可以省略全部标签的元素：html、head、body、colgroup、tbody。
示例代码如下：
注意：即使标记被省略了，该元素还是以隐式的方式存在。在浏览器查看源码时，会发现被省略的标签会被补上。
（2）可以省略结束标签的元素：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
示例代码如下：
（3）不允许写结束标签的元素：area、base、br、col、embed、hr、img、input、keygen、link、meta、wbr、source。
不允许写结束标签的元素是指不允许使用开始标签与结束标签将元素括起来的形式，只允许使用<元素/>的形式进行书写。
错误的书写方式，示例代码如下：
正确的书写方式，示例代码如下：
5．属性值
属性为HTML元素提供附加信息。HTML标签可以拥有属性，属性提供了有关HTML元素的更多的信息，如图2-3所示。
图2-3 属性
HTML属性书写注意事项：
（1）属性必须在开始标签里定义，并且与首标签名称之间至少留一个空格。
（2）属性总是以键值对的形式出现，例如align="center"。
（3）一个元素的属性可能不止一个，多个属性之间用空格隔开。
（4）多个属性之间不区分先后顺序。
（5）属性和属性值对大小写不敏感。
属性值两边既可以使用双引号，也可以使用单引号，当属性值不包括空字符串、<、>、=、单引号、双引号等字符时，属性值两边的引号可以省略。
下面写法都是合法的：
6．标签嵌套
在HTML中有大量的标签，大部分标签是可以互相嵌套的。标签必须成对嵌套，不能交叉嵌套，如图2-4所示。
图2-4 标签嵌套
2.2.3 注释
经常需要在一些代码旁做一些HTML注释，这样既方便项目组的其他程序员了解所写的代码，也方便以后自己对代码的理解与修改等。
对关键代码的注释是一个良好的习惯，可以提高代码的可读性。在开发网站或者功能模块时，代码的注释尤其重要。因为网页的代码量往往是几百甚至上千行，如果不对关键的代码进行注释，对于后期修改与维护会增加很大的成本，甚至过段时间后看不懂自己当时写的代码。
注释行的写法如下：
注释只在编辑文本情况下可见，在浏览器展示页面时并不会显示，如例2-2所示。
【例2-2】 注释应用实例
页面显示结果为“这是内容-html注释常识”。
注意：注释不可以互相嵌套。