HTML语义标签以及字符实体

最新推荐文章于 2024-09-23 17:12:42 发布

来自万古的忧伤

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量120

点赞数

分类专栏：前端文章标签： html css 前端 div span

本文链接：https://blog.csdn.net/weixin_45413603/article/details/124683557

版权

前端专栏收录该内容

49 篇文章 5 订阅

订阅专栏

一语义标签

1.无语义的标签

实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

<!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>Document</title>
</head>
<body>
    普通文字
    <div>这是div标签</div>
    <div>这是div标签</div>

    <span>这是span标签</span>
    <span>这是span标签</span>
</body>
</html>

2.有语义的标签

在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
在这里插入图片描述

以上标签显示特点和div一致，但是比div多了不同的语义

<!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>Document</title>
</head>
<body>
    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>侧边栏</aside>
    <section>网页区块</section>
    <article>文章</article>
</body>
</html>

二字符实体

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <!-- 网页不认识多个空格, 只认识一个 -->
    这是HTML文档, 现在要学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;习字符实体.
</body>
</html>