加入收藏
大学数学, 研究生数学,大学数学资料下载,免费 大学数学课件,研究生数学课件,免费下载
HTML5基础实例教程
2015-01-26 21:21:12

在网站中经常要用到一些内容,如菜单,章节,页脚等,其中用到标签:header、nav、section、footer,配合CSS3即可以设置这些标签的一切特点。下面给出一个实例:如下显示的网页内容,

使用HTML5编码如下:
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>基本标签的使用-HTML5工作室</title>
    <link rel="stylesheet" href="style.css" type="text/css">   
   
  </head>
  <body>
    <header id="header">  // 网站头模块
      <h1>网站标题 </h1>
      <nav> //菜单样式
        <ul>
          <li><a href="#welcome">欢迎</a></li>
          <li><a href="#services">服务</a></li>
          <li><a href="#contact">内容</a></li>
          <li><a href="#about">关于</a></li>
        </ul>
      </nav>
    </header>
    <section id="content"  role="document" aria-live="assertive" aria-atomic="true">  //章节内容模块   
      <section id="welcome"> //章节模块
        <header>
          <h2>欢迎</h2>
        </header>
        <p>欢迎你访问本站</p>
      </section>

      <section id="services">//章节模块
        <header>
          <h2>服务</h2>
        </header>
        <p>这里提供HTML5服务</p>
      </section>
    
      <section id="contact">//章节模块
        <header>
          <h2>内容</h2>
        </header>
        <p>这里是胡桃木屋的内容</p>
      </section>
    
      <section id="about">//章节模块
        <header>
          <h2>关于</h2>
        </header>
        <p>关于HTML5工作室</p>
      </section>

    </section>
    <footer id="footer">//页脚模块
      <p>&copy; 2010 HTML5工作室.</p>
      <nav> //菜单样式
        <ul>   
          <li><a href="http://mathapply.cn/">Home</a></li>
          <li><a href="about">About</a></li>
          <li><a href="terms.html">Terms of Service</a></li>
          <li><a href="privacy.html">Privacy</a></li>
        </ul>
      </nav>
    </footer>
  </body>
</html>
这是一个简单的HTML5应用,解释不是很详细,大家自己去琢磨体会了。

赞一个(140) | 阅读(1051)
上一篇:HTML5拖放
下一篇:常见的HTML5 移动应用开发框架比较
 

胡桃木屋版权所有@2013 湘ICP备13006789号-1