HTML 设计与使用入门

一、完整示例（基础页面模板）这是一个结构清晰、可直接拷贝运行的最小 HTML 模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML 设计与使用示例</title>
</head>
<body><header><h1>我的第一个网页</h1></header><main><section><h2>段落与文本格式</h2><p>这里是一段示例段落。可以使用 <strong>strong / b</strong> 加粗，<em>em / i</em> 倾斜，<u>u</u> 下划线，<del>del</del> 删除线。</p><p>换行使用 &lt;br&gt; 标签。示例：第一行<br>第二行。</p></section><section><h2>超链接与图片</h2><a href="https://www.example.com" target="_blank" rel="noopener">访问示例网站（新窗口打开）</a><p><a href="localpage.html">链接到本地页面</a></p><p><img src="abc.jpg" alt="示例图片描述" width="300"></p></section><section><h2>列表</h2><ul><li>无序列表（disc / circle / square）</li></ul><ol start="3" type="1"><li>有序列表（可设置 start 与 type）</li></ol></section><section><h2>表格</h2><table border="1"><tr><th colspan="3">表格标题（合并 3 列）</th></tr><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr></table></section><section><h2>表单（form）</h2><form action="/submit" method="post"><label>姓名：<input type="text" name="name" placeholder="输入姓名" required maxlength="50"></label><br><label>邮箱：<input type="email" name="email" placeholder="example@mail.com" required></label><br><input type="submit" value="提交"></form></section></main><footer><hr><small>版权所有 © 2025</small></footer>
</body>
</html>

二、基础概念快速回顾

1. 文档结构

<!DOCTYPE html>：声明文档为 HTML5，放在最顶端。
<html lang="zh-CN">：根元素，lang 用于指定页面语言（利于 SEO 与无障碍）。
<head>：包含字符集、title、meta、样式与脚本等元信息。
<body>：页面可见内容放这里。

2. 常用文本元素

标题：<h1> ~ <h6>，语义化标题（h1 最大）。
段落：<p>，会自带段落间距。
换行：<br>（单标签）。
强调/加粗：<strong>（语义强调）或 <b>（样式化加粗）。
斜体：<em>（语义强调）或 <i>。
删除线：<del>，通常用来表示已删除内容。
下划线：<u>（尽量少用做语义装饰）。
小字号：<small>，上/下标：<sup> / <sub>。
高亮：<mark>（黄色背景，表示重要或匹配项）。
注释：（不会显示在页面上）

3. 元素属性（attribute）

属性用于为标签添加额外信息，如 id、class、title、style、data-* 等：

<p id="intro" class="lead" title="简介">……</p>

常见的布局或表现属性（尽量用 CSS 替代）：

align（已过时，建议使用 CSS）
bgcolor（表格或 body 设置背景色，建议用 CSS：background-color）

三、超链接（`<a>`）

基本写法：<a href="URL">链接文字</a>
五种常见用途：
1. 外部链接：href="https://..."
2. 本地页面：href="page.html"
3. 图片链接：把 <img> 放到 <a> 内
4. 邮件：href="mailto:email@example.com"
5. 下载链接：href="file.zip" download
新窗口打开：target="_blank"（配合 rel="noopener noreferrer" 更安全）

四、图片（`<img>`）

基本属性：src、alt（必须）、width、height
alt：当图片无法显示或用于无障碍工具时显示文字，务必填写有意义描述。
宽高可以用像素或百分比（百分比相对于包含块，注意高度百分比有时无效）。
示例：<img src="abc.jpg" alt="示例美女" width="300">

五、列表（`<ul>`, `<ol>`, `<li>`）

无序列表：<ul>，常见 type（过时，建议用 CSS）有 disc、circle、square。
有序列表：<ol>，可以设置 start（起始序号）与 type（数字/字母/罗马数字）。
列表项：<li> 内可嵌入文本、链接、图片、甚至子列表。

六、表格（`<table>`）

结构：<table> > <tr>（行） > <td> / <th>（单元格 / 表头）
合并：水平合并使用 colspan="n"，垂直合并使用 rowspan="n"。
表头：用 <th>（默认居中且加粗）。
示例：

<table border="1"><tr><th colspan="3">姓名表</th></tr><tr><td>A</td><td>B</td><td>C</td></tr>
</table>

提示：表格用于展示表格化数据，不要用表格做布局（已过时，使用 CSS 布局）。

七、表单（`<form>`）与输入元素

action：提交地址；method：GET（参数附在 URL 后）或 POST（请求体传递）
常用 input 类型：
- text, password, email, number, tel, url
- submit, reset, button, hidden, image
HTML5 新属性：
- required：必填项
- placeholder：提示文本
- maxlength：最大长度
- type="email" 等能做基本校验（浏览器支持差异）
示例：

<form action="/send" method="post"><input type="text" name="username" placeholder="用户名" required><input type="email" name="email" placeholder="邮箱"><input type="submit" value="提交">
</form>

注意：表单提交真实应用中要做好后端与前端验证，避免安全问题（如 XSS、SQL 注入等）。

八、HTML 实体（Entities）

某些特殊字符必须使用实体表示：

< 表示 <
> 表示 >
& 表示 &
  表示不间断空格
还有很多字符实体用于数学符号或其他语言字符。

九、语义化与可访问性（重要）

使用语义标签（header, nav, main, article, section, footer）能让页面结构更清晰，利于 SEO 与屏幕阅读器。
给交互元素添加 aria-* 属性或 alt、label 等，有助于无障碍访问。
表单元素应配合 <label> 使用，便于屏幕阅读器识别：

<label for="email">邮箱：</label>
<input id="email" type="email" name="email">

十、最佳实践与建议

用 CSS 做样式，不要滥用内联属性（如 bgcolor、align）——保持结构与样式分离。
始终设置 <meta charset="utf-8">，避免中文乱码。
图片必须有 alt，并尽量压缩图片以提升性能。
用语义化标签 让内容对机器与用户都更友好。
表单与输入校验：前端做体验上校验，后端必须做安全校验。
响应式设计：用 <meta name="viewport"> + CSS 媒体查询适配移动设备。
避免使用过时属性/标签（如 align, 部分 <font>），应用现代 CSS。
性能考虑：尽可能延迟/合并脚本、使用合适图片尺寸、开启压缩与缓存。
可访问性（a11y）：键盘导航、合理对比度、ARIA 标签等不可忽视。

十一、常见小问题与解答

<br> 与 <p> 的区别？
<br> 强制换行，通常用于诗句或地址类；<p> 表示段落，会自动在段落之间产生间距。
图片百分比宽高无效怎么办？
百分比宽度相对于包含块有效，但高度百分比可能依赖父元素高度；通常用 CSS 控制尺寸更可靠（例如 max-width:100%）。
表格合并单元格出错？
确保 colspan 与 rowspan 的数值与行列结构匹配，不要让表格单元格数目在某行不相等（除非确实合并）。