Одним из основных компонентов HTML являются абзацы. Используйте теги «<p>» и «</p>» для определения абзацев. Например:
<p>Это абзац. </p>
Гиперссылка — это ссылка на другую страницу или сайт. Используйте теги «<a href=''>» и «</a>» для создания гиперссылок, где атрибут href указывает URL-адрес ссылки. Например:
<a href="https://www.jb51.net">Это ссылка</a>
Изображения могут усилить визуальное воздействие страницы и передать больше информации. Вставляйте изображения с помощью тега «<img src='' alt=''/>», где атрибут src указывает путь к файлу изображения, а атрибут alt содержит альтернативный текст, который отображается, когда изображение невозможно отобразить. Например:
<img src="image.jpg" alt="Красивая картинка">
Таблицы являются основным способом представления данных на веб-страницах. Используйте теги «<table>», «<tr>» и «<td>» для определения таблиц, строк и ячеек соответственно. Например:
<таблица> <тр> <td>Первая строка, первый столбец</td> <td>Первая строка, второй столбец</td> </tr> <тр> <td>Вторая строка, первый столбец</td> <td>Вторая строка, второй столбец</td> </tr> </таблица>
Используйте теги «<ul>» или «<ol>», чтобы создать неупорядоченный или упорядоченный список, а затем используйте тег «<li>», чтобы определить элементы списка. Например:
<ул> <li>Элемент списка 1</li> <li>Элемент списка 2</li> </ul> <ол> <li>Элемент списка 1</li> <li>Элемент списка 2</li> </ол>
Формы — это компоненты, используемые для сбора вводимых пользователем данных. Используйте тег «<form>» для создания формы и тег «<input>» для определения полей ввода. Например:
<form action="submit.php" метод="post"> <label for="username">Имя пользователя:</label> <input type="text" name="имя пользователя" id="имя пользователя"> <label for="password">Пароль:</label> <input type="пароль" name="пароль" id="пароль"> <input type="submit" value="Submit"> </форма>
CSS можно использовать для управления внешним видом и макетом веб-страниц. Стили CSS можно добавлять в документы HTML с помощью тега «<style>». Например:
<стиль>
тело {
цвет фона: #f2f2f2;
}
ч1 {
цвет: синий;
выравнивание текста: по центру;
}
</стиль>Приведенный выше фрагмент кода — это лишь верхушка айсберга языка HTML. Однако они могут помочь вам создать базовую структуру и стиль веб-страницы и вдохновить вас на дальнейшее обучение. Теперь попробуйте создать свой собственный веб-сайт, используя эти HTML-коды!
Заявление о документации HTML5
<!DOCTYPE html>
Приведенный выше блок кода представляет собой объявление документа HTML5, в котором указывается, что текущая веб-страница написана в соответствии со стандартами HTML5.
При написании веб-страницы обязательно напишите объявление документа HTML5 вверху веб-страницы. Если вы не напишете объявление документа, некоторые браузеры перейдут в странный режим. После входа в странный режим браузер будет парсить страницу и страница не будет нормально отображаться. Поэтому, чтобы не войти в этот режим, необходимо написать заявление на документ.
Часто используемые декларации документов
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Примечание. <!DOCTYPE> не является тегом HTML. Он предоставляет браузеру информацию (заявление) о том, какая версия HTML была написана.
Чтобы быть совместимым с некоторыми старыми страницами, браузер имеет два режима анализа:
Стандартный режим Стандартный режим
Режим причуд странный режим
Странные режимы приводят к непредсказуемому поведению при анализе веб-страниц, и нам следует избегать появления странных режимов.
Тип файла <HTML></HTML> (размещается в начале и конце файла)
Название документа <TITLE></TITLE> (необходимо размещать в блоке «Заголовок»)
Заголовок <HEAD></HEAD> (описательная информация, например «тема»)
Стиль <BODY></BODY> (тело документа)
Название <H?></H?> (от 1 до 6, шесть уровней выбора)
Выравнивание заголовка <H?ALIGN=LEFT|CENTER|RIGHT></H?>
Различать <DIV></DIV>
Дифференцированное выравнивание <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
Блок цитирования <BLOCKQUOTE></BLOCKQUOTE> (обычно с отступом)
Выделение <EM></EM> (обычно выделяется курсивом)
Особое внимание уделяется <STRONG></STRONG> (обычно выделяется жирным шрифтом).
Цитирование <CITE></CITE> (обычно выделяется курсивом)
Код <CODE></CODE> (для отображения исходного кода)
Образец<SAMP></SAMP>
Ввод с клавиатуры<KBD></KBD>
Переменная<VAR></VAR>
Определите <DFN></DFN> (не поддерживается некоторыми браузерами)
Адрес<ADDRESS></ADDRESS>
Крупные символы<BIG></BIG>
Мелкий шрифт<SMALL></SMALL>
Жирный<B></B>
курсив<I></I>
Итог <U></U> (некоторые браузеры до сих пор этого не поддерживают)
Зачеркивание <S></S> (некоторые браузеры до сих пор этого не поддерживают)
Подстрочный индекс<SUB></SUB>
Надстрочный индекс <SUP></SUP>
Пишущая машинка <TT></TT> (отображается шрифтом через один пробел)
Предопределенный формат <PRE></PRE> (сохраняет размер пробелов в файле)
Ширина предварительно отформатированного формата <PRE WIDTH=?></PRE> (в символах).
Выровняйте его по <CENTER></CENTER> (допускаются как текст, так и изображения).
Shine <BLINK></BLINK> (самый высмеиваемый тег за всю историю)
Размер шрифта <FONTSIZE=?></FONT> (от 1 до 7)
Изменить размер шрифта <FONTSIZE=+|-?></FONT>
Базовый размер шрифта <BASEFONTSIZE=?> (от 1 до 7; по умолчанию — 3).
Цвет шрифта<FONTCOLOR="#$$"></FONT> ($$ — это цветовой код)
1) Текстура: <img src="адрес изображения">
2) Присоединяйтесь по ссылке: <a href="Соответствующий адрес для подключения">Напишите слова, которые хотите написать</a>
3) Откройте ссылку в новом окне: <a href="Связанный адрес" target="_blank">Введите слова, которые хотите написать</a>
4) Мобильный шрифт (выделение): <marquee>Напишите слова, которые хотите написать</marquee>
5) Жирный шрифт: <b>Напишите слова, которые хотите написать</b>
6) Курсив: <i>Напишите слова, которые хотите написать</i>
7) Подчеркивание шрифта: <u>Напишите слова, которые хотите написать</u>
8) Зачеркивание шрифта: <s>Напишите слова, которые хотите написать</s>
9) Увеличьте размер шрифта: <big>Напишите слова, которые хотите написать</big>
10) Управление размером шрифта: <h1>Напишите слова, которые хотите написать</h1> (размер шрифта может быть от h1 до h5, h1 — самый большой, h5 — самый маленький)
11) Измените цвет шрифта: <font color="#value">Впишите слова, которые хотите написать</font> (значение находится в диапазоне от 000000 до ffffff (16-битное шестнадцатеричное число).
12) Удалите подчеркивание соединения: <a href="Связанный адрес" style="text-decoration:none">Напишите слова, которые хотите написать</a>
13) Публикуйте музыку: <embed src="Музыкальный адрес" width="Width" height="Height" autostart=false>
14) Вставьте flash: <embed src="flash адрес" width="width" height="height">
15) Вставьте видеофайлы: <img dynsrc="адрес файла" width="width" height="height" start=mouseover>
16) Разрыв строки:<br>
17) Абзац: <p>Абзац</p>
18) Исходный стиль текста: <pre>Текст</pre>
19) Изменить фон сообщения: <body background="адрес фонового изображения">
20) Исправлен фон сообщения, который не прокручивался с помощью полосы прокрутки: <body background="Адрес фонового изображения" bodybgproperties=fixed>
21) Настройте цвет фона публикации: <body bgcolor="#value">(значение см. в цифре 10)
22) Опубликовать фоновую музыку: <bgsound="Адрес фоновой музыки" Loop=infinite>
23) Опубликуйте веб-страницу: <iframe. src="Related Address" width="Width" height="Height"></iframe>