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

重要的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>

在这里插入图片描述

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>

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

扫描二维码关注公众号，回复： 11807956 查看本文章

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:[email protected]">[email protected]</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 行内元素不能设置它的宽高，设置了宽高也没有效果。注意：行内元素如果设置了浮动属性，也可以对它设置宽高。

行内元素和块级元素是可以相互转换的。
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>

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