页面布局的语义化标签

#第六届英特尔杯全国大学生软件创新大赛博客征集#

页面布局的语义化标签

 

新增布局标记


¦HTML5中常用的布局标签有article、aside、footer、header、hgroup、nav和section。

<article>

定义 article。

<aside>

定义页面内容之外的内容。

<footer>

定义 section 或 page 的页脚。

<header>

定义 section 或 page 的页眉。

<hgroup>

定义有关文档中的 section 的信息。

<nav>

定义导航链接。

<section>

定义 section。

 

传统的页面布局


¦这是 DIV + CSS 时期的 HTML 代码布局模式,而且这个布局还是一个经典的两栏布局。
¦DIV+id的方式是最受欢迎的布局方式,其命名并无标准规则,常用的有‘footer‘,’top‘,’main‘等。

 

HTML5的页面布局


¦同样是上面的两栏布局,在HTML5中的效果图是这样的:

  ¦而现在较流行的页面布局趋势如下图:

  

一个实例


¦这是一个典型的HTML5页面布局。最终展示的效果图如下:

 

¦源码(在别人代码上修改完成)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5典型页面</title>
<link rel="stylesheet" href="html5.css">
</head>

<body>
<header>
<hgroup>

  <h1>Header</h1>
  <h2>header h2</h2>
  <h4>header h4(css3实现)</h4>
  </hgroup>
</header>
<div id="container">
  <nav>
    <h3>Nav</h3>
    <p>定义导航链接 </p>
    <a href="">Link 1</a> <a href="">Link 2</a> <a href="">Link 3</a> </nav>
  <section>
    <article>
      <header>
        <h1>Article Header</h1>
      </header>
      <p>这里是article的具体内容</p>
      <p>通常把article放进section中,当然也可以在article中嵌套section。</p>
      <footer>
        <h2>Article Footer</h2>
      </footer>
    </article>
    <article>
      <header>
        <h1>Article Header</h1>
      </header>
      <p>这里是article的具体内容</p>
      <p>通常把article放进section中,当然也可以在article中嵌套section。</p>
      <footer>
        <h2>Article Footer</h2>
      </footer>
    </article>
    <article>
      <header>
        <h1>Article Header</h1>
      </header>
      <p>这里是article的具体内容</p>
      <p>通常把article放进section中,当然也可以在article中嵌套section。</p>
      <footer>
        <h2>Article Footer</h2>
      </footer>
    </article>
  </section>
  <aside>
    <h3>Aside</h3>
    <p>用来定义页面内容之外的内容。</p>
  </aside>
  <footer>
    <h2>Footer</h2>
  </footer>
</div>
</body>
</html>

 

/* html5 css file, Copyright ?Pro HTML5 Programming */

body {
 background-color: #CCCCCC;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 margin: 0px auto;
 max-width: 1100px;
 border: solid;
 border-color: #FFFFFF;
}
header {
 background-color: #F47D31;
 display: block;
 color: #FFFFFF;
 text-align: center;
}
header h2 {
 margin: 0px;
}
h1 {
 font-size: 72px;
 margin: 0px;
}
h2 {
 font-size: 24px;
 margin: 0px;
 text-align: center;
 color: #fff;
}
h3 {
 font-size: 18px;
 margin: 0px;
 text-align: center;
 color: #F47D31;
}
h4 {
 color: #F47D31;
 background-color: #fff;
 -webkit-box-shadow: 2px 2px 20px #888;
 -webkit-transform: rotate(-45deg);
 -moz-box-shadow: 2px 2px 20px #888;
 -moz-transform: rotate(-45deg);
 position: absolute;
 padding: 0px 150px;
 top: 50px;
 left: -120px;
 text-align: center;
}
nav {
 display: block;
 width: 25%;
 float: left;
}
nav a:link, nav a:visited {
 display: block;
 border-bottom: 3px solid #fff;
 padding: 10px;
 text-decoration: none;
 font-weight: bold;
 margin: 5px;
}
nav p {
 margin: 15px;
 color: white;
}
nav a:hover {
 color: white;
 background-color: #F47D31;
}
nav h3 {
 margin: 15px;
 color: white;
}
#container {
 background-color: #888;
}
section {
 display: block;
 width: 50%;
 float: left;
}
article {
 background-color: #eee;
 display: block;
 margin: 10px;
 padding: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
}
article header {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;
}
article footer {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;
}
article h1 {
 font-size: 18px;
}
aside {
 display: block;
 width: 25%;
 float: left;
}
aside h3 {
 margin: 15px;
 color: white;
}
aside p {
 margin: 15px;
 color: white;
 font-weight: bold;
 font-style: italic;
}
footer {
 clear: both;
 display: block;
 background-color: #F47D31;
 color: #FFFFFF;
 text-align: center;
 padding: 15px;
}
footer h2 {
 font-size: 14px;
 color: #FFFFFF;
}
/* links */
a {
 color: #F47D31;
}
a:hover {
 text-decoration: underline;
}

 

作者


¦学校:北京航天航空大学

¦姓名:彭伟

¦E-mail:786800158@qq.com

¦新浪微博:Way-彭伟      http://weibo.com/pengway

¦微信号:w786800158

 

AdjuntoTamaño
Icono de Imagen 2.jpg25.11 KB
Icono de Imagen 3.1.jpg12.77 KB
Icono de Imagen 3.jpg15.51 KB
Icono de Imagen 4.jpg45.61 KB
Icono de Imagen 5.jpg112.19 KB
Icono de Imagen me.jpg55.11 KB
Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.