HTML5新增标签的使用

来源：互联网发布：烟台网亿网络好不好编辑：程序博客网时间：2024/05/16 09:54

HTML5新增的标签

1、<article> 标记定义一篇文章

2、<header> 标记定义一个页面或一个区域的头部

3、 <nav> 标记定义导航链接

4、<section> 标记定义一个区域

5、<aside> 标记定义页面内容部分的侧边栏

6、<footer> 标记定义一个页面或一个区域的底部

具体使用如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link type="text/css" rel="stylesheet" href="css/my1.css"/></head><body><!-- 用标签来简化代码 ［ＨＴＭＬ５＋ＣＳＳ３］ -->  <div class="box">    <!-- 头部-->      <header>        LOG      </header>     <!-- 导航-->      <nav>           【导航】          <a href="#">张三</a>          <a href="#">李四</a>          <a href="#">王五</a>      </nav>      <!--定义一个区域  -->      <section>          section          <!--定义一篇文章-->          <article> article</article>          <!--定义区域头部-->          <header> header</header>          <p>..pp....</p>          <!--定义区域底部 -->          <footer>footer</footer>      </section>      <!--定义区域侧边栏 -->      <aside>          aside      </aside>      <!--定义区域底部 -->      <footer>footer</footer>  </div></body></html>

样式文件：my1.css

*{    margin: 0px;    padding: 0px;  /* 内，外边距去掉*/}a{    text-decoration: none;    color:#FFF;}.box{    width: 800px;    margin: 0px auto;  /* 水平居中*/}header{    width: 800px;    height: 50px;    font-size: 24px;    text-align: center;    background: #a7acaf;}nav{    width: 800px;    height: 45px;    font-size: 24px;    text-align: center;    color: #FFF;    background:#124c9b;}section {    width: 400px;    height: 400px;    background: #c81623;    text-align: center;    /* 左浮动*/    float: left;}section article{    width: 390px;    height: 80px;    margin: 0px auto;    background: greenyellow;    text-align: center;}section header{    width: 390px;    height: 50px;    margin: 0px auto;    background: bisque;    text-align: center;}section p{    width: 390px;    height: 200px;    margin: 0px auto;    background:fuchsia;    text-align: center;}section footer{    width: 390px;    height: 50px;    margin: 0px auto;    background:lightcoral;    line-height: 50px;}aside {    width: 400px;    height: 400px;    font-size:24px;    text-align: center;    background:goldenrod;    /* 左浮动*/    float: left;}footer{    width: 800px;    height: 80px;    font-size: 24px;    text-align: center;    background:mediumaquamarine;    margin: 0px auto;    /*清除浮动  */    clear: both;    line-height: 80px;}

显示效果：

0 0