HTML5 Советы 1: Скорость разработки технологий сегодня потрясающая. Если вы не осторожны, вы не сможете не отставать от этого. Развитие нового поколения HTML-HTML5 продолжает приносить нам новые сюрпризы. Мы представим вам некоторые HTML -методы через эту статью.
1. Новый тип документа (Doctype)
<! Doctype html public -// w3c // dtd xhtml 1.0 Переход // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
Вы все еще используете приведенный выше тип документа XHTML, который является как неприятным, так и трудным для запоминания? Если это все еще так, пришло время переключиться на новый тип документа HTML5.
<! Doctype html>
Теперь требуется всего 15 символов. (Примечание: ваше объявление Doctype должно появиться в первой строке вашего HTML -файла.)
2. Элементы графика (рисунок)
Вы все еще рассматриваете возможность использования следующего кода для маркировки изображений?
<mg src = path/to/image alt = about image/>
<p> Изображение Марса. </p>
Приведенный выше код не может быть связан с заголовком графика простым и семантическим способом, потому что он просто обернут параграфовыми знаками и элементами изображения, а HTML5 улучшает это, внедряя элементы <Igra>. При использовании в сочетании с элементом <FigCaption> мы можем соединить графический заголовок с графикой. Код заключается в следующем:
<Рисунок>
<img src = path/to/image alt = about image/>
<FigCaption>
<p> Это изображение чего -то интересного. </p>
</figcaption>
</Рисунок>
3. Переосмыслить <small>
Оказывается, вы можете использовать элемент <mall> для создания субтитров, тесно связанных с логотипом. Тем не менее, теперь HTML5 изменил это использование, и элемент <mall> был переопределен, или, более надлежащим образом, теперь он используется для представления маленьких слов или других побочных заметок (например, уведомление об авторском праве в нижней части веб -сайта).
4. больше не требуется сценариев или типов ссылок
Скорее всего, вы все еще добавляете свойства типа в свои ссылки и теги сценариев, такие как код ниже.
<ссылка rel = stylesheet href = path/to/stylesheet.css type = text/css/>
<script type = text/javascript src = path/to/script.js> </script>
В HTML5 это больше не нужно. Это означает, что эти две этикетки представляют стили и сценарии соответственно. Поэтому мы можем удалить все их типовые атрибуты. Код заключается в следующем:
<link rel = styleSheet href = path/to/styleSheet.css/>
<script src = path/to/script.js> </script>
5. Используйте или не используйте кавычки
Помните, HTML5 отличается от XHTML, и вам не нужно обернуть атрибуты в кавычки, если вам это не нравится. Однако, если вы думаете, что использование цитат заставит вас чувствовать себя более комфортно, конечно, проблем не будет.
<p class = myclass id = conteeId> запустить реактор.
6. Сделайте свой контент редактируемым
Одна из очень мощных функций HTML5 довольна, что, как следует из названия, позволит пользователю редактировать любой текстовый контент, содержащийся в элементе (включая его дочерние элементы). Он имеет широкий спектр использования, такого как простые списки задач или сайты на основе вики, и одним из его преимуществ является то, что он использует локальное хранилище.
<! Doctype html>
<html lang = en>
<голова>
<meta charset = utf-8 ″>
<title> без названия </title>
</head>
<тело>
<h2> Список дел </h2>
<ul довольствовался = true>
<li> Переломайте механический драйвер такси. </li>
<li> Поездка на заброшенную фабрику
<li> Смотреть видео о себе </li>
</ul>
</body>
</html>
Или, как говорится в пятом трюке, вы также можете написать код в строке девять, как это (без кавычек):
<ul довольствовался = true>
7. Ввод электронной почты
Если мы применим тип электронной почты, чтобы указать форму ввода, мы можем командовать браузеру, чтобы разрешить только ввод строки, который соответствует действительной структуре адреса электронной почты. Хотя встроенная проверка формы скоро появится, мы не можем полностью полагаться на это. Старые браузеры не понимают этот тип электронной почты, они просто возвращаются в обычное текстовое поле.
<! Doctype html>
<html lang = en>
<голова>
<meta charset = utf-8 ″>
<title> без названия </title>
</head>
<тело>
<form action = method = get>
<Метка для = Электронная почта> Электронная почта: </label>
<id Input = имя электронной почты = электронная почта = электронная почта />
<кнопка типа = отправить> Форма отправки </button>
</form>
</body>
</html>
Когда дело доходит до элементов и атрибутов, которые поддерживает браузер и не поддерживает, вы должны знать, что все браузеры в настоящее время не так надежны. Например, Opera поддерживает проверку электронной почты только в том случае, если вы указываете атрибут имени. Тем не менее, он не поддерживает атрибут заполнителя (как будет обсуждаться ниже). Наконец, хотя вы можете использовать эту форму проверки, не полагайтесь на нее.