、、、、、、、
基础结构标签
| 说明 | 示例 |
<!DOCTYPE> | 声明文档类型，HTML5使用<!DOCTYPE html> | <!DOCTYPE html> |
<html> | 根元素，包含整个网页内容 | <html lang="zh-CN">...</html> |
<head> | 头部区域，包含元数据、链接、脚本等 | <head><meta charset="UTF-8"><title>页面标题</title></head> |
<body> | 区域 | <body>...</body> |
<meta> | 设置字符编码、viewport等元信息 | <meta charset="UTF-8"> |
<link> | 引入外部资源（如CSS） | <link rel="stylesheet" href="style.css"> |
<script> | 嵌入或引入JavaScript代码 | <script src="script.js"></script> |
标签
| 说明 | 示例 |
<h1>-<h6> | 标题标签，<h1>为最高级别标题 | <h1>一级标题</h1> |
<p> | 段落 | <p>这是一个段落。</p> |
<br> | 强制换行（通常用于段落内换行） | 这段文字<br>换行了。 |
<hr> | 水平分割线 | <hr> |
<strong> | 强调文本（语义化标签，搜索引擎更重视） | <strong>重要内容</strong> |
<em> | 强调文本（语气层面，如斜体） | <em>注意</em> |
<span> | 器，用于局部样式或属性控制 | <span style="color:red">红色文字</span> |
链接与导航
| 说明 | 示例 |
<a> | 超链接，href属性指定目标URL | <a href="https://example.com">点击访问</a> |
<nav> | 定义导航区域（常用于包裹菜单） | <nav><a href="#home">首页</a></nav> |
<target> | 控制链接打开方式（如_blank在新窗口打开） | <a href="..." target="_blank">外部链接</a> |
列表
| 说明 | 示例 |
<ul> | 无序列表 | <ul><li>项目1</li><li>项目2</li></ul> |
<ol> | 有序列表 | <ol><li>第一步</li><li>第二步</li></ol> |
<dl> | 定义列表（含术语和解释） | <dl><dt>HTML</dt><dd>超文本标记语言</dd></dl> |
<li> | 列表项（配合<ul>/<ol>/<dl>使用） | <li>列表项内容</li> |
表格
| 说明 | 示例 |
<table> | 表格容器 | <table><tr><th>表头</th><td>内容</td></tr></table> |
<tr> | 表格行 | <tr><td>单元格</td></tr> |
<th> | 表头单元格（默认加粗且居中） | <th>姓名</th> |
<td> | 表格数据单元格 | <td>张三</td> |
<colspan> | 合并列数（如<td colspan="2">） |
<rowspan> | 合并行数（如<td rowspan="2">） |
图像与多媒体
| 说明 | 示例 |
<img> | 图片，src指定路径，alt提供替代文本 | <img src="image.jpg" alt="描述"> |
<audio> | 音频，支持controls显示控件 | <audio src="music.mp3" controls></audio> |
<video> | 视频，支持width/height/controls等属性 | <video src="video.mp4" width="400" controls></video> |
<source> | 指定媒体资源类型（用于<video>/<audio>） | <video><source src="video.webm" type="video/webm"></video> |
表单元素
| 说明 | 示例 |
<form> | 表单容器，action指定提交地址，method指定提交方式（GET/POST） | <form action="/submit" method="POST">...</form> |
<input> | 输入框，type属性定义类型（如text/password/radio等） | <input type="text" name="username"> |
<button> | 按钮，type可为submit/reset/button | <button type="submit">提交</button> |
<textarea> | 多行文本输入框 | <textarea rows="5" cols="30">初始内容</textarea> |
<select> | 下拉选择框 | <select><option value="1">选项1</option></select> |
<fieldset> | 分组表单元素，常与<legend>配合使用 | <fieldset><legend>账户信息</legend>...</fieldset> |
其他常用标签
| 说明 | 示例 |
<div> | 块级容器，用于布局和分组元素 | <div class="container">...</div> |
<span> | 器，用于局部样式或脚本控制 | <span id="highlight">文本</span> |
<iframe> | 嵌入外部网页 | <iframe src="https://example.com" width="300"></iframe> |
<meta> | 设置网页元数据（如字符集、viewport适配） | <meta name="viewport" content="width=device-width"> |
问题与解答
问题1：HTML5新增了哪些结构性标签？
解答：HTML5引入了<header>、<footer>、<article>、<section>、<aside>、<nav>等标签，用于更清晰地划分网页结构。<header>表示页眉，<article>表示独立内容块。
问题2：如何让表格显示边框？
解答：通过CSS设置border属性。
<table border="1">
<tr><th>姓名</th><th>年龄</th></tr>
<tr><td>张三</td><td>25</td></tr>
</table>
或使用CSS：
<table style="border:1px solid #000; border-collapse:collapse;">
<tr><th>姓名</th><th>年龄</th></tr>
<tr><td>张三</td><td>25</td></tr>
