mutiПоглед на HTML6 – какво е това и какво може да предложи?
Преглед на HTML6 HTML е прост език за уеб разработка, който продължава да разгръща нови версии и е започнал работа по шестата си версия. HTML5 текущата версия на HTML се счита за една от най-търсените версии в сравнение с всички предишни версии на HTML.
Нека да направим бърз преглед на HTML5
HTML5 ни даде някои много вълнуващи функции като аудио и видео поддръжка, офлайн локално съхранение и най-важното възможност за изграждане на оптимизирани за мобилни уебсайтове. Освен това тои ни даде свобода да използваме атрибут на тип от тагове като <link> и <script>. Какво още? Помогна на разработчиците да организират съдържание по по-подходящ начин, използвайки нови тагове като <article>, <section>, <header> и т.н., но HTML5 все още е в етап на разработка.
Концепцията на HTML6
Замисляли ли сте се дали можете да изразявате етикети? Ако не сте го направили, просто си представете как да използвате маркери като <logo> </logo> за присвояване на лого на вашата уеб страница или използване на маркер <toolbar> </toolbar> и т.н. Не би ли било по-добре, ако можете да използвате маркера <div>, без да използвате множество идентификатори, като обвивка или контейнер, и по-скоро да използвате директно <wrapper> или <container>. Просто казано, вместо да използвате <div id = ‘container’> можете просто да използвате <container>. Тук идва HTML6.
HTML6 е шеста редакция на HTML с пространства от имена, която има структура като XML. Пространствата с имена XML ще ви помогнат да използвате един и същ маркер, без да го конфликтирате с друг маркер. Например този, използван в XHTML DOCTYPE:
1 xmlns: XHTML = „http://www.w3.org/1999/xhtml“
HTML6 ще ни осигури предимството да използваме маркери, които искаме и няма да трябва да използваме само дефинираните маркери.
Пример за HTML6
01 <!DOCTYPE html>
02 <html:html>
03 <html:head>
04 <html:title>Поглед в HTML6</html:title>
05 <html:meta type="title" value="Page Title">
06 <html:meta type="description" value="HTML пример с имена">
07 <html:link src="css/mainfile.css" title="Styles" type="text/css">
08 <html:link src="js/mainfile.js" title="Script" type="text/javascript">
09 </html:head>
10 <html:body>
11 <header>
12 <logo>
13 <html:media type="image" src="images/xyz.png">
14 </logo>
15 <nav>
16 <html:a href="/img1">a1</a>
17 <html:a href="/img2">a2</a>
18 </nav>
19 </header>
20 <content>
21 <article>
22 <h1>Заглавие на основната статия</h1>
23 <h2>Подзаглавие на основната статия</h2>
24 <p>[...]</p>
25 <p>[...]</p>
26 </article>
27 <article>
28 <h1>Концепцията на HTML6</h1>
29 <h2>Концепция на основите</h2>
30 <p>[...]</p>
31 </article>
32 </content>
33 <footer>
34 <copyright>This site is © to Anonymous 2014</copyright>
35 </footer>
36 </html:body>
37 </html:html>
Разглеждайки горния HTML6 документ, ще видите някои странни <html: x> тагове. Тези странни тагове са елементи с пространство на имена, които принадлежат на спецификациите W3C и HTML6 и ще задействат събития в браузъра. Например елементът <html: title> ще промени лентата на заглавието на вашия браузър, а елементът <html: media> ще помогне да се покаже определеното изображение на екрана на вашия браузър. Най-хубавото е, че всички тези елементи са специално определени за потребителите и нямат нищо общо с браузъра. Те не са нищо повече от куки за JavaScript и стилов лист и помага да направите примера на кода си по-семантичен.
HTML6 API
HTML6 таговете ще имат html за пространството на имената като <html: html> или <html: head> и т.н.
1. <html:html>
1 <!DOCTYPE html>
2 <html:html>// това е еквивалентно на <html> таг, написан в предишни версии на HTML
3 <!-- HTML документ -->
4 </html:html>
2. <html:head>
1 <!DOCTYPE html>
2 <html:html>
3 <html:head>
4 <!-- Основното съдържание ще е тук, като <html:title> таг -->
5 </html:head>
6 </html:html>
Този маркер е еквивалентен на <head> тага. Целта му е да се получат данни и скриптове, които настройват как се показва съдържанието в маркера <html: body>.
3. <html:title>
1 <!DOCTYPE html>
2 <html:html>
3 <html:head>
4 <html:title>Преглед на HTML6</html:title>
5 </html:head>
6 </html:html>Както подсказва името, той ще промени заглавието на HTML документа и е подобен на маркера <title>, използван в по-ранните версии на HTML. Този маркер се използва от браузърите за промяна на лентата на заглавията, любими и т.н.
4. <html:meta>
1 <!DOCTYPE html>
2 <html:html>
3 <html:head>
4 <html:title>Преглед на HTML6</html:title>
5 <html:meta type="description" value="HTML example with namespaces">
6 </html:head>
7 </html:html>Този маркер е малко по-различен от маркера <meta>, използван в най-новата версия на HTML. С този HTML6 маркер можете да използвате всякакъв вид метаданни. И така, за разлика от HTML5, няма да се налага да използвате стандартните мета типове в HTML6. Той помага за натрупване на информация като описание на уеб страница, като съхранява съдържание.
5. <html:link>
1 <!DOCTYPE html>
2 <html:html>
3 <html:head>
4 <html:title>Преглед на HTML6</html:title>
5 <html:link src="js/mainfile.js" title="Script" type="text/javascript">
6 </html:head>
7 </html:html>Този маркер ще ви помогне да свържете външни документи и скриптове (като CSS, JS и т.н.) с HTML документа. Той е подобен на <link> тага, използван в HTML5. Този маркер включва следните атрибути:
- charset: „UTF-8“ кодиране на символи.
- href: Тя съдържа връзка към вашия изходен файл.
- media: Това определя вида на устройството, на което вашият артикул ще се изпълнява, например „смартфон“ или „таблет“.
- type: MIME типът на документа.
6. <html:body>
1 <!DOCTYPE html>
2 <html:html>
3 <html:head>
4 <html:title>Преглед на HTML6</html:title>
5 </html:head>
6 <html:body>
7 <!-- Тук е поставено съдържанието на вашия уебсайт -->
8 </html:body>
9 </html:html>Това е точно като маркера <body>, който сте използвали в текущата версия на HTML. Тук се поставят всички неща на вашия уеб сайт като текст, медия и други.
7. <html:a>
1 <!DOCTYPE html>
2 <html:html>
3 <html:head>
4 <html:title>Преглед на HTML6</html:title>
5 </html:head>
6 <html:body>
7 <html:a href="http://web-tourist.net">Отидете на web-tourist.net!</html:a>
8 </html:body>
9 </html:html>Този маркер е подобен на етикета <a> и се използва за представяне на връзка към друга уеб страница. Въпреки това, за разлика от <a> тага, <html: a> взема само един атрибут ‘href’, който насочва връзката към страницата, която трябва да посетите.
8. <html:button>
1 <!DOCTYPE html>
2 <html:html>
3 <html:head>
4 <html:title>Преглед на HTML6</html:title>
5 </html:head>
6 <html:body>
7 <html:button>Натисни Тук</html:button>
8 </html:body>
9 </html:html>Този маркер е еквивалентен на <button> тага или <input type = „button“> използван в текущата и по-старата версия на HTML. Този маркер ви позволява да създадете бутон, който да помогне на потребителя да извърши някакво взаимодействие на страницата на вашия сайт.
9. <html:media>
01 <!DOCTYPE html>
02 <html:html>
03 <html:head>
04 <html:title>Преглед на HTML6</html:title>
05 </html:head>
06 <html:body>
07 <!-- Изображението щеше да бъде тук -->
08 <html:media src="img1/logo.jpg" type="image">
09 <!-- Видеото не се нуждае от тип -->
10 <html:media src="videos/slide.mov">
11 </html:body>
12 </html:html>
Този маркер обгръща всички <media> тагове като <img>, <video>, <embed> и др. Използвайки <html: media> таг, вече не е нужно да указвате маркер за всеки от типа на файла. Маркерът <html: media>, който използвате, ще бъде изпълнен от браузъра въз основа на атрибута type (ако е предоставен), или просто ще предположи въз основа на разширението на файла или от типа „MIME“.
Преглед на типовете маркери
Подобно на текущата и предишната версия на HTML, HTML6 ще има и два типа тагове, като единични и двойни маркери. Единичните маркери няма да съдържат текстово съдържание и по-скоро ще имат само атрибути. Например:
1 <html:meta type="author" content="z13a">
2 <html:meta type="author" content="z13a" />В сравнение с двойния маркер, не е необходимо да затваряте своя единичен маркер. Двойните маркери имат отварящ и затварящ маркер, тъй като имат малко текстово съдържание. Но в случай, че двойните маркери нямат текстово съдържание, можете да го намалите до „самозатварящ се един вариант“. Например:
1 <html:link href="./a.html">Текстово съдържание</html:link>
2 <!-- Това съкращение... -->
3 <foo class="xyz" />
4 <!-- ...означава всъщност това: -->
5 <foo class="xyz"></foo>
Заключение
HTML6 все още не е наличен. Тази публикация ще ви помогне да добиете предостава за някои от основните понятия на HTML6. През това време може да прочетете уроците по HTML.
