html5页面结构

<!DOCTYPE html>
<html>
  <!--创建文头-->
  <head>
    <title>HTML5页面结构</title>
    <meta charset = "UTF-8" />
    <span style="color:red;font-style:italic;">
      这里是页头</span>
    <hr>
  </head>
  <body>
    <!--创建旁注-->
    <aside style="font-size:larger;font-style:italic;color:blue;float:right;width:120px;">
      HTML5页面使用旁注.
    </aside>
    <!--创建导航-->
    <nav>
      <a href="/Baking/" target="_blank">导航1</a> |
      <a href="/ingredients/" target="_blank">导航2</a> |
      <a href="/mixing/" target="_blank">导航3</a> |
      <a href="/toppings/" target="_blank">导航4</a>
    </nav>
    <!--插入图片-->
    <figure>
      <img src="picture.jpg" width="170" height="128" />
    </figure>
    <!--[h1]至[h6]元素-->
    <hgroup draggable="true">
      <h1>h1</h1>
      <h2>h2</h2>
      <h2>h3</h2>
    </hgroup>
    <p>
      This specification defines the 5th major version, first minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML).
    </p>
    <p>
      In this version, new features continue to be introduced to help Web application authors, new elements continue to be introduced based on research into prevailing authoring practices, and special attention continues to be given to defining clear conformance criteria for user agents in an effort to improve interoperability.
    </p>
    <!--将文档分成不同区域-->
    <article>
      <section id="mixing">
        <h2>The proper way to mix ingredients</h2>
        <p>When using a stand-mixer, it is important that you do not over mix the
        ingredients...</p>
      </section>
      <section id="baking">
        <h2>Proper baking techniques</h2>
        <p> It is important that you bake your cheesecake using a lot of moisture in the
        oven...</p>
      </section>
    </article>
  </body>
  <!--创建文脚-->
  <footer> © 2012 - fwwdn - All rights reserved </footer>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值