持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

前言

前端离不开的就是HTML，曾经入门时只会写各种div.class, 前几天花时候学习了一下HTML的语义化标签，感觉一下子整个页面就明了了，开发也清晰了，头发也保住了。

先看看小demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    body {
      font-size: 40px;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header, footer {
      height: 400px;
      background-color: #dbb5c0;
      padding: 40px;
    }

    footer {
      margin: auto 0 0;
    }

    nav > a {
      padding: 20px 50px;
      border-radius: 50px;
      background-color: #fff;
      font-weight: bolder;
      color: #1E9FFF;
      text-decoration: none;
    }

    main {
      display: flex;
      flex-direction: row;

      width: 100%;
    }

    main > aside {
      background-color: #e86f6b;
      float: right;
      flex: 0 auto;
    }

    main > article {
      flex: 1;
      height: 100%;
      background-color: #1E9FFF;
    }

    figure {
      position: fixed;
      background-color: rgba(181, 127, 127, 0.4);
      width: 300px;
      height: 300px;
      right: 0;
      top: 50%;
    }

  </style>
</head>
<body>
  <header>
    <h1>主题头部</h1>
    <nav>
      <a href="">java</a>
      <a href="">python</a>
      <a href="">前端</a>
    </nav>
  </header>

  <main>
    <article>
      <section>主要内容1</section>
      <section>主要内容2</section>
      <section>主要内容3</section>
    </article>

    <aside>
      <section>侧边推荐1</section>
      <section>侧边推荐2</section>
      <section>侧边推荐3</section>
    </aside>
  </main>

  <figure>
    <h4>这是一个<mark>figure</mark> </h4>
    <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/juejin-tutu.d58819c.png" alt="">
  </figure>

  <footer>xxxx科技公司所有权</footer>
</body>
</html>

使用的标签

header 页头标签

<header>
  这是一个头部
</header>

<!--等价于-->

<div class="header"></div>

2.nav 导航标签

<nav>    
  <a href="#">python</a>    
  <a href="#">java</a>   
  <a href="#">前端</a>
</nav>

main 网页的主要内容部分标签

<main>内容</main>

<div class="main">内容</div>

footer 页脚标签

<footer>xxx科技有限公司版权所有</footer>

aside 侧边栏,与附近内容相关的内容

<aside></aside>

article 定义页面独立的内容

评论
更多推荐

<article>独立内容</article>

section 定义域文档或表单

头部或者侧边栏中的某个内容块

<main>
  <section>独立内容1</section>
  <section>独立内容2</section>
  <section>独立内容3</section>
</main>

<article>
  <section>独立内容1</section>
  <section>独立内容2</section>
  <section>独立内容3</section>
</article>

figure 用于与主内容有关的图像, 同时元素的位置相对于主内容是独立的

<figure>
  <p>测试中心</p>
  <img src="test.jpg"/>
</figure>

特色标签

mark 高亮标签

<p>
	111<mark>222</mark>1111
</p>

进度条

<progress value='70' max='100'></progress>

总结

总的来说，多看文档，多敲多练。

HTML5 新标签

前言

使用的标签

特色标签

总结