Мастерство в области HTML Контактной информации

Введение

В веб-разработке тег <address> используется для отображения контактной информации на веб-странице. Он используется для указания деталей автора, организации или компании, которая публикует веб-страницу, документ или статью.

В этом лабе мы создадим простую веб-страницу и используем тег <address> для отображения контактной информации внизу страницы.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Создайте базовый HTML-шаблон

Создайте HTML-файл с именем index.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:john@example.com">john@example.com</a></p>
    <p><a href="tel:123-456-7890">123-456-7890</a></p>
  </address>
</section>

В приведенном выше примере мы добавили раздел с заголовком "Contact Details" (Детали контакта), и внутри этого раздела мы создали тег <address> для отображения контактной информации. Мы добавили имя, адрес, электронную почту и номер телефона внутри тега <address>.

Добавьте CSS-стили

Добавьте несколько стилей CSS к тегу <address>, чтобы придать ему определенный формат. По умолчанию тег <address> имеет стиль в виде блока с курсивом. Мы изменим его, чтобы сделать выравнивание по центру и жирным.

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

Сохраните файл index.html и откройте его в веб-браузере, чтобы увидеть конечную веб-страницу с контактной информацией.

Резюме

Тег <address> - это полезный HTML-элемент, который используется для отображения контактной информации на веб-странице. В этом практическом занятии мы узнали, как использовать тег <address> для создания раздела для отображения контактной информации на веб-странице. Мы также узнали, как добавить несколько стилей CSS к тегу <address>, чтобы он был визуально лучше отформатирован.

HTML Контактная информация