超级实习生计划前端学习笔记—HTML5新增标签

本文就前端知识中部分HTML5新增标签基础知识点进行总结，希望对你有用！

HTML5概念
html5是最新的html标准，拥有新的语义、图形以及多媒体元素，简化web应用程序，专为丰富的web内容而设计的，简称“H5”。简单来说就是增加了一些更直观的标签，H5相比html4.0精简了很多。H5有兼容性问题，如果不考虑低版本浏览器，H5是绝对的主流，移动端开发则必须选它。

一、HTML5新增结构标签
结构标签：主要用来对页面结构进行划分，页面结构划分为顶部、导航、内容(页眉、区块)、页脚等。

1. header

头部标签 header一般网页头部信息或标题，和div一样的效果，但更具有语义性。

<header>
    // 在里放置网页头部信息或标题
</header>

2. nav

导航标签nav内放置导航条部分内容。常见的导航栏一般是菜单、目录和索引，一般在网页顶部或侧边进行导航栏设计。

<nav>
    // 导航栏内容一般为菜单、目录和索引
</nav>

3. section

section标签内放置的是独立内容区块，一般为内容区。

<section>
    // section区一般包含主体内容
</section>

4. article

article标签定义独立的内容，标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

<article>
 <h1>独立内容</h1>
 <p>与上下文不相关</p>
</article>

5. aside

aside标签定义侧边栏内容，且定义的内容应该与附近的内容相关。

<aside>
    // 侧边栏内容
</aside>

6. footer

footer标签定义文档或者文档的一部分区域的页脚，通常该元素内会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，可以定义多个元素。

<footer>
    // 页脚内容   
</footer>

7. HTML5新增的常用标签具体应用案例

效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>布局作业</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div class="all">
    <header>
      <h1>html5新标签练习</h1>
    </header>
    <nav>
      <span>首页</span>
      <span>人民网</span>
      <span>央视网</span>
      <span>新闻头条</span>
      <span>八卦娱乐</span>
      <span>军事热点</span>
    </nav>
    <section>
      <aside>
        <h3>最近观看节目</h3>
        <ul>
          <li><a href="#">快乐大本营</a></li>
          <li><a href="#">天天向上</a></li>
          <li><a href="#">非诚勿扰</a></li>
        </ul>
        <h3>最近火热节目</h3>
        <ul>
          <li><a href="#">中国好声音</a></li>
          <li><a href="#">爸爸去哪儿</a></li>
          <li><a href="#">最强大脑</a></li>
        </ul>
      </aside>
      <article>
        <h3>文章标题1</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
      <article>
        <h3>文章标题2</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
      <article>
        <h3>文章标题3</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
      <article>
        <h3>文章标题4</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
      <article>
        <h3>文章标题5</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
      <article>
        <h3>文章标题6</h3>
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
      
    </section>
    
    <footer>
        <a href="#">联系我们</a><span>|</span>
        <a href="#">@我们</a><span>|</span>
        <a href="#">与我们合作</a><span>|</span>
        <a href="#">友情链接</a><span>|</span>
        <a href="#">关于本站</a><span>|</span>
        <a href="#">常见问题</a><span>|</span>
        <a href="#">意见反馈</a><span>|</span>
    </footer>
  </div>
</body>
</html>

原文链接：https://blog.csdn.net/weixin_32424432/article/details/125059640