HTML5引入了些新元素来定义页面结构。
新元素用于替换之前的<div>元素（在传统DIV约定俗成的基础进行演进）。
- 这些元素有：
- <header> 元素用于表示页眉
- <nav> 元素用于表示导航
- <section> 元素用于表示相关信息集中到一块
- <article> 元素用于表示文章
- <aside>元素用于表示附属信息，如最新文章列表，历史存档
- <footer> 元素用于表示页脚
其实，所有的元素本质上都是<div>元素。
只不过这些特殊的元素，如上面的HTML5布局元素，在浏览器渲染时添加了w3c事先约定的CSS规则。
HTML5布局新元素经典用法
下面的示例代码演示了HTML布局新元素的用法
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <!DOCTYPE html> < html > < head > < title >HTML5 布局示例</ title > < style type = "text/css" > header, section, footer, aside, nav, article, figure, figcaption { display: block;} body { color: #666666; margin: 0px;} .wrapper { width: 940px; margin: 20px auto 20px auto; border: 2px solid #000000;} header { height: 160px; } h1 { color:#000; width: 940px; height: 130px; margin: 0px;} nav, footer { clear: both; color: #ffffff; height: 30px;} nav ul { margin: 0px; padding: 5px 0px 5px 30px;} nav li { display: inline; margin-right: 40px;} nav li a { color: #ffffff;} nav li a:hover, nav li a.current { color: #000000;} section.courses { float: left; width: 659px; border-right: 1px solid #eeeeee;} article { clear: both; overflow: auto; width: 100%;} hgroup { margin-top: 40px;} figure { float: left; width: 250px; height: 240px; padding: 5px; margin: 20px; border: 1px solid #eeeeee;} figcaption { font-size: 90%; text-align: left;} aside { width: 230px; float: left; padding: 0px 0px 0px 20px;} aside section a { display: block; padding: 10px; border-bottom: 1px solid #eeeeee;} aside section a:hover { color: #985d6a; } a { color: #de6581; text-decoration: none;} h1, h2, h3 { font-weight: normal;} h2 { margin: 10px 0px 5px 0px; padding: 0px;} h3 { margin: 0px 0px 10px 0px; color: #de6581;} aside h2 { padding: 30px 0px 10px 0px; color: #de6581;} footer { font-size: 80%; text-align:center; padding: 7px 0px 0px 20px;} </ style > </ head > < body > < div class = "wrapper" > < header > < h1 >网站标题</ h1 > < nav > < ul > < li >< a href = "" class = "current" >首页</ a ></ li > < li >< a href = "" >产品</ a ></ li > < li >< a href = "" >服务</ a ></ li > < li >< a href = "" >关于我们</ a ></ li > < li >< a href = "" >联系我们</ a ></ li > </ ul > </ nav > </ header > < section class = "courses" > < article > < figure > < img src = "" alt = "Bok Choi" /> < figcaption >Java程序设计教程</ figcaption > </ figure > < hgroup > < h2 >Java程序设计教程</ h2 > < h3 >面向对象程序设计</ h3 > </ hgroup > < p >Java是一种广泛使用的计算机程序设计语言，拥有跨平台、面向对象、泛型程序设计的特 性，广泛应用于企业级Web应用开发和移动应用开发。</ p > </ article > < article > < figure > < img src = "" alt = "Teriyaki sauce" /> < figcaption >HTML5教程</ figcaption > </ figure > < hgroup > < h2 >HTML5教程</ h2 > < h3 >HTML5 + CSS3 + Javascript</ h3 > </ hgroup > < p >HTML5 由万维网联盟（W3C）2014年10月完成標準制定，取代1999年所制定的HTML 4.01 和XHTML 1.0標準。HTML5 已广泛应用于各行各业。</ p > </ article > </ section > < aside > < section class = "popular-recipes" > < h2 >火爆课程</ h2 > < a href = "" target = "_blank" >JavaScript 教程</ a > < a href = "" target = "_blank" >JSTL 教程</ a > < a href = "" target = "_blank" >ajax 教程</ a > < a href = "" target = "_blank" >SQL 教程</ a > </ section > < section class = "contact-details" > < h2 >联系我们</ h2 > < p >北京市< br /> 钟声胡同18号</ p > </ section > </ aside > < footer > © 2019 利永贞网 </ footer > </ div > <!-- .wrapper --> </ body > </ html > |