【前端小站】HTML 标签：网页骨架，从空白到惊艳，全靠这些 HTML 标签搞事情-html-CSS教程网

【前端小站】HTML 标签：网页骨架，从空白到惊艳，全靠这些 HTML 标签搞事情

半桔：个人主页
🔥 个人专栏: 《前端扫盲》《手撕面试算法》《C++从入门到入土》

🔖为什么有人总是赞美生活的丰富多彩？我想这是因为他们善于品尝生活中随时出现的意外。 -余华-

前言

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基石，是每一位前端开发者踏入 Web 世界的关键钥匙。它通过一系列语义化与功能性的标签，为网页搭建起清晰的 “结构骨架”，让文本、图片、表单等各类内容得以有序呈现，是网页与用户交互的 “第一层语言”。

对于想要系统学习 HTML 的初学者，或是需要回顾基础的开发者而言，本文将围绕 HTML 的核心标签体系展开讲解。

我们会从最基础的初始 HTML 结构标签入手，逐步深入到文本标签（标题、段落、强调类等）、媒体与交互标签（图片、超链接）、表格标签、列表标签（无序、有序、自定义）、表单标签（容器、输入控件、辅助标签等）的使用方法与场景，最后也会涉及无语义标签的相关知识。通过对这些内容的学习，你将全面掌握 HTML 构建网页结构的核心能力，为后续学习 CSS（美化网页样式）、JavaScript（实现网页交互）奠定坚实的基础。

一. HTML结构

1.1 初始HTML标签

HTML代码都是由标签组成的。

标签就是类似于<body>内容</body>，这种形式的字段，比如下面百度的主页：

可以看到就是由众多标签组成的。

关于标签可以分为两类：

双标签：有开始，有结束；比如<body>内容....</body>，其中的<body>就是开始标签，而/body就是结束标签;
单标签：只有开始，比如，图片标签<img>

在双标签之间放的是标签对应的内容，而在标签内部则可以设置标签的属性；

关于有哪些标签以及如何进行使用，在后面会详细进行介绍。

1.2 标签的层次

标签之间的结构关系，组成了一颗DOM树的结构，就是一颗多叉树。

因此多叉树的节点中有哪些关系，标签就有那些关系.

其中有几个规定：

html标签是根标签，所有标签都是它的子标签；
<head>是网页属性，配置标签，<body>是网页主体内容标签，他们是父子标签。

在进行前端编写时，我们通常会采用vscode作为我们的开发工具，此处推荐几个好用的插件：

Auto Rename Tag：可以自动将双标签进行对称修改处理，修改一侧另一侧会自动修改；
Live Server：可以让我们修改后的HTML界面，直接在网页中查看变化，不再需要手动刷新网页了；
view-in-browser：让我们一键打开浏览器，查看HTML网页效果。

通过输入!然后按回车，可以让我们快速自动生成HTML代码框架：

下面我将对其中的字段进行一个简单的介绍：

<!DOCTYPE html>：一个文档类型说明，告诉浏览器当前HTML文档使用的是HTML5规范；
<html lang="en">：告诉浏览器，当前文档中主要内容是英文；
<meta charset="UTF-8">：文档的字符编码采用的是UTF-8；
<meta name="viewport" content="width=device-width, initial-scale=1.0">：是关于移动设备适配使用的。

二. HTML文本标签

以下是一张关于常见文本标签的列表：

名称	说明
标题	`<h1>标题名</h1>`通过修改数字，来指定标签级别
段落	`<p>内容</p>`
加粗	`<strong>内容</strong>`或`<b></b>`
倾斜	`<em>内容</em>`或`<i></i>`
删除线	`<del>内容</del>`或`<s></s>`
下划线	`<ins>内容</ins>`或`<u></u>`

2.1 标题标签

语法：<h1>标题名称</h1>：一级标签；
<h2>,<h3>...<h6>，最多可以到六级标题。

效果演示：

<body>
    <h1>这是一个一级标题</h1>
    <h2>这是一个二级标题</h2>
    <h3>这是一个三级标题</h3>
    <h4>这是一个四级标题</h4>
    <h5>这是一个五级标题</h5>
    <h6>这是一个六级标题</h6>
</body>

2.2 段落标签

语法：<p>段落内容</p>，段落标签属于块标签，不会和其他标签内容共占一行。

<body>
    <p>这是第一段</p>
    <p>这是第二段</p>
    <p>这是第三段</p>
</body>

如果一个段落中内容过长，可能会导致一个段落占据多行的情况，比如下面：

此时如果我们想要在一个段落的中间对内容进行换行操作，此时就可以使用换行标签：

<br>/

这是一个单标签，专门用来进行换行操作的：

<body>
    <p>这是第一段,这是第一段,这里有一个换行标签<br/>,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段,这是第一段</p>
    <p>这是第二段</p>
    <p>这是第三段</p>
</body>

2.3 强调标签

2.3.1 加粗

语法：<strong>内容</strong>或<b>内容</b>，该标签属于行内标签；

效果演示：

<body>
    <strong>第一个加粗字段</strong>
    <strong>第二个加粗字段</strong>
</body>

<strong>和<b>标签都能让文本在视觉上呈现 “加粗” 效果，它们的核心区别在于 “语义”（含义）；
<strong>是对语义化的 “强调重要性”，而<b>仅仅是进行加粗操作；比如：屏幕阅读器（帮助视障用户浏览网页的工具）会通过语调变化强调<strong>包裹的内容，让用户感知到其重要性；

2.3.2 倾斜

语法：<em>内容</em>或<i>内容</i>，该标签与上面标签一样，也是一个行内标签。

效果演示：

<body>
    <em>第一个倾斜字段</em>
    <em>第二个倾斜字段</em>
</body>

2.3.3 删除线

语法：<del>内容</del>或<s>内容</s>是一个行内标签。

效果演示：

<body>
    <del>第一个删除线</del>
    <del>第二个删除线</del>
</body>

2.3.4 下划线

语法：<ins>内容</ins>或<u>内容</u>是一个行内标签。

<body>
    <ins>第一个下划线</ins>
    <ins>第二个下划线</ins>
</body>

三. 媒体与交互标签

此处重点介绍两个：

名称	说明
图片	`<img>`
超链接	`<a></a>`

3.1 图片标签

语法：<img src="图片路径">。

关于图片标签有很多可以进行设置的属性，下面进行重点介绍：

属性	说明
src	图片路径
alt	图片路径不对时，显示的文案提示
title	提示文本，鼠标放在图片上，进行提示
height/width	图片的高度/宽度
border	图片边框大小
对于`alt`效果演示：

<body>
    <img src="./" alt="没有找到图片">
</body>

height , width , border的单位都是px，并且对于height, width来说，一般只设置一个，另一个会等比例进行缩放。

对于title , height , width , border效果演示：

<body>
    <img src="./头像.jpg" height="100px" title="这是一个头像" border="1px">
</body>

3.2 超链接标签

语法：<a>跳转提示</a>.

与图片一样，超链接标签也有一些属性可以进行设置：

属性	说明
href	超链接跳转的地址
target	跳转的方式，`_self`本页面跳转，`_blank`新标签页打开
效果演示：

<body>
    <a href="https://banju.blog.csdn.***/" target="_blank">点击,跳转到我的主页</a>
</body>

关于<a>标签中间的内容，不仅仅可以是文字，也可以是图片。

四. 表格标签

表格标签就是<table></table>但是其内部又衍生出来了，很多标签：

名称	说明
表格	属于容器，`<table>内容</table>`
表格中的一行	属于容器，`<tr>内容</tr>`
一个单元格	`<td>内容</td>`
指定表格头部区域	属于容器，`<thead>内容</thead>`
表头单元格	默认会居中加粗，`<th>内容</th>`

4.1 表格的使用

表格标签使用起来，相对复杂一点，一下是一个使用方法演示：

<body>
    <table>
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </thead>
        <tr>
            <td>张三</td>
            <td>17</td>
            <td>女</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>34</td>
            <td>男</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>31</td>
            <td>男</td>
        </tr>
    </table>
</body>

效果演示：

其中的<table></table>表示一个容器，中间存放的内容都属于有一个表格内容；
<thead></thead>表示表格的头部区域，th是表示头部的每一个单元格；
<tr></tr>表示表格的每一行，而<td></td>则是表格一行中的每一单元格。

4.2 表格的属性

对于表格来说，也有一些常用的属性可以进行设置：

属性	说明
cellspacing	每个单元格之间的距离
cellpadding	内容距离边框的距离，默认是1
当然表格也可以设置边框。

效果演示：

<body>
    <table border="1px" cellspacing="0" cellpadding="10">
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </thead>
        <tr>
            <td>张三</td>
            <td>17</td>
            <td>女</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>34</td>
            <td>男</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>31</td>
            <td>男</td>
        </tr>
    </table>
</body>

五. 列表标签

名称	说明
无序列表容器	`<ul>...</ul>`
有序列表容器	`<ol>...</ol>`
列表项	`<li>...</li>`
自定义列表容器	`<dl>...</dl>`
自定义列表解释项	`<dt>...</dt>`
自定义列表说明项	`<dd>...</dd>`

无序列表：<ul>（容器）+ <li>（列表项）
有序列表：<ol>（容器）+ <li>（列表项）
定义列表：<dl>（容器）+ <dt>（术语）+ <dd>（解释）

5.1 无序列表

无序列表：<ul>（容器）+ <li>（列表项）
效果演示：

<body>
    <ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
    </ul>
</body>

对于无序列表，有一个经常设置的属性：

type：表示列表项目前面符号的内容，有三个：disc实心圆，square方块，circle空心圆。

5.2 有序列表

有序列表：<ol>（容器）+ <li>（列表项）
使用方法与上面类似，此处就不进行展示了。

其中可以对列表起始位置的数值进行设置：start=
也可以设置顺序列表排列的符号类型：type=，可以选择1使用数字，a使用小写字母，A使用大写字母，i使用小写阿拉伯数字，I使用大写阿拉伯数字。

5.3 自定义列表

定义列表：<dl>（容器）+ <dt>（术语）+ <dd>（解释）

<body>
    <dl>
        <dt>这是一个自定义列表</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dd>内容3</dd>
    </dl>
</body>

六. 表单标签

可以使用表单标签实现与服务器进行交互。

名称	说明
表单域，容器	`<from>...</from>`
输入控件	`<input>...`
下拉菜单	`<select>...</select>`
下拉选项	`<option>...</option>`
多行文本	`<textarea></textaarea>`

6.1 表单容器标签

<form>唯一的表单容器标签，通过属性控制表单行为：

action：指定表单数据提交的服务器地址（URL）；
method：指定提交方式（get 或 post）；

6.2 输入控件标签

6.2.1 输入框

语法：input

其中关于输入，可以输入很多类型，通过type=属性进行控制：

文本输入：text输入单行文本， password输入密码：
效果演示：

<body>
    <form action="">
        账号<input type="text"><br/>
        密码<input type="password">
    </form>
</body>

数值输入：type="number"（仅允许数字）、type="range"（滑块选择数值）；

<body>
    <form action="">
        年龄<input type="number"><br/>
        1<input type="range">100
    </form>
</body>

媒体输入：type="file"（文件上传）、type="image"（图片按钮，可提交表单），该属性比较简单，此处就不再进行演示了；
选择输入：type="radio"（单选按钮，互斥选择），type="checkbox"（复选框，可多选）；

<body>
    <form action="">
        性别:<input type="radio">男<input type="radio">女
    </form>
</body>

此时就可以进行选择了，当时如果直接这样进行设置，两个可以同时进行选择，但是我们希望的是只能选择一个。

此时就需要对数据框进行唯一标识，使用name=来让两个选项具有一个标识；
还可以使用checked来让一个作为默认选项。

<body>
    <form action="" >
        性别:<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender">女
    </form>
</body>

当然也可以使用ckeckbox表示多选。

6.2.2 多行文本输入

语法：使用<textarea></textarea>

其中可以设置文本框的宽度和高度，使用cols/rows。

效果演示：

<body>
    <form action="" >
        <textarea name="" id="" cols="30" rows="10">请输入内容....</textarea>
    </form>
</body>

6.2.3 下拉选择器

语法：使用<select></select>来进行实现，其中<option></option>表示对应的选项。

效果演示：

<body>
    <form action="" >
        <select name="" id="">
            <option value="">选项1</option>
            <option value="">选项2</option>
            <option value="">选项3</option>
            <option value="">选项4</option>
        </select>
    </form>
</body>

6.3 表单辅助标签

标签关联：<label>

为表单控件绑定文本说明，点击文本可聚焦到对应的控件（尤其适合复选框、单选按钮），通过 for 属性与控件的 id 关联。

例如，上面我们写的性别选择：

<body>
    <form action="">
        性别:<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender">女
    </form>
</body>

现在如果我们希望，在点击中文汉字的时候也能进行也能实现选择，就可以使用lable来进行实现。

<body>
    <form action="">
        性别:
        <input type="radio" name="gender" checked="checked" id="male">
            <label for="male">男</label>
        <input type="radio" name="gender" id="female">
            <label for="female">女</label>
    </form>
</body>

6.4 按钮标签

**<button>**最灵活的按钮，可包含文本、图标等内容，通过 type 属性定义行为：

type="submit"：默认值，点击提交表单；
type="reset"：点击重置表单（清空输入）；
type="button"：无默认行为，需配合脚本使用（如弹窗）。

关于按钮标签，要搭配JS进行使用，后续会专门写一篇博客讲JS。

<body>
    <form action="">
        <button type="button">一个按钮</button>
        <button type="submit">现在提交</button>
        <button type="reset">重置</button>
    </form>
</body>

七. 无语义标签

无语义标签分为两种：<div></div>和<span></span>。

其中<div>是块标签，独占一行，而<span>是行内标签，不独占一行。

无语义标签没有固定的用途，可以该标签做任何事情，一般负责网页布局。

下面补充几个HTML中的特殊字符：

&nbsp：空格，在HTML中多个空格相连，浏览器会将其合并为一个，所以可以使用&nbsp来保证多个空格同时显示；
&li：小于符号；
&gt：大于符号；
amp：按位与符号。

转载请说明出处内容投诉
CSS教程网 » 【前端小站】HTML 标签：网页骨架，从空白到惊艳，全靠这些 HTML 标签搞事情

维

分享到：

前言

一. HTML结构

1.1 初始HTML标签

1.2 标签的层次

二. HTML文本标签

2.1 标题标签

2.2 段落标签

2.3 强调标签

2.3.1 加粗

2.3.2 倾斜

2.3.3 删除线

2.3.4 下划线

三. 媒体与交互标签

3.1 图片标签

3.2 超链接标签

四. 表格标签

4.1 表格的使用

4.2 表格的属性

五. 列表标签

5.1 无序列表

5.2 有序列表

5.3 自定义列表

六. 表单标签

6.1 表单容器标签

6.2 输入控件标签

6.2.1 输入框

6.2.2 多行文本输入

6.2.3 下拉选择器

6.3 表单辅助标签

6.4 按钮标签

七. 无语义标签

维

发表评论

一个令你着迷的主题！