22 Основные советы о HTML5 (учебное пособие по картинки и текстовым вопросам)

Веб -технологии развиваются слишком быстро, и если вы не будете идти в ногу со временем, вы будете устранены. Поэтому, чтобы справиться с предстоящим HTML5, в этой статье суммируются 22 основных навыков HTML5 и надеются, что вам будет полезно дальнейшее изучение HTML5.

Заявление XHTML слишком длинное, и я полагаю, что есть несколько фронтальных разработчиков, которые могут рекламировать это заявление Doctype.

<! Doctype html public "-// w3c // dtd xhtml 1.0 Переход // en"

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

Заявление Doctype HTML5 очень короткое. Я считаю, что вы можете вспомнить это сразу после просмотра этого заявления. Вам не нужно тратить клетки мозга, чтобы запомнить слегка извращенное заявление Doctype о XHTML.

<! Doctype html>

Краткое заявление Doctype HTML5 заключается в том, чтобы позволить современным браузерам, таким как Firefox и Chrome и браузеры, такие как IE6/7/8, чтобы ввести (квази-) стандартный режим. Вы можете задаться вопросом, что IE6/7 также может поддерживать HTML5 Doctype. Фактически, IE введет в стандартный режим, если Doctype соответствует этому формату.

Посмотрите на следующий простой код:

<img src = "path/to/image">

<h6> Изображение Марса. </h6>

К сожалению, тег H6 здесь, кажется, не имеет ничего общего с тегом IMG, и семантика недостаточно ясна. HTML5 осознал это и принял тег <cign>. Когда <Figure> в сочетании с тегом <FigCaption> тег H6 и тег IMG можно объединить, а код будет более семантическим.

<Рисунок>

<img src = "path/to/image">

<FigCaption>

<h6> Это изображение чего -то интересного. </h6>

</figcaption>

</Рисунок>

Не так давно я использовал тег <mall> для создания субтитров, связанных с логотипом. Тем не менее, тег <mall> переопределяется в HTML5, чтобы сделать его более семантическим, а размер шрифта <mall> станет меньше. Подумайте об этом, все еще хорошая идея, чтобы использовать этот тег для информации об авторском праве внизу веб -сайта.

Обычно вы добавляете атрибуты типа в <Link> и <Script>:

<link rel = "styleSheet" type = text/css href = "path/to/stylesheet.css">

<script type = "text/javascript" src = "path/to/script.js"> </script>

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

<link href = "path/to/stylesheet.css">

<script src = "path/to/script.js"> </script>

Это немного сбивает с толку, HTML5 не XTHML, вы можете сохранить двойные кавычки в тегах. Я полагаю, что большинство товарищей, включая меня, привыкли к добавлению двойных цитат, потому что это делает код более стандартным. Тем не менее, это может быть определена на основе ваших личных предпочтений, использовать ли двойные цитаты.

<h6 id = "quessId"> запустить реактор. </h6>

Новый атрибут электронной почты ящика ввода был добавлен в HMTL5, который может определить, соответствует ли входной контент в формате записи электронной почты. Функция становится все более и более мощной. Перед HTML5 вы можете полагаться только на JS, чтобы обнаружить его. Хотя встроенная функция проверки формы скоро станет реальностью, многие браузеры не поддерживают это свойство и будут рассматриваться только как обычный ввод текста.

<form method = get>

<Метка для = "Электронная почта"> Электронная почта: </label>

<input id = "email" type = "email" name = "email">

<button type = "Отправить"> Форма отправки </button>

</form>

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

Заполнитель в текстовом поле (см. Эффект поиска этого блога) способствует улучшению пользовательского опыта. Раньше мы могли полагаться только на JS для достижения эффекта заполнителей, и добавили заполнителя атрибута в HTML5.

<input type = "email" name = "email" placeholder = "[email protected]">

Аналогичным образом, современные современные браузеры не очень хорошо поддерживают это свойство. В настоящее время только Chrome и Safari поддерживают это свойство, а Firefox и Opera не поддерживают это свойство.

Функция локального хранения HTML5 позволяет современным браузерам вспомнить, что мы набрали, и даже если браузер закрыт и обновляется, это не будет затронуто. Хотя некоторые браузеры не поддерживают эту функцию, IE8, Safari 4 и Firefox 3.5 по -прежнему поддерживают эту функцию, вы можете проверить ее.

Следующий код больше не будет существовать в HTML5

<div id = заголовок>

...

</div>

<div id = нижний колонтитул>

...

</div>

Обычно мы определяем Div для заголовка и нижний колонтитул, а затем добавляем идентификатор, но в HTML5 вы можете использовать теги <Header> и <Looger> напрямую, поэтому приведенный выше код можно переписать как:

<заголовок>

...

</header>

<нижний колонтитул>

...

</cooler>

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

IE Browser в настоящее время не поддерживает HTML5, который также является большой камнем, блокирующим более быструю популяризацию HTML5. Тем не менее, поддержка IE9 для HTML5 все еще очень хороша.

Т.е. анализирует все недавно добавленные теги HTML5 в встроенные элементы, но на самом деле это элементы на уровне блока, поэтому необходимо определить для них стиль:

заголовок, нижний колонтитул, статья, раздел, навигация, меню, hgroup {

дисплей: блок;

}

Несмотря на это, IE по -прежнему не может анализировать эти недавно добавленные теги HTML5. В настоящее время JavaScript необходимо использовать для решения этой проблемы:

document.createElement («статья»);

document.createElement («нижний колонтитул»);

document.createElement («заголовок»);

document.createElement ("hgroup");

Document.CreateElement ("NAV");

document.createElement («меню»);

Вы можете использовать этот код JavaScript, чтобы исправить IE Better Parse HTML5

<script mce_src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>

Это похоже на второй трюк. Если теги H1 и H2 используются для представления имени и подзаголовок веб -сайта, это не будет относиться к двум названиям, которые тесно связаны в их первоначальном значении. В настоящее время вы можете использовать тег <hgroup> для их объединения, чтобы код был более семантическим.

<заголовок>

<hgroup>

<h1> Напомним фан -страницу </h1>

<h2> только для людей, которые хотят воспоминания о жизни. </h2>

</hgroup>

</header>

Передний персонал должен был выполнить много проектов проверки форм. Одним из важных моментов является то, что некоторые поля ввода должны быть заполнены, поэтому JavaScript необходимо проверить здесь. В HTML5 добавляется новый атрибут, который должен быть заполнен: требуется. Есть два способа использовать необходимый атрибут. Второй метод кажется более структурным, в то время как первый метод проще.

<input type = "text" name = "oekinput" требуется>

<input type = "text" name = "aepeInput" required = "требуется">

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

<form method = post>

<Метка для = aephyNput> Ваше имя: </label>

<INPUT ID = cheyInput type = text name = aeptinput Placeholder = "douglas Quaid" обязательно = "Требуется">

<button type = "Opport"> Go </button>

</form>

Если ящик ввода пуст, форма не будет успешно отправлена.

Аналогичным образом, HTML5 больше не нуждается в JavaScript для решения автоматического сбора фокуса ввода. Если следует выбрать поле ввода или входной фокус, HTML5 добавил автофокусировку с свойством автоматического сбора фокуса:

<input type = "text" name = "akeInput" Placeholder = "Douglas Quaid" требуется = "требуется" autoFocus = "AutoFocus">

Автофокус также может быть написан как AutoFocus = AutoFocus, который выглядит более стандартным, в зависимости от ваших личных предпочтений.

HTML5 предоставляет <Audio> тег, который решает проблему, которая в прошлом вам приходилось полагаться на сторонние плагины для воспроизведения аудиофайлов. До сих пор только несколько последних браузеров поддерживают этот тег.

<audio controls = "controls" autoplay = "autoplay">

<source src = "file.ogg" _fcksavedurl = "" file.ogg "" />

<Source src = "file.mp3" />

<a href = "file.mp3"> Загрузите этот файл. </a>

</audio>

Почему есть два формата аудиофайлов? Поскольку существуют различия в форматах, поддерживаемых браузерами Firefox и Webkit, Firefox может поддерживать только файлы .ogg, в то время как WebKit поддерживает только файлы .mp3. Решение состоит в том, чтобы создать две версии аудиофайлов, чтобы оно могло быть совместимы с браузерами Firefox и Webkit. Следует отметить, что IE не поддерживает этот тег.

Как и тег <Audio>, HTML5 также обеспечивает поддержку воспроизведения видеофайлов с помощью тега <dive>. YouTube также объявил о новом видео HTML5. Но немного прискорбно, что спецификация HTML5 не указывает конкретный видео -декодер, но позволяет браузеру решать для себя. Это создает проблему совместимости браузера. Хотя Safari и IE9 поддерживают видео H.264 (флеш -игроки могут играть), Firefox и Opera поддерживают форматы Theora и Vorbis с открытым исходным кодом. Поэтому при отображении видео HTML5 вы также должны подготовить два формата.

<Видео управляет предварительной нагрузкой>

<source src = "cohagenphonecall.ogv" type = "video/ogg"; Codecs = 'vorbis, Theora' " />

<Source src = "cohagenphonecall.mp4" type = "video /mp4; 'codecs =' avc1.42e01e, mp4a.40.2 '" />

<div> Ваш браузер старый. <a href = "cohagenphonecall.mp4"> вместо этого скачать это видео. </a> </div>

</video>

Следует отметить, что, хотя атрибут типа может быть опущен, если добавить, браузер может проанализировать видеофайл быстрее и точно. Не все браузеры поддерживают видео HTML5, поэтому вам нужно вместо этого использовать версию Flash. Конечно, решение лежит с вами.

Атрибут предварительной нагрузки: предварительная нагрузка, прежде всего, вам нужно определить, нужно ли предварительно загрузить видео. Если посетитель посещает страницу со многими видео, необходимо предварительно загружать видео, которое может сохранить время ожидания посетителей и улучшить пользовательский опыт. Вы можете добавить свойство предварительного нагрузки в тег <dege> для реализации функций предварительной загрузки.

<Видео preload = preload>

...

</video>

[/код]

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

<Видео Controls = "Controls" preload = "preload">

...

</video>

В HTML5 мы можем напрямую использовать регулярные выражения.

<form method = post action =>

<метка для = имя пользователя> Создать имя пользователя: </label>

<input id = username type = text name = username waceholder = 4 <> 10 требуется = требуется AutoFocus = AutoFocus pattern = [a-za-z] {4,10}>

<Кнопка Типа = отправить> go </button>

</form>

Поскольку каждый браузер имеет различную поддержку для атрибутов HTML5, это создает некоторые проблемы совместимости. Тем не менее, методы могут быть использованы для определения того, поддерживает ли браузер эти свойства. Если код в приведенном выше примере хочет обнаружить, распознается ли атрибут шаблона браузером, его можно использовать для обнаружения его с использованием кода JavaScript.

alert ('pattern' в document.createElement ('input')) // boolean;

Фактически, это обычно используемый метод для определения совместимости браузера, и библиотека JQuery часто использует этот метод. Входной тег создается в приведенном выше коде и проверяет, поддерживается ли атрибут шаблона браузером. Если это может быть поддержано, браузер поддержат эту функцию, в противном случае она не будет поддерживаться.

<Скрипт>

if (! 'шаблон' в document.createElement ('input')) {

// Проверка на стороне клиента/сервера

}

</script>

Тег <card> используется для выделения текста, который должен визуально подчеркнуть его важность для пользователя. Строка, завернутая в этот тег, должна быть связана с текущим поведением пользователя. Например, если я ищу откройте ваш разум в некоторых блогах, я могу обернуть каждое действие, используя JavaScript в теге <card>.

<h3> Результаты поиска </h3>

<h6> они были прерваны, сразу после того, как Куато сказал, <cark> «Открой свой разум» </mark>. </h6>

У некоторых людей могут быть вопросы. С такими тегами, как <Header> и <gooler>, будет ли тег <div> по -прежнему работать в HTML5? Ответ да. Например, если вы хотите создать контейнер, который может обернуть специальный контент, бесплатный и гибкий <div> определенно является первым выбором. Если вы хотите создать статью или меню навигации, рекомендуется использовать более семантические теги <статья> и <av>.

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