1.2.2　HTML中的基础标签

HTML中预定义了很多标签，本节通过几个基础标签的应用实例来向读者介绍标签在HTML中的简单用法。

HTML文档中的标题通常使用h标签来定义，根据标题的等级h标签又分为h1~h6共6个等级。使用VSCode编辑器创建一个名为base.html的文件，在其中编写如下代码：

我们后面的大多示例HTML文档的基本格式都是一样的，代码的不同之处主要在body标签内，后面的示例只会展示核心body中的代码。

运行上面的HTML文件，浏览器渲染效果如图1-6所示。可以发现，不同等级的标题文本字体的字号大小是不同的。

图1-6　HTML中的h标签

HTML文档的正文部分通常使用p标签定义，p标签的意义是段落，正文中的每个段落的文本都可以将其包裹在p标签内，如下：

     <p>这里是一个段落</p>
     <p>这里是一个段落</p>

a标签用来定义超链接，a标签中的href属性可以指向一个新的文档路径，当用户单击超链接的时候，浏览器会跳转到超链接指向的新网页，例如：

     <a href="https://www.baidu.com">跳转到百度</a>

在实际的应用开发中，我们将很少使用a标签来处理网页的跳转逻辑，更多时候使用JavaScript来操作跳转逻辑。

HTML文档中也可以方便地显示图像，我们向base.html文件所在的目录中添加一张图片素材（demo.png），使用img标签来定义图像，如下：

     <div><img src="demo.png" alt="图片" width="400px"></div>

需要注意，之所以将img标签包裹在div标签中，是因为img标签是一个行内元素，如果我们想让图片单独另起一行展示，则需要使用div标签包裹，示例效果如图1-7所示。

图1-7　HTML文档效果演示

HTML中的标签可以通过属性对其渲染或交互行为进行控制，例如上面的a标签，href就是一种属性，其用来定义超链接的地址。在img标签中，src属性定义图片素材的地址，width属性定义图片渲染的宽度。标签中的属性使用如下格式设置：

     tagName = "value"

tagName为属性的名字，不同的标签支持的属性也不同。通过设置属性，我们可以方便地对HTML文档中元素的布局与渲染进行控制，例如对于h1标签来说，将其align属性设置为center后，其就会在文档中居中展示：

     <h1 align = "center">1级标题</h1>

效果如图1-8所示。

图1-8　标题居中展示

HTML中还定义了一种非常特殊的标签：注释标签。编程工作除了要进行代码的编写外，优雅地撰写注释也是非常重要的。注释的内容在代码中可见，但是对浏览器来说是透明的，不会对渲染产生任何影响，示例如下：

     <!-- 这里是注释的内容 -->