HTML5新增标签的使用

最新推荐文章于 2021-06-22 17:10:44 发布

凌冰_

最新推荐文章于 2021-06-22 17:10:44 发布

阅读量421

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/hlx20080808/article/details/52087134

版权

HTML5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增标签的使用

HTML5新增的标签 1、标记定义一篇文章 2、标记定义一个页面或一个区域的头部 3、标记定义导航链接 4、标记定义一个区域 5、标记定义页面内容部分的侧边栏 6、标记定义一个页面或一个区域的底部具体使用如下： LO
复制链接

扫一扫