Листинг 1.1. Пример страницы HTML5
<!DOCTYPE html> <html> <head> <meta charset»"utf-8" /> <title>HTML5</title> clink rel="stylesheet" href="/html5.css"> </head> <body> <header> <hl>Header</hl> <h2>Subtitle</h2> <h4 >HTML5 Rocks!</h4> </header> <div id="container"> <nav> <h3>Nav</h3> <a href-"">Link l</a> <a href="/">Link 2</a> <a href="/">Link 3</a> <a href«"">Link 4</a> <a href-"">Link 5</a> </nav> <section> <article> <header> <hl>Article Header</hl> </header> <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p> <p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p> <footer> <h2>Article Footer</h2> </footer> </article> <article> <header> <hl>Article Header</hl> </header> <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna Pellentesque odio</p> <footer> <h2>Article Footer</h2> </footer></article> </section> <aside> <h3>Aside</h3> <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus</p> </aside> <footer> <h2>Footer</h2> </footer> </div> </body>
Без применения стилей страница выглядела бы довольно скучно. В листинге 1.1 приведен CSS-код, который может быть использован для стилевого оформления содержимого. Обратите внимание, что в таблице стилей используются новые элементы CSS3, например скругленные углы (border-radius) и поворотные преобразования (transform: rotate О ;). Следует отметить, что спецификация CSS3, как и сама спецификация HTML5, все еще находится в стадии разработки, и из нее выделяются отдельные модули вспомогательных спецификаций, что упрощает оперативное использование браузерами тех ее частей, которые более или менее близки к завершению (например, преобразования, анимация и переходы выделены во вспомогательные спецификации).
Чтобы избежать возникновения конфликтов имен при возможных последующих изменениях спецификации, экспериментальные средства CSS3 снабжаются префиксом в виде строки, идентифицирующей производителя браузера. В настоящее время для отображения скругленных углов, градиентов, теней и преобразований необходимо использовать в объявлениях такие префиксы, как -moz- (для браузеров Mozilla), о- (для браузеров Opera) и -webkit-(wiH WebKit-браузеров, таких как Safari и Chrome).
