html基础-语义化标签

最新推荐文章于 2022-06-08 16:11:47 发布

debaowang

最新推荐文章于 2022-06-08 16:11:47 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/Claming_D/article/details/106787505

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章目录

本文内容：
知识点聚焦
具体代码

本文内容：

1.什么是语义化标签
2.标题标签
3.行内元素和块元素
4.一些常用的标签
5.一些含有语义的元素

知识点聚焦


0x01 在网页中,HTML用来负责网页的结构，所以在使用html标签时应该关注的是标签的语义，而不是样式。
	1.语义对搜索引擎来说是重要的，搜索引擎会跟具标签的语义去处理（下面的标题标签就是如此）当我们搜索某些内容的时候，搜索引擎会去匹配网站标题和h1等重要标签的内容，而是根据语义来的，而不是样式。
	2.语义化的标签便于团队开发和维护，语义化更具可读性。
	3.在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构（这点其实不是很明显）

0x02 标题标签：
        h1~h6 重要性递减，h1最重要，h6最不重要
        h1在网页中的重要性仅次于title标签，一般情况下，一个页面中只有一个h1，通常只会用到h1~h3

0x03  在页面中独占一行的元素叫做块元素(block element) 比如：标题标签，p标签
      不会独占一行的元素称为行内元素(inline element)比如：q标签

0x04一些常用的标签，见代码

0x05 一些含有语义的元素
	header 表示网页的头部
    main 表示网页的主体部分
    footer 表示网页中的导航
    aside 和主体相关的其他内容(侧边栏)
    article 表示一个独立的文章
    section 表示一个独立的区块，上边的标签都不能表示时

    div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素，它可以替代以上所有的
    块元素，虽然这样不太符合html5的思想,但是大家都用习惯了。所有通常情况下，我们都使用div
    
    span是行内元素，没有任何的语义，一般用于在网页中选中文字。
    他们在显示效果上，没什么区别，在语义上不一样

具体代码

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>今日学习</title>
</head>
<body>
    <!--
        0x01 在网页中,HTML用来负责网页的结构，所以在使用html标签时应该关注的是标签的语义，而不是样式

        0x02 标题标签：
            h1~h6 重要性递减，h1最重要，h6最不重要
            h1在网页中的重要性仅次于title标签，一般情况下，一个页面中只有一个h1，通常只会用到h1~h3

        0x03 在页面中独占一行的元素叫做块元素(block element) ：标题标签，p标签
        不会独占一行的元素称为行内元素(inline element)

        0x04一些常用的标签，见代码
            
    -->
	<h1>最重要</h1>
	<h2>次重要</h2>
	<!--hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup中-->
	<group>
    	<h1>今天的活动</h1>
    	<h2>Learning</h2>
	</group>

	<!--em标签用于语音语调的加重(语气上)，行内元素-->
	<p>今天心情<em>真不错</em></p>

	<!--
   	 	strong表示内容上重要的强调！
	-->
	<p>今天心情<strong>真不错</strong></p>

	<!-- blockquote 引用-->
马云说
	<blockquote>
    梦想总是要有的,万一实现了呢!se
	</blockquote>
	<!-- q标签是行内元素，短语 -->
子曰：	<q>吾日三省吾身</q>

	<!-- br标签表示换行-->
	<br>
	<!-- div标签和span标签没有语义-->
	<div>
          <span>这人间袅袅炊烟，和风花雪月浪漫</span> <!-- span 是行内元素 -->
    </div>
</body>
</html>