Код, который вам никогда не понадобится писать
Цель этого сообщения в блоге — указать на некоторые из часто упускаемых из виду синтаксических функций, уже присутствующих в HTML и CSS, которые могут упростить написание кода. Люди иногда обращаются к таким вещам, как препроцессоры и настраиваемый синтаксис, чтобы помочь им с HTML и CSS, прежде чем в полной мере использовать всю гибкость, уже присутствующую в языке. Читайте дальше, чтобы узнать, сколько дополнительного кода вы написали.
HTML
Необязательные начальные теги
Некоторые HTML-элементы вам даже не нужно писать. Многие элементы имеют определенную модель содержимого, определяющую, какие элементы они могут содержать. HTML позволяет некоторым элементам опускать их начальный тег в определенных ситуациях.
Почему?
Включение необязательных тегов не приведет к ошибкам, но если вы наберете их неправильно или поместите в неправильное место, вы можете внести в документ ошибки, которых изначально не должно было быть.
руководство
Пропустить необязательные начальные теги за исключением случаев, когда вам нужно добавить к ним атрибуты.
Примеры
<html>если за ним не следует комментарий<head>если первое, что внутри, это элемент<body>если первым внутри является элемент (за некоторыми исключениями)<colgroup>если первый ребенок<col><tbody>в некоторых случаях
До:
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<p>This is my demo</p>
</body>
</html>
После:
<!DOCTYPE html>
<title>Example HTML Page</title>
<p>This is my demo</p>
Необязательные конечные теги
Как и в случае с необязательными начальными тегами, HTML также определяет, когда конечный тег элемента может быть опущен. Этот список намного длиннее, чем список необязательных начальных тегов.
Почему?
Необязательные конечные теги способствуют увеличению общего размера файла с нулевой технологической выгодой. Это не ускорит загрузку вашего HTML, если есть больше кода для анализа, он, вероятно, будет загружаться немного медленнее. Зачем работать над написанием кода, который вам никогда не был нужен, только для того, чтобы немного замедлить скорость загрузки?
руководство
Пропускайте необязательные конечные теги везде, где модель содержимого вашего документа делает расположение конечных тегов предсказуемым и очевидным.
Примеры
</html>если за ним не следует комментарий</head>если за ним не следует пробел или комментарий</body>если за ним не следует комментарий</p>во многих случаях</li>если за ним следует<li>тег или является последним дочерним элементом в родительском</caption>если за ним не следует пробел или комментарий</colgroup>если за ним не следует пробел или комментарий</tbody>в некоторых случаях</thead>в некоторых случаях</tfoot>если это последний ребенок в родительском</tr>если за ним следует<tr>или является последним ребенком в своем родителе</td>если за ним следует<td>или же<th></th>если за ним следует<td>или же<th></optgroup>если за ним следует<optgroup>или является последним ребенком в своем родителе</option>если за ним следует<option>или же<optgroup>или является последним ребенком в своем родителе</dd>если за ним следует<dd>или же<dt>или является последним ребенком в своем родителе</dt>если за ним следует<dd>или же<dt>или является последним ребенком в своем родителе</rt>если за ним следует<rt>или же<rp>или является последним ребенком в своем родителе</rp>если за ним следует<rt>или же<rp>или является последним ребенком в своем родителе
До:
<table>
<caption>Example Table</caption>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
</tfoot>
</table>
После:
<table>
<caption>Example Table
<thead>
<tr>
<th>Col 1
<th>Col 2
<th>Col 3
<tbody>
<tr>
<td>One
<td>Two
<td>Three
<tfoot>
<tr>
<td>Four
<td>Five
<td>Six
</table>
Значения атрибутов по умолчанию
Элементы HTML иногда имеют атрибуты, которые вы можете определить, чтобы изменить поведение элемента или его содержимого. Во многих случаях теги будут иметь атрибуты по умолчанию и определять, какое значение следует использовать, если атрибут отсутствует в теге.
Почему?
Когда вы повторно объявляете атрибут по умолчанию, вы увеличиваете размер файла и увеличиваете площадь поверхности для ошибок. Если вы сделаете ошибку или опечатку при повторном объявлении атрибута, который уже был установлен, вы можете даже сломать свой код.
руководство
Пропустить объявление атрибутов по умолчанию.
Примеры
Заключение значений атрибутов
HTML определяет три разных поведения для синтаксического анализа. без кавычек, в одинарных кавычкаха также двойные кавычки значения атрибутов. Пока значение атрибута не содержит следующие символыего можно анализировать без кавычек: вкладка, перевод строки, перевод формы, пробел, ноль, <, >, ", ',, =, &<код>`.
Почему?
Заключение значений атрибутов в кавычки не вызовет проблем до тех пор, пока значение атрибута правильно экранировано, но оно увеличивает размер файла для нулевой дополнительной выгоды и вводит новые места, где могут возникать опечатки и ошибки, которые просто никогда не должны были существовать. Добавление ненужных кавычек в ваш HTML противоположно тому, чтобы сделать ваш код более устойчивым.
руководство
Не заключайте в кавычки значения атрибутов, за исключением случаев, когда вы будете включать пробелы или другие специальные символы.
Это может быть полезной рекомендацией, поскольку заключение значений атрибутов в кавычки иногда может затруднить обнаружение недопустимых значений атрибутов по сравнению с записью значений атрибутов без кавычек.
Пример
<div id="example"></div>
<div id='example'></div>
<div id=example></div>
До:
<input id="demo" class="slider" type="range" min="0" max="100" step="1" value="50">
После:
<input id=demo class=slider type=range min=0 max=100 step=1 value=50>
Конечная косая черта в HTML
Синтаксис HTML является гибким и щадящим (в отличие от других языков разметки, таких как XML), и в нем есть много возможностей для маневра, встроенных в синтаксический анализ, чтобы попытаться исправить то, что в противном случае могло бы быть ошибкой.
Почему?
Завершающая косая черта — это то, что HTML умеет анализировать, вероятно, добавленный в язык, чтобы он мог принимать и понимать HTML-элементы в формате XML, если они были вставлены в документ с синтаксисом HTML, не вызывая ошибки. Но то, что вы можете ввести несколько дополнительных символов и безопасно их игнорировать, не означает, что есть какая-то польза от их добавления туда.
руководство
Пропускайте косые черты в конце в HTML.
Примеры
До:
<hr />
<input />
<img src=demo.gif />
После:
<hr>
<input>
<img src=demo.gif>
