09构建HTML文档与超链接

原创已于 2025-09-05 15:46:33 修改 · 620 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

于 2025-09-05 14:18:32 首次发布

一. 前端的学习之旅专栏收录该内容

9 篇文章

订阅专栏

文档的基本组成部分

页眉

通常是一个横跨顶部的大条带，上面有一个大标题，徽标，标语等，通常在网站的各个页面上保持不变

导航栏

指向网站各个住哟啊区段的超链接。通常用菜单按钮，链接或者标签页表示，导航栏通常应该在所有网页之间保持一致

主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频，文章等，这些内容是网站的一部分，会因页面而异

侧边栏

一些外围信息，链接，引用等，通常与主内容相关，或者辅助导航系统

页脚

用于构建内容的 HTML

为了实现语义化标记，HTML 提供了明确以上区段的专用标签

页眉：<header>
导航栏：<nav>
主内容：<main主内容中可以有各种子内容区段，<article>,<section>,<div>
侧边栏：<aside>
页脚：<footer>

示例

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的页面标题</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
      rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- 本站所有网页的统一主标题 -->
    <header>
      <h1>页眉</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">我们的团队</a></li>
        <li><a href="#">项目</a></li>
        <li><a href="#">联系方式</a></li>
      </ul>

      <!-- 搜索栏是站点内导航的一个非线性的方式。 -->

      <form>
        <input type="search" name="q" placeholder="要搜索的内容" />
        <input type="submit" value="搜索" />
      </form>
    </nav>

    <!-- 网页主体内容 -->
    <main>
      <!-- 一篇文章 -->
      <article>
        <h2>文章标题</h2>

        <p>
          段落
        </p>

        <section>
          <h3>子章节</h3>

          <p>
            段落
          </p>

        </section>
      </article>

      <!-- 辅助内容也可以嵌套在主要内容中 -->
      <aside>
        <h2>相关内容</h2>

        <ul>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
        </ul>
      </aside>
    </main>

    <!-- 本站所有网页的统一页脚 -->

    <footer>
      <p>© 2050 某某保留所有权利</p>
    </footer>
  </body>
</html>

HTML 布局元素细节

更多细节查阅 HTML 元素参考，主要元素意义

<main>存放本页面独有内容，每个页面只能用一次<main>，直接位于<body>中，最好不要把它嵌套进其它元素
<article>包裹内容为一篇文章
<section>一组内容，与<article>,类似
<aside>提供与主要内容间接相关的附加信息
<header>简洁形式的内容，在 <body>中为全局页眉
<nav>包含页面主导航功能，其中不应包含二级链接
<footer>包含页面页脚部分

无语义包装器

对于一些要组织的项目或要包装的内容，现有的语义元素不能很好对应，这时我们需要使用<div>和<span>元素，配合使用 class 属性提供一些标签，使这些元素能易于定位

<span>是一个行级无语义元素，最好只用于无法找到更好的语义元素来包含内容时，后者不想增加特定的含义

<p>
  国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span
    class="editor-note"
    >[编辑批注：此刻舞台灯光应变暗]</span>。<!--没有具体语义-->
</p>

<div>是一个块级无语义元素，仅用于找不到更好的块级元素时

<div class="shopping-cart">
  <h2>购物车</h2>
  <ul>
    <li>
      <p>
        <a href=""><strong>银耳环</strong></a>：$99.95
      </p>
      <img src="../products/3333-0985/" alt="银耳环" />
    </li>
    <li>……</li>
  </ul>
  <p>总消费：$237.89</p>
</div>

这里不应使用 <aside>，因为它和主内容并没有必要的联系。甚至不能用 <section>，因为它也不是页面上主内容的一部分。所以在这种情况下就应使用 <div>，为满足无障碍使用特征，还应为购物车的标题设置一个可读标签。（尽量少用）

换行与水平分割线

<br>：换行元素

<hr>：水平分割线

<p>
  豫章故郡<br />
  洪都新府<br />
<hr />
  落霞与孤鹜齐飞<br />
  秋水共长天一色<br />
</p>

规划一个简单的网站

在规划好单个网页的结构后，下一阶段就是规划整个多页面网站的结构，包括如何排列和相互链接，以获得最佳的用户体验。这些工作称为信息架构

规划一个简单网站的设计过程：

1.大多数页面会使用一些相同的元素，通用内容

页眉：标题和徽标、站点语言选择器

导航栏

2.页面结构绘制草图，记录每一块的作用

3.罗列期望添加进站点的所有其他内容

4.对以上罗列的内容进行分组

5.绘制一个粗略的网站地图，为网站上的每个页面划一个框，并划线表示页面之间的典型工作流程，主页可能位于顶部或中心位置，并链接到大多数页面。小型网站中的大多数页面都应该可以从主导航中找到

链接的解析

通过将文本或其他内容包裹在<a>元素内，并给它一个包含网址的 href 属性来创建一个基本链接。

<a href="https://www.baidu.com">百度网页</a>

块级链接

任何内容都可以作为链接出现。

将标题变为链接：

<a href="https//www.baidu.com"> <h1>百度</h1> </a>

图片链接

<a href="https://www.baidu.com"> <img src="baidu_logo.svg" alt="百度" /> </a>

将百度图片转为链接

使用 title 属性添加支持信息

title 属性旨在包含关于链接的补充信息，例如页面包含什么样的信息或需要注意的事情

<p>
  我创建了一个指向
  <a
    href="https://www.baidu.com"
    title="百度网站，搜索引擎">
    百度 主页</a
  >的超链接。
</p>

悬停时显示 title 属性值

统一资源定位符与路径

统一资源定位符（Uniform Resource Locator）是一个定义了在网络上的位置的一个文本字符串。 URL 使用路径查找文件

指向当前目录（同一目录下）：使用<a href="index.html"></a>
指向子目录（其他文件夹内）：使用<a href="pages/index.html"></a>
指向上级目录：使用<a href="../pages/index.html"></a>

链接到文档片段

超链接除了可以链接网页，也可以链接到 HTML 文档的特定部分，我们只需要给要链接到的元素分配一个 id 属性

<h2 id="baidu-address">百度地址</h2>

为了链接到这个特定 id ，要将它放在 url 末尾，并在前面包含#号

<a href="index.html#baidu-address">链接到标题</a>

也可以在同一份文档下通过链接文档片段，来链接到文档的另一部分

<a href="#baidu-address">链接本文档的标题部分</a>

绝对 URL 与相对 URL（绝对链接，相对链接）

绝对 URL：指向由其在 Web 上的绝对位置定义的位置
相对 URL：指向与你链接的文件相关的位置

好的链接文本，链接到非 HTML 资源

<p>
  <a href="https://www.example.com/large-report.pdf">
    下载销售报告（PDF，大小为 10 MB）
  </a>
</p>

<p>
  <a href="https://www.example.com/video-stream/" target="_blank">
    观看视频（将在新标签页中播放，HD 画质）
  </a>
</p>

添加明确的措辞

<a
  href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
  download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64 位）
</a>

当链接的是要下载的资源时，使用 download 属性提供默认保存文件名.

电子邮件链接等其他信息

通过链接开启一个邮件发送而不是链接到一个资源或者页面，这时候需要使用<a>元素和 mailto: URL 协议实现

<a href="mailto:xsj@qq.com">向 xsj 发邮件</a>

除了电子邮件地址，你还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的 mailto URL 中。其中最常用的是主题（subject）、抄送（cc）和主体（body）（这不是一个真正的标头字段，但允许你为新邮件指定一个简短的内容消息）。每个字段及其值被指定为查询项。

<a
  href="mailto:nowhere@mozilla.org?
  cc=name2@rapidtables.com&
  bcc=name3@rapidtables.com&
  subject=The%20subject%20of%20the%20email&
  body=The%20body%20of%20the%20email">
  发送含有 cc、bcc、主题和主体的邮件
</a>

示例 mailto 链接：