❮
❯
TOC
KINA

KINA-0

Start having fun with KINA right now!
分类 Web项目开发

Web前端开发 HTML常用标签大全

作者

本文全面介绍了HTML的常用标签，包括标签的结构、分类以及具体用法。超文本标记语言通过标签定义网页内容，文中提到双标签和单标签的使用，并示例了HTML文档的基本骨架。还介绍了注释、标题、段落、换行、文本格式化、图像、超链接、音频、视频等常见标签的定义和示例，强调了表单标签在用户信息收集中的重要性，如输入框、下拉菜单和按钮等。此外，文中提到了语义化标签，强调使用有语义的标签能提高网页可读性与结构清晰度。整体而言，文章为前端开发者提供了HTML标签知识的参考，适合初学者理解HTML基本元素及其应用。

1 HTML标签简介

HTML超文本标记语言——HyperText Markup Language

  • 超文本：链接

  • 标记：标签，带尖括号的文本

    1.1 标签结构

  • 标签分类：双标签和单标签。双标签成对出现，中间包裹内容。

  • <>里为标签名

  • 结束标签比开始标签多/

<strong>需要加粗的文字</strong>
<br>
<hr>

1.2 HTML骨架

  • <html>：整个网页
  • <head>：网页头部，用于存放给浏览器看的信息，如CSS
    • <title>：网页标题
  • <body>：网页主体，用于存放给用户看的信息，如图片、文字
<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html>

1.3 标签的关系

作用：明确标签的书写位置，让代码格式更整齐

  • 父子关系（嵌套关系）：子级标签换行且缩进（Tab）
<html>
    <head></head>
</html>
  • 兄弟关系（并列关系）：兄弟标签换行且对齐
<head></head>
<body></body>

2 注释

注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。注释不会再浏览器中显示。

<!-- HTML注释 -->

3 标题

一般用在新闻标题、文章标题、网页区域名称、产品名称等。

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

显示特点：

  1. 文字加粗
  2. 字号逐渐减小
  3. 独占一行（换行）
  • <h1> 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
  • <h2> ~ <h6> 没有使用次数的限制

4 段落

一般用在新闻段落、文章段落、产品描述信息等。

<p>段落</p>

显示特点：

  1. 独占一行
  2. 段落之间存在间隙

5 换行和水平线

  • 换行：<br>
  • 水平线：<hr>
<br>
<hr>

6 文本格式化

为文本添加特殊格式，以突出重点。常见的文本格式有加粗、倾斜、下划线、删除线等。

  • 加粗：<strong>、<b>
  • 倾斜：<em>、<i>
  • 下划线：<ins>、<u>
  • 删除线：<del>、<s>

<strong>、<em>、<ins>、<del>标签自带强调含义（语义）

7 图像

在网页中插入图片，src用于指定图像的位置和名称，是<img>的必须属性。

<img src="图片的URL" alt="替换文本" title="提示文本">

属性语法：属性名="属性值"，写在标签名后面，标签名和各属性之间用空格隔开，不区分先后顺序 。

常用属性

图像属性 作用 说明
src 图像路径 必须设置
alt 替换文本 图片无法显示的时候显示的文字
title 提示文本 鼠标悬停在图片上时显示的文字
width 图片的宽度 值为数字，无单位
height 图片的高度 值为数字，无单位
  • 绝对路径：从盘符（Win）/根目录（Mac）出发查找目标文件
  • 相对路径：从当前文件位置出发查找目标文件
    • /表示进入某个文件夹。【例】dirname/
    • . 表示当前文件所在文件夹。【例】./
    • ..表示当前文件的上一级文件夹。【例】../../

8 超链接

点击跳转到其他页面。href属性值是跳转地址，是超链接的必须属性。

超链接默认为在当前窗口跳转页面，添加target="_blank"实现在新窗口打开页面。

<a href="https://akira.blog.csdn.net/">跳转到网站</a>

<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./another.html" target="_blank">在新窗口跳转页面</a>

<!-- 开发初期不确定超链接的跳转地址，将href属性值暂时置“#”表示空链接，不会跳转 -->
<a href="#">空链接</a>

9 音频

<audio src="音频URL"></audio>

常用属性

音频属性 作用 说明
src 音频URL 必须设置。支持格式：mp3、ogg、wav…
controls 显示音频控制面板
loop 循环播放
autoplay 自动播放 为了提升用户体验，浏览器一般会禁用自动播放功能

如果属性名和属性值相同，可以简写为一个单词，如下所示

<audio src="./media/music.mp3" controls loop autoplay></audio>

10 视频

<video src="视频URL"></video>

常用属性

视频属性 作用 说明
src 视频URL 必须设置。支持格式：mp4、ogg、WebM…
controls 显示视频控制面板
loop 循环播放
muted 静音播放
autoplay 自动播放 为了提升用户体验，浏览器支持在静音状态自动播放

在浏览器中，想要自动播放，必须要有muted属性

<video src="./media/smrando.mp4" controls loop muted autoplay></video>

网页制作思路：从上到下，先整体再局部，逐步分析制作
分析内容 → 写代码 → 保存 → 刷新浏览器，看效果

11 列表

作用：布局内容排列整齐的区域。

11.1 无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：<ul>嵌套<li>

  • <ul>：无序列表
  • <li>：列表条目
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

效果：

  • 第一项
  • 第二项
  • 第三项
  • <ul>标签里只能包裹<li>标签
  • <li>标签里可包裹任何内容

11.2 有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：<ol>嵌套<li>

  • <ol>：有序列表
  • <li>：列表条目
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

效果：

  1. 第一项
  2. 第二项
  3. 第三项
  • <ol>标签里只能包裹<li>标签
  • <li>标签里可包裹任何内容

11.3 定义列表

标签：<dl>嵌套<dt>和<dd>

  • <dl>：定义列表
  • <dt>：定义列表的标题
  • <dd>：定义列表的描述/详情
<dl>
  <dt>列表标题1</dt>
  <dd>列表描述 / 详情 1</dd>
   <dt>列表标题2</dt>
  <dd>列表描述 / 详情 2</dd>
  <dt>列表标题3</dt>
  <dd>列表描述 / 详情 3</dd>
</dl>

效果：

列表标题1
列表描述 / 详情 1
列表标题2
列表描述 / 详情 2
列表标题3
列表描述 / 详情 3
  • <dl>标签里只能包裹<dt>和<dd>标签
  • <dt>和<dd>标签里可包裹任何内容

12 表格

网页中的表格与 Excel 表格类似，用来展示数据。

12.1 基本使用

标签：<table>嵌套<tr>，<tr>嵌套<td>、<th>

  • <table>：表格
  • <tr>：行
  • <th>：表头单元格（table head）
  • <td>：内容单元格

在网页中，表格默认无边框线，使用border属性可以为表格添加边框线。 

<table>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>99</td>
        <td>100</td>
        <td>199</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>98</td>
        <td>100</td>
        <td>198</td>
    </tr>
    <tr>
        <td>总结</td>
        <td>全市第一</td>
        <td>全市第一</td>
        <td>全市第一</td>
    </tr>
</table>

效果：

姓名 语文 数学 总分
张三 99 100 199
李四 98 100 198
总结 全市第一 全市第一 全市第一

12.2 表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

标签名 含义 特殊说明
<thead> 表格头部 表格头部内容
<tbody> 表格主体 主要内容区域
<tfoot> 表格底部 汇总信息区域

可以省略

12.3 合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

  • 跨行合并：保留最上单元格，添加属性rowspan
  • 跨列合并：保留最左单元格，添加属性colspan
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td rowspan="2">100[跨行合并]</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <!-- <td>100</td> -->
            <td>198</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
        <td>总结</td>
        <td colspan="3">全市第一[跨列合并]</td>
        <!-- <td>全市第一</td>
        <td>全市第一</td> -->
        </tr>
    </tfoot>
</table>

效果：


姓名 语文 数学 总分
张三 99 100[跨行合并] 199
李四 98 198
总结 全市第一[跨列合并]

注：不能跨表格结构标签合并单元格（thead、tbody、tfoot）

13 表单

作用：收集用户信息。

使用场景：

  • 登录页面
  • 注册页面
  • 搜索区域

13.1 input标签

input标签type属性值不同，则功能不同。

type属性值 说明
text 文本框，用于输入单行文本
password 密码框
radio 单选框，各选项应设置相同的name属性
checkbox 多选框，添加checked属性设置默认选中。
file 上传文件，默认只能上传一个文件，添加multiple属性可以实现文件多选功能。

占位文本placeholder：提示信息，文本框和密码框都可以使用。 

<input type="file" multiple>
<input type="checkbox" checked> akira37
<input type="password" placeholder="提示信息">

13.2 下拉菜单

标签：<select>嵌套<option>

  • <select>：下拉菜单整体
  • <option>：下拉菜单的每一项

默认显示第一项，selected属性实现默认选中功能。

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>

效果：

13.3 文本域

作用：多行输入文本的表单控件。 

<textarea>默认提示文字</textarea>

效果：

注：

  • 实际开发中，使用CSS设置文本域的尺寸
  • 实际开发中，一般禁用右下角的拖拽功能

13.4 label标签

作用：网页中某个标签的说明文本。 常用于绑定文字和表单控件的关系，增大表单控件的点击范围。

  • 写法1：label标签只包裹内容，不包裹表单控件；设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man" name="gender"><label for="man">男</label>
  • 写法2：使用label标签包裹文字和表单控件，不需要属性
<label><input type="radio" name="gender">女</label>

效果：

支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域……

13.5 按钮

按钮需配合<form>标签（表单区域）才能实现对应的功能。

<button type="">按钮</button>
type属性值 说明
submit 提交按钮，点击后可以提交数据到后台（默认功能）
reset 重置按钮，点击后将表单控件恢复默认值
button 普通按钮，默认没有功能，一般配合JavaScript使用 
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
    用户名：<input type="text">
    <br><br>
    密码：<input type="password">
    <br><br>

    <button type="submit">提交</button> <!-- 省略type属性时功能默认为提交 -->
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
</form>

14 语义化

14.1 无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

  • <div>：独占一行
  • <span>：不换行
<div>div标签，独占一行</div>
<span>span标签，不换行</span>

14.2 有语义的布局标签

  • <header>：网页头部
  • <nav>：网页导航
  • <footer>：网页底部
  • <aside>：网页侧边栏
  • <section>：网页区块
  • <article>：网页文章

15 字符实体

格式：&实体名称;

显示结果 描述 实体名称
空格 nbsp
Tab emsp
< 小于号 lt
> 大于号 gt

0 综合案例

0.1 案例1：体育新闻

<ul>
    <li>
        <img src="./images/1.jpg" alt="">
        <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
    </li>
    <li>
        <img src="./images/2.jpg" alt="">
        <h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
    </li>
    <li>
        <img src="./images/3.jpg" alt="">
        <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
    </li>
</ul>

效果：

足球
足球

0.2 案例2：注册表模拟

<form action="">
    <!-- 表单控件 -->
    <!-- 个人信息 -->
    <div>========个人信息========</div>
    <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
    <br><br>
    <label>密码：</label><input type="password" placeholder="请输入密码">
    <br><br>
    <label>确认密码：</label><input type="password" placeholder="请输入确认密码">
    <br><br>
    <label>性别：</label>
    <label><input type="radio" name="gender"> 男</label>
    <label><input type="radio" name="gender" checked> 女</label>
    <br><br>
    <label>居住城市：</label>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option>武汉</option>
    </select>
    <!-- 教育经历 -->
    <div>========教育经历========</div>
    <label>最高学历：</label>
    <select>
        <option>博士</option>
        <option>硕士</option>
        <option>本科</option>
        <option>大专</option>
    </select>
    <br><br>
    <label>学校名称：</label><input type="text">
    <br><br>
    <label>所学专业：</label><input type="text">
    <br><br>
    <label>在校时间：</label>
    <select>
        <option>2015</option>
        <option>2016</option>
        <option>2017</option>
        <option>2018</option>
    </select>
    --
    <select>
        <option>2019</option>
        <option>2020</option>
        <option>2021</option>
        <option>2022</option>
    </select>
    <!-- 工作经历 -->
    <div>========工作经历========</div>
    <label>公司名称：</label><input type="text">
    <br><br>
    <label>工作描述：</label>
    <br>
    <textarea></textarea>
    <br><br>
    <!-- 协议 和 按钮 -->
    <input type="checkbox"><label>已阅读并同意以下协议：</label>
    <ul>
        <li><a href="#">《用户服务协议》</a></li>
        <li><a href="#">《隐私政策》</a></li>
    </ul>
    <br><br>
    <button>免费注册</button>
    <button type="reset">重新填写</button>
</form>

效果：


========个人信息========





========教育经历========




--

========工作经历========








(仅供展示用，无任何实际效果)

发表评论