HTML 标签语法详解_htmp 语法查询-CSDN博客

本文链接：https://blog.csdn.net/m0_62599305/article/details/145663812

文章目录

**HTML 标签语法详解 🏗️📄**

HTML 标签语法详解 🏗️📄

1. 什么是 HTML？🤔

HTML（HyperText Markup Language，超文本标记语言） 是网页的基本组成部分，负责网页的结构和内容展示。HTML 由**标签（Tag）**组成，每个标签都有特定的语法和作用。

2. HTML 标签的基本结构 🏗️

HTML 标签的基本语法如下：

<标签名 属性="值">内容</标签名>

🔹 示例：

<p class="text">这是一个段落</p>

<p> 是开始标签
class="text" 是属性
这是一个段落 是内容
</p> 是结束标签

2.1 自闭合标签

有些 HTML 标签没有内容，不需要结束标签，称为自闭合标签（Self-closing Tags）。
🔹 示例：

<img src="image.jpg" alt="图片描述">
<br>
<input type="text" placeholder="输入文本">

3. HTML 的基本标签分类 📂

HTML 标签按照功能可以分为以下几类：

3.1 结构标签（基本页面结构） 📜

<!DOCTYPE html>  <!-- 声明 HTML5 文档 -->
<html>  <!-- HTML 页面主体 -->
  <head>  <!-- 头部，包含元数据 -->
    <meta charset="UTF-8">  <!-- 字符集 -->
    <title>网页标题</title>  <!-- 页面标题 -->
  </head>
  <body>  <!-- 网页内容 -->
    <h1>网页主标题</h1>
    <p>这是一个段落</p>
  </body>
</html>

3.2 标题标签（h1-h6） 📝

HTML 提供 6 级标题：

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

📌 注意：h1 最重要，h6 最小。

3.3 文本标签（段落、换行、强调等） 🖋️

标签	作用
`<p>`	段落
`<br>`	换行（无闭合标签）
`<hr>`	水平分隔线（无闭合标签）
`<b>`	加粗（不强调）
`<strong>`	加粗（强调重要性）
`<i>`	斜体（不强调）
`<em>`	斜体（强调语气）
`<mark>`	高亮文本
`<small>`	显示小号文本
`<del>`	删除线
`<ins>`	下划线

🔹 示例：

<p>这是一个 <b>加粗</b> 的文本。</p>
<p>这是一个 <em>强调</em> 的文本。</p>
<p>删除文本：<del>过期信息</del></p>
<p>新增文本：<ins>最新内容</ins></p>

3.4 列表标签（有序列表 & 无序列表） 📋

🔹 无序列表（`<ul>`）

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

✅ 默认使用黑点（•）作为标记

🔹 有序列表（`<ol>`）

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

✅ 默认使用数字（1, 2, 3…）作为标记

3.5 超链接标签（`<a>`） 🔗

🔹 语法：

<a href="https://www.example.com" target="_blank">点击访问 Example</a>

📌 target="_blank" 表示在新窗口打开链接

3.6 图片标签（`<img>`） 🖼️

🔹 语法：

<img src="image.jpg" alt="描述文字" width="200" height="150">

📌 属性说明：

src：图片地址
alt：图片加载失败时的替代文本
width / height：设置宽高

3.7 表格标签（`<table>`） 📊

🔹 示例：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

✅ 常用子标签：

<tr>：表格行
<th>：表头单元格（加粗居中）
<td>：普通单元格

3.8 表单标签（`<form>`） 📩

🔹 基本表单示例：

<form action="submit.php" method="POST">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  
  <button type="submit">提交</button>
</form>

✅ 常见表单元素：

<input>：输入框（文本、密码、邮箱等）
<textarea>：多行文本输入
<select>：下拉菜单
<button>：按钮
<label>：表单标签

4. HTML 标签的嵌套规则 📏

✅ 合法嵌套

<div>
  <h1>标题</h1>
  <p>段落内容</p>
</div>

❌ 错误嵌套

<p>
  <h1>标题</h1>  <!-- ❌ 段落不能直接嵌套 h1 -->
</p>

📌 注意：

p 不能嵌套 h1-h6
ul 和 ol 只能嵌套 li
table 只能嵌套 tr, th, td

5. 总结 🎯

标签分类	常见标签
结构标签	`<html>`, `<head>`, `<body>`
文本标签	`<p>`, `<h1-h6>`, `<b>`, `<i>`, `<em>`, `<strong>`
列表标签	`<ul>`, `<ol>`, `<li>`
超链接	`<a>`
图片	`<img>`
表格	`<table>`, `<tr>`, `<th>`, `<td>`
表单	`<form>`, `<input>`, `<button>`