【HTML】HTML5语义化标签

最新推荐文章于 2024-07-22 21:44:46 发布

小可小可

最新推荐文章于 2024-07-22 21:44:46 发布

阅读量553

点赞数

分类专栏： HTML和CSS的学习文章标签： html

本文链接：https://blog.csdn.net/qq_44054938/article/details/106072884

版权

HTML和CSS的学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【HTML】HTML5语义化标签

在初步介绍完HTML5的框架以后，我们接着来看看HTML5的语义化标签内容。

在本篇文章中，我们要把网页中常用到的标签向大家介绍，同时大家在学习html标签过程中，主要要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。

语义化的作用

我们在学习网页制作时，常常会听到一个词——语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途和明白在什么情况下使用此标签合理。比如，网页上的文章的标题就可以用标题标签，网页上的正文段落可以使用段落标签。

那么语义化可以给我们带来什么样的好处呢？

更容易被搜索引擎收录抓取。
更容易让屏幕阅读器读出网页内容。
更容易让开发人员进行维护。
更有利于特殊终端的阅读。

我们接下来，来学习了解HTML中一些标签的语义用途。

段落< p >标签

如果我们想在网页上显示文章正文内容，这时我们就需要用到< p >标签了，把文章的段落放到< p >标签和< /p >标签之间。

语法如下：< p >段落文本< /p >

我们来观察下面代码中的< p >标签，例如在一篇文章中有3段文字，就要把这3个段落分别放到3个< p >< /p >标签中。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>误杀</title>
</head>

<body>
    <h1>误杀</h1>
    <!-- 段落标签 -->
    <p>李维杰与妻子阿玉来泰打拼17年，膝下育有两个女儿，年届四十的他靠开设网络公司为生，为人也颇得小镇居民的好感，而这一切美好却被突如其来的不速之客打破。</p>
    <!-- 段落标签 -->
    <p>这个充斥走私，贩毒活动的边陲小镇，各种权力交织碾压公平正义。李维杰的大女儿被督察长的儿子强暴，因反抗误杀对方。</p>
    <!-- 段落标签 -->
    <p>李维杰曾亲眼目睹督察长滥用私刑，深知法律无用，为了维护女儿，捍卫家人，李维杰埋尸掩盖一切证据，在时间与空间的交错缝隙中，与警方在身心层面，展开了殊死一搏的较量。</p>
</body>

</html>

html页面显示如下：
在这里插入图片描述

< p >标签有它默认的样式，可以在上图中看出来，它在段前和段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它，在后面的学习中我们会深入讲到的。

使用< span >标签自定义文字样式

< span >标签是没有语义的，它的作用就是为了设置单独的个性化样式而产生的。

< span >标签语法如下：< span >文本< /span >

例如我们要把上面文章中的人名 “李维杰”进行加粗处理，我们就可以对代码进行如下改写：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>误杀</title>
    <style>
    span {
    font-weight:bold
    }
    </style>
</head>

<body>
    <h1>误杀</h1>
    <!-- 段落标签 -->
    <p><span>李维杰</span>与妻子阿玉来泰打拼17年，膝下育有两个女儿，年届四十的他靠开设网络公司为生，为人也颇得小镇居民的好感，而这一切美好却被突如其来的不速之客打破。</p>
    <!-- 段落标签 -->
    <p>这个充斥走私，贩毒活动的边陲小镇，各种权力交织碾压公平正义。<span>李维杰</span>的大女儿被督察长的儿子强暴，因反抗误杀对方。</p>
    <!-- 段落标签 -->
    <p><span>李维杰</span>曾亲眼目睹督察长滥用私刑，深知法律无用，为了维护女儿，捍卫家人，<span>李维杰</span>埋尸掩盖一切证据，在时间与空间的交错缝隙中，与警方在身心层面，展开了殊死一搏的较量。</p>
</body>

</html>

html页面显示如下：
在这里插入图片描述
请大家对照比较上文两个代码的异同，从中得到< span >标签的作用。

使用< hx >标签为网页增加标题

通过上文，我们知道文章的段落用< p >标签，那么文章的标题用什么标签呢？在本节我们将使用< hx >标签来制作文章的标题。

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减，< h1 >是最高的等级。

< hx >标签语法：< hx >标题文本< /hx > ( x可以为1—6 )

文章的标题可以使用标题标签，同时网页上的各个栏目的标题也可使用标题标签。

值得注意的是，因为< h1 >标签在网页中比较重要，所以一般< h1 >标签被用在网站名称上。

下面我以代码为例来介绍一下，h1 — h6 标签的默认样式：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>使用标题标签为网页增加标题</title>
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

</html>

html页面显示如下：
在这里插入图片描述
注意：从上面的图片中，我们可以看出标题标签的样式都会加粗，h1 标签字号最大，h2 标签字号相对h1要小，以此类推 h6 标签的字号最小。

使用< div >标签自定义块

在网页制作过程之中，可以把一些独立的逻辑部分划分出来，放在一个< div >标签中，这个< div >标签的作用就相当于一个容器。

那么什么是逻辑部分 呢？所谓的逻辑部分就是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。

< div >标签语法：< div >…< /div >

下面我们通过代码让大家了解< div >标签的含义：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>使用< div >标签自定义块</title>
   <style type="text/css">
    .test {
    color:#00F;
    }
    </style>
</head>

<body>
    <div>
    <h1>电影天堂</h1>
    </div>

    <div class="test">
    <h2>误杀</h2>
    <p>李维杰与妻子阿玉来泰打拼17年，膝下育有两个女儿，年届四十的他靠开设网络公司为生，为人也颇得小镇居民的好感，而这一切美好却被突如其来的不速之客打破。</p>
    <p>这个充斥走私，贩毒活动的边陲小镇，各种权力交织碾压公平正义。李维杰的大女儿被督察长的儿子强暴，因反抗误杀对方。</p>
    <p>李维杰曾亲眼目睹督察长滥用私刑，深知法律无用，为了维护女儿，捍卫家人，李维杰埋尸掩盖一切证据，在时间与空间的交错缝隙中，与警方在身心层面，展开了殊死一搏的较量。</p>
    </div>

    <div>
    <h2>逃离比勒陀利亚</h2>
    <p>电影根据真实事件改编。丹尼尔将扮演蒂姆·詹金，是两名南非白人中的一员。他们1978年因为参加非洲人民大会秘密反种族隔离行动而被视为恐怖分子并入狱，并策划越狱活动。</p>
    </div>
</body>

</html>

html显示页面如下：
在这里插入图片描述

那有人可能会疑问，那同样是自定义样式，< span >标签和 < div >标签有什么区别呢？

其实从本质的定义上来说，< span >标签是自定义文字样式，而< div >标签是自定义块的样式。
这么说，可能不易于理解，那我就从功能上的区别进行解释：

div是一个块级元素，div可以包含段落、标题、表格甚至其它部分它包含的元素，这使div便于建立不同集成的专类，如章节、摘要或备注，同时div会自动换行。

span是行内元素，在行内定义一个区域，也就是一行内可以被 span 划分成好几个道区域，从而实现某种特定效果，而在span的前后不会换行。

span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素；span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。

< header >标签，< footer >标签，< section >标签和< aside >标签

下面我们来讲一下，< header >标签，< footer >标签，< section >标签和< aside >标签这四个标签的意义和作用。

我们以csdn中，我的个人资料界面为例，给大家介绍一下各个标签在html界面上的含义。

< header >标签用来定义头部区域，例如下图部分：
在这里插入图片描述
< footer >标签用来定义底部区域，例如下图部分：

< section >标签用来定义区段，例如下图部分：

< aside >标签用来定义侧边栏区域，例如下图部分：

下面我来介绍一下，这四个标签的语法：
头部区域标签：< header >…< /header >
底部区域标签：< footer >…< /footer >
区段标签：< section >…< /section >
侧边栏区域标签：< aside >…< /aside >

然后我把上述语法放入如下代码之中进行应用：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>语义化标签</title>
</head>

<body>
<header>我是头部标签</header>
<footer>我是底部标签</footer>
<section>我是区段标签</section>
<aside>我是侧边栏标签</aside>
</body>

</html>

今日份博客就到这儿了！

小可小可

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML】HTML5语义化标签

【HTML】HTML5语义化标签在初步介绍完HTML5的框架以后，我们接着来看看HTML5的语义化标签内容。在本篇文章中，我们要把网页中常用到的标签向大家介绍，同时大家在学习html标签过程中，主要要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。语义化的作用我们在学习网页制作时，常常会听到一个词——语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途和明白在什么情况下使用此标签合理。比如，网页上的文章的标题就可以用标题标签，网页上的正文段落可以使用段落标签。那么语义化可
复制链接

扫一扫