页面布局的语义化标签

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

页面布局的语义化标签

 

新增布局标记


¦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

 

AllegatoDimensione
Scarica 2.jpg25.11 KB
Scarica 3.1.jpg12.77 KB
Scarica 3.jpg15.51 KB
Scarica 4.jpg45.61 KB
Scarica 5.jpg112.19 KB
Scarica me.jpg55.11 KB
Per informazioni complete sulle ottimizzazioni del compilatore, consultare l'Avviso sull'ottimizzazione