html常用标签

文章说明

本文旨在总结 HTML 中常见的标签，并提供简洁的解释，方便大家快速查找和复习。我们假设读者已经具备一定的 HTML 基础知识。本文将持续更新和完善，欢迎大家参与续写和补充

一、 HTML 标签

整个网页从 <html> 开始到 </html> 结束。

二、 head 标签

head 标签也叫头标签，是从 <head> 开始到 </head> 结束。

特点：这些信息不会直接显示在网页内容中，但对浏览器、搜索引擎和其他网络服务非常重要。

`<head>` 常见内部标签

标签	功能
`<title>`	定义文档标题
`<meta>`	定义网页基本信息（如网站作者，字符编码，视口设置等）
`<link>`	链接外部资源 (如 CSS 样式表)
`<script>`	引入 JavaScript 代码
`<style>`	定义 CSS 样式
`<base>`	为页面上的所有相对 URL 指定基础 URL

三、 body 标签

body 标签定义了 HTML 文档的主体内容。简单来说，<body> 标签里面的东西就是我们在浏览器中实际看到的东西。body 标签内容较多，接下来我们会从以下几个方面进行详细解说：

段落文本标签

图像及链接标签

列表标签

表格标签

表单标签

3.1 段落文本标签

标签	说明
`<h1>`-`<h6>`	标题标签 (h1 最大，h6 最小)
`<p>`	段落标签
`<br>`	换行标签
`<div>`	分块标签 (块级元素)
`<span>`	无特殊含义，常搭配 CSS 或 JavaScript 使用 (行内元素)
`<pre>`	预格式化文本，保留空格和换行
`<strong>`	定义重要的文本
`<em>`	定义强调的文本
`<small>`	定义小号字体

3.2 图像及链接标签

标签	说明
`<img>`	图像标签，用于在网页中插入图片
`<a>`	链接标签，用于创建超链接

图像标签：

<img src='image.jdp' alt='描述图片的文字'>

● src 属性：指定图像的 URL 地址。这是必须的属性。

● alt 属性：定义图像的替代文本。当图像无法显示时，会显示该文本

常见属性及作用：

常见属性及作用：

● src: 图像的 URL 地址 (必须)

● alt: 图像的替代文本 (必须)

● width: 设置图像的宽度

● height: 设置图像的高度

● title: 鼠标悬停在图像上时显示的提示

链接标签：

<a herf='链接的url地址' target='_blank'>说明文本<\a>

● href 属性：指定链接的目标 URL 地址。这是必须的属性。

● target 属性：指定在何处打开链接

常见属性及作用：

● href: 链接的目标 URL 地址 (必须)。

● target: 指定在何处打开链接。

○ _blank: 在新的浏览器窗口或标签页中打开链接。

○ _self: 在当前窗口或标签页中打开链接 (默认值)。

○ _parent: 在父框架中打开链接。

○ _top: 在整个窗口中打开链接。

● title: 鼠标悬停在链接上时显示的提示文本。

● download: 强制浏览器下载链接的资源，而不是打开它

3.3 列表标签

标签	说明
`<ul>`	无序列表
`<ol>`	有序列表
`<li>`	列表项，用于 `<ul>` 和 `<ol>` 中
`<dl>`	定义列表
`<dt>`	定义术语
`<dd>`	定义描述

3.4 表单标签

标签	说明
`<form>`	定义 HTML 表单，用于收集用户输入
`<input>`	输入标签，用于创建各种输入字段（文本框、密码框、单选框、复选框、按钮等）
`<textarea>`	多行文本输入框
`<select>`	下拉列表
`<option>`	下拉列表选项，用于 `<select>` 中
`<button>`	按钮
`<label>`	为表单元素定义标注，提高可访问性，通常与 `for` 属性关联指定对应的 input 的 id。
`<fieldset>`	将表单内的相关元素分组
`<legend>`	为 `<fieldset>` 元素定义标题

<input>** 的常用 type 属性值：**

text: 文本框
password: 密码框
radio: 单选框
checkbox: 复选框
submit: 提交按钮
reset: 重置按钮
button: 普通按钮
file: 文件上传
email: 邮箱
number: 数字
date: 日期

3.5 表格标签

标签	说明
`<table>`	定义 HTML 表格
`<tr>`	表格行 (Table Row)
`<th>`	表头单元格 (Table Header)
`<td>`	表格单元格 (Table Data)
`<caption>`	表格标题
`<colgroup>`	定义表格列的组，用于格式化一个或多个列
`<col>`	用于 `<colgroup>` 中，定义表格中每一列的属性
`<thead>`	定义表格的表头
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚

表格常用属性：

border: 表格边框
cellpadding: 单元格内边距
cellspacing: 单元格间距
colspan: 单元格横跨列数
rowspan: 单元格纵跨行数

四.综合练习

使用html标签完成以下效果

代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<h1>用户注册</h1>
<table>
 <tr>
 <td>用户名</td>
 <td><input type="text" placeholder="请输⼊⽤⼾名"></td>
 </tr>
 <tr>
 <td>⼿机号</td>
 <td><input type="text" placeholder="请输⼊⼿机号"></td>
 </tr>
 <tr>
 <td>密码</td>
 <td><input type="text" placeholder="请输⼊密码"></td>
 </tr>
</table>
<div>
 <input type="button" value="注册">
 <span>已有账号? </span><a href="#">登录</a><br/>
</body>

</html>

运行效果：