首页 前端知识 Html提高——HTML5 新增的语义化标签

Html提高——HTML5 新增的语义化标签

2024-09-29 22:09:17 前端知识 前端哥 877 35 我要收藏

引入:

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

但是在html5里增加了语义化标签,如

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

板图:

5227c8a9231a46b8a5de59ceef710039.png

例子:

a2bbee6350874c2ca0c262c089767c9e.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 800px;
            margin: 0 auto;
            position: relative;
        }

        aside {
            margin-left: 10px;
            width: 190px;
            height: 650px;
            border-radius: 15px;
            background-color: pink;
            float: left;
        }

        header {
            width: 800px;
            height: 100px;
            line-height: 100px;
            font-size: 40px;
            border-radius: 15px;
            background-color: skyblue;

            margin: 0 auto;
            text-align: center;
            margin-bottom: 10px;
        }

        nav {
            width: 800px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            border-radius: 15px;
            background-color: skyblue;

            margin: 0 auto;
            text-align: center;
            margin-bottom: 10px;
        }

        article {
            width: 600px;
            height: 650px;
            border-radius: 15px;
            margin-bottom: 10px;
            background-color: skyblue;
            float: left;
        }

        .bkm {
            padding: 20px;
        }

        section {
            width: 400px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            margin-top: 10px;
            border-radius: 15px;
        }

        section img {
            margin: 10px;
            width: 380px;
            height: 280px;
        }

        footer {
            width: 800px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            border-radius: 15px;
            background-color: skyblue;
            clear: left;
            margin: 0 auto;
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <header>header</header>
        <nav>navigation</nav>
        <article>
            <div class="bkm">精灵宝可梦,也被称为宝可梦,是由日本任天堂公司开发的一款非常受欢迎的系列游戏,同时也有相关的动画、漫画、卡牌等多种形式的衍生作品。<br>
                在游戏中,玩家扮演一名宝可梦训练师,通过捕捉、培养和训练各种宝可梦,与其他训练师进行对战,目标是成为最强的宝可梦训练师。宝可梦种类繁多,每种宝可梦都有其独特的属性和技能,玩家需要根据自己的战略选择合适的宝可梦进行战斗。<br>
                电视动画系列《宝可梦》则是以游戏为原作改编的,讲述了少年小智以成为最厉害的宝可梦训练大师为目标,与皮卡丘等宝可梦一起踏上修行之旅的故事。动画中充满了冒险、友情和成长的主题,深受全球观众的喜爱。<br>
                此外,宝可梦系列还有丰富的周边商品和线下活动,形成了一个庞大的文化现象。无论是游戏玩家还是动画观众,都可以在这个世界中找到属于自己的乐趣和挑战。<br>
                总的来说,精灵宝可梦是一个充满想象力和创造力的世界,它不仅仅是一个游戏或者一个动画,更是一种文化、一种生活方式,带给人们无尽的欢乐和感动。<br></div>
            <section>
                <img src="https://p1.ssl.qhimgs1.com/sdr/400__/t01093c83c1a95b7d8b.png" alt="">
            </section>

        </article>
        <aside>
            a
        </aside>
        <footer>footer</footer>
    </div>
</body>

</html>

 

注意事项:

  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在 IE9 中,需要把这些元素转换为块级元素
  • 其实,我们移动端更喜欢使用这些标签
  • HTML5 还增加了很多其他标签,我们后面再慢慢学

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18738.html
标签
评论
发布的文章

jQuery QueryBuilder 教程

2024-10-29 23:10:44

水球图 及各种参数设置

2024-10-29 23:10:13

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!