语义标签

最新推荐文章于 2024-01-08 12:04:56 发布

hello_xujj

最新推荐文章于 2024-01-08 12:04:56 发布

阅读量443

点赞数

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/xjj19999272/article/details/115912735

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

语义标签

<div>标签

div是英语division“分割”的缩写，它可以实现文档区块分隔，<div></div>标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰。<div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS” 。<div></div>像是一个容器，什么都可以容纳。

<div>标签的class属性

<div>标签可以添加class属性表示类名，类名服务于CSS，因此类名不能随便取，下面是一些常见的类名和其所代表的区域。

区域	类名
页头	header
logo	logo
导航条	nav
横幅	banner
内容区域	content
页脚	footer

HTML5区块标签

因为不用网站的class属性（类名）没有一个统一的规范，会造成搜索引擎对于内容抓取的难度，因此HTML5推出了许多新的区块标签，下图是一些常见的区块标签和说明：

区块标签	说明
<section>	文档的区域，语义比div大
<article>	文档的核心文章内容，会被搜索引擎主要抓取
<aside>	文档的非必要相关内容，比如广告等
<nav>	导航条
<header>	页头
<main>	网页核心部分
<footer>	页脚

语义标签

<span>标签

<span>标签是文本中的“区块”标签，本身没有任何特殊的显示效果，可以结合CSS来丰富样式。示例代码如下：

<body>
    <p>
        <span>天津</span>今天的天气是<span>晴天</span>
    </p>
    <p>
        <span>北京</span>今天的天气也是<span>晴天</span>
    </p>
</body>

代码效果如下:
在这里插入图片描述

<b>、<u>、<i>标签

<b>、<u>、<i>标签已经被CSS替代，但是在网页中也可以表示需要强调的文本。

标签	说明
<b>	被加粗的文字，CSS已经替代了它的功能
<u>	加下划线的文字，CSS已经替代了它的功能
<i>	倾斜的文字，CSS已经替代了它的功能

<strong>、<em>、<mark>标签

<strong>、<em>、<mark>标签均表示强调语义。具体语义如下：

标签	说明
<strong>	代表特别重要文字
<em>	代表强调文字
<mark>	代表一段需要被高亮的文字

<figure>、<figcaption>标签

<figure>代表一段独立的内容，与说明<figcaption>配合使用, 它是一个独立的引用单元，比如建议读者拓展视

野的图片等，当这部分转移到附录中或者其他页面时不会影响到主体。

hello_xujj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
语义标签

语义标签<div>标签div是英语division“分割”的缩写，它可以实现文档区块分隔，<div></div>标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰。<div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS” 。<div></div>像是一个容器，什么都可以容纳。<div>标签的class属性<div&g
复制链接

扫一扫