Основы HTML5

API HTML5

Медиа HTML5

Графика HTML5

Нормы кодирования HTML5 (5)

Ниже приведены наиболее распространенные и часто используемые стандарты html, хорошие привычки в написании кода有利于后期 обслуживания и обновления кода, повышение производительности, надеюсь, это поможет вам.

Стандарты кодирования HTML

Многие веб-разработчики знают немного о стандартах кодирования HTML.

С 2000 по 2010 год многие веб-разработчики перешли от HTML к XHTML.

Разработчики, использующие XHTML, постепенно приучены к хорошим стандартам HTML.

А в отношении HTML5,我们应该制定良好的 кодовые стандарты,以下提供了一些规范的建议。

Использование правильного типа документа

Декларация типа документа находится в первой строке HTML-документа:

<!DOCTYPE html>

Если вы хотите использовать маленькие буквы, как и другие теги, вы можете использовать следующий код:

<!doctype html>

Использование маленьких имен элементов

Имена элементов HTML5 могут использовать как большие, так и маленькие буквы.

Рекомендуется использовать маленькие буквы:

Стиль с混анными большими и маленькими буквами очень плохой.
Разработчики обычно используют маленькие буквы (например, XHTML).
Стиль с маленькими буквами выглядит более свежим.
Маленькие буквы легко пишутся.

Не рекомендуется:

<SECTION>　
　　<p>Это абзац.</p>
</SECTION>

Очень плохо:

<Section>　
　　<p>Это абзац.</p>
</SECTION>

Рекомендации:

<section>　
　　<p>Это абзац.</p>
</section>

Закрытие всех HTML-элементов

В HTML5 не обязательно закрывать все элементы (например, элемент <p>), но мы рекомендуем добавлять завершающие теги к каждому элементу.

Не рекомендуется:

<section>
　　<p>Это абзац.</p>
　　<p>Это абзац.</p>
</section>

Рекомендации:

<section>
　　<p>Это абзац.</p>
　　<p>Это абзац.</p>
</section>

Закрытие空的 HTML-элементов

В HTML5空的 HTML-элементы не обязательно должны быть закрыты:

Мы можем написать так:

<meta charset="utf-8">

Можно также написать так:

<meta charset="utf-8" />

В XHTML и XML косая черта (/) обязательна.

Если вы ожидаете, что ваша страница будет использоваться XML-программами, использование этого стиля очень хорошее.

Использование маленьких имен свойств

Имена свойств HTML5 позволяют использовать как большие, так и маленькие буквы.

Мы рекомендуем использовать маленькие буквы для имен свойств:

Одновременное использование больших и маленьких букв — это очень плохая привычка.
Разработчики обычно используют маленькие буквы (например, XHTML).
Стиль с маленькими буквами выглядит более свежим.
Маленькие буквы легко пишутся.

Не рекомендуется:

<div CLASS="Style">

Рекомендации:

<div class="style">

Значения атрибутов

Значения атрибутов в HTML5 могут не использовать кавычки.

Мы рекомендуем использовать кавычки для значений атрибутов:

Если значение атрибута содержит пробелы, необходимо использовать кавычки.
Смешанный стиль не рекомендуется, рекомендуется использовать один стиль.
Использование кавычек в значениях атрибутов упрощает чтение.

Ниже пример значения атрибута, содержащего пробелы, без использования кавычек, поэтому он не действует:

<table class=table striped>

Ниже использованы двойные кавычки, это правильно:

<table class="table striped">

Атрибуты изображения

Изображения обычно используют атрибут alt. При невозможности отображения изображения, он может заменить его.

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебный сайт (oldtoolbag.com)</title>　
</head>
<body>
<img src="logo.png" alt="Основной учебный сайт по HTML5">
</body>
</html>

Определите размер изображения, чтобы при загрузке можно было оставить заданное пространство, уменьшить мерцание.

<img src="logo.png" alt="Основной учебный сайт по HTML5" style="width:128px;height:40px">

Пробелы и знак равенства

Пробелы перед и после знака равенства могут быть.

<link rel="stylesheet" href="styles.css">

Но мы рекомендуем использовать меньше пробелов:

<link rel="stylesheet" href="styles.css">

Избегайте чрезмерно длинных строк кода

Использование HTML-редактора, скроллинг кода влево и вправо不方便.

Старайтесь, чтобы длина строки кода была не более 80 символов.

Пустые строки и отступы

Не добавляйте пустые строки без причины.

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

Отступы используют два пробела, не рекомендуется использовать ТАБ.

В коде коротких строк не используйте ненужные пустые строки и отступы.

Ненужные пустые строки и отступы:

　　　　　　　　<body>
　　<h1>Основной учебный сайт (oldtoolbag.com)</h1>
　　<h2>HTML</h2>
　　<p>
　　　　Основной учебный сайт, хорошо изучайте основы, чтобы идти дальше。
　　　　Основной учебный сайт, хорошо изучайте основы, чтобы идти дальше。
　　　Основной учебный сайт, хорошо изучайте основы, чтобы идти дальше,
　　Основной учебный сайт, хорошо изучайте основы, чтобы идти дальше。
　　</p>
</body>

　　Рекомендации:

<body>
<h1>Основной учебный сайт (oldtoolbag.com)</h1>
<h2>HTML</h2>
<p>Основной учебный сайт, хорошо изучайте основы, чтобы идти дальше.</p>
Основной учебный сайт, хорошо изучайте основы, чтобы идти дальше。
Основной учебный сайт, хорошо изучайте основы, чтобы идти дальше。
Основной учебный сайт, хорошо изучайте основы, чтобы идти дальше.</p>
</body>

　　Пример таблицы:

<table>
　　<tr>
　　　　<th>Название</th>
　　　　<th>Описание</th>
　　　　</tr>
　　<tr>
　　　　<td>A</td>
　　　　<td>Описание A</td>
　　　　</tr>
　　<tr>
　　　　<td>B</td>
　　　　<td>Описание B</td>
　　</tr>
</table>

　　Пример списка:

<ol>
　　<li>PHP</li>
　　<li>JAVA</li>
　　<li>C++</li>
</ol>

Можно ли опустить <html> и <body>?

В стандарте HTML5 теги <html> и <body> можно опустить.

Следующий документ HTML5 является правильным:

Пример:

<!DOCTYPE html>
<head>
　 <title>Заголовок страницы</title>
</head>
<h1>Это заголовок</h1>
<p>Это абзац.</p>

Рекомендуется не опускать теги <html> и <body>.

Элемент <html> является корневым элементом документа, используется для описания языка страницы:

<!DOCTYPE html>
<html lang="zh-CN">

Указание языка предназначено для удобства экранных читателей и поисковых систем.

Опускание <html> или <body> в программном обеспечении для DOM и XML может привести к сбою.

Опускание <body> в старых браузерах (IE9) может привести к ошибке.

Можно ли опустить <head>?

В стандарте HTML5 тег <head> можно опустить.

По умолчанию браузер добавляет содержимое до <body> в стандартный <head>. .

Пример

<!DOCTYPE html>
<html>
<title>Заголовок страницы</title>
<body>
　　<h1>Это заголовок</h1>
　　<p>Это абзац.</p>
</body>
</html>

　 В настоящее время рекомендуется не опускать тег head.

Метаданные

В HTML5 элемент <title> является обязательным, имя заголовка описывает тему страницы:

<title>Основной учебный сайт</title>

Заголовок и язык позволяют поисковым системам быстро понять тему вашей страницы:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Основной учебный сайт</title>
</head>

HTML комментарии

Комментарии можно размещать в пределах :

<!-- Это комментарий -->

Длинные комментарии можно разбивать по строкам в пределах :

<!--　
　　Это является较长ым комментарием. Это
　　Длинный комментарий. Это является较长ым комментарием.
　　Это
　　Длинный комментарий　Это является较长ым комментарием. Это
　　Длинный комментарий.
-->

В первой строке длинного комментария сделан отступ в две пробельные символы, что упрощает чтение.

Стильные таблицы

Стильные таблицы используют простую грамматическую структуру (параметр type не обязателен):

<link rel="stylesheet" href="styles.css">

Короткие правила можно записать на одном строке:

p.into {font-family: Verdana; font-size: 14px;}

Длинные правила можно разбить на несколько строк:

body {
　　background-color: yellow;
　　font-family: "Arial Black", Helvetica, sans-serif;
　　font-size: 14px;
　　color: red;
}

Левая скобка и селектор ставятся на одну строку.
Пробел добавляется между левой скобкой и селектором.
Использование двух пробелов для отступа.
Пробел добавляется между двоеточием и значением свойства.
Пробел добавляется после запятой и знака.
Каждое свойство и значение должны заканчиваться точкой с запятой.
Цитаты используются только когда значение свойства содержит пробел.
Правая скобка ставится на новую строку.
Максимальное количество символов в строке - 80.

Добавление пробела после запятой и двоеточия - это часто использутое правило.

Загрузка JavaScript в HTML

Использование простого синтаксиса для загрузки внешних скриптовых файлов (параметр type не обязателен):

<script src="myscript.js">

Использование JavaScript для доступа к элементам HTML

Плохая структура HTML может привести к ошибкам выполнения JavaScript.

Следующие две JavaScript-строки выведут разные результаты:

Пример

var obj = getElementById("w3codebox")
var obj = getElementById("w3codebox")

В HTML JavaScript следует использовать одинаковые правила именования.

Использование маленьких имен файлов

Большинство веб-серверов (CentOS, *Unix) чувствительны к регистру: Файл loading.jpg не может быть открыт через Loading.jpg.

Другие веб-серверы (Windows, IIS) не чувствительны к регистру: Файл loading.jpg можно открыть через Loading.jpg или loading.jpg.

Вам необходимо поддерживать единый стиль, мы рекомендуем использовать маленькие имена файлов.

Расширение файла

Файлы с расширением HTML могут быть .html (или .htm).

Файлы с расширением CSS имеют суффикс .css.

Файлы с расширением JavaScript имеют суффикс .js.

Разница между .htm и .html

Файлы с расширением .htm и .html по сути не имеют различий. Браузеры и веб-серверы обрабатывают их как HTML-файлы.

Различия заключаются в том:

.htm применяется в ранних системах DOS, в настоящее время или только три символа.

В Unix-системах суффиксы не имеют специальных ограничений, обычно используется .html.

Технические различия

Если в URL не указан имя файла (например, https://ru.oldtoolbag.com/html/), Сервер возвращает имя файла по умолчанию. Обычно имя файла по умолчанию - index.html, index.htm, default.html и default.htm.

Если сервер настроен только с "index.html" в качестве файла по умолчанию, вам необходимо назвать файл "index.html", а не "index.htm".

Однако, обычно сервер может установить несколько файлов по умолчанию, и вы можете установить имя файла по своему усмотрению.

В любом случае, полным суффиксом HTML является ".html".

API истории HTML5 WebSocket в HTML5