HTML: 30-минутный урок для начинающих

Цель этой статьи

За 30 минут вы поймёте, что такое HTML, и получите базовое представление о нём. Как только вы начнёте, вы сможете найти более подробные ресурсы в интернете, чтобы продолжить обучение.

Что такое HTML

HTML — это аббревиатура английской фразы Hyper Text Mark-up Language (язык гипертекстовой разметки). Он определяет собственные правила синтаксиса, чтобы выражать значения богаче, чем «текст», например изображения, таблицы, ссылки и т. д. Программы-браузеры (IE, FireFox и т. д.) понимают синтаксис языка HTML, и с их помощью можно просматривать HTML-документы. В настоящее время подавляющее большинство веб-страниц в Интернете написано с использованием HTML.

Как выглядит HTML

Проще говоря, синтаксис HTML заключается в добавлении к тексту смыслоуказывающихтегов(тег), позволяя пользователям (людям или программам) лучше понимать текст.

Ниже приведён простейший HTML-документ:

<html>
   <head>
     <title>第一个Html文档</title>
   </head>
   <body>
     欢迎访问<a href="../index.html">Example</a>！
   </body>
</html>

Все HTML-документы должны иметь тег <html>. Тег <html> может содержать две части: <head> и <body>.

Тег <head> используется для хранения общей информации обо всём документе, такой как заголовок документа (тег <title> используется для хранения заголовка), описание всего документа, ключевые слова документа и т. д. Конкретное содержимое документа следует размещать в теге <body>.

Тег <a> используется для представления ссылки. При просмотре HTML-документа в браузере (таком как IE, Firefox и т. д.) щелчок по содержимому, заключённому в тег <a>, обычно приводит к переходу на другую страницу. Адрес страницы для перехода задаётся атрибутом href тега <a>. В приведённом выше <a href="../www.example.com/index.html"> значением атрибута href является http://www.example.com/.

Что может содержать HTML-документ

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

Текст: HTML имеет самую богатую поддержку текста. Можно задавать заголовки разных уровней, абзацы и переносы строк, указывать семантику и внешний вид текста, обозначать, что текст цитируется откуда-либо, и так далее.
Ссылки: Ссылки используются, чтобы указать, что содержимое связано с другой страницей или определённым местом на текущей странице.
Образы: Изображения используются, чтобы сделать страницу более привлекательной или предоставить больше информации.
Списки: Списки используются, чтобы указать, что несколько элементов связаны друг с другом.
Таблицы: Таблица — это форма организации данных в виде строк и столбцов. Многие также используют таблицы для вёрстки страницы.
Формы: Формы обычно состоят из текстовых полей ввода, кнопок, флажков, переключателей, раскрывающихся списков и т. д., что делает HTML-страницы более интерактивными.
Фреймы: Фреймы позволяют странице содержать другие страницы.

Подробное объяснение формата HTML-документа

Ранее был представлен базовый формат HTML-документов; теперь ниже даётся подробное объяснение.

HTML-документы можно создавать и редактировать любым текстовым редактором (например, Notepad, UltraEdit и т. п.), потому что их содержимое по сути является просто текстом.

В тексте HTML части, заключённые в угловые скобки, называются тегами. Если вы хотите использовать угловые скобки (или знаки больше и меньше, короче говоря, одно и то же) в основном тексте, необходимо использоватьэкранирование символов, то есть преобразование исходного значения символов. < следует использовать<вместо этого, а > следует использовать>, а что касается самого символа &, для него следует использовать&вместо этого. (Надо сказать, что многие HTML-документы не соблюдают это правило, и обычные браузеры всегда могут определить, является ли & началом экранирования или символом, но так делать не рекомендуется.)

Теги по сути являются описаниями содержимого, которое они содержат, и могут иметь атрибуты для предоставления дополнительной информации. Например, тег <img> (изображение) имеет атрибут src (используется для указания адреса изображения), а также атрибуты width и height (используются для указания ширины и высоты изображения). Какие теги можно использовать в HTML и какие атрибуты может иметь каждый тег, всё это определено. Как только вы освоите основы, описанные здесь, изучение HTML на самом деле будет просто изучением этих тегов. Позже в этой статье будет дано краткое введение в распространённые HTML-теги.

Теги обычно имеют начальную часть и конечную часть (также называемые начальным тегом и конечным тегом), которые вместе определяют содержимое, содержащееся в теге. Атрибуты можно указывать только в начальном теге, а значения атрибутов могут быть заключены в одинарные или двойные кавычки. Конечные теги все обозначаются с помощью / плюс имя тега. Иногда некоторые теги не содержат другого содержимого (у них есть только собственные атрибуты или даже вообще нет атрибутов). В этом случае это можно записать так: <img src="logo.gif.html" />. Обратите внимание на конечный пробел и косую черту; это указывает на то, что этот тег закончился и отдельный конечный тег не нужен.

Некоторые теги могут содержать новые теги внутри своего содержимого, и имя нового тега может даже совпадать с именем тега, который его содержит (какие теги могут содержать теги и какие именно теги они могут содержать, также указано). Например:

<div>
  <div>分类目录...</div>
  <div>当前分类内容列表...</div>
</div>

В этом случае последний появившийся тег должен закрываться первым.

Все пробельные символы в HTML-документах (пробелы, табуляции, переводы строк, возвраты каретки) игнорируются браузером. Единственное исключение — пробел; способ обработки пробелов состоит в том, что все последовательные пробелы рассматриваются как один пробел, независимо от того, один, два или 100. Причина этого правила в том, что игнорирование пробельных символов позволяет авторам HTML располагать содержимое в наиболее удобном для них формате, например добавлять отступ после начала каждого тега и уменьшать отступ после завершения тега. Поскольку пробелы обычно используются в английском тексте (для разделения слов), эта специальная обработка применяется к пробелам. Если вы хотите отобразить последовательные пробелы (например, для отступов), следует использовать для обозначения пробелов.

Введение в распространённые теги

Текст

Наиболее часто используемым тегом, возможно, является <font>, который используется для изменения шрифта, размера шрифта и цвета текста.

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">红色的5</font>
<font face="黑体">黑体的字</font>

Полужирный, подчёркнутый и курсивный текст также являются распространёнными текстовыми эффектами, обозначаемыми соответственно тегами <b>, <u> и <i>:

<b>Bold</b>
<i>italic</i>
<u>underline</u>

Существуют также некоторые теги, используемые для указания на то, что содержащийся текст имеет особое значение, например <abbr> (сокращение), <em> (выделение), <strong> (усиленное выделение), <cite> (цитата), <address> (адрес) и так далее. Эти теги существуют не для определения эффектов отображения, поэтому они могут не давать видимого эффекта в браузерах или разные браузеры могут отображать эти теги совершенно по-разному.

Для очень длинной статьи, если есть подходящие подзаголовки, можно быстро получить общее представление о её содержании. В HTML теги, используемые для обозначения заголовков: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, которые обозначают заголовок 1-го уровня, заголовок 2-го уровня, заголовок 3-го уровня и так далее.

<h1>HTML 30分钟教程</h1>
<h2>什么是HTML</h2>
...
<h2>HTML是什么样的</h2>
...

Образы

Тег <hr> используется для добавления горизонтальной линии на страницу. Вы можете управлять длиной и цветом горизонтальной линии, указывая атрибуты width и color.

<hr width="90%" color="red" />

Тег <img> используется для добавления изображения на страницу. Атрибут src задаёт адрес изображения. Если изображение, указанное в src, не удаётся открыть, браузер обычно отображает текст, заданный атрибутом alt, в том месте, где должно отображаться изображение.

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="图片简介" />

Ссылки

Гиперссылки представляются тегом <a>, а атрибут href задаёт адрес, на который указывает ссылка. Тег <a> может содержать текст или изображения.

<a href="../index.html">Example</a>
<a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a>

Абзацы и разрывы строк

Поскольку HTML-документы игнорируют пробелы, чтобы обеспечить нормальное разбиение на абзацы и переносы строк, необходимо указать, какой текст относится к одному и тому же абзацу; для этого используется тег <p>.

<p>这是第一段。</p>
<p>这是第二段。</p>

Некоторые люди не используют <p>, а используют <br>. <br> обозначает только перенос строки, а не начало или конец абзаца, поэтому у него обычно нет закрывающего тега.

这是第一段。<br>
这是第二段。<br />
这是第三段。

Иногда документ нужно рассматривать как комбинацию различных частей. Например, типичная страница может включать три части: шапку, основную часть и подвал. Тег <div> специально используется для разметки различных разделов:

<div>页头内容</div>
<div>主体内容</div>
<div>页脚内容</div>

Таблицы

HTML-документы обычно отображаются в браузере слева направо и сверху вниз, а при достижении правого края окна автоматически переносятся. Чтобы добиться эффекта многоколоночности, многие используют таблицы (<table>) для вёрстки страниц (хотя изначально таблицы в HTML предназначались не для вёрстки).

Тег <table> обычно содержит несколько тегов <tr>, где <tr> представляет строку таблицы. Теги <tr>, в свою очередь, содержат теги <td>, каждый <td> представляет ячейку.

<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table>

Теги <tr> также могут содержаться в <thead>, <tbody> или <tfoot> внутри <table>. Они обозначают соответственно заголовок таблицы, тело таблицы и нижний колонтитул таблицы. При печати веб-страницы, если таблица слишком велика, чтобы поместиться на одной странице, <thead> и <tfoot> будут появляться на каждой странице.

<th> очень похож на <td> и также используется внутри <tr>; разница в том, что <th> обозначает, что эта ячейка является заголовком своей строки или столбца.

<table>
  <thead>
    <tr><th>时间</th><th>地点</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2000</td><td>北京</td></tr>
  </tbody>
</table>

Списки

Таблицы используются для представления двумерных данных (строк, столбцов), тогда как одномерные данные представляются списками. Списки можно разделить на неупорядоченные списки (<ul>), упорядоченные списки (<ol>) и списки определений (<dl>). Первые два типа списков более распространены, и оба используют тег <li> для хранения элементов списка.

Неупорядоченный список представляет ряд похожих элементов, между которыми нет определённого порядка.

<ul>
  <li>苹果</li>
  <li>桔子</li>
  <li>桃</li>
</ul>

В упорядоченном списке порядок элементов важен; браузеры обычно автоматически генерируют для них номера.

<ol>
  <li>打开冰箱门</li>
  <li>把大象赶进去</li>
  <li>关上冰箱门</li>
</ol>

Фреймы

Наконец, поговорим о фреймах — технологии, которая когда-то была очень популярна. Фреймы позволяют отображать в одном окне несколько документов одновременно. Главная страница фреймсета не имеет тега <body>; вместо него используется <frameset>.

Атрибуты Rows и Cols тега <frameset> используются для указания того, сколько строк (столбцов) имеет фреймсет, а также высоты (ширины) каждой строки (столбца).

Тег <frameset> может содержать теги <frame>. Каждый тег <frame> представляет документ (атрибут src задаёт адрес документа).

Если вы считаете, что такая страница недостаточно сложна, можно также вкладывать теги <frameset> внутрь тегов <frameset>.

<frameset rows="15%,*">
     <frame src="top.html" name=title scrolling=no>
     <frameset cols="20%,*">
          <frame src="left.html" name=sidebar>
          <frame src="right.html" name=recipes>
     </frameset>
</frameset>

Что делать через 30 минут

Эта статья предназначена только для того, чтобы дать людям, которые никогда не сталкивались с HTML, предварительное представление об HTML, поэтому многие вещи в ней не рассматриваются. В этой статье перечислены не все теги HTML и описаны не все атрибуты даже тех тегов, которые в ней перечислены. Кроме того, не упоминаются вещи, которые я считаю очень важными: CSS, JavaScript, XHTML, XML, веб-стандарты и их связь с HTML. Однако вряд ли их можно выучить за 30 минут. К счастью, как только вы начнёте, вы сможете воспользоваться множеством онлайн-ресурсов для продолжения обучения. Конечно, если у вас есть бумажная книга, это ещё лучше; в этом плане я рекомендую «HTML и XHTML: Полное руководство». Ниже приведены некоторые онлайн-ресурсы, которые, на мой взгляд, хороши:

Источник: http://deerchao.net/tutorials/html/html.htm