HTML篇二：HTML中常用标签及分类

回夜

已于 2024-10-10 22:10:18 修改

阅读量314

点赞数 9

分类专栏：速成测开（前端+测试）文章标签： html 前端

于 2024-10-10 21:33:34 首次发布

本文链接：https://blog.csdn.net/weixin_63022858/article/details/142831082

版权

速成测开（前端+测试）专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、标签分类

标签的分类大致可分为行标签与块标签。

核心区别：是否可独占一行。

列举：

行标签：a,b,span,img,input,select,strong等

块标签：div,ul,ol,li,dl,dt,dd,h1,p等

二、常用标签及其常用属性

1、常用但较为简单的标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- 以下标签并无过多特殊属性，属于较为常用且简单的标签 -->
    <!-- 标题标签h1~h6 -->
    <h1>标题</h1>

    <!-- 文本类型标签 -->
    <b>粗体文本</b>
    <em>着重文本</em>
    <i>斜体文本</i>
    <small>小号字体文本</small>
    <strong>着重文本</strong>
    <sub>下标文本</sub>
    <sup>上标文本</sup>
    <ins>下划线文本</ins>
    <del>删除线文本</del>
    <mark>标记文本</mark>

    <!-- 段落标签 -->
    <p>段落</p>

    <!-- 盒子标签 -->
    <div>盒子</div>

    <!-- 特殊场景所使用标签 -->
     <!-- 换行 -->
     <br/>
     <!-- 分割线 -->
     <hr/>
</body>
</html>

2、三大主流体标签

1、列表标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 列表标签 -->
     <!-- 其中主要划分三种类型，即：有序列表，无序列表，自定义列表 -->

    <!-- 有序列表 -->
    <!-- 有序列表中较为常用的属性有reversed，star，type三个属性 -->
    <!-- reversed定义列表为降序排列 -->
    <!-- star取值数值，可定义有序列表的开始值，列star='2'，即第一行排序从2开始 -->
     <!-- type取值不同表示类型，即1或a这种，顺序变成1234或者abcd -->
    <ol>
        <li></li>  
    </ol>

    <!-- 无序列表 -->
     <!-- 无序列表中常用属性一般只有type属性，该属性取值有三种 -->
      <!-- 1.disc（表示实心圆点，为默认值）2.circle（表示空心圆点）3.square（表示实心方块） -->
    <ul>
        <li></li>
    </ul>

    <!-- 自定义列表 -->
    <!-- list-style属性用于设置列表项标记的类型、位置和图像。具体属性如下： -->
    <!-- ‌list-style-type‌：设置列表项标记的类型，如圆点、数字等。属性值包括disc（实心圆点）、circle（空心圆）、square（方块）、none（无标记）等‌ -->
    <!-- ‌list-style-position‌：设置列表项标记的位置，可以是inside（标记在文本内部）或outside（标记在文本外部，默认值）‌ -->
     
    <!-- ‌list-style-image‌：使用图像作为列表项标记，通过URL指定图像的路径‌1。 -->
    <!-- 这些属性可以用于无序列表和有序列表，以及自定义列表中，通过CSS进行设置，以实现不同的视觉效果和布局需求。 -->
     <dl>
        <!-- dt标签是指key:value中的key值 -->
        <dt></dt>
         <!-- dd标签是指key:value中的value值 -->
        <dd></dd>
     </dl>
</body>
</html>

2、表格标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <!-- 表格标签 -->
    <!-- 表格的结构主要分为四个部分：表格标题，头部结构，表格内容，脚注 -->
    <!-- 定义表格 -->
    <table>
        <!-- 表格标题 -->
        <caption>表格标题</caption>
        <!-- 头部结构 -->
        <thead>
            <!-- 头部结构内容 -->
             <th></th>
        </thead>
        <!-- 表格内容 -->
        <tbody>
            <!-- 内容结构，一个tr标签代表一行，td标签代表一个单元格-->
             <tr>
                <td></td>
             </tr>
             
        </tbody>
        <!-- 表格脚注 -->
        <tfoot>
            <!-- 脚注内容 -->
             <tr>
                <td></td>
             </tr>
        </tfoot>
    </table>
    
</body>
</html>

3、表单标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <!-- 表单标签 -->
    <!-- 表单结构主要有三个，分别为form，input，button -->
     <form>
        <!-- 其中input标签也可以实现button按钮标签的功能特点，但仅推荐在特殊情况下使用 -->
        <input/>
        <button></button>
     </form>
    
</body>
</html>

3、超文本和超链接

首先需要注意概念区分

一句话概括：超文本包含超链接！！！

超链接：具体指的是链接点！

超文本：具体指的是具有超链接的文本！

两者的核心作用都是用于指向性的资源跳转（简单理解就是页面跳转！）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <!-- 超文本与超链接 -->
    <!-- 两者都是使用a标签 -->
     <a></a>
     <!-- 其中a标签常用的属性有四个，分别为href，target，rel,download -->
      
     <!-- ‌href‌：用于指定链接的目标URL地址，可以是绝对或相对地址，实现页面跳转或资源访问‌。 -->
     <!-- ‌target‌：决定链接如何打开，常见取值有_blank（新窗口打开）、_self（当前窗口打开）、_parent（父级窗口打开）、_top（顶层窗口打开），用于控制链接的打开方式‌。 -->
     <!-- ‌rel‌：指示链接与当前文档之间的关系，如nofollow（搜索引擎不跟踪链接）、noopener（防止跨窗口引用），有助于SEO优化和提升网站安全性‌。 -->
     <!-- ‌download‌：指定链接目标资源下载，浏览器会将文件下载到客户端而不是在浏览器中打开，实现文件下载功 -->

</body>
</html>

4、框架标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <!-- 框架标签 -->
    <!-- 核心作用：在一个页面中嵌入另一个HTML页面‌ -->
    <iframe></iframe>
    <!-- iframe标签的属性包括： -->
    <!-- ‌src‌：指定嵌入的网页地址，可以是相对或绝对路径。 -->
    <!-- ‌frameborder‌：设定iframe周围是否显示边框，0为不显示，1为显示。 -->
    <!-- ‌scrolling‌：指定iframe中的网页是否可以滚动。 -->
    <!-- ‌width和height‌：设置iframe的宽度和高度。 -->

    <!-- iframe标签的优点： -->
    <!-- 分隔内容，实现内容的独立加载和操作。 -->
    <!-- 并行加载，提高页面加载速度和性能。 -->
    <!-- 代码隔离，避免CSS样式或JavaScript代码的冲突。 -->
    <!-- 安全性，可用于实现安全隔离措施。 -->

    <!-- iframe标签的缺点： -->
    <!-- SEO不友好，搜索引擎对iframe中的内容索引能力较弱。 -->
    <!-- 高度难以控制，可能导致页面布局问题。 -->
    <!-- 影响页面性能，增加请求量和渲染成本。 -->
    <!-- 存在安全性风险，如跨域脚本攻击(XSS)。‌ -->
</body>
</html>