HTML网页开发基础
一、HTML文档基本结构
1.1 文档类型声明
<!DOCTYPE html> <!-- HTML5文档声明 -->1.2 基本骨架
<html>
<head>
<meta charset="utf-8"> <!-- 设置中文编码 -->
<title>页面标题</title> <!-- 浏览器标签页显示 -->
</head>
<body>
网页内容区域
</body>
</html>二、常用HTML标签
2.1 标题标签
<h1>一级标题</h1> <!-- 最大，最重要 -->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6> <!-- 最小 -->特性：自动加粗、换行、字号递减
2.2 段落标签
<p>这是一个段落，会自动换行</p>
<p>这是另一个段落，与前一段有间距</p>2.3 水平线标签
<hr> <!-- 单标签，创建水平分割线 -->2.4 注释
<!-- 这是注释，不会在网页中显示 -->三、元素属性
3.1 基本语法
<标签 属性1="值1" 属性2="值2">内容</标签>3.2 常用属性
align - 对齐方式
<h1 align="left">左对齐</h1>
<h2 align="center">居中对齐</h2>
<h3 align="right">右对齐</h3>bgcolor - 背景颜色
<body bgcolor="#ff0000"> <!-- 红色背景 -->
<body bgcolor="red"> <!-- 颜色名称 -->
<body bgcolor="rgb(255,0,0)"> <!-- RGB格式 -->四、文本格式化标签
| 标签 | 描述 | 示例 |
|---|---|---|
<b> |
加粗文本 | <b>加粗文字</b> |
<i> |
斜体文本 | <i>斜体文字</i> |
<u> |
下划线文本 | <u>下划线文字</u> |
<del> |
删除线文本 | <del>删除文字</del> |
<small> |
小号字体 | <small>小字</small> |
<sub> |
下标 | H<sub>2</sub>O |
<sup> |
上标 | 100m<sup>2</sup> |
<mark> |
高亮标记 | <mark>重点内容</mark> |
4.1 化学公式示例
H<sub>2</sub>SO<sub>4</sub> <!-- 硫酸 -->
E = mc<sup>2</sup> <!-- 质能方程 -->4.2 换行标签
第一行<br>第二行<br><br>两个换行后的第三行五、超链接
5.1 基本语法
<a href="目标地址">链接文本</a>5.2 链接类型
外部网站链接
<a href="http://www.baidu.com">百度</a>本地文件链接
<a href="index.html">返回首页</a>图片链接
<a href="http://www.taobao.com">
<img src="logo.png" alt="淘宝">
</a>邮件链接
<a href="mailto:contact@example.com">联系我们</a>5.3 target属性
<a href="http://www.baidu.com" target="_self">当前窗口打开</a>
<a href="http://www.baidu.com" target="_blank">新窗口打开</a>六、图像标签
6.1 基本语法
<img src="图片路径" alt="替代文本">6.2 常用属性
| 属性 | 描述 | 示例 |
|---|---|---|
src |
图片来源 | src="photo.jpg" |
alt |
替代文本 | alt="风景图片" |
width |
宽度(px/%) | width="200" 或 width="50%" |
height |
高度(px) | height="150" |
<img src="avatar.jpg" alt="用户头像" width="100" height="100">
<img src="banner.jpg" alt="横幅广告" width="100%">注意：高度百分比通常无效，建议使用固定像素值
七、列表
7.1 无序列表
<ul type="disc"> <!-- 默认值：实心圆点 -->
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>type属性值
-
disc：● 实心圆点（默认） -
circle：○ 空心圆圈 -
square：■ 实心方块
7.2 有序列表
<ol type="1" start="1">
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>type属性值
-
1：数字1,2,3...（默认） -
A：大写字母A,B,C... -
a：小写字母a,b,c... -
I：大写罗马数字I,II,III... -
i：小写罗马数字i,ii,iii...
八、表格
8.1 基本表格结构
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>数据1-1</td>
<td>数据1-2</td>
<td>数据1-3</td>
</tr>
<tr>
<td>数据2-1</td>
<td>数据2-2</td>
<td>数据2-3</td>
</tr>
</table>8.2 单元格合并
横向合并 (colspan)
<tr>
<th colspan="3">学生成绩表</th>
</tr>纵向合并 (rowspan)
<tr>
<td rowspan="2">张三</td>
<td>语文：90</td>
</tr>
<tr>
<td>数学：85</td>
</tr>8.3 完整表格示例
<table border="1">
<tr>
<th colspan="3">学生信息表</th>
</tr>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>92</td>
</tr>
</table>九、HTML实体字符
| 实体 | 显示 | 描述 |
|---|---|---|
|
不间断空格 | |
< |
< | 小于号 |
> |
> | 大于号 |
& |
& | 和号 |
" |
" | 双引号 |
© |
© | 版权符号 |
® |
® | 注册商标 |
<p>10 > 5 显示为 10 > 5</p>
<p>版权所有 © 2025</p>十、表单
10.1 表单基本结构
<form action="提交地址" method="get">
<!-- 表单内容 -->
</form>method属性
-
GET：数据附加在URL后，适合少量数据
http://example.com/login?username=张三&password=123 -
POST：数据放在请求体中，适合大量或敏感数据
10.2 input输入框
文本输入框
<input type="text" name="username" placeholder="请输入用户名" required>密码框
<input type="password" name="password" placeholder="请输入密码" required>提交按钮
<input type="submit" value="登录">重置按钮
<input type="reset" value="清空">10.3 input常用属性
| 属性 | 描述 | 示例 |
|---|---|---|
type |
输入类型 | type="text" |
name |
参数名称 | name="username" |
value |
默认值 | value="admin" |
placeholder |
提示文本 | placeholder="请输入..." |
required |
必填项 | required |
maxlength |
最大长度 | maxlength="20" |
readonly |
只读 | readonly |
disabled |
禁用 | disabled |
10.4 其他输入类型
<!-- 邮箱验证 -->
<input type="email" name="email" placeholder="请输入邮箱">
<!-- 普通按钮 -->
<input type="button" value="点击我" οnclick="alert('你好!')">
<!-- 图片按钮 -->
<input type="image" src="submit.png" alt="提交">
<!-- 隐藏字段 -->
<input type="hidden" name="userid" value="1001">10.5 完整表单示例
<form action="login.php" method="post">
<p>
<label>用户名：</label>
<input type="text" name="username"
placeholder="请输入用户名"
required maxlength="20">
</p>
<p>
<label>密码：</label>
<input type="password" name="password"
placeholder="请输入密码"
required>
</p>
<p>
<label>邮箱：</label>
<input type="email" name="email"
placeholder="example@domain.com">
</p>
<p>
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="帮助" οnclick="showHelp()">
</p>
<input type="hidden" name="token" value="abc123">
</form>十一、最佳实践建议
-
语义化标签：合理使用标签表达内容含义
-
编码统一：始终使用UTF-8编码
-
属性引号：属性值用双引号包裹
-
图片优化：添加alt属性，设置合适尺寸
-
表单验证：前端验证结合后端验证
-
代码缩进：保持一致的缩进格式
-
注释清晰：复杂结构添加必要注释
十二、现代替代建议
-
CSS代替部分HTML属性
- 使用CSS设置颜色、对齐等样式
<!-- 旧方式 --> <body bgcolor="red"> <h1 align="center">标题</h1> <!-- 新方式 --> <body> <h1 style="text-align: center;">标题</h1> -
HTML5新增输入类型
<input type="tel" name="phone"> <!-- 电话号码 --> <input type="number" name="age"> <!-- 数字 --> <input type="date" name="birthday"> <!-- 日期 --> <input type="color" name="favcolor"><!-- 颜色选择 --> -
使用label元素
<label for="username">用户名：</label> <input type="text" id="username" name="username">