HTML 标签总结

发表于 分类于 评论数： 阅读数： 本文字数： 1.6k 阅读时长 ≈ 6 分钟

1. HTML 语法规范

1.1 基本语法概述

  • HTML 标签由尖括号包围，例如 <html>
  • 双标签成对出现（如 <html> 和 </html>）
  • 单标签无需闭合（如 <br />）

1.2 标签关系

  • 包含关系（父子关系）：

    1
    2
    3
    <head>
      <title></title>
    </head>

  • 并列关系（兄弟关系）：

    1
    2
    <head></head>
    <body></body>

2. HTML 基本结构标签

2.1 第一个 HTML 网页

1
2
3
4
5
6
7
8
<html>
  <head>
    <title>我的第一个页面</title>
  </head>
  <body>
    你我之间,黑马洗练,月薪过万,一飞冲天
  </body>
</html>

2.2 基本结构标签总结

标签名 定义 说明
<html> HTML 根标签 包裹整个页面
<head> 文档头部 包含元数据（如标题、字符集）
<title> 文档标题 显示在浏览器标签栏
<body> 文档主体 包含所有可见内容

3. 网页开发工具（VSCode）

3.1 使用步骤

  1. 双击打开软件
  2. 新建文件：Ctrl + N
  3. 保存为 .html 文件：Ctrl + S
  4. 缩放视图：Ctrl + +/-
  5. 生成页面骨架：输入 ! 后按 Tab
  6. 浏览器预览：右键 → “Open In Default Browser”

3.2 自动生成代码

  • <!DOCTYPE html>：声明 HTML5
  • <html lang="en">：定义语言
  • <meta charset="UTF-8">：字符集设置

4. HTML 常用标签

4.1 标签语义

  • 学习重点：记住标签的含义和用途
  • 示例：
    • 无语义标签：<div> 和 <span>
    • 语义标签：<h1>-<h6>、<p>、<a>

4.2 标题标签 <h1>-<h6>

  • 作用：定义标题（重要性递减）
  • 特点：
    • 加粗并独占一行
    • 字号依次减小

4.3 段落与换行标签

  • 段落：<p> 自动换行，段落间有空隙
  • 换行：<br /> 强制换行（单标签）

4.4 文本格式化标签

效果 标签 推荐标签 推荐理由
加粗 <strong></strong> 或 <b></b> <strong> 语义更强烈
倾斜 <em></em> 或 <i></i> <em> 语义更强烈
删除线 <del></del> 或 <s></s> <del> 语义更强烈
下划线 <ins></ins> 或 <u></u> <ins> 语义更强烈

4.5 <div> 和 <span> 标签

  • **<div>**：块级元素，独占一行，division 的缩写
  • ** **：行内元素，可与其他元素同行

4.6 图像标签 <img>

  • 语法：

    1
    <img src="图像路径" alt="描述" title="提示" width="宽" height="高" border="边框">

  • 必选属性：src

  • 重点属性：

    • alt：图片无法显示时的替代文本

    • title：鼠标悬停提示文本

    • width 和 height` 在实际应用中，一般只修改其中一个，另一个会等比例缩放。

4.7 路径

  • 相对路径：
    • 同一级：img.jpg
    • 下一级：images/img.jpg
    • 上一级：../img.jpg
  • 绝对路径：
    • 本地：D:\web\img.jpg
    • 网络：http://example.com/img.jpg

4.8 超链接标签 <a>

  • 语法：

    1
    <a href="目标URL" target="_blank">文本/图像</a>

  • 属性：

    • href：目标 URL（必选）
    • target：_self（默认当前窗口）或 _blank（新窗口）

  • 链接分类

    • 外部链接:
    1
    < a href="http:// www.baidu.com "> 百度</a >
    • 内部链接:
      • 网站内部页面之间的相互链接。直接链接内部页面名称即可。
    1
    < a href="index.html"> 首页 </a >
    • 空链接:
      • 如果当时没有确定链接目标时。
    1
    < a href="#"> 首页 </a >
    • 下载链接:
      • 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
    • 网页元素链接:
      • 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
    • 锚点链接:
      • 点我们点击链接，可以快速定位到页面中的某个位置.
    1
    2
    3
    4
    5
    6
    <!-- # 在链接文本的 href 属性中，设置属性值为 #名字 的形式。 -->
    <a href="#two"> 第2集 </a>


    <!-- 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 -->
    <h3 id="two">第2集介绍</h3>

5. HTML 中的注释和特殊字符

5.1 注释

1
<!-- 这是注释内容，不会显示在页面中 -->

5.2 特殊字符

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
¥ 人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方 2（上标 2） &sup2;
³ 立方 3（上标 3） &sup3;

6. 表格标签

6.1 表格的作用

  • 用于展示数据，提升可读性
  • 注意：表格不是用于布局，而是展示数据

6.2 基本语法

1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <th>表头</th>
    <th>表头</th>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
</table>

6.3 表格属性（较少使用，推荐 CSS）

属性名 作用
align 表格对齐方式（左 / 中 / 右）
border 边框（1 或 “”）
cellpadding 单元格内容与边框间距
cellspacing 单元格间距
width 表格宽度

6.4 表格结构标签

  • **<thead>**：表格头部（通常包含 <th>）
  • **<tbody>**：表格主体（包含数据 <td>）

6.5 合并单元格

  • 跨行合并：rowspan="数量"
  • 跨列合并：colspan="数量"
  • 步骤：
    1. 确定合并方式
    2. 在目标单元格添加属性
    3. 删除多余单元格

7. 列表标签

7.1 无序列表 <ul>

1
2
3
4
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
  • 特点：项目符号展示，无顺序

7.2 有序列表 <ol>

1
2
3
4
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>
  • 特点：数字编号展示，有顺序

7.3 自定义列表 <dl>

1
2
3
4
5
6
<dl>
  <dt>项目1</dt>
  <dd>描述1</dd>
  <dd>描述2</dd>
</dl>
<!--dt 和 dd 是兄弟关系-->
  • 用于术语解释或分类描述

8. 表单标签

8.1 表单的作用

  • 收集用户信息

8.2 表单域 <form>

1
2
3
<form action="URL" method="get/post" name="表单名">
  <!-- 表单元素 -->
</form>

8.3 表单控件

8.3.1 <input> 标签

  • 常用类型：

    type 值 控件类型
    text 单行文本框
    password 密码框
    radio 单选按钮
    checkbox 复选框
    submit 提交按钮
    file 文件上传
    reset 重置
    button 普通按钮

  • 常用属性：

    • name：标识表单元素（后台使用）
    • value：默认值
    • checked：默认选中（单选 / 复选框）

8.3.2 <label> 标签

1
2
<label for="id">标签文本</label>
<input type="radio" id="id" name="group">
  • 通过 for 属性关联表单元素，提升用户体验

8.3.3 <select> 标签

1
2
3
4
<select>
  <option value="选项1">选项1</option>
  <option value="选项2" selected>选项2</option>
</select>
  • 下拉列表，selected 设置默认选项

8.3.4 <textarea> 标签

1
2
3
<textarea rows="3" cols="20">
  多行文本内容
</textarea>
  • 多行文本输入框，rows/cols 定义行数 / 列数（推荐 CSS 调整）

9. 综合案例

  • 注册页面：
    • 使用表格布局表单元素
    • 列表用于选项展示（如婚姻状况、学历）
    • 表单元素包括文本框、单选按钮、下拉列表等

10. 查阅文档

11. 相关参考

B 站 pink 老师视频