HTML 基础
一、HTML 基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<!-- 可见内容区域 -->
</body>
</html>
<!DOCTYPE html>
：声明文档类型为 HTML5。<html>
：根标签，包裹所有 HTML 内容。<head>
：包含元数据（标题、CSS、字符集等）。<body>
：页面可见内容的容器。
二、基础标签与属性
1. 文本标签
| 标签 | 说明 | 示例 |
|---|
<h1> ~ <h6> | 标题（1级最大，6级最小） | <h1>主标题</h1> |
<p> | 段落（自动换行） | <p>段落内容</p> |
<hr> | 水平分割线（单标签） | <hr> |
<!-- --> | 注释 | <!-- 这是注释 --> |
2. 文本格式化
| 标签 | 效果 | 示例 |
|---|
<b> / <strong> | 加粗（推荐用 <strong> 语义化） | <strong>强调内容</strong> |
<i> / <em> | 斜体（推荐用 <em> 语义化） | <em>强调文本</em> |
<del> | 删除线 | <del>删除内容</del> |
<u> | 下划线 | <u>下划线内容</u> |
<sup> / <sub> | 上标/下标 | H<sub>2</sub>O |
<mark> | 高亮文本 | <mark>重点标记</mark> |
三、超链接与图像
1. 超链接 <a>
<a href="https://www.baidu.com" target="_blank" rel="noopener">百度</a>
- 属性
：
href
：链接地址（支持 URL、本地文件、邮箱
mailto:
）。target
：打开方式（
_blank
新窗口，
_self
当前页）。download
：强制下载文件（需文件名）。
2. 图像 <img>
<img src="image.jpg" alt="图片描述" width="200" height="100">
- 属性
：
src
：图片路径（支持相对/绝对路径）。alt
：替代文本（图片无法加载时显示）。width
/
height
：尺寸（像素或百分比，高度百分比可能无效）。
四、列表
1. 无序列表 <ul>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
</ul>
- type
：
disc
（默认实心圆）、
circle
（空心圆）、
square
（方块）。
2. 有序列表 <ol>
<ol type="A" start="3">
<li>第一步</li>
<li>第二步</li>
</ol>
- type
：
1
（数字）、
A
（大写字母）、
a
（小写字母）、
I
（罗马数字）。 - start
：起始序号（支持数字）。
五、表格
<table border="1">
<tr>
<th colspan="2">标题</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
- 标签
：
<tr>
：表格行。<td>
：普通单元格。<th>
：标题单元格（自动加粗居中）。
- 属性
：
colspan
：跨列合并。rowspan
：跨行合并。
六、HTML 实体
| 实体代码 | 显示效果 |
|---|
< | < |
> | > |
& | & |
| 空格 |
© | © |
<form action="/submit" method="post">
<label>用户名：<input type="text" name="user" required></label>
<input type="password" name="pwd" placeholder="输入密码">
<input type="submit" value="提交">
</form>
- 属性
：
action
：提交地址。method
：请求方式（
get
或
post
）。
| 类型 | 说明 |
|---|
text | 单行文本输入 |
password | 密码输入（掩码显示） |
email | 邮箱格式验证 |
number | 数字输入（可设步长） |
submit | 提交按钮 |
reset | 重置表单内容 |
file | 文件上传（需 enctype="multipart/form-data" ） |
八、其他重要标签
1. 下拉列表 <select>
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
2. 多行文本域 <textarea>
<textarea rows="4" cols="50">默认文本</textarea>
<button type="button">点击</button>
九、注意事项
- 语义化标签
：优先使用
<strong>
、
<em>
等语义化标签。 - 属性弃用
：避免使用
align
、
bgcolor
等过时属性，改用 CSS。 - 表单安全
：敏感数据（如密码）使用
method="post"
。 - 无障碍访问
：为图片添加
alt
属性，表单元素关联
<label>
。
