HTML常用标签

最新推荐文章于 2026-08-22 15:56:09 发布

原创最新推荐文章于 2026-08-22 15:56:09 发布 · 352 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

HTML 常用标签速查（超清晰版）最常用、最核心的 HTML 标签，按用途分类，带说明+示例，直接就能用！

页面骨架标签（必须写） ```html <!DOCTYPE html> <html> <!页面头部：放标题、样式、配置> <head> <title>网页标题</title> </head> <!页面身体：所有你能看到的内容都放这里> <body> 页面内容 </body> </html> ``` - `<head>`：页面元信息（看不见） - `<body>`：页面可见内容 `<title>`：浏览器标签栏文字
标题与文本标签 ```html <h1>一级标题（最大）</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题（最小）</h6> <p>这是一个段落，会自动换行</p> ```
布局与容器标签 ```html <div>块级容器，用来装内容、分区</div> <span>行内容器，用来装文字、小元素</span> ``` - `<div>`：独占一行（盒子） `<span>`：不换行（文字片段）
超级链接与图片 ```html <!链接> <a href="https://www.baidu.com">点击跳转到百度</a> <! 图片> <img src="图片地址" alt="图片加载失败时显示的文字"> ```
列表标签 ```html <!无序列表（带点）> <ul> <li>列表项1</li> <li>列表项2</li> </ul> ```
表单&按钮（交互用） ```html <!表单> <form> 输入框：<input type="text"> <button>点击按钮</button> </form> ``` - `<input>`：输入框（文本/密码/单选/多选等） - `<button>`：按钮 - `<form>`：装所有表单元素
表格标签 ```html <table border="1"> <tr>  <td>单元格1</td> <td>单元格2</td> </tr> </table> ``` - `<tr>`：表格行 - `<td>`：单元格

完整版可直接运行示例 ```html <!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>Hello HTML</h1> <p>这是一个段落</p>

<div>这是一个div盒子</div>

<span>这是一个span</span>

<a href="#">这是链接</a> <img src="test.jpg" alt="图片"> <ul> <li>列表1</li> <li>列表2</li> </ul> <form> <input type="text"> <button>提交</button> </form> <table border="1"> <tr> <td>A</td> <td>B</td> </tr> </table> </body> </html> ```

总结 1. 骨架：`html` `head` `title` `body` 2. 文本：`h1~h6` `p` 3. 容器：`div`（块）`span`（行内） 4. 链接图片：`a` `img` 5. 列表：`ul` `li` 6. 表单：`form` `input` `button` 7. 表格：`table` `tr` `td`

HTML常用标签笔记

一、核心说明

1. 所有HTML标签需包裹在<html>标签内，分为<head>（元信息，不可见）和<body>（可见内容）两部分。

2. 标签分“块级标签”（独占一行）和“行内标签”（不独占一行），下方会标注类型。

3. 示例均为可直接复制使用的最简格式，关键属性已标注。

二、页面骨架标签（必用）

作用：搭建网页基础结构，所有内容需在该框架内编写。

<!DOCTYPE html>：声明文档类型为HTML5（必须放在最顶部，无闭合标签）

<html>：HTML文档的根标签，包裹所有其他标签（块级）

<head>：存放网页元信息，如标题、样式、脚本（块级，不可见）

<title>：定义浏览器标签栏的网页标题（嵌套在<head>内，行内）

<body>：存放网页所有可见内容（文本、图片、链接等，块级）

最简骨架示例：

html
<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页可见内容
  </body>
</html>

三、文本与标题标签

作用：展示页面文本、标题，优化内容层级。

<h1>~<h6>：标题标签，h1最大（一级标题），h6最小（六级标题），独占一行（块级）

示例：<h1>一级标题</h1>、<h3>三级标题</h3>

<p>：段落标签，自动换行，包裹一段文本（块级）

示例：<p>这是一段普通文本，会自动换行，适合大段文字展示。</p>

四、布局与容器标签

作用：划分网页区域、包裹其他元素，用于页面布局。

<div>：块级容器，独占一行，可嵌套任何标签，常用于大区域划分（如头部、主体、底部）

示例：<div>这是一个块级容器，独占一行</div>

<span>：行内容器，不独占一行，仅包裹少量文字或小元素（如突出某段文字）

示例：这是一段文字，<span>这里是行内包裹的内容</span>，不换行。

五、链接与图片标签

作用：实现页面跳转、插入图片，丰富页面内容。

<a>：链接标签（行内），核心属性href（指定跳转地址）

示例1（跳转外部网页）：<a href="https://www.baidu.com">点击跳转到百度</a>

示例2（空链接，不跳转）：<a href="#">点击无跳转</a>

<img>：图片标签（行内，无闭合标签），核心属性src（图片地址）、alt（图片加载失败时显示的文字）

示例：<img src="图片路径/图片名称.jpg" alt="图片加载失败，请重试">

六、列表标签

作用：展示有序或无序的列表内容，使内容更规整。

<ul>：无序列表（块级），列表项前显示圆点，嵌套<li>使用

<li>：列表项标签（块级），嵌套在<ul>内，每个<li>是一个列表项

示例：

html
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

七、表单与交互标签

作用：实现用户交互（如输入内容、点击按钮），常用于登录、注册页面。

<form>：表单容器（块级），包裹所有表单元素（输入框、按钮等）

<input>：输入框标签（行内，无闭合标签），核心属性type（指定输入类型）

常用type值：text（普通文本输入框）、password（密码输入框，内容隐藏）

<button>：按钮标签（行内），点击可触发交互（如提交表单）

示例：

html
<form>
  用户名：<input type="text"><br/>
  密码：<input type="password"><br/>
  <button>提交</button>
</form>

八、表格标签

作用：展示结构化数据（如表格、报表），由行和单元格组成。

<table>：表格容器（块级），包裹所有表格元素

<tr>：表格行标签（块级），嵌套在<table>内，每一个<tr>是一行

<td>：表格单元格标签（块级），嵌套在<tr>内，每一个<td>是一个单元格

可选属性：border="1"（给表格添加边框，方便查看）

示例：

html
<table border="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

标签

#html #前端