HTML 新手入门：从零基础到搭建第一个静态页面（二）

构建第一个静态页面

（一）规划页面结构

在开始编写代码之前，我们需要先规划好页面的结构。这就好比在建造房屋之前，需要先设计好房屋的布局一样。思考一下你希望页面展示哪些内容，比如是一篇文章、一组图片，还是一个产品介绍。然后确定这些内容的布局，比如标题放在哪里，段落如何排列，图片放在什么位置等。

例如，我们要创建一个简单的个人介绍页面，可能会有一个大标题 “关于我”，下面是一些段落介绍自己的基本信息、兴趣爱好等，再插入一张自己的照片，最后添加一些链接到社交媒体账号。通过这样的规划，我们可以让页面的结构更加清晰，用户在浏览时也能更容易理解和获取信息。

（二）编写 HTML 代码

1. 添加标题和段落

在 HTML 中，我们使用

-

标签来添加标题，

表示一级标题，是最重要的标题，通常用于页面的主标题，

-

表示二级到六级标题，重要性依次递减 ，可以用于章节标题等。例如：

<h1>我的个人介绍</h1>

<h2>基本信息</h2>

<p>我叫张三，今年25岁，是一名前端开发爱好者。</p>

<h2>兴趣爱好</h2>

<p>我喜欢阅读、旅行和学习新的技术。</p>

在这个例子中，

标签定义了页面的主标题 “我的个人介绍”，

标签分别定义了 “基本信息” 和 “兴趣爱好” 两个章节标题，

标签则用于添加段落内容，详细介绍了个人的信息和兴趣爱好。

2. 插入图片

通过标签，我们可以在页面中插入图片。标签是一个单标签，它有两个重要的属性：src和alt 。src属性用于指定图片的路径，可以是相对路径（相对于 HTML 文件的位置），也可以是绝对路径（完整的文件路径） ；alt属性用于指定图片无法显示时的替代文本，这对于提高网页的可访问性非常重要，比如视障用户使用屏幕阅读器时，就可以通过alt文本了解图片的内容 。例如：

<!-- 插入本地图片，假设图片与HTML文件在同一目录下 -->

<img src="photo.jpg" alt="张三的照片">

<!-- 插入网络图片 -->

<img src="https://example.com/image.jpg" alt="示例图片">

如果图片和 HTML 文件不在同一目录下，需要根据相对路径的规则来设置src属性。比如图片在 HTML 文件的上一级目录的 “images” 文件夹中，那么src属性可以设置为src="../images/photo.jpg" ，其中 “../” 表示上一级目录。

3. 创建链接

利用标签，我们能够创建超链接，实现页面之间的跳转或跳转到页面内的特定位置。标签的href属性用于指定链接的目标地址，可以是一个网页的 URL、一个文件的路径，也可以是页面内的锚点 。例如：

<!-- 跳转到外部网站 -->

<a href="https://www.example.com">访问示例网站</a>

<!-- 跳转到同一网站的其他页面，假设同一目录下有about.html文件 -->

<a href="about.html">关于我们</a>

<!-- 跳转到页面内的锚点，假设页面中有一个id为“section1”的元素 -->

<a href="#section1">跳转到第一节</a>

当链接到外部网站时，建议添加target="_blank"属性，这样链接会在新窗口中打开，不会影响当前页面的浏览 。例如：

<a href="https://www.example.com" target="_blank">访问示例网站</a>

此外，标签还可以用于创建下载链接，只需要将href属性指向一个文件的路径，并添加download属性即可 。例如：

<a href="document.pdf" download>下载文档</a>

4. 制作表格

使用