【48】HTML5 （2）——新增①标签语义化

最新推荐文章于 2023-05-14 11:44:45 发布

倏存

最新推荐文章于 2023-05-14 11:44:45 发布

阅读量292

点赞数 5

分类专栏：前端基础文章标签： html5 html css3

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115571912

版权

前端基础专栏收录该内容

79 篇文章 7 订阅

订阅专栏

★文章内容学习来源：拉勾教育大前端就业集训营

本篇目录：

标签语义化含义
HTML5新增语义化标签
注意事项

一、标签语义化含义

以前制作网页布局，我们基本用div 来做;
div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的；
div本身没有语义，设置了类名对于搜索引擎来说也没有什么用处；
而标签的语义化对于 seo(Search Engine Optimization)搜索引擎优化有用处。

二、 HTML5一些新增的语义化标签

标签	含义
`<header>`	用于网页的头部
`<nav>`	导航
`<main>`	用于网页主体部分的划分
`<article>`	用于网页独立的内容
`<section>`	用于网页某个区段，类似`div`
`<aside>`	侧边栏标签，可在左边/右边
`<footer>`	尾部标签（版权/公司等信息）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>语义化标签</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    header,nav,article,aside,main,footer {
      display: block;
    }
    header {
      width: 1000px;
      height: 100px;
      margin: 0 auto;
      background-color:hotpink;
    }
    nav {
      width: 1000px;
      height: 50px;
      margin: 10px auto 0;
      background-color: yellowgreen;
    }
    main {
      width: 1000px;
      height: 400px;
      margin: 10px auto 0;
      background-color: rgb(134, 230, 217);
      text-align: left;
    }
    main aside {
      float: left;
      width: 150px;
      height: 390px;
      margin: 5px;
      background-color: pink;
    }
    main article {
      float: left;
      width: 840px;
      margin: 5px 0;
      height: 180px;
      background-color:lavender;
    }
    main section{
      float: left;
      width: 840px;
      height: 180px;
      background-color: yellow;
    }
    footer {
      width: 1000px;
      height: 80px;
      margin: 10px auto 0;
      background-color: tomato;
    }
  </style>
</head>
<body>
  <header>头部</header>
  <nav>导航</nav>
  <main>
    主体区域
    <aside>侧边栏</aside>
    <article>独立的内容</article>
    <section>区段</section>
  </main>
  <footer>底部</footer>
</body>
</html>