HTML标签汇总详解

懒羊羊我小弟

已于 2024-10-26 12:21:49 修改

阅读量2.3k

点赞数 17

分类专栏： H5+CSS3 文章标签： html 前端 css

于 2024-10-26 12:05:11 首次发布

本文链接：https://blog.csdn.net/IO14122/article/details/143251597

版权

H5+CSS3 专栏收录该内容

17 篇文章

订阅专栏

一、前言

HTML 标签是用于定义网页内容结构和表现形式的标记。每个标签都有特定的含义和用途，通过不同的标签组合，可以构建出丰富多彩的网页。

二、标签的表现形式

2.1 单标签与双标签

根据标签的写法不同，可以将标签分为单标签和双标签。

2.1.1 单标签

单标签通常用于那些不需要包含其他内容的元素。这些标签在开始时会有一个斜杠（/）来表示结束也可以不加/。常见的单标签包括：

<br>: 换行符
<hr>: 水平线
<img>: 图像
<input>: 输入框（例如文本输入、按钮等）
<meta>: 元数据（例如页面字符集、作者信息等）
<link>: 链接到外部资源（例如CSS文件）

  下面信息：<br>换行后的信息
  <hr>
  <img src="./img.png">
  <input type="text" >

2.1.2 双标签

双标签用于包含其他内容或元素，它们由一个开始标签和一个结束标签组成<标签名> </标签名>。常见的双标签包括：

<a>: 超链接
<p>: 段落
<div>: 分区
<span>: 行内元素

  <a href="www.baidu.com">跳转到百度</a>
  <p>段落标签</p>
  <div>空标签<span>行内元素</span></div>

2.2 块标签和行标签

根据标签的展示效果，可以将标签分为块标签和行标签。注意：可以通过css样式display来更改标签的行块展示。

2.2.1 块标签

块级标签在网页中会独占一行，其宽度会自动填满父容器的宽度。可以设置宽度、高度、内边距（padding）、外边距（margin）等属性（css盒模型属性）。常见块标签：div、p、h1~h6、table、ul、ol、li、table…

2.2.2 行标签

行内标签不会独占一行，而是在一行内与其他内容一起显示。行内标签的宽度和高度通常由其内容决定，不能直接设置宽度和高度，但可以设置内边距和外边距的水平方向（左右）的值（css盒模型属性）。常见行标签：span、strong、em、u、s…

默认情况下，大多数文本、替换元素以及生成的内容都是行级的。

2.2.3 行块标签

行内块元素（inline-block element）结合了行内元素和块级元素的一些特点：

不独占一行：像行内元素一样，可以与其他行内元素或行内块元素在同一行显示，不会像块级元素那样独占一行。
可设置宽高：与块级元素类似，可以设置宽度、高度、内边距（padding）和外边距（margin）等属性。

常见的行块标签：img、input、button、a…

三、标签的分类

3.1 文档结构标签

页面的基本结构标签，每个都必不可少；

<html>：表示整个 HTML 文档的根元素，所有其他的 HTML 元素都必须包含在这个标签内。
<head>：包含文档的元数据，如标题、字符编码、外部资源链接等信息，这些信息不会直接在页面上显示，但对网页的呈现和功能起着重要作用。
<body>：包含网页的实际内容，如文本、图像、链接、表格等，这些内容是用户在浏览器中可以看到的部分。
<title>：定义网页的标题，显示在浏览器的标题栏上，有助于用户识别网页的主题。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>网页的标题</title>
</head>
<body>网页展示的内容</body>
</html>

3.2 文本格式标签

页面的文本信息所涉及到的标签，每个都有不同功能效果；可以使页面文章展示效果更加丰富多彩。

<h1> - <h6>：定义不同级别的标题，<h1>是最大的标题，<h6>是最小的标题。标题标签可以使网页的结构更加清晰，方便用户阅读和理解。
<p>：定义段落，用于组织和呈现文本内容。段落是网页中最基本的文本块，通常包含一段完整的文本信息。
<strong>：表示重要的文本，通常以粗体显示，用于强调关键信息。
<em>：表示强调的文本，通常以斜体显示，用于突出特定的词语或句子。
<u>：为文本添加下划线，可以用于强调或装饰文本。
<s>：为文本添加删除线，可表示已过时或不再有效的内容。
<abbr>: 表示一个缩写词或首字母缩略词

  <h1>一级标题<abbr>HTML</abbr> (HyperText Markup Language)</h1>
  <h2>这是二级标题</h2>
  <p>这是一个普通的段落。<strong>这里是重要的内容</strong>，<em>这里是强调的部分</em>。</p>
  <p>另一个段落，<u>这里有下划线</u>，<s>这里有删除线</s>。</p>

在这里插入图片描述

3.3 列表标签

无序列表：<ul>和<li>标签组合创建无序列表，每个<li>标签代表一个列表项，无序列表通常以项目符号（如圆点、方块等）来标识各个列表项。例如：
有序列表：<ol>和<li>标签组合创建有序列表，列表项会按照一定的顺序编号显示。type属性来设置排序序号

  <h2>无序列表-考试需要准备的东西：</h2>
  <ul>
    <li>笔</li>
    <li>纸</li>
  </ul>
  <h2>有序列表-如何把大象装进冰箱步骤：</h2>
  <!-- type属性可以配置排序类型，可选值[1, A, a, I, i] -->
  <ol type="1">
    <li>第一步：打开冰箱</li>
    <li>第二步：把大象装进去</li>
    <li>第三步：把冰箱门关上</li>
  </ol>

在这里插入图片描述

3.4 表格标签

可绘制类似 Excel 表格的效果，相关标签有：

table：表格根标签，内部元素需包裹在此标签下。
tr：表格行标签，包裹的元素显示为一整行。
th：表格头部标题单元格，在<tr>内。
td：表格主体内容单元格，同样在<tr>内。
HTML5 新增标签：thead、tbody、tfoot。

示例代码：

  <h1>员工信息登记表</h1>
	<!--> border设置边框线1像素，cellspacing设置外边框线与单元格表框线间距为0<-->
  <table border="1" cellspacing="0"  >
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>女</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>18</td>
        <td>男</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">人员汇总：2</td>
      </tr>
    </tfoot>
  </table>

在这里插入图片描述

3.5 表单标签

最开始html的产生就是为了在页面上提交表单信息数据，比如用户要注册账户信息用户名和密码信息；然后点击提交推送给后台。表单所涉及到标签：

form ：绘制表单的根元素，所有的表单信息需要包裹在form标签下；
input：表格的输入表框单标签，根据type属性类型不同，会有不同的展示，属性会在下一章着重讲解；
select：下拉框选择，跟option下拉选项配合使用；
button：按钮标签，也是根据type属性值来区分不同的表单按钮；注意：只有包裹在form表单下的button标签才有对应重置和提交效果；

<form>
  <div>
    <label>姓名：</label>
    <input type="text">
  </div>
  <div>
    <label>密码：</label>
    <input type="password">
  </div>
  <div>
    <label>性别：</label>
    <label> 男 <input type="radio" name="sex"></label>
    <label> 女 <input type="radio" name="sex"></label>
  </div>
  <div>
    <label>爱好：</label>
    <label>学习 <input type="checkbox" name="hobby"></label>
    <label> 跑步 <input type="checkbox" name="hobby"></label>
    <label> 追剧 <input type="checkbox" name="hobby"></label>
  </div>
  <div>
    <label>职业：</label>
    <select name="occupation">
      <option value="A">医生</option>
      <option value="B">老师</option>
      <option value="C">学生</option>
      <option value="D">程序员</option>
    </select>
  </div>
  <button type="reset">重置</button>
  <button type="submit">提交</button>
</form>

在这里插入图片描述

3.6 链接标签

链接标签主要作用是在网页中引用外部资源，这个资源是本地资源，也可以是外部资源；常用链接标签：

a：跳转链接标签，可以通过点击a标签跳转到对应链接地址；
link：引入外部资源链接标签，主要用来引入外部css样式信息；
script：当配置了src属性后可以用来引入外部js代码信息；

	<!-- link标签需要放到head标签下 -->
  <link href="./index.css">
  <!-- script标签可以放到head标签下，也可以放到body标签下 -->
  <script src="./index.js"></script>
  <a href="www.baidu.com">跳转到百度</a>

3.7 图像标签

标签用于在网页中插入图像，图像会根据其原始尺寸或通过设置宽度和高度属性进行调整后显示在页面上。例如：描述图像的文本。

四、扩展知识点

4.1 绝对路径和相对路径

上面介绍了不同的标签使用方式，在介绍到链接地址的时候我们需要在src属性或者href属性中配置资源链接地址。这里面的地址是如何配置的呢？主要有两种方式配置绝对路径地址与相对路径地址;

4.1.1 绝对路径

绝对路径顾名思义，就是完整的资源路径，可以通过浏览器的地址栏输入后直接展示。例如：

外部资源：https://gips0.baidu.com/it/u=838505001,1009740821&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f254_80这个就是完整的资源路径地址，可以直接访问；
本地电脑资源：C:\Users\l\Pictures\Saved Pictures\image.png这个就是本机电脑的资源路径。注意：在企业项目中不要使用本机资源的绝对路径地址，因为发布上线后服务器上根据这个路径找不到资源会报错

建议：绝对路径的使用必须引用的是外部资源链接，不要用电脑中的文件加绝对路径；

4.1.2 相对路径

相对路径顾名思义，就是相对于某文件的路径；以当前开发的这个html界面为文件夹为起点去查找本地资源地址：

./同级或向下查找：与html界面文件同级下查找，如果在同级的某个文件下那就./文件名/image.png;
../向上一级查找：在html界面的上一级查找，../img/image.png，如还在上一级就继续../;

建议：相对路径必须在项目文件中，要保证提交到服务上的文件中有对应资源；

4.2 meta标签详解

在 HTML 中，<meta>标签用于提供有关网页的元数据（metadata），即描述网页内容和属性的信息。这些信息不会直接在网页上显示，但对于浏览器、搜索引擎和其他网络工具来说非常重要。

4.2.1 主要用途

字符编码声明：使用<meta charset="UTF-8">指定网页字符编码为 UTF-8，确保正确显示各种字符。
示例：<head><meta charset="UTF-8"><title>网页标题</title></head>。
页面描述和关键词：通过<meta name="description" content="网页描述内容">和<meta name="keywords" content="关键词1,关键词2,关键词3">提供网页描述和关键词，有助于搜索引擎理解网页主题。
例如：<meta name="description" content="这是一个关于科技新闻的网页，提供最新的科技动态和资讯。"><meta name="keywords" content="科技新闻,科技动态,资讯">。
视口设置（响应式设计）：对于移动设备友好的网页，使用<meta name="viewport" content="width=device-width, initial-scale=1.0">设置视口，以便在不同尺寸屏幕上正确显示。
示例：<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式网页</title></head>。
刷新和重定向：通过<meta http-equiv="refresh" content="时间;url=新页面地址">设置网页在一定时间后自动刷新或重定向到另一个页面。
例如：<meta http-equiv="refresh" content="5;url=https://www.baidu.com">表示网页在 5 秒后自动跳转到 “https://www.baidu.com”。