029HTML5新增的语义化标签

最新推荐文章于 2023-02-25 16:45:00 发布

小何在线

最新推荐文章于 2023-02-25 16:45:00 发布

阅读量380

点赞数

分类专栏： HTML5 文章标签： css3 html5 html

本文链接：https://blog.csdn.net/Hyc_cheng/article/details/123824854

版权

HTML5 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

一、简介

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

二、新增的语义标签

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

在这里插入图片描述
注意：

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在 IE9 中，需要把这些元素转换为块级元素
其实，我们移动端更喜欢使用这些标签

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5新增的语义化标签</title>

    <style>
        header,nav,footer{
            height: 100px;
            background-color: gray;
            text-align: center;
            line-height: 100px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .box{
            height: 300px;
            background-color:transparent;
            margin-bottom: 10px;
        }
        .box article{
            float: left;
            width: 49%;
            height: 300px;
            background-color: gray;
            text-align: center;
            line-height:300px;
            border-radius: 5px;
           
        }
        .box aside{
            float: right;
            width: 49%;
            height: 300px;
            background-color: gray;
            text-align: center;
            line-height:300px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <header>header头部标签</header>
    <nav>nav导航标签</nav>
    <div class="box">
        <article>article内容标签</article>
        <aside>aside侧边栏标签</aside>
    </div>

    <footer>footer尾部标签</footer>
</body>
</html>

效果：
在这里插入图片描述

小何在线

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
029HTML5新增的语义化标签

一、简介以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。<div class=“header”> </div><div class=“nav”> </div><div class=“content”> </div><div class=“footer”> </div>二、新增的语义标签<header>：头部标签<nav>：导航标签<ar
复制链接

扫一扫

专栏目录