HTML 设计与使用入门
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>换行使用 <br> 标签。示例：第一行<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>五种常见用途：
外部链接：
href="https://..."本地页面：
href="page.html"图片链接：把
<img>放到<a>内邮件：
href="mailto:email@example.com"下载链接：
href="file.zip" download
新窗口打开：
target="_blank"（配合rel="noopener noreferrer"更安全）
四、图片（<img>）
基本属性：
src、alt（必须）、width、heightalt：当图片无法显示或用于无障碍工具时显示文字，务必填写有意义描述。宽高可以用像素或百分比（百分比相对于包含块，注意高度百分比有时无效）。
示例：
<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,urlsubmit,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的数值与行列结构匹配，不要让表格单元格数目在某行不相等（除非确实合并）。
十二、简短检查清单（创建页面前）
加入
<!DOCTYPE html>与<meta charset="utf-8">页面
<title>是否设置？图片是否有
alt描述？表单字段是否有
label？是否需要required？使用语义化标签组织内容？
是否为移动端适配（viewport 与响应式）？
是否使用外部 CSS/JS 而非内联（便于维护）？