HTML中各种标签的用法

最新推荐文章于 2024-08-26 17:24:20 发布

m0_66163230

最新推荐文章于 2024-08-26 17:24:20 发布

阅读量2.7k

点赞数 4

文章标签： webview linq elementui

本文链接：https://blog.csdn.net/m0_66163230/article/details/122398950

版权

1、标题标签<h>

HTML最多提供六个级别的标题标签，是<h1>~<h6>。其中，<h1>定义为最大的标题（用于最顶级的标题），<h2>、<h3>、<h4>用于较低的层级，<h5>和<h6>（定义为最小的标题）由于文档层级关系，使用频率比较低。通俗来说，<h1>~<h6>标签定义的标题字体逐渐减小。如下图所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>

运行结果如下图所示：

2、段落标签<p>

段落标签由开始标签<p>和结束标签</p>组成，中间的内容看成一个段落。如下图所示：

<p>这是第一个段落。</p>

段落中的空白符

段落标签会对文本中的空白符进行合并，如果段落标签的内容中连续出现很多空格，或者连续出现多个连续的换行，浏览器都将解读为一个空格。如下图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标记</title>
	</head>
	<body>
		<h1>学习</h1>
			<p>                数学
				
				
				
				
				
				语文
				
				
				
				
			</p>
	</body>
</html>

运行结果如下：

如果想要在段落中换行，就需要使用换行标签<br/>，需要注意的是<br/>标签不是用于分隔段落的。如下图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标记</title>
	</head>
	<body>
		<h1>学习</h1>
			<p>数学<br/>语文</p>
	</body>
</html>

运行结果如下：

3、HTML文本格式化标签

HTML中会有许多格式化文本的标签，如下所示：

普通文本：

（比较常用）

<b></b>：加粗字体。如下例所示：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>语言</title>
	</head>
	<body>
		 <p>
			 <b>C语言是一门面向过程的编译型语言，它的运行速度极快，仅次于汇编语言。
			 C语言是计算机产业的核心语言，操作系统、硬件驱动、关键组件、数据库等都离不开C语 
             言；不学习C语言，就不能了解计算机底层。</b>
		 </p>
	</body>
</html>
运行结果如下：

<strong></strong>：强调加粗字体，使读者知道它的重要性。如下例所示：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>语言</title>
	</head>
	<body>
		 <p>
			 C语言是一门<strong>面向过程</strong>的编译型语言，它的运行速度极快，仅次于汇编语言。
			 C语言是计算机产业的核心语言，操作系统、硬件驱动、关键组件、数据库等都离不开C语言；
			 不学习C语言，就不能了解计算机底层。
		 </p>
	</body>
</html>
运行结果如下：

<em></em>：定义字体为斜体，起强调作用。

<i></i>：定义标签中的字体为斜体。

<small></small>：定义字体为小号字体。

<sup></sup>：定义上标字。

<sub></sub>：定义下标字。

<big></big>：定义大号字体。

<ins><ins>：定义插入字体。

<del></del>：在文本内容上添加删除线。

计算机输出：

<code></code>：定义代码。

<kbd></kbd>：定义键盘输出样式。

<samp></samp>：定义代码样本。

<tt></tt>：定义打字机输入样式。

<var></var>：定义变量。

<pre></pre>：定义预格式文本。与<p>标签不同的是，<pre>标签被包围在pre元素中的文本通常会保留空格和换行符。

4、超链接标签<a>

超链接是指从一个网页指向另一个目标的连接关系。它可以是一个字，一个词或一组词，也可以是一幅图像。将鼠标指针移动到网页中的某个超链接上时，鼠标箭头会变为一只小手；移出链接区域时，会变回箭头形状。

<a>标签的语法格式：

<a href="http://c.biancheng.net/data_structure" target="_self"/">数据结构</a>

其中，<a>标签有href（指定链接的目标，也就是跳转到什么位置）和target（指明新页面的打开方式）专用属性。

其中target属性有多个属性值，其含义不同。如下所示：

_self（默认值）：在超链接所在框架或者窗口中打开目标页面。

_bank：在新浏览器窗口中打开目标页面，原窗口会被保留下来。

_parent：在当前框架的上一层打开新页面。

_top：在当前的整个浏览器窗口中打开目标页面，因此会删除所有框架。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标记</title>
	</head>
	<body>
		<h1>学习</h1>
		<p>数学<br/>语文</p>
		<a href="http://c.biancheng.net" target="_blank">C语言中文网</a>
		<br/>
		<a href="http://c.biancheng.net/data_structure" target="_parent"/">数据结构</a>
	</body>
</html>

运行出来结果：

原窗口：

新窗口：

5、图片标签<img>

<img>标签是单标签（自闭合标签），只包含有开始标签和属性，没有结束标签。

<img>标签的基本结构如下：

<img src="图片的url" alt="图像的替代文本"/>

其中，src是必选属性，说明图片的位置，可以是相对路径或绝对路径。

alt是可选属性，用来描述图片信息；如果图片无法加载出来时，就会显示alt属性中的信息。

<img>标签还可以使用height和width的属性来设置图片的高度和宽度。如下例所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>语言</title>
	</head>
	<body>
		<h1>学习</h1>
		 <img src="8.jpeg" alt="文化" style="width: 250px; height: 150px;" /> 
	</body>
</html>

style属性可以有多个小属性，都是用封号隔开。

运行的结果如下：