【JavaWeb学习专栏 | HTML篇】html常用标签集锦（有这一篇就够了）

男娘i 2024-04-27 07:08 7阅读 0赞

> 个人主页：[兜里有颗棉花糖][Link 1]  
> 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 [兜里有颗棉花糖][Link 1] 原创  
> 收录于专栏【[JavaWeb学习专栏][JavaWeb]】【[Java系列][Java]】  
> 希望本文内容可以帮助到大家，一起加油吧！！！💌  
> ![在这里插入图片描述][1cea984cc67543329e4ae13a37795bd5.png]

#### 目录 ####

*  一、基本标签
 *  二、格式化标签
 *  三、图片标签（img）
 *  四、超链接标签（href）
 *  五、表格标签
 *  六、列表标签
 *   *  无序列表（ul）
     *  有序列表（ol）
     *  自定义列表（dl、dd、dt）
 *  七、表单标签（form）
 *   *  form标签
     *  input标签
 *  八、lable标签
 *  九、select标签
 *  十、textarea标签
 *  十一、无语义标签（div & span）

## 一、基本标签 ##

> **`注释标签`**  
> **注释标签语法格式：``**  
> **快捷键：`ctrl + /`**

> **`标题标签（h1-h6）`**  
> **举例代码如下：**  
> ![在这里插入图片描述][65b30606f5be4c5b9d278f7b917f62ca.png]  
> **最终运行结果如下：**  
> ![在这里插入图片描述][9d99581353d14f30a40dd4371c9732f7.png]

> **`段落标签`**  
> **语法格式：`<p>这是第一个段落</p>`**  
> **代码演示如下请看：**  
> ![在这里插入图片描述][c4cdc810b5cf439b9926809f12aedef3.png]  
> **注意这里并没有给段落开头进行首行缩进。**

> **`换行标签`  
> 语法格式：`<br/>`**  
> **样例演示：**  
> ![在这里插入图片描述][380556269f1c42e68b5e66f3eb2c51df.png]  
> **演示效果如下：**  
> ![在这里插入图片描述][a3d96e2d0a2d43a783b1e5a59a439d2d.png]

## 二、格式化标签 ##

> **格式化标签：**

// 加粗标签
    方式1：<strong>将字体进行加粗</strong>
    方式2：<b>将字体进行加粗</b>
    
    // 倾斜标签
    方式1：<em>倾斜</em>
    方式2：<i>倾斜</i>
    
    // 删除线标签
    方式1：<del>删除线</del>
    方式2：<s>删除线</s>
    
    // 下划线标签
    方式1：<ins>下划线</ins>
    方式2：<u>下划线</u>

## 三、图片标签（img） ##

> **这里用众多样例来解释img标签吧。**  
> **样例1：`<img src="abc.jpg">`要把表示`abc.jpg`这个图片文件放到和 html中的同级目录中**  
> **`./表示当前目录`；`../表示上级目录`**

*  相对路径：`./abc.jpg`表示当前目录`.jpg图片`；`./img/abc/asd.jpg`表示当前目录中有个文件夹`img`，该文件夹中有图片`asd.jpg`；`../ajk.jpg`表示上一级目录中有一个图片`ajk.jpg`。
 *  绝对路径：`D://test1.jpg`表示`D盘`中有文件`test1.jpg`。`<img src="互联网中的图片链接">`注意此用法必须联网才可以使用 。

**下面来看img标签的其它属性：**

*  alt：替换文本，当文本不能显示的时候，会显示一个可替换的文字（**这里需要我们注意，只有当图片加载失败的时候，alt后面的文案才会显示；如果图片加载成功的话当然不会显示了alt后面的文案啦**）。
 *  title：当鼠标放到图片上的时候，就会有提示。
 *  width/height：控制宽度和高度，由于高度和宽度是等比例缩放，所以我们一般给一个就可以，否则就会造成图片失衡。
 *  border：表示边框：**参数是宽度的像素，一般使用`css`来进行设定。**

## 四、超链接标签（href） ##

**超链接标签：`a`**

*  `href`：表示点击后会跳转到哪个界面。
 *  `target`：打开方式，默认是`_self`，如果是`-blank`的话就会用新的标签页打开。  
    举个栗子1：`<a href = "http://www.baidu.com">点击直接跳转到百度界面<a/>`  
    举个栗子2：`<a href="html01.html">跳转到html01界面</a>`

> **如果我们不做任何的跳转，只是停留在当前页面，可以使用`#`占位符**  
> 比如：`<a href="#">这里表示空连接</a>`

> **我们也可以给图片添加链接：**  
> **如下进行演示，请看：**  
> ![在这里插入图片描述][bd3ae762a2054d5a962bc1b7ae4c6c7b.png]  
> **点击图片可以直接跳转到我们需要的界面。**

> **在新的标签页中打开一个网页：`_blank`**

// 点击该图片会在新的标签页中跳转到百度界面
    <a href = "http://www.baidu.com" target = "_blank">
        <img src = "img/maomibeijing1.png">
    </a>

## 五、表格标签 ##

以下是表格标签的基本使用方法：

*  **table标签**：表示整个表格
 *  **tr**：表示表格的一行
 *  **td**：表示一个单元格
 *  **th**：表示表头单元格，但是会剧中加粗
 *  **thread：表格的头部区域（注意这里需要和th进行区分，范围要比th大），另外`thread`中的内容是加粗居中的。**
 *  **tbody**：表格当中的**主体区域**。

> 表格标签中的一些属性可以用于设置大小边框等，但是一般使用css方式。  
> **`table`中包含了`tr`，`tr中包含了td或者th`。**

**下面来看`table`标签中的其它属性：**

*  **`align`是表格相对于周围元素的对齐方式，`align = "center"(注意这里并不是内部元素的对齐方式)`**
 *  **border：边框。数字越大边框越粗，0表示没有边框。**
 *  **cellpadding：内容距离边框的距离。默认为1像素。**
 *  **cellspacing：单元格之间的距离默认为2像素。**
 *  **width/height：注意尺寸。**

**好啦，举个栗子吧！！！**

<!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>
        <table border = "1" width = "500" height = "300" cellspacing = "0" cellpadding = "50" align = "center">
            <thread>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thread>
            <tbody>
                <tr>
                    <td>曹操</td>
                    <td>男</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>李白</td>
                    <td>男</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>李商隐</td>
                    <td>女</td>
                    <td>19</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

> **结果演示：**  
> ![在这里插入图片描述][34257ee885e4460e89945fafdac18ac9.png]

> **现在我们来看合并单元格操作：**

*  **`跨行合并: rowspan="n"`**
 *  **`跨列合并: colspan="n"`**

> **合并单元格的步骤：**  
> **第一步：确定是跨行合并还是跨列合并**  
> **第二步：找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)**  
> **第三步：. 删除的多余的单元格**

**举一个合并单元格的栗子吧（还是以上述单元格为基础）：**

<!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>
        <table border = "1" width = "500" height = "300" cellspacing = "0" cellpadding = "50" align = "center">
            <thread>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thread>
            <tbody>
                <tr>
                    <td>曹操</td>
                    <td rowspan = "2">男</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>李白</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td colspan = "2">李商隐/女</td>
                    
                    <td>19</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

> **演示结果如下：**  
> ![在这里插入图片描述][eff5961f208c4bc29cd0d9d150ed1979.png]

## 六、列表标签 ##

**可以使用快捷方式（当然其它情况也是可以使用的啦）：**

*  shift + alt + 上下
 *  ul>li\*3
 *  dl>dd>dt\*3

### 无序列表（ul） ###

**语法格式如下（`ul li`）：**

> **演示结果如下：**  
> ![在这里插入图片描述][c0829f1619ec4c06b67e109b1af7daaa.png]

> **我们可以修改无序列表中的每个元素前面中的编号类型，比如`实心圆可以换成空心圆或者是实现方块`。**  
> **总共有三种类型：`disc`（实心圆、浏览器默认）、`circle`（空心圆）、`square`（实心方块）**  
> 比如：`<ul type = "circle">`。

### 有序列表（ol） ###

**语法格式如下：`ol li`**

> **演示结果如下：**  
> ![在这里插入图片描述][f868d1bfbe8f4174bbb41be58700cd43.png]

> **这里序号编号是可以进行修改的，比如可以是数字（默认）、也可以是大小写英文字母，也可以是大小写的罗马数字；另外我们也可以修改编号的其实位置是从哪里开始的。比如：`<ol type = "A" start="9">`中A表示序号编号为大写英文字母，起始位置是从`I`开始的。**  
> ![在这里插入图片描述][5299bc16e5c34c23a7d4010226520bcd.png]  
> **如下我们来进行举例：**  
> ![在这里插入图片描述][d021e38a77d249f6a009352fa5976ec1.png]

### 自定义列表（dl、dd、dt） ###

**自定义列表：`dl为总标签`，`dt为小标题`，`dd意思是围绕标题来进行说明`。**

**举个栗子：**

<dl>
       <dd>这是自定义列表的标题
           <dt>这是自定义列表内容1</dt>
           <dt>这是自定义列表内容2</dt>
           <dt>这是自定义列表内容3</dt>
       </dd>
    </dl>

> **演示结果如下：**  
> ![在这里插入图片描述][42381eec549c4174ba6c137f87223a79.png]

**列表标签使用注意事项：**

*  列表之间的元素是并列关系
 *  `ul/ol`中只能放`li`，不能放其它标签，`dl`中只能放`dt`和`dd`
 *  `li`标签中可以放其它标签
 *  列表中可以自带自己的样式，我们可以使用css来进行修改（比如列表编号的样式，或者我们可以直接删除列表编号）。

## 七、表单标签（form） ##

**表单标签：`表单标签可以用于实现用户和服务器之间的交互。当用户填写并提交表单时，表单数据会被发送到服务器，而服务器可以接收并处理这些数据。`**

**表单标签可以分为两个部分：**

*  **表单域: 包含表单元素的区域。`form标签`**
 *  **表单控件: 输入框, 提交按钮等。`input标签`**

**另外我们要注意一点：`各种表单控件必须搭配表单域来进行使用`。**

### form标签 ###

> **form标签语法格式：**

**由于form标签需要我们从服务器和网络编程的角度去进行理解，所以这里我们不做过多的介绍。**

### input标签 ###

**input标签**用于在 HTML 表单中创建各种输入字段。

**关于input标签中，有以下几点语法需要大家额外注意：**

*  type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等。
 *  name: 给 input 起了个名字. **尤其是对于`单选按钮`，`具有相同的name才能实现多选一`**.。
 *  **value: input 中的默认值。**
 *  **checked: 默认被选中. (用于单选按钮和多选按钮)。**
 *  **maxlength: 设定最大长度。**

**常见表单控件如下：**

*  **文本框：`<input type="text">`**
 *  **密码框：`<input type="password">`**
 *  **单选框**

// 单选框之间必须具备相同的name属性,才能实现多选一效果
    // checked="checked" :以下面代码为例性别默认选中男，如果下面两个input标签中实现了checked="checked"则会根据浏览器的不同来做出不同的选择
    性别: 
    <input type= "radio" name= "sex" checked = "checked">男
    <input type= "radio" name= "sex">女

*  **复选框**

爱好:
    <input type= "checkbox">吃饭
    <input type= "checkbox">睡觉
    <input type= "checkbox">打豆豆

*  **普通按钮（需要搭配`js`，否则点击之后没有效果）：`<input type = "button" value = "可是我只是一个普通的按钮哎">`**

*  **提交按钮 & 清空按钮（`提交和清空按钮必须在form标签内进行使用`）：用于将用户在前端填写的数据提交到服务器中；而清空按钮会将 form 内所有的用户输入内容重置。举个栗子：**

*  **选择文件（点击提交文件之后会弹出对话框来进行文件的选择）：`<input type="file">`**  
    ![在这里插入图片描述][508bac3ab79c4914974c1255aa7b798e.png]

## 八、lable标签 ##

**lable标签：搭配 input 使用，点击`label`也能选中对应的单选/复选框，可以大大提高我们的使用体验。**

*  **for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)**

## 九、select标签 ##

**select标签就是一个下拉菜单。**

*  **option中定义`selected="selected"`表示默认选中。如果没有定义`selected="selected"`则默认选中第一个option。**

<select name = "" id = "">
        <option value = "">---请选择年份---</option>
        <option value = "" selected = "selected">-----2000-----</option>
        <option value = "">-----2001-----</option>
        <option value = "">-----2002-----</option>
        <option value = "">-----2003-----</option>
    </select>

> **演示结果：**  
> ![在这里插入图片描述][9335f438176a4211afe65d822b57cd5d.png]

## 十、textarea标签 ##

**textarea标签：`<textarea name = "" id = "" rows = "30" cols = "50"></textarea>`**。

> **演示结果如下：**  
> ![在这里插入图片描述][f5fd50d1b94d418fbce88200a40e19ec.png]

## 十一、无语义标签（div & span） ##

*  **我们可以这样理解：div（独占一行）是一个大盒子，而span（不独占一行）是一个小盒子。**
 *  **无语义标签(包括div标签、span标签)：啥都可以做，没有固定的用途。**
 *  **div标签中可以嵌套div，也可以嵌套span标签，当然也可以嵌套其它标签。**

**举个栗子：**

> **演示结果如下：**  
> ![在这里插入图片描述][5d04debf6c4745448c26692191bc330c.png]

**好了，以上就是HTML中最常用的标签啦。本文到这里就结束啦，希望各位友友们可以多多三连支持哈！！！**

![在这里插入图片描述][dd6831a6388f446d95c59c47e382de3f.png]

[Link 1]: https://xiaofeizhu.blog.csdn.net/
[JavaWeb]: https://blog.csdn.net/m0_74352571/category_12523116.html
[Java]: https://blog.csdn.net/m0_74352571/category_12520599.html
[1cea984cc67543329e4ae13a37795bd5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/1e8ed18d86ac46f99466a23ea67d8e0b.png
[65b30606f5be4c5b9d278f7b917f62ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/2972de2ab8ed4f6da5ec433d83149a92.png
[9d99581353d14f30a40dd4371c9732f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/3d7375a479984bc3858dbda90ea76a38.png
[c4cdc810b5cf439b9926809f12aedef3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/4cf53a9700ed4ef4a82ddd9316be4d52.png
[380556269f1c42e68b5e66f3eb2c51df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/ae7b6770c9fd4de7a1fe455639502256.png
[a3d96e2d0a2d43a783b1e5a59a439d2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/6d979f26e4504c518be7534b83cdf12d.png
[bd3ae762a2054d5a962bc1b7ae4c6c7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/5dafa0a434d840fa95e641adc6ce96d7.png
[34257ee885e4460e89945fafdac18ac9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/c76033c990ad480c8f7bd4e3676ee939.png
[eff5961f208c4bc29cd0d9d150ed1979.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/9dcd2def67ce41d08bfcf178379a4d72.png
[c0829f1619ec4c06b67e109b1af7daaa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/f33517d0045849bb9f986747f97f8803.png
[f868d1bfbe8f4174bbb41be58700cd43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/ce856a0e90434a8095bf336fb4772abc.png
[5299bc16e5c34c23a7d4010226520bcd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/54f14b49b4ba4c23b3b204dfe9d3d61d.png
[d021e38a77d249f6a009352fa5976ec1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/131682d50c314abbac05d5830ddb9436.png
[42381eec549c4174ba6c137f87223a79.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/2e8ed484b8a2483aa8079da8e6371322.png
[508bac3ab79c4914974c1255aa7b798e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/418dbf80b4a0410f9bdeb779e4b87bd6.png
[9335f438176a4211afe65d822b57cd5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/27446f6daa0547a0955133af011d6f5e.png
[f5fd50d1b94d418fbce88200a40e19ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/ca4427740a1a431794a274c5aebcf510.png
[5d04debf6c4745448c26692191bc330c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/4fd86eb14d094da3bbc8b436870398ac.png
[dd6831a6388f446d95c59c47e382de3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/9747838c4dd64e48a24b72ca3882e2de.png