前端重要的H标签详解（干货！）最新版

- 重要的H标签
- - 主要标签
  - - h系列标签主要用来做标题。h1到h6 依次缩小。
    - p标签：段落。
    - div标签：表示大的容器。
    - span:放一些文本。
    - a标签：超链接。
    - img标签：增加背景图片
    - 块级标签和行内标签
- 补充
- - br换行符
  - hr水平线
  - style标签
  - 优先级：!important 绝对优先
  - 文本标签

重要的H标签

主要标签

h系列标签主要用来做标题。h1到h6 依次缩小。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1>1</h1><h2>1</h2><h3>1</h3><h4>1</h4><h5>1</h5><h6>1</h6></body>
</html>

运行结果
在这里插入图片描述

p标签：段落。

p 元素会自动在其前后创建一些空白（段间距）。浏览器会自动添加这些空间，您也可以在样式表中规定。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p><p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p><p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p><p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p><p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p></body>
</html>

在这里插入图片描述

https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
让这个可爱的宝藏女孩在努力的道路上与你一起同行！
如有转载，请注明出处（如不注明，盗者必究）

div标签：表示大的容器。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记，那么该标签的作用会变得更加有效。

注意：
Div span两个标签没有特殊的功能，只是作为一个内容容器，但使用频率很高，主要与CSS配合使用。
Div：块标签(它会独占一行，主要用于布局)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="ooo">周杰伦的情歌不只有R&B，《彩虹》就是证明。</div><div id="ooo">周杰伦的情歌不只有R&B，《彩虹》就是证明。</div><div id="ooo">周杰伦的情歌不只有R&B，《彩虹》就是证明。</div><div id="ooo">周杰伦的情歌不只有R&B，《彩虹》就是证明。</div></body>
</html>

运行结果
在这里插入图片描述

span:放一些文本。

Span:行内标签(不会独占一行)
标签被用来组合文档中的行内元素。
注意：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><span>	哪里有彩虹告诉我能不能把我的愿望还给我为什么天这么安静所有的云都跑到我这里有没有口罩一个给我释怀说了太多就成真不了也许时间是一种解药</span><span>  也是我现在正服下的毒药看不见你的笑 我怎么睡得着你的声音这么近我却抱不到没有地球太阳还是会绕没有理由我也能自己走你要离开 我知道很简单你说依赖 是我们的阻碍</span><span>就算放开 但能不能别没收我的爱当作我最后才明白有没有口罩一个给我释怀说了太多就成真不了也许时间是一种解药也是我现在正服下的毒药看不见你的笑 我怎么睡得着</span></body>
</html>

运行结果
在这里插入图片描述

a标签：超链接。

页面的切换：一个网站一般由很多个页面组成，这些页面之间的切换是通过超链接来完成的。
超链接可以链接到站点内部的页面，也可以链接到外面站点的页面。
如果要链接到站点下面某个子目录里面的文件，需要加上路径的名称。
如果要从当前页面链接到上一级目录里面的页面，需要用到…/ 表示回到上一级目录，如果还有再上一级 …/…/
在新的页签打开页面，需要给a标签添加一个target属性。_blank：新页签打开。_parent：在父窗口打开。 _self:表示在当前窗口打开（默认）。_top:在顶层窗口打开。
在网页中添加一个锚点，给这个锚点取一个name属性，就可以在其他地方添加一个锚点链接，点击链接就可以打开一个页面的指定的锚点。
注意：锚点所在的位置，前面和后面都要有距离。
mailto:后面跟上一个邮箱地址，当点击链接的时候，会自动打开发邮件的软件（前提是你的电脑已经安装了发邮件的软件）。
< a href=“javascript:void(0);”>点击我< /a> ：这种写法，就屏蔽了a标签默认的行为（链接）。就相当于是一个独立的按钮。

例如

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="http://www.qq.com">腾讯(外部站点)</a><a href="index.html">首页(内部站点)</a>  <!--我在同级目录中有index.html--><a href="admin/login.html">登录</a><!--某个文件夹下的子目录--><a href="http://www.qq.com" target="_blank">打开新的页签访问腾讯(外部站点)</a> <!--在新标签页打开外部站点--><a href="#aa">去购买住房</a> <!--链接到其他的锚点--><a href="mailto:123@qq.com">123@qq.com</a><!--自动打开发邮件的软件--><a href="javascript:void(0);">点击我</a> <!--独立按钮--><div style="height: 2600px; background-color: seagreen;"></div><a name="aa">住房层</a><div style="height: 2600px; background-color: red;"></div></body>
</html>

这个不好演示，你去运行一下就知道啦！

img标签：增加背景图片

比如说，我在同级目录img下面增加了一张图片

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><img src="img/dog.jpg" alt="这是alt内容" title="这是一张背景图片"/><!--通过img标签在网页中加入一张图片。title：当鼠标移动到图片上的时候，显示title里面的文字内容。alt：当图片加载失败的时候，显示alt属性中的内容。table  / form --></body>
</html>

运行效果
在这里插入图片描述
当图片加载错误的时候回提示

块级标签和行内标签

任何一个标签都相当于一个容器。不管是块级的还是行内的，都可以通过display这个属性去设置它。

块级元素：独占一行，div p ul 块级元素可以设置它的宽高。

行内元素：都排在一行，一行排满之后，再从第二行开始排列。span a 行内元素不能设置它的宽高，设置了宽高也没有效果。注意：行内元素如果设置了浮动属性，也可以对它设置宽高。

eg:
Div：块标签(它会独占一行，主要用于布局)
Span:行内标签(不会独占一行)

块标签与行内标签的区别：

块标签独占一行，宽度默认为100%；
行内标签多个并排一行，宽高为内容大小。

行内元素和块级元素是可以相互转换的。
display: inline; 这个元素就是行内元素。
display: block; 这个元素就是一个块级元素。

例如看下面的代码来理解

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 200px;height: 100px;background-color: red;display: inline;}#box2{width: 200px;height: 150px;background-color: salmon;display: inline;}span{display: block;}</style></head><body><div id="box1">我是</div><div id="box2">周杰伦</div><span>我是行内元素，但display: block了</span><span>我是行内元素，但display: block了</span><span>我是行内元素，但display: block了</span><span>我是行内元素，但display: block了</span><span>我是行内元素，但display: block了</span><span>我是行内元素，但display: block了</span><span>我是行内元素，但display: block了</span><span>我是行内元素，但display: block了</span></body>
</html>

运行结果
在这里插入图片描述

补充

br换行符

<html><head><meta charset="utf-8"><title></title></head><body><p>宝藏女孩的成长日记</p><br>标签是单标签（意味着它没有结束标签，因此这是错误的<!-- <br></br> -->）<p>宝藏女孩的成长日记</p></body>
</html>

运行结果
在这里插入图片描述

hr水平线

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>宝藏女孩的成长日记</p><hr><!-- 我是一条水平线 --><p>宝藏女孩的成长日记</p></body>
</html>

在这里插入图片描述

style标签

定义和用法
style标签用于为 HTML 文档定义CSS样式。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p{background-color: #FFDD33;}</style></head><body><p style="background-color: #FFC0CB;">宝藏女孩的成长日记</p><hr><!-- 我是一条水平线 --><p>宝藏女孩的成长日记</p></body>
</html>

这个就会引入一个优先级的知识

优先级：!important 绝对优先

CSS优先级：!important > 行内样式 > id选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p{background-color: #FFDD33 !important;}</style></head><body><p style="background-color: #FFC0CB;">宝藏女孩的成长日记</p><hr><!-- 我是一条水平线 --><p>宝藏女孩的成长日记</p></body>
</html>