html 标签和元素
🧱 一、结构标签（布局相关）
| 标签 | 含义与作用 | 常用用法示例 |
|---|---|---|
| <html> | HTML 文档根元素 | <html lang=”zh-CN”>…</html> |
| <head> | 页面头部信息（非可视） | 包含 <title>, <meta>, <link> 等 |
| <body> | 页面主体内容（可视） | 所有显示的内容都写在里面 |
| <header> | 页眉，常用于 logo、导航等 | <header><h1>我的网站</h1></header> |
| <footer> | 页脚，版权等信息 | <footer>© 2025 我的站点</footer> |
| <main> | 页面主要内容区域 | 页面主体内容结构化的标记 |
| <section> | 区块，语义上分段 | <section><h2>新闻</h2>…</section> |
| <article> | 独立的文章内容 | <article><h2>博客</h2>内容…</article> |
| <nav> | 导航栏 | <nav><ul><li>首页</li></ul></nav> |
| <aside> | 边栏内容（如推荐、广告） | <aside>相关文章</aside> |
| <div> | 通用容器，无语义 | <div class=”box”>…</div> |
📄 二、文本内容标签
| 标签 | 作用 | 示例 |
|---|---|---|
| <h1>~<h6> | 标题（h1 最大，h6 最小） | <h1>主标题</h1> |
| <p> | 段落 | <p>这是一个段落。</p> |
| <br> | 换行（单标签） | 第一行<br>第二行 |
| <hr> | 水平分割线 | <hr> |
| <span> | 内联容器（无语义） | <span class=”red”>红字</span> |
| <strong> | 加粗（强调） | <strong>重要</strong> |
| <em> | 斜体（强调） | <em>强调</em> |
| <b> | 加粗（不强调） | <b>加粗</b> |
| <i> | 斜体（不强调） | <i>斜体</i> |
| <mark> | 高亮 | <mark>高亮文字</mark> |
| <small> | 小号文字 | <small>小字</small> |
| <del> | 删除线 | <del>删除内容</del> |
| <ins> | 插入线（下划线） | <ins>新增内容</ins> |
| <pre> | 保留格式的文本 | <pre> 保留空格和换行</pre> |
| <code> | 行内代码显示 | <code>console.log()</code> |
📎 三、链接与图片
| 标签 | 说明 | 示例 |
|---|---|---|
| <a> | 超链接 | <a href=”https://example.com">点击跳转</a> |
| <img> | 图片 | <img src=”logo.png” alt=”Logo”> |
📋 四、列表
| 标签 | 说明 | 示例 |
|---|---|---|
| <ul> | 无序列表 | <ul><li>苹果</li><li>香蕉</li></ul> |
| <ol> | 有序列表 | <ol><li>第一</li><li>第二</li></ol> |
| <li> | 列表项 | 同上 |
| <dl> | 定义列表 | <dl><dt>术语</dt><dd>定义内容</dd></dl> |
📦 五、表格
| 标签 | 说明 | 示例 |
|---|---|---|
| <table> | 表格容器 | <table><tr><td>数据</td></tr></table> |
| <tr> | 表格行 | 表格的一行 |
| <td> | 表格数据单元格 | 表格的普通格子 |
| <th> | 表头单元格 | 加粗居中的格子 |
| <thead> | 表头区域 | |
| <tbody> | 表体区域 | |
| <tfoot> | 表脚区域 | |
| colspan | 跨列 | <td colspan=”2”>合并</td> |
| rowspan | 跨行 | <td rowspan=”2”>合并</td> |
🎛️ 六、表单标签
| 标签 | 用途 | 示例 |
|---|---|---|
| <form> | 表单容器 | <form action=”/submit”></form> |
| <input> | 输入框 | <input type=”text” name=”user”> |
| <textarea> | 多行文本框 | <textarea name=”msg”></textarea> |
| <button> | 按钮 | <button type=”submit”>提交</button> |
| <select> | 下拉菜单 | <select><option>选项</option></select> |
| <option> | 下拉项 | 同上 |
| <label> | 输入说明文本 | <label for=”name”>姓名</label> |
🧪 七、媒体标签
| 标签 | 用途 | 示例 |
|---|---|---|
| <audio> | 音频播放 | <audio controls src=”song.mp3”></audio> |
| <video> | 视频播放 | <video controls src=”video.mp4”></video> |
| <source> | 媒体资源 | 用于 <audio> 或 <video> 中多种格式支持 |
| <iframe> | 嵌套网页 | <iframe src=”https://example.com"></iframe> |
📜 八、元信息和脚本
| 标签 | 用途 | 示例 |
|---|---|---|
| <title> | 页面标题（浏览器标签） | <title>我的网站</title> |
| <meta> | 元信息（编码、描述等） | <meta charset=”UTF-8”> |
| <link> | 外部资源链接（如 CSS） | <link rel=”stylesheet” href=”style.css”> |
| <style> | 页面内嵌 CSS 样式 | <style>p { color: red; }</style> |
| <script> | 引入或编写 JS 脚本 | <script src=”main.js”></script> |