HTML标签的分类_html标签分类-CSDN博客

本文链接：https://blog.csdn.net/yellow_important/article/details/140449619

按标签语法：

双标签：有开始有结束
单标签：有开始没结束

按不同标签特性进行分类：

块级标签：

块元素:可以直接设置标签的宽度高度(独占一行显示，用于承载内容，进行排版布局)

例子：p标签、div标签、列表标签（ol、ul、dl li ）、hr标签（下划线）、h1-h6标签、form标签、表格标签table 等等

例子：

div标签：

<!-- 普通块标签（无语义标签） -->
<div>一段文本1</div>
<div>一段文本1</div>
<div>一段文本1</div>

p标签：

<p>好好努力</p>

列表标签：

无序列表（ul）：

<!-- 列表标签 -->
<!-- 没有顺序的列表（无序列表） -->
<ul>
    <li>选项A</li>
    <li>选项B</li>
    <li>选项C</li>
    <li>选项D</li>
</ul>

有序列表（ol）：

<!-- 有顺序的列表（有序列表） -->
<ol>
    <li>选项A</li>
    <li>选项B</li>
    <li>选项C</li>
    <li>选项D</li>
</ol>

自定义列表（dl）：

<!-- 自定义列表 -->
<dl>
    <dt>广东省</dt>
    <dd>佛山市</dd>
    <dd>珠海市</dd>
    <dd>深圳市</dd>
<dt>江西省</dt>
    <dd>九江市</dd>
    <dd>上饶市</dd>
    <dd>新余市</dd>
</dl>

标题标签（h1~h6）：

<!-- 标题标签 -->
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

表单标签（form）:

主要作用：采用信息/收集信息。表单提交会刷新/跳转页面！！！！

```jsx
<!-- action="接口地址/服务器地址" method="请求方式" -->
    <form action="/xxxx" method="GET">

        <div>
            <input type="text" placeholder="文本输入框">
        </div>

        <div>
            <input type="password" placeholder="密码输入框">
        </div>

        <div>
            <input type="number" placeholder="数字输入框">
        </div>

        <div>
           男 <input name="sex" type="radio" value="男" >
           女 <input name="sex" type="radio" value="女" checked>
        </div>
        <div>
           阅读 <input type="checkbox" name="a" checked> <br>
           游戏 <input type="checkbox" name="b"> <br>
           跑步 <input type="checkbox" name="c"> <br>
           篮球 <input type="checkbox" name="d"> <br>
           骑行 <input type="checkbox" name="e">
        </div>
        <div>
            <select name="city">
                <option value="guangzhou">广州市</option>
                <option value="shenzhen" selected>深圳市</option>
                <option value="zhuhai">珠海市</option>
                <option value="foshan">佛山市</option>
            </select>
        </div>

        <div>
            <!-- style="resize: none;" 禁止文本输入域被拖放 -->
            <textarea name="content" cols="30" rows="10" ></textarea>
        </div>

        <div>
            <!-- 文件选择框的标签 -->
            <input type="file" name="photo">
        </div>

        <div>
            <button>提交</button>
        </div>
    </form>
```

表格标签（table）：

 <!-- 表格标签 -->
    <!-- cellspacing  设置单元格与单元格之间的距离 -->
    <!-- cellpadding  设置内容与边框之间的间距 -->
    <table cellspacing="0" cellpadding="0">
        <!-- 表格头部 -->
        <thead>
            <!-- 行 -->
            <tr>
                <!-- 列 (加粗字体) -->
                <th>名称</th>
                <th>价格</th>
                <th>库存</th>
                <th>日期</th>
                <th>地址</th>
            </tr>
        </thead>

        <!-- 表格主体 -->
        <tbody>
            <tr>
                <!-- 列 (没有加粗) -->
                <td>短袖</td>
                <td>29.9 </td>
                <td>50</td>
                <td>2024/07-11</td>
                <td>广州</td>
            </tr>

            <tr>
                <td>鞋子</td>
                <td>19.9 </td>
                <td>60</td>
                <td>2024/07-11</td>
                <td>深圳</td>
            </tr>
        </tbody>
    </table>

行内块标签：

行内块元素：即可直接设置行内块元素的宽度高度，也可以让元素在同一行显示。（用于布局页面细节、小的区块）

例子：button（按钮）、input（输入框）、img（图片）、select（下拉项）、option（选项）等等

button标签：

<!-- 这些标签既可以在同一行显示,也可以直接设置宽度高度 -->
<!-- 按钮标签 (双标签)-->
<button style="width: 200px; height:200px ;">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

img标签：

<!-- 图片标签 (单标签) -->
<!-- style 样式属性 ; src 路径属性   alt 描述资源  title 文件标题 -->
<img style="width: 80px;" src="./assets/i-hourglass.png" alt="描述111" title="漏斗图标">
<img style="width: 80px;" src="./assets/i-search.png" alt="描述222">
<img style="width: 80px;" src="./assets/i-like.png" alt="描述333">

input标签：

```jsx
<!-- 输入框 -->
<!-- type 描述input标签,例如:文本输入框 ;  placeholder 占位符,做提示 -->
<input type="text" placeholder="提示1">
<input type="text" placeholder="提示2">
<input type="text" placeholder="提示3">
text 表示文本输入框    password 表示密码输入框   button 表示普通按钮  
reset 重置按钮	      submit 表示提交按钮       checkbox 表示复选框,多选框
radio 表示单选框       file  表示选择文件        color 出现颜色   
time 时间              number 表示输入数字       date  日历
```

空标签：

一段文本 <br> <hr>  一段文本  <br><hr> 一段文本  <br> 一段文本  <br> 一段文本  <br> 一段文本
<!--
 总结:
    1. 空标签不需要包裹任何内容
    2. br  换行标签;  实际开发,可以使用块标签包裹内容达到换行效果
    3. hr  下划线标签; 以后可以采用css设置
-->

文本输入域(textarea)：

```html
 <style>
        /* 
        textarea  属于行内块元素，在同一行显示，可以直接设置宽度高度
        
        */

        .text-box {
            width: 420px;
            height: 80px;
            /* 禁止用户拖拽缩放文本输入域标签 */
            resize: none;
            font-size: 20px;
        }
    </style>
    <textarea class="text-box" placeholder="有什么新鲜事想分享给大家？"></textarea>

    <!-- <textarea class="text-box">有什么新鲜事想分享给大家？(提示)</textarea> -->

    <div>
        <button>发表</button>
    </div>

```

select标签与option标签：

 <select name="province">
                <option value="0" disabled>请选择省份</option>
                <option value="1">广东省</option>
                <option value="1">浙江省</option>
                <option value="1" selected>福建省</option>
                <option value="1">湖北省</option>
            </select>

行内标签：

行内元素：不能直接设置行内元素的宽度和高度(在同一行显示,用于修饰页面细节)

例子：span标签、a（链接标签）、b（字体加粗）、em标签（斜体）、i标签（斜体）、u标签（字体加粗）、strong标签（字体加粗）、del标签（删除线）等等

```jsx
<!-- 不带语义的span标签 -->
<span>一段文本</span>
<!-- 下划线 -->
<u>字母abc </u>
<!-- 字体加粗 -->
<b>下午好</b>
<!-- 斜体字 -->
<i>web前端开发</i>
<!-- 删除线 -->
<del>旧价格999.99</del>
<!-- 加粗 -->
<strong>加粗字体</strong>
```