Функції, поради та методи html5

Технологія HTML5 розвивається швидко - дуже швидко! І щоб не відставати в розвитку, необхідно знати про всі зміни в даній технології. Так що, коли ви відчуваєте що дана технологія Ваша думка дуже ви хочете збільшувати в ній свої навички, обов`язково прочитайте цю статтю.

методи HTML5

1. Новий запис DOCTYPE

Раніше ми користувалися великою, громіздкою записом для визначення DOCTYPE:

Відео: javascript для починаючих | # 2 Методи вставки javascript в HTML

 "Http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"gt;

HTML5 надає нам можливість не писати всі подробиці, а оголосити DOCTYPE так:

Насправді даний блок не є необхідним в HTML. Проте, він необхідний для старих браузерів, які вимагають вказувати DOCTYPE. Браузери, які не розуміють HTML5 показуватимуть до сторінки в стандартному режимі. Так що, не хвилюйтеся, переходити на HTML5.

2. Зображення і підписи до них

Розглянемо наступну розмітку для зображень:

lt;img src="Images / love.jpg" alt="Прикольний смайл" /gt;lt;pgt; Прикольний смайлlt;/pgt;

Відео: Основи ES6 # 6: Параметри функції

Раніше було важко групувати зображення та підпис до нему.Там, на жаль, немає легкого або семантичного способу пов`язати заголовок, загорнутий в канал абзацу, із зображенням самого елемента. HTML5 вирішує дану проблему, з введенням елемента. В поєднанні з

lt;img src="Path / to / image" alt="About image" /gt;lt;pgt; This is an image of something interesting. lt;/pgt;lt;/figcaptiongt;lt;/figuregt;

3. перевизначений

раніше тег використовувався для зменшення тексту, але був рідко використаний веб-розробниками, але все таки не був видалений розробниками HTML5. Тепер даний тег використовують для позначення «дрібного тексту" - тобто тексту, який не приваблює сильного уваги. Наприклад, попередження про заборону копіювання матеріалу, поміщене в самом низу сайту, щось схоже на це:

lt;smallgt; Заборонено копіювати матеріал з даного сайту! Даний матеріал захищений авторським правом.lt;/smallgt;

Відео: HTML5 Slider Tutorial javascript Function Programming

4. Відсутність типів для тегів

Раніше необхідно писати типи для тегів

lt;link rel="Stylesheet" href="Style.css" type="Text / css" /gt;lt;script type="Text / javascript" src="Script.js"gt; lt;/scriptgt;

У HTML5 більше немає необхідності писати даний атрибут:

lt;link rel="Stylesheet" href="Style.css" /gt;lt;script src="Script.js"gt; lt;/scriptgt;

5. Закривати або не закривати теги

Ось у чому питання. Пам`ятайте, що HTML5 це не XHTML. Тут необов`язково писати значення атрибутів в лапках. Вам не потрібно закривати деякі теги. Якщо вас влаштовує даний стиль написання, то можете застосовувати його. Особисто для мене теги повинні закриватися, а значення атрибутів повинні перебувати в лапках.

lt;p class=content id=someTextgt; Приклад тексту

Тут важливо лише ваша думка, і то як вам приємніше писати і бачити код. Якщо бажаєте більш структурований код, тоді пишіть з закривають тегами.

6. Зробіть свій контент редагується

Нові браузери мають класний новий атрибут, який може бути застосований до елементів, називається contenteditable. Як випливає з назви, це дозволяє користувачеві редагувати будь-який текст, що міститься в елементі, в тому числі і нащадках.

lt;ul contenteditable="True"gt;lt;ligt; Зробіть свій сайт.lt;/ligt;lt;ligt; Створення сайтів - це легко!lt;/ligt;lt;ligt; У вас все вийдеlt;/ligt;lt;/ulgt;

7. Перевірка поля E-mail

У HTML5 при використанні поля для введення типу e-mail адреси, щоб тільки за допомогою браузера перевірити коректність введення адреси електронної пошти. І це без всяких перевірок за допомогою javascript-ів. Але поки що ми не можемо використовувати цю функцію в наших сайтах зі зрозумілих причин. Адже в старих браузерах, які не розуміють HTML5, дані поля не перевірятимуть.

lt;form action="" method="Get"gt;lt;label for="Email»gt; E-mail:lt;/labelgt;lt;input id="Email" name="Email" type="Email" /gt;lt;button type="Submit"gt; Відправитиlt;/buttongt;lt;/formgt;

8. Заповнювачі

Раніше нам необхідно було використати javascript для створення наповнювачів для текстових полів. Звичайно, можна встановити значення за замовчуванням і дане значення буде видалено, як тільки користувач поставить курсор в цьому полі. Заповнювач вирішує цю проблему інакше і як завжди простіше:

lt;input name="Email" type="Email" placeholder="[email protected]" /gt;

9. Блоки HEADER і FOOTER

Пішли ті часи:

lt;div id="Header"gt; ...lt;/divgt;lt;div id="Footer"gt; ...lt;/divgt;

У HTML5 дані блоки з атрибутами можуть бути замінені відповідними тегами:

...lt;/headergt; ...lt;/footergt;

Відео: Що таке HTML5 Canvas і як їм користуватися?

Постарайтеся не змішувати ці елементи з «заголовком» і «підвалом» вашого сайту. Вони просто є просто контейнерами.

Тут ми закінчимо розглядати методи HTML5, думаю ви навіть на цьому маленькому прикладі функцій HTML5 відчули зручність користування даною технологією, як і того, з якою швидкістю вона розвивається.

Успіхів!