HTML常用标签_网页布局的两个主要标签是什么-CSDN博客

本文链接：https://blog.csdn.net/qq_46100493/article/details/114868140

学习目标

理解相对路径三种形式
应用
排版标签
文本格式化标签
图像标签
链接

1.1 排版标签

排版标签主要和css搭配使用，是网页布局最常用的标签。

1)标题标签

标签语义：作为标题使用，并且标题大小随着数字的增大而减小。

语法格式：

<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>

效果显示：
在这里插入图片描述

2）段落标签

标签语义：
段落标签是HTML标签中的常见标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
标签语法：

<p>文本内容</p>

3）水平线标签

标签语义：
是用来分割网页的，是一条横跨网页的水平线。
标签语法：

<hr /> 是单标签

标签实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的骨架标题</title>
	</head>
	<body>
		<h1>岳阳楼记</h1>
		【作者】范仲淹 【朝代】宋译文对照<hr />
		庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上，属予作文以记之。
		
		予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯，朝晖夕阴，气象万千，此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？
		
		若夫淫雨霏霏，连月不开，阴风怒号，浊浪排空，日星隐曜，山岳潜形，商旅不行，樯倾楫摧，薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣
	</body>
</html>

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

4）换行标签

标签语义：
在我们编写代码需要强制换行时，使用这个标签
标签语法：

<br />

标签实例：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1>岳阳楼记</h1>
		【作者】范仲淹 【朝代】宋译文对照<hr />
		庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上，属予作文以记之。<br />
		
		予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯，朝晖夕阴，气象万千，此则岳阳楼之大观也，前人之述备矣。<br />然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？<br />
		
		若夫淫雨霏霏，连月不开，阴风怒号，浊浪排空，日星隐曜，山岳潜形，商旅不行，樯倾楫摧，薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。<br />
	</body>
</html>

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

5）div和span标签

div span是我们网页布局中两个主要的盒子。
div标签是用来布局的，但是一行只能装下一个div。
span也是用来布局的不同的是span标签一行可以放很多个。
标签语法：

<div>这是DIV盒子1</div>
<div>这是DIV盒子2</div>
<span>这是span1</span>
<span>这是span2</span>

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

1.2文本格式化标签

在这里插入图片描述
标签语法：

		<b>这段文本是加粗的</b>	
		<strong>这段文本不仅加粗还有强调的效果</strong>			
		<i>斜体标签</i>			
		<em>斜体标签，XHTML中推荐使用</em>			
		<s>这个文本加删除线</s>			
		<del>这是我们常用的删除标签</del>	
		<u>加下划线的标签不建议使用但是要了解</u>
		<ins>一般是加下划线的时候都是用这个标签</ins>

标签实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是我的骨架标题</title>
	</head>
	<body>
		
		<b>这段文本是加粗的</b><br />		
		<strong>这段文本不仅加粗还有强调的效果</strong>	<br />			
		<i>斜体标签</i>	<br />			
		<em>斜体标签，XHTML中推荐使用</em><br />				
		<s>这个文本加删除线</s>	<br />		
		<del>这是我们常用的删除标签</del>	<br />	
		<u>加下划线的标签不建议使用但是要了解</u>	<br />		
		<ins>一般是加下划线的时候都是用这个标签</ins>	<br />	

	</body>
</html>

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

1.3图像标签

标签语法：

<img src=''图像的URL" />
<img src="student.jpg" alt="Pulpit rock" title="bagdata" width="304" height="228">

在这里插入图片描述

1.4链接标签

标签语义：
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
标签分类：
1，外部链接：需要添加http://www.baidu.com
2，内部链接：直接链接自己编写的其他网页，例如：首页
3，空链接：当还没有确定链接对象时，用“#”来表示空链接。
标签语法：

<a href="url" target="目标窗口的弹出方式">链接文本或者图像</a>

标签实例：

<a href="#">空链接</a>
<a href="index.html">内部链接</a>
<a href="http://www.baidu.com/">访问百度，外部链接</a>
<a href="http://www.baidu.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
target属性:用于指定连接页面的打开方式，他的取值有self和blank两种，其中_self为默认值，_blank为在新窗口中打开方式。