当前位置：首页 > news >正文

HTML入门指南：从基本标签到表单操作

news 2026/7/26 10:35:25

一、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>`或`<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