HTML 联系信息

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在网页开发中,<address> 标签用于在网页上显示联系信息。它用于指示发布网页、文档或文章的作者、组织或公司的详细信息。

在本实验中,我们将创建一个简单的网页,并使用 <address> 标签在页面底部显示联系信息。

注意:你可以在 index.html 中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/templating("`HTML Templating`") subgraph Lab Skills html/basic_elems -.-> lab-70701{{"`HTML 联系信息`"}} html/head_elems -.-> lab-70701{{"`HTML 联系信息`"}} html/text_head -.-> lab-70701{{"`HTML 联系信息`"}} html/para_br -.-> lab-70701{{"`HTML 联系信息`"}} html/layout -.-> lab-70701{{"`HTML 联系信息`"}} html/doc_flow -.-> lab-70701{{"`HTML 联系信息`"}} html/inter_elems -.-> lab-70701{{"`HTML 联系信息`"}} html/templating -.-> lab-70701{{"`HTML 联系信息`"}} end

创建一个基本的 HTML 模板

创建一个名为 index.html 的 HTML 文件,并在代码编辑器中打开它。

将以下基本的 HTML 模板代码添加到文件中:

<!doctype html>
<html>
  <head>
    <title>Contact Information</title>
  </head>
  <body></body>
</html>

添加标题和段落

添加一个标题和一段文字,为页面提供简要介绍或摘要。

<h1>Contact Information</h1>
<p>Welcome to my webpage. This webpage contains contact information.</p>

添加联系信息

创建一个联系信息部分,并将 <address> 标签放置在该部分中。在 <address> 标签的开始和结束之间添加相关的联系信息。例如:

<section>
  <h2>Contact Details</h2>
  <address>
    <p>John Doe</p>
    <p>
      123 Main Street <br />
      Anytown, USA 12345
    </p>
    <p><a href="mailto:[email protected]">[email protected]</a></p>
    <p><a href="tel:123-456-7890">123-456-7890</a></p>
  </address>
</section>

在上面的示例中,我们添加了一个标题为 "Contact Details" 的部分,并在该部分中创建了一个 <address> 标签来显示联系信息。我们在 <address> 标签内添加了姓名、地址、电子邮件和电话号码。

添加 CSS 样式

<address> 标签添加一些 CSS 样式以赋予其格式。默认情况下,<address> 标签的样式是块级元素并带有斜体。我们将对其进行更改,使其居中对齐并加粗。

<style>
  address {
    display: block;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>

保存 index.html 文件并在网页浏览器中打开它,查看带有联系信息的最终网页。

总结

<address> 标签是一个有用的 HTML 元素,用于在网页上显示联系信息。在本实验中,我们学习了如何使用 <address> 标签在网页上创建一个用于显示联系信息的部分。我们还学习了如何为 <address> 标签添加一些 CSS 样式,以便以更好的方式对其进行视觉格式化。

您可能感兴趣的其他 HTML 教程