学习笔记——HTML网页开发基础
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">