HTML入门指南：从基本标签到表单操作
一、HTML文档的基本结构
HTML（超文本标记语言）是构建网页的基础。一个HTML文件就像一个人的身体，有头有身体：
<!DOCTYPE html> <!-- 声明这是一个HTML文件 --> <html> <!-- 根标签，包裹所有内容 --> <head> <!-- 头部：定义网页的元信息，比如标题、编码 --> <meta charset="utf-8"> <!-- 防止中文乱码 --> <title>我的第一个网页</title> <!-- 浏览器标签页上显示的标题 --> </head> <body> <!-- 身体：所有可见的内容都写在这里 --> 欢迎来到我的网页！ </body> </html>小提示：
<!-- 注释内容 -->是注释，不会显示在页面上，只供开发者阅读。
二、常用文本标签
在<body>中，我们可以用各种标签来格式化文字、换行、添加分割线等。
1. 标题标签（h1~h6）
标题有六级，<h1>最大最粗，<h6>最小：
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>2. 换行和水平线
<br>：换行（单标签）<hr>：水平分割线（单标签）第一行<br>第二行 <hr> 分割线上面和下面内容分开了3. 段落标签（p）
段落会自动添加上下边距，让文章更易读：
<p>这是第一个段落。</p> <p>这是第二个段落。</p>4. 文字样式标签
标签 效果 说明 <strong>或<b>粗体 强调重要内容 <em>斜体 强调语气 <s>~~删除线~~ 表示不再准确的内容
<strong>粗体强调</strong> <em>斜体强调</em> <s>原价100元</s>三、多媒体标签：图片、音频、视频
1. 图片（img）
<img src="图片路径" width="200px" height="150px" title="鼠标悬停文字" alt="图片加载失败时的替代文字">src：图片地址（可以是本地路径或网络链接）width/height：宽高title：鼠标悬停时显示的文字alt：图片无法显示时的提示文本（对无障碍访问很重要）
2. 音频（audio）和视频（video）
<audio src="music/一千年以后.mp3" controls></audio> <video src="video/快手.mp4" controls width="300px"></video>
controls属性会显示播放、暂停、音量等控制按钮。视频还可以设置宽高。
四、超链接（a）
用超链接可以在网页之间跳转：
<a href="https://www.baidu.com" target="_blank">点击我去百度</a>href：跳转的目标网址或本地文件target="_blank"：在新标签页中打开链接，否则会在当前页覆盖
五、无语义标签：div 和 span
这两个标签没有默认样式，但常常用来“包裹”内容，方便后续用CSS加样式或JS做交互。
<div>：块级元素，独占一行<span>：行内元素，多个可以排在同一行
<div>我是块级，独自占一行</div> <span>我是行内，</span><span>我可以和兄弟排排坐</span>六、列表：有序、无序、自定义
列表让信息更有条理。
1. 无序列表（ul）
前面显示圆点或方块，适用于并列项：
<ul> <li>苹果</li> <li>香蕉</li> <li>橘子</li> </ul>2. 有序列表（ol）
前面自动编号：
<ol> <li>第一步：打开冰箱</li> <li>第二步：放大象</li> <li>第三步：关上冰箱</li> </ol>3. 自定义列表（dl）
常用于术语解释：
<dl> <dt>水果类</dt> <dd>猕猴桃</dd> <dd>西瓜</dd> <dt>编程语言</dt> <dd>Python</dd> <dd>JavaScript</dd> </dl>七、表格：展示数据
表格由<table>、<tr>（行）、<td>（列）构成。
1. 基本表格
<table border="1" width="300px" height="70px"> <tr align="center"> <td>编号</td> <td>姓名</td> <td>成绩</td> </tr> <tr align="right"> <td>s1001</td> <td>张三</td> <td>90</td> </tr> </table>border：边框粗细（设为0则无边框）align：水平对齐方式（left/center/right）
2. 跨列（colspan）
让一个单元格占据多列：
<table border="1"> <tr> <td colspan="3">学员成绩表</td> <!-- 占3列 --> </tr> <tr> <td>s1001</td><td>张三</td><td>90</td> </tr> </table>3. 跨行（rowspan）
让一个单元格占据多行：
<table border="1"> <tr> <td rowspan="2">张三</td> <!-- 占2行 --> <td>语文</td><td>88</td> </tr> <tr> <td>数学</td><td>90</td> </tr> </table>技巧：使用colspan和rowspan时，要注意被合并的单元格要删掉，否则会多出格子。
八、表单：与用户交互
表单用于收集用户输入的数据（登录、注册、搜索等）。所有表单控件都需要放在<form>标签内。
1. 文本输入框
<label for="username">用户名：</label> <input type="text" id="username" value="默认文字">label的for属性关联输入框的id，点击文字即可聚焦到输入框。type="password"为密码框，输入内容会变成圆点。
2. 单选按钮（radio）
一组单选按钮的name属性必须相同，才能实现互斥选择。
性别： <input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="0" checked>女 <!-- checked表示默认选中 -->3. 复选框（checkbox）
允许同时选多个：
爱好： <input type="checkbox" name="love" value="篮球" checked>篮球 <input type="checkbox" name="love" value="唱歌">唱歌4. 文件上传（file）
附件：<input type="file" name="file_name">5. 多行文本域（textarea）
<textarea cols="30" rows="5" placeholder="请输入备注..."></textarea>cols：宽度（字符数）rows：行数
6. 下拉列表（select）
国籍： <select> <option>中国</option> <option selected>美国</option> <!-- selected默认选中 --> <option>英国</option> </select>7. 按钮
<input type="submit" value="提交"> <!-- 提交表单 --> <input type="reset" value="重置"> <!-- 重置表单内容 --> <input type="button" value="普通按钮"> <!-- 无默认行为，常配合JS --> <button>普通按钮</button> <!-- 功能同上，但更灵活 -->注意：
submit和reset必须在<form>内部才有效果。普通按钮需要编写JavaScript才能实现功能。
总结
文档结构：html、head、body
文本标签：h1~h6、p、br、hr、strong、em、s
多媒体：img、audio、video
超链接：a
列表：ul/ol、li、dl/dt/dd
表格：table、tr、td、colspan、rowspan
表单：input（text/password/radio/checkbox/file/submit/reset/button）、textarea、select、button