HTML 入门教程：从零开始学习网页开发基础
一、HTML简介
1.1 什么是HTML？
HTML全称是Hyper Text Markup Language（超文本标记语言），由Tim Berners-Lee和同事Daniel W. Connolly于1990年创立。它是一种用于创建网页的标准标记语言，而不是编程语言。
1.2 HTML的特点
-
通过标记（标签）来描述网页内容
-
独立于各种操作系统平台
-
需要浏览器来解析和显示
-
简单易学，通过标签定义内容结构
1.3 HTML文档基本结构
一个标准的HTML文档包含以下基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>网页标题</title>
</head>
<body><!-- 网页内容放在这里 -->
</body>
</html>二、HTML基础标签
2.1 标题标签
HTML提供了6级标题标签，从<h1>到<h6>：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>2.2 段落标签
使用<p>标签定义段落：
<p>这是一个段落。</p>
<p>这是另一个段落。</p>2.3 文本格式化标签
HTML提供了多种文本格式化标签：
| 标签 | 描述 |
|---|---|
<strong> | 强调文本（加粗） |
<em> | 强调文本（斜体） |
<sub> | 下标文本 |
<sup> | 上标文本 |
<del> | 删除线文本 |
<ins> | 下划线文本 |
<b> | 加粗（无语义） |
<i> | 斜体（无语义） |
2.4 水平线标签
使用<hr>标签创建水平分隔线：
<hr>
<hr size="3" width="80%" color="red">2.5 特殊字符
HTML中一些特殊字符需要使用实体代码：
| 字符 | 实体代码 |
|---|---|
| 空格 | |
| < | < |
| > | > |
| & | & |
| © | © |
| ® | ® |
三、HTML图片与链接
3.1 图片标签
使用<img>标签插入图片：
<img src="image.jpg" alt="图片描述" width="200" height="150">3.2 链接标签
使用<a>标签创建超链接：
<a href="https://www.example.com" target="_blank">访问示例网站</a>四、HTML列表
4.1 有序列表
<ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol>4.2 无序列表
<ul><li>项目一</li><li>项目二</li><li>项目三</li>
</ul>五、HTML表格
5.1 基本表格结构
<table border="1"><tr><th>表头1</th><th>表头2</th></tr><tr><td>数据1</td><td>数据2</td></tr>
</table>5.2 表格合并
<table border="1"><tr><th colspan="2">合并列</th></tr><tr><td rowspan="2">合并行</td><td>数据1</td></tr><tr><td>数据2</td></tr>
</table>六、HTML表单
6.1 基本表单结构
<form action="submit.php" method="post"><!-- 表单元素放在这里 -->
</form>6.2 常用表单元素
<!-- 文本框 -->
<input type="text" name="username" placeholder="请输入用户名"><!-- 密码框 -->
<input type="password" name="password"><!-- 单选按钮 -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label><!-- 复选框 -->
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">阅读</label>
<input type="checkbox" name="hobby" value="sports" id="sports">
<label for="sports">运动</label><!-- 下拉列表 -->
<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option>
</select><!-- 多行文本框 -->
<textarea name="comments" rows="4" cols="50"></textarea><!-- 提交按钮 -->
<input type="submit" value="提交">七、HTML注释
HTML注释不会显示在浏览器中，但可以帮助开发者理解代码：
<!-- 这是一个HTML注释 -->
<p>这是一个段落。</p>八、HTML最佳实践
-
使用小写标签和属性名（
<p>而不是<P>） -
始终为属性值添加引号
-
使用语义化标签（如
<header>,<footer>,<nav>等） -
为图片添加alt属性
-
使用CSS来控制样式，而不是HTML属性
九、学习资源推荐
-
MDN Web Docs - 权威的Web开发文档
-
W3Schools - 交互式学习平台
十、总结
HTML是网页开发的基础，通过学习本教程，你已经掌握了HTML的基本概念和常用标签。接下来可以通过实践项目来巩固所学知识，并进一步学习CSS和JavaScript来创建更丰富的网页体验。