常用HTML标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/cc0809_/article/details/127940133

本文详细介绍了HTML中的常用标签，如html、head、meta等，并解释了它们的功能和用途，适用于初学者快速掌握HTML基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要记录一些常用标签。

1、html

html全称：Hyper Text Markup Language(超文本标记语言)，使用标签的形式来标识网页中的不同组成部分，其他页面标签都写在html标签里面，<!DOCTYPE html>指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

2、head

head标签定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其它文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

3、meta

meta标签通常用来声明，定义当前网页的特殊属性，设定页面格式，标注内容提要和关键字等。

<!--网页关键字-->
		<meta name="keywords" content="前端" />
		<!--本页作者-->
		<meta name="author" content="XXX" />
		<!--版权信息-->
		<meta name="copyright" content="严禁转载" />
		<!--网页描述-->
		<meta name="description" content="技术学习" />
		<meta charset="utf-8">

4、title

定义页面标题，是seo标签优化中最为重要的标签之一。Titile标签的内容常被搜索引擎索引作为网页摘要的标题内容。Title和description是构成索引网站页面摘要的重要成分，优质的网站摘要可以吸引更多用户的点击。而用户点击增长对于网站收录权重和排序权重都会带来正面有力影响。

5、link

link标签通常用于引入外部css文件样式，也可以被用来创建站点图标。

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- rel属性表示页面与引入文件的关系 -->
		<link rel="stylesheet" href="./css/style001.css">
	</head>

6、script

嵌入动态文本于HTML页面，对浏览器事件做出响应等

7、base

为页面上的所有链接规定默认地址或默认目标，必须的属性（href），可选属性（target）：包含：

_blank：在新窗口中打开被链接文档
_parent：在父框架集中打开被链接文档
_self：默认。在相同的框架中打开被链接文档
_top：在整个窗口中打开被链接文档
framename：在指定框架中打开被链接文档

8、style

style标签用来放css样式

9、body

定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等），支持html中的全局属性。

10、h1-h6

定义标题，由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>

11、div

<div> 是一个块级元素，标签内容自动换行到新的一行展示，可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

12、p

定义段落，会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。align段落内容的对齐方式

13、span

<span> 标签被用来组合文档中的行内元素，如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会有任何视觉上的差异

14、a

<a> 标签定义超链接，用于从一张页面链接到另一张页面，最重要的属性是 href 属性，它指示链接的目标

1、如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性；

2、被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）；

3、请使用 CSS 来设置链接的样式；

15、br

换行标签，<br> 标签只是简单地开始新的一行，而当浏览器遇到p标签时，通常会在相邻的段落之间插入一些垂直的间距。

16、input

<input> 标签用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

            <!-- text单行文本框 -->
			<label for="username">用户名</label>
			<input type="text" id="username">
			<br>
			<label for="pwd">密码</label>
			<input type="password" name="" id="pwd">
            <!-- radio代表单选，checked代表默认选中 -->
			<!-- 单选框中的选项name属性要一致，通过value属性设置值，通过label标签来说明选项含义 -->
			<div class="mui-input-row mui-radio " >
				<label for="">性别</label>
				<label for="man">男</label>
				<input name="radio" id="man" type="radio" value="男">
				<label for="women">女</label>
				<input name="radio" id="women" type="radio" value="女" checked>
			</div>
            <label for="">爱好</label>
				<label for="basketball">篮球</label>
				<input id="basketball" name="Checkbox" type="checkbox" value="打篮球">
				
				<label for="ps">爬山</label>
				<input id="ps" name="Checkbox" type="checkbox" value="爬山">
				
				<label for="kdy">看电影</label>
				<input id="kdy" name="Checkbox" type="checkbox" value="看电影" checked>
            <!-- 图片 -->
			<input type="image" src="./img/1922.jpg" alt="" width="500" height="400">
			<!-- 上传文件 -->
			<input type="file" name="shangchuan" id="file">
			<!-- 隐藏信息 -->
			<input type="hidden" name="">
			<!-- 普通按钮 -->
			<input type="button" value="普通按钮">
			<!-- 提交按钮 -->
			<input type="submit" value="提交">
			<!-- 重置按钮 -->
			<input type="reset" value="重置">

17、button

<button> 标签定义一个按钮，在 button 元素内部，您可以放置内容，比如文本或图像，而input标签创建的按钮不行。这是该元素与使用 input 元素创建的按钮之间的不同之处，请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

18、table、tr、th/td

表格标签，用于在效果中定义一个表格

border：设置表格的边框粗细

width：设置表格的宽度

th表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格

td标签用于表格里的内容，<th>和<td>唯一区别：<th>内容居中加粗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- border规定表格边框的宽度，cellspacing规定单元格之间的空白 -->
		<table border="1" cellspacing="0">
			<caption>成绩单</caption>
			<tr>
				<th>姓名</th>
				<th>分数</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>90</td>
			</tr>
		</table>
	</body>
</html>

<td>或者<th>都有两个单元格合并属性：

colspan：跨列合并单元格

rowspan：跨行合并单元格

19、caption

定义表格标题，caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

20、dl、dt、dd

<dl> 标签定义了定义列表，<dl> 标签用于结合 <dt>（定义列表中的项目）和<dd>（描述列表中的项目）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<dl>
		   <dt>手机</dt>
		   <dd>用来打电话、玩游戏的设备</dd>
		   <dt>计算器</dt>
		   <dd>用来计算的设备</dd>
		</dl>
	</body>
</html>

21、del

定义文档中已被删除的文本

22、font

<font> 规定文本的字体、字体尺寸、字体颜色。

23、form

<form> 标签用于为用户输入创建 HTML 表单

表单能够包含 input元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含menus、textarea、fieldset、legent和 label。

表单用于向服务器传输数据。

24、frame

<frame> 标签定义 frameset 中的一个特定的窗口（框架）

frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等

25、hr

<hr> 标签在 HTML 页面中创建一条水平线。

26、img

img 元素向网页中嵌入一幅图像，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。<img> 标签有两个必需的属性：src属性和 alt属性。

<!-- src代表图片存放路径 -->
<img src="./img/1922.jpg" alt="美丽的风景">

27、label

<label> 标签为 input 元素定义标注（标记），label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（<label> 标签的 for 属性应当与相关元素的 id 属性相同）。

28、ul、li

无序列表

<ul>
	<li>Java</li>
	<li>Python</li>
	<li>JavaScript</li>
</ul>

29、ol、li

有序列表，结构和ul无序列表相似。

30、nav

<nav> 标签定义导航链接的部分，如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中，支持全局属性

<nav>
	<a href="index">java</a>
	<a href="index">python</a>
	<a href="index">html</a>
</nav>

31、 select、option

select 元素可创建单选或多选菜单，<select> 元素中的 option标签用于定义列表中的可用选项。

<select>
	<option value ="Python">Python</option>
	<option value ="Java">Java</option>
	<option value="JavaScript">JavaScript</option>
	<option value="C++">C++</option>
</select>