web-touristЧаст от новите свойства на HTML 5
Автор: adrian
HTML 5 функции, които можем да ползваме в сайтовете си без притеснение за съвместимостта между браузърите.
По-кратък DOCTYPE. Досега беше трудно да се напише DOCTYPE ръчно и всеки го копираше от файл с доктайпове, от реализирани проекти или откъдето му е най-удобно. С HTML 5 DOCTYPE е съкратен до неузнаваемост.
<!DOCTYPE html>По-кратък charset. Вместо използвания досега дълъг meta таг вече може да се използва това:
<meta charset="utf-8" /><meta charset="windows-1251" />или какъвто друг charset искате.
Без използване на type атрибута за стилове и javascript. Докато преди беше задължително да се пише type=“text/css“ или type=“text/javascript“, вече не е неубходимо.
<style>
някакъв css
</style>
<script>
някакъв javascript
</script>Това важи и за външните файлове.
Без използване на кавички за атрибутите (въпреки че това изглежда примамливо, аз не бих го използвал, защото при повече от една дума в атрибута пак се налага да се използва, а и не е пригледно без кавичките).
<form action=http://example.com/form_validation.php method=post>
<input type=text name=username value="Някакво съдържание на полето" />
<input type=submit value=Register />
</form>article, aside, dialog, figure, footer, header, hgroup, nav, section. Това са един вид заместители на div. За да се използват под IE трябва да се направят няколко неща.
Първото е да се добави този код в head
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>и този стил в css файла
article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }Сега вече може да ги използваме без притеснение, че в някой браузър няма да се визуализират точно както трябва.
Ето един пример. Вместо да използваме:
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>може да използваме:
<header></header>
<nav></nav>
<section></section>
<footer></footer>И ето една примерна страница:
<!DOCTYPE html>
<html>
<head>
<title>Някакво заглавие</title>
<meta charset="utf-8" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Голямо заглавие</h1>
<h2>малко заглавие</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
<section id="main">
<article>
<h3>Заглавие на новина 1</h3>
<p>Lorem Ipsum е елементарен примерен текст, използван в печатарската и типографската индустрия. Lorem Ipsum е индустриален
стандарт от около 1500 година, когато неизвестен печатар взема няколко печатарски букви и ги разбърква, за да напечата с тях
книга с примерни шрифтове. Този начин не само е оцелял повече от 5 века, но е навлязъл и в публикуването на електронни издания
като е запазен почти без промяна. Популяризиран е през 60те години на 20ти век със издаването на Letraset листи, съдържащи Lorem
Ipsum пасажи, популярен е и в наши дни във софтуер за печатни издания като Aldus PageMaker, който включва различни версии на Lorem Ipsum.
</p>
</article>
<article>
<h3>Заглавие на новина 2</h3>
<p>Lorem Ipsum е елементарен примерен текст, използван в печатарската и типографската индустрия. Lorem Ipsum е индустриален
стандарт от около 1500 година, когато неизвестен печатар взема няколко печатарски букви и ги разбърква, за да напечата с тях
книга с примерни шрифтове. Този начин не само е оцелял повече от 5 века, но е навлязъл и в публикуването на електронни издания
като е запазен почти без промяна. Популяризиран е през 60те години на 20ти век със издаването на Letraset листи, съдържащи Lorem
Ipsum пасажи, популярен е и в наши дни във софтуер за печатни издания като Aldus PageMaker, който включва различни версии на Lorem Ipsum.
</p>
</article>
<article>
<h3>Заглавие на новина 3</h3>
<p>Lorem Ipsum е елементарен примерен текст, използван в печатарската и типографската индустрия. Lorem Ipsum е индустриален
стандарт от около 1500 година, когато неизвестен печатар взема няколко печатарски букви и ги разбърква, за да напечата с тях
книга с примерни шрифтове. Този начин не само е оцелял повече от 5 века, но е навлязъл и в публикуването на електронни издания
като е запазен почти без промяна. Популяризиран е през 60те години на 20ти век със издаването на Letraset листи, съдържащи Lorem
Ipsum пасажи, популярен е и в наши дни във софтуер за печатни издания като Aldus PageMaker, който включва различни версии на Lorem Ipsum.
</p>
</article>
</section>
<footer>Футър на страницата</footer>
</body>
</html>style.css
html, body, h1, h2, h3 { margin: 0; padding: 0; }
article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }
footer, header, nav, #main { margin: 0 auto; width: 900px; }
footer, header { background: #cccccc; border: 1px solid #858585; margin: 0 auto; width: 898px; }
nav { overflow: hidden; }
nav ul { list-style-type: none; margin: 0; padding: 0;}
nav li { float: left; text-align: center; }
nav li a { background: #dddddd; border: 1px solid #858585; border-width: 0 1px 1px; color: #555555; display: block; padding: 1em 0; text-decoration: none; width: 178px; }
nav li a:hover { background: #efefef; border-color: #dddddd }резултат:
Използване на figure и figcaption. Много пригледно поставяне на заглавия около снимките:
<figure>
<img src="image.jpg" width="50px" height="50px" alt="Some image" />
<figcaption>Някакво заглавие на снимката</figcaption>
</figure>
