1.2.2　HTML中的基础标签

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

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

【代码片段1-3　源码见附件代码/第1章/2.base.html】

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

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

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

【代码片段1-4　源码见附件代码/第1章/2.base.html】

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

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

【代码片段1-5　源码见附件代码/第1章/2.base.html】

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

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

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

【代码片段1-6　源码见附件代码/第1章/2.base.html】

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

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

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

     tagName = "value"

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

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

效果如图1-8所示。

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

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

注释都是写给开发人员看的，方面后续代码的维护和扩展。