Html5 иновации. Примери за използване на някои от новите функции на HTML5. Изходният код на страницата на получателя на съобщението

Така че, ако сте запознати с предишни версии на HTML, тогава няма да имате никакви затруднения при разбирането на HTML5. А новите тагове и атрибути ще ви помогнат да създавате нови и да подобрявате съществуващи сайтове, а благодарение на новите функции ще стане много по-лесно да правите това.

Но възниква въпросът: дали HTML5 ще се показва правилно в по-старите версии на браузърите?
Разбира се, че ще има, разбира се, с изключение на нови тагове. Страниците, направени с помощта на HTML5, ще се показват във всички браузъри, но тези, които използват новите версии, могат да получат и видят много повече.

Структурни тагове.

Нека да видим как можем да създадем структура на HTML документ с помощта на HTML5. В HTML4 обикновено използваме тагове

Следните структурни етикети вече са достъпни за нас:

Целта му е да дефинира секции в определено текстово съдържание, като например разделяне на целия текст на малки части.

Целта му е да дефинира горната част на HTML документа.

Този етикет се използва за определяне на долната част на документа.

Целта му е да дефинира списък с връзки към други HTML страници.

Този етикет се използва за определяне на тестово съдържание на документа.

Ето пример за HTML код с нови тагове.

Заглавие Заглавие 1

Малко текст... Заглавие 2

малко текст... Линк 1 Връзка 2

Авторско право 2011 Моята компания

Както можете да видите, поставихме заглавието на нашия документ в таговете. След това добавихме раздел към нашата страница с помощта на таг и включихме 2 тагова, за да маркираме двете основни части на нашето текстово съдържание. След това дефинирахме списък с нашите връзки с помощта на маркера. Накрая създадохме долния колонтитул на нашата страница с помощта на .

И така, какво е специалното тук? Можем да направим същото, като използваме добрия стар етикет. Несъмнено, но предимството на използването на нови тагове е ясната и разбираема структура на HTML документите. Ясно не само за хората, но и за търсачките.

Нови HTML5 блокиращи тагове.

В допълнение към съществуващите блокови тагове, HTML5 има 3 нови тагове:

Тагът се използва за идентифициране на част от текста в основната част на текста, като например цитат или бележка под линия.

Основен текст... Цитат...

Уеб браузърът не подчертава текста, ограден в етикета; той се използва за създаване на добра структура за HTML документа. Разработчиците на търсачки ще оценят това.
Следният таг се използва за създаване на диалози между потребители:

Потребител 1 Съобщение от Потребител 1 Потребител 2 Съобщение от Потребител 2

Включихме още два тага в тага: - съдържащ потребителското име и за показване на съобщението на потребителя.

Третият таг се използва за указване на заглавието на изображението.

Заглавие на изображението = "Някакво изображение" src="/image.jpg" width="200" height="200">

Използвахме етикет, за да посочим името на изображението, етикет за да вмъкнете конкретно изображение и етикет, за да ги свържете заедно.
Неща, които трябва да имате предвид, когато използвате HTML5 структура и блокиращи тагове.
Можем да започнем да използваме новите тагове веднага, но след като приложим някои трикове, за да заобиколим някои несъответствия с по-старите браузъри. Новите блокови тагове ще се третират като вградени елементи в по-старите браузъри, така че трябва да дефинираме свойство display:block; в нашия CSS за новите блокови тагове. така че да се показват правилно. Що се отнася до по-старите версии на Internet Explorer, вие също трябва да добавите следното:

< script>document.createElement("заглавка"); document.createElement("долен колонтитул"); document.createElement("раздел"); document.createElement("настрана"); document.createElement("статия"); document.createElement("nav");

Това трябва да се добави, защото IE не разбира CSS, прикрепен към неизвестни тагове. HTML5 предполага, че етикетът има такъв по подразбиране, така че не е нужно да го добавяме.

Вградени етикети.

HTML4 има много тагове за прилагане на различно форматиране на текст, но няма тагове за показване на час и дата, например. Следователно сега в HTML5 присъстват такива тагове:

Тагът се използва за обозначаване на част от текста за конкретни цели, например за показване на важна част от текста.

Много важна част от текста...

Вмъкнахме определена важна част в .

Тагът се използва за указване на час и дата в някакъв текст, например:

Тагът се използва за показване на някои числа в определен формат, например:

месечен доход $15 000...

Тагът има 6 полезни атрибута:

• стойност - задава действителната стойност на нещо;
• min - задава минималната стойност на нещо;
• ниско - определя границата, при която стойността се счита за ниска;
• високо - определя границата, при която стойността се счита за ниска;
• max - определя максималната стойност на нещо;
• оптимално - определя оптималната стойност на нещо.

Например:

Концентрация на захар: 8,2.

Последният нов етикет се използва за показване на някакъв напредък, например процентът на изпълнение на нещо:

Завършеност: 20%

Тагът има две стойности на атрибута - текущата стойност на прогреса и max - максималната стойност на прогреса.

Мултимедийни тагове.

HTML5 има два нови тагова за извеждане на медии и .

Ето пример за използване на етикета:

Сега свири...

Този етикет има три атрибута:

• src - път до звуковия файл;
• autoplay - определя дали файлът започва да се възпроизвежда веднага след зареждане на страницата в браузъра;
• цикъл - определя колко пъти трябва да се възпроизведе аудиото.

Тагът ви позволява да поставите други тагове вътре в него, които съдържат някаква информация.
Тагът се използва за показване на видео файлове на страницата.

клип...

Атрибутът src указва пътя до видео файла.
Мултимедийните тагове ви позволяват да показвате аудио и видео файлове директно в HTML документ и улесняват тяхното индексиране от търсачките.

Интерактивни етикети.

HTML5 има няколко интерактивни маркера, които ви позволяват да промените част от съдържанието, без да презареждате цялата HTML страница:

Тагът е доста интересен, защото вече съществуваше в по-ранни версии на HTML и сега е върнат. Тагът в HTML5 действа като контейнер за таг, който от своя страна създава команда под формата на радио бутон, поле за отметка или обикновен бутон.

Използвайки тези тагове, можем да създаваме различни интерактивни менюта.
Тагът се използва за показване на допълнителна информация, като поле за помощ.

Малко съдържание Помощна информация...

Етикетът се използва за автоматично изобразяване на различни 2D форми и растерни изображения. Той дефинира определени области на HTML документ, в които можете да създавате различни обекти, да показвате изображения и да ги трансформирате с помощта на JavaScript.

< script>var example = document.getElementById ("проба" ) ; var context = example.getContext("2d"); ctx.fillStyle = "#FF0000" ; ctx.fillRect(0, 0, 80, 100);< canvas id= "sample" width= "300" height= "300" >Вашият браузър не поддържа HTML5.

Атрибутът ID се използва за идентифициране на етикета като DOM (Document Object Model) обект. След това се определят атрибутите за ширина и височина. Текстът, ограден между етикетите, ще се показва в браузъри, които не поддържат HTML5. Предназначен е да се използва във връзка с 2D API за показване на динамична графика като Flash.

Можем да започнем да използваме новите функции на HTML5 днес. Някои прости трикове ще работят дори в по-стари браузъри. Ако планирате да създадете нов уебсайт, може да обмислите използването на HTML5, за да дадете на сайта си по-интелигентна, по-интелигентна структура с нови функции.

С пускането на HTML5 към HTML бяха добавени много нови функции. И още по-хубавото е, че някои браузъри вече поддържат някои от тези функции, докато други все още се придвижват към тях. Можете да следите как тези функции се добавят към браузърите на тази страница.

Едно от предимствата на HTML5 е неговата простота.

Да, това е всичко. Буквално две думи. Тази простота вероятно се дължи на факта, че HTML5 стои самостоятелно, вместо да остава част от SGML.

Charset също е много прост, използва utf-8 и се определя по същия начин, буквално с един таг:

HTML5 разбира, че уеб страницата има структура, точно като книга, например. Обикновено това е навигация, самото съдържание, страничното меню (страничната лента) и заглавката. И HTML5 предоставя тагове за всички тези елементи.

• – определя раздели на страницата
• – определя заглавието на страницата
• – определя долния колонтитул на страницата
• – определя навигацията на страницата
• – определя статията или основното съдържание на страницата
• – определя допълнително съдържание, странична лента на страницата
• – определя изображението, анотацията на статията

Тези нови елементи дефинират някои основни концепции и представляват елементи на страницата:

• – за указване на съдържание
• – за указване на час или дата
• – за указване на определени измерения, като дисково пространство
• – за да посочи вашия успех и напредък

HTML 5 е проектиран да опрости задачите на уеб разработчиците, поради което има много нови функции за поддръжка на динамични страници.

• Контекстно меню – HTML 5 ще поддържа създаване и използване на контекстни менюта в уеб страници и приложения
• asynchronous attribute – Този таг казва на браузъра, че скриптът трябва да се зарежда асинхронно, така че да не забавя зареждането и изобразяването на останалата част от страницата.
• – съдържа подробна информация за елемента.
• – създава таблица, която е създадена от база данни или друг източник на динамична страница
• – старите тагове се завръщат, което ви позволява да създавате системи от менюта на вашите уеб страници
• – дефинира действията, които трябва да се случат при активиране на динамичен елемент

HTML5 поддържа всички стари типове формуляри, но са добавени и нови:

• Време за среща
• datetime-local
• месец
• номер
• диапазон
• електронна поща

Има някои нови елементи в HTML5:

• – елемент, който ви позволява да използвате JavaScript в уеб страници. Това може да ви позволи да добавяте изображения или графики към подсказки или просто да създавате динамични графики на страницата в движение.
• – добавя видео към уеб страница.
• – добавя звук към уеб страница.

Има и HTML4 елементи, които вече не могат да се използват в HTML5. Повечето от тях са отдавна остарели, така че подобни действия не са изненадващи.

HTML5 е най-новата и най-добрата версия на най-широко използвания език за маркиране в Интернет. Има някои големи промени в най-новата версия на езика и ако не ги използвате, пропускате някои наистина страхотни функции.

Няма да говоря за всеки нов елемент в HTML 5, но тези девет са едни от най-важните.

Както по-голямата част от мрежата, HTML5 премина към семантика. Сега етикетите, които някога са били просто използвани за форматиране, също се използват, за да кажат на браузъра и търсачките какво обграждат.

Например,

Просто казва на браузъра какво съдържа параграфът. , който ще обсъдим по-долу, казва на браузъра, че съдържа основното съдържание на страницата.

Семантичната мрежа все още се развива и ние едва започнахме да надраскаме повърхността на това, което може да направи. HTML5 помага за пренасянето на семантичното маркиране в много по-голяма част от Интернет и това може да бъде полезно за бъдещето на семантичната обработка.

Етикетът дефинира „независимо, самостоятелно съдържание“. Най-простият пример е, разбира се, статия. В тази статия отваряме етикета преди въвеждането и го затваряме след завършване.

Целият текст във вашата офлайн секция.

Но има и други начини да го използвате. Например много блогове за храна включват лични истории за това как се е появила дадена рецепта или защо е важна за автора. След това идва рецептата. Можете да направите аргумент, че всеки от тези елементи може да стои сам.

Във форум всяка публикация или тема може да се счита за автономна и всяка от тях може да бъде маркирана със собствен етикет. В по-голямата си част ще се използва в основното съдържание на страницата. Но имайте предвид, че можете да го използвате по-креативно.

тясно свързано с. Той определя „тематично групиране на съдържание, обикновено със заглавие. Така че ще бъде вътре... нали?

Не е задължително. W3 посочва, че това зависи от структурата на вашия сайт. Можете да имате самостоятелно съдържание в различни секции на страницата си (например заглавната страница на новинарски сайт). Тогава можете да имате раздели в тази статия.

Защо ви е нужен DAC

Всичко звучи по-добре.

Ето какво трябва да направите. . .

Можете дори да имате секции в секциите, ако отговарят на вашата страница. Не забравяйте, че разделът е просто „тематично групиране на съдържание“ и ще намерите много места, където да го използвате.

Този елемент „трябва да се използва като контейнер за уводно съдържание. Накратко, това е частта от вашата страница, която помага на хората да разберат какво ще прочетат.

Но не се заблуждавайте – можете да използвате този контейнер повече от веднъж. Например, можете да го използвате, за да определите заглавието на страницата и уводния параграф на публикацията в блога си. Но можете също да го използвате, за да маркирате уводно съдържание за всеки раздел.

Секциите обикновено съдържат поне един таг за заглавие - H1, H2 и т.н. Това не е необходимо, но ако използвате таг, няма да навреди.

W3 казва, че етикетите на долния колонтитул обикновено съдържат „автор на документа, информация за авторски права, връзки към условия за използване, информация за контакт и т.н.“ Можете да мислите за него като за "къщен" материал.

Документацията също така посочва, че можете да имате повече от един долен колонтитул на вашата страница. Но според мен е по-добре цялата тази информация да се съхранява на едно място.

Повече информация по темата

Yandex People - търсене на хора в социалните мрежи

Коригиране на проблеми с буутлоудъра с помощта на командния ред

Откраднаха ми телефона - какво да правя?

Bootstrap - Създаване на галерия с изображения

Как да опреснявате автоматично страница в браузъра Yandex Автоматично опресняване в Opera

Как да направите приложение или игра за Android Методи и цена за създаване на приложение