跳到主要内容
HTML 零基础入门：从基础标签到实战页面 | 极客日志
HTML / CSS 大前端
HTML 零基础入门：从基础标签到实战页面 介绍 HTML 基础知识，涵盖网页骨架概念、文件结构、常用标签（标题、段落、图片、链接、表格）、表单交互及布局标签。内容包含 VS Code 环境配置、代码示例演示 h1-h6、p、img、a、table、form、input 等标签属性与用法，并整合知识点完成一个简单的用户注册页面实战，适合编程新手入门。
CryptoLab 发布于 2026/4/5 更新于 2026/5/23 一、认识 HTML：网页的'骨架语言'
1.1 什么是 HTML？
HTML 的全称是 HyperText Markup Language（超文本标记语言），你可以把它理解为网页的骨架 —— 没有它，网页就是一片空白。
超文本 ：不只是单纯的文字，还能包含图片、视频、链接，甚至是可点击的按钮，让内容'活'起来。比如你刷到的带图片的文章、带跳转链接的电商页面，都是'超文本'的体现。标记语言 ：用提前定义好的'标签'来告诉浏览器'这段内容该怎么显示'。就像你在 Word 里选中文字点'加粗'，Word 会给文字加'加粗标记'；HTML 里的标签，就是给网页内容加的'显示规则'。
1.2 HTML 标签：网页的'最小指令单元'
HTML 的核心就是标签 ，所有网页内容都包裹在标签里，它的特点一眼就能懂：
📝 标签名放在 < > 里，比如 <p>、<img>；
📝 大部分标签是'成对出现'的：<标签名> 是开始标签（开门），</标签名> 是结束标签（关门），内容写在中间；
📝 少数标签是'单标签'（只有开门，没有关门），比如换行标签 <br/>；
📝 标签可以加'属性'：像给标签贴'身份证'或'说明书'，比如 <h2> 里的 id 就是属性，用来唯一标识这个标签。
举个简单例子：
<h2 id ="article-title" > 我的第一篇 HTML 笔记</h2 > <br />
1.3 HTML 文件的基本骨架
任何 HTML 文件都有固定的'骨架结构'，就像盖房子先搭承重墙：
<!DOCTYPE html >
<html >
<head >
<title > 我的第一个网页</title >
</head >
<body >
你好，这是我用 HTML 写的第一个页面！
</body >
</
html
<html>：根标签，所有内容都包在里面；<head>：头，网页的'后台配置区'，比如 <title> 定义浏览器标签栏显示的文字；<body>：身体，网页的'前台展示区'，用户能看到的内容都在这。
1.4 标签的层级关系：像'家族树'一样好理解 HTML 标签不是乱堆的，有明确的父子、兄弟关系，就像家族里的长辈和同辈：
<html >
<head >
<title > 我的网页</title >
</head >
<body >
网页内容
</body >
</html >
💡 你可以用 Chrome 浏览器的 F12（开发者工具）→「Elements」标签，直接看到网页的标签层级（也就是常说的 DOM 树），直观又好懂。
二、HTML 开发准备：工欲善其事，必先利其器
2.1 选对工具：VS Code 手写 HTML 可以用记事本，但效率极低！新手首选 Visual Studio Code（VS Code） ：
2.2 快速生成 HTML 骨架 在 VS Code 里新建 .html 文件（比如 index.html），输入 !（英文感叹号），按 Enter/Tab 键，瞬间生成标准骨架：
<!DOCTYPE html >
<html lang ="zh-CN" >
<head >
<meta charset ="UTF-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
<title > 我的第一个网页</title >
</head >
<body >
</body >
</html >
<!DOCTYPE html>：告诉浏览器这是 HTML5 文件；<meta charset="UTF-8">：设置字符编码，避免中文乱码；viewport：适配移动端，让网页在手机上显示正常。
三、常用 HTML 标签：让网页内容丰富起来
3.1 标题标签：h1~h6（重要性递减） 网页的标题有 6 级，数字越大，字体越小、权重越低（h1 一个页面最好只写 1 个，是页面核心标题）：
<h1 > 网站主标题（比如博客标题）</h1 >
<h2 > 文章一级标题</h2 >
<h3 > 文章二级标题</h3 >
<h4 > 小标题</h4 >
<h5 > 次要标题</h5 >
<h6 > 最次标题</h6 >
3.2 段落标签：p（区分文本块） HTML 里直接换行/打空格没用，想把文字分成段落，必须用 <p> 标签：
<p > 这是第一段内容：HTML 是网页的骨架，学好它是前端入门的第一步。</p >
<p > 这是第二段内容：段落标签会自动给文本上下留空隙，让排版更清晰。</p >
💡 注意：<p> 标签的内容不会自动缩进（后续用 CSS 可以设置），多个空格/换行只会被识别为 1 个空格。
3.3 换行标签：br/（强制换行） 如果只想换行不想分段（比如诗歌、地址），用单标签 <br/>（规范写法，别写 <br>）：
<p >
床前明月光<br />
疑是地上霜<br />
举头望明月<br />
低头思故乡
</p >
3.4 图片标签：img（插入图片） <img> 是单标签，必须加 src 属性 （图片路径），否则图片显示不出来：
<img src ="cat.jpg" alt ="可爱的猫咪" width ="300" >
<img src ="image/dog.jpg" alt ="调皮的小狗" >
<img src ="https://ts1.tc.mm.bing.net/th/id/R-C.8e283246276fad2c01e8d0e300bb4540?rik=umflFIIvM%2f%2b%2b6Q&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50118%2f7084.jpg_wh1200.jpg&ehk=1HQoa7wYy9xnf0HqsFbQQJAv79HJnBest1U0atuLHSQ%3d&risl=&pid=ImgRaw&r=0" alt ="风景图" >
这里的话需要注意的是：图片路径的问题，分为相对路径和绝对路径，图片路径也可以是网络路径。
2）如果图片路径不对就显示的 alt 属性中的内容
src：图片路径（相对路径/绝对路径/网络路径）；alt：图片加载失败时显示的文字（无障碍优化）；width/height：设置宽高（改一个就好，另一个等比例缩放，避免图片变形）。
3.5 超链接标签：a（页面跳转） <a> 标签是网页的'桥梁'，核心属性是 href（跳转地址）：
<a href ="https://www.baidu.com" target ="_blank" > 打开百度（新标签页）</a >
<a href ="about.html" > 关于我</a >
<a href ="#" > 返回顶部</a >
💡 target="_blank"：在新标签页打开链接（默认 _self，在当前标签页打开）。也就是说这个属性 是代表再开启一个新的页面打开链接。
四、结构化展示：表格标签（table） 表格用来展示规整的数据（比如课程表、成绩单），核心标签：
<table>：整个表格；<tr>：表格的一行；<td>：一行里的一个单元格【也就是列】；<thead>/<tbody>：可选，区分表头和表体，结构更清晰。 <table border ="1" align ="center" cellpadding ="10" cellspacing ="0" width ="400" >
<thead >
<tr >
<td > 时间</td >
<td > 周一</td >
<td > 周二</td >
</tr >
</thead >
<tbody >
<tr >
<td > 上午</td >
<td > HTML</td >
<td > CSS</td >
</tr >
<tr >
<td > 下午</td >
<td > JavaScript</td >
<td > 实战</td >
</tr >
</tbody >
</table >
border：表格边框（数字越大越粗）；align：表格整体居中；cellpadding：内容到单元格边框的距离；cellspacing：单元格之间的间距（设为 0 更美观）。
五、交互核心：表单标签（收集用户信息） 表单是比较重要的一个标签，那么其实他的一个最重要的作用就是 form 和表单控件 submit 一起配合使用的时候，所提交的数据内容就是 form 所包裹起来的内容。
<form action ="submit.html" method ="get" >
<label > 用户名：</label >
<input type ="text" name ="username" placeholder ="请输入用户名" > <br />
<label > 密码：</label >
<input type ="password" name ="pwd" placeholder ="请输入密码" > <br />
<label > 性别：</label >
<input type ="radio" name ="gender" value ="male" > 男
<input type ="radio" name ="gender" value ="female" checked > 女<br />
<label > 爱好：</label >
<input type ="checkbox" name ="hobby" value ="reading" > 阅读
<input type ="checkbox" name ="hobby" value ="coding" > 编程
<input type ="checkbox" name ="hobby" value ="sports" > 运动<br />
<input type ="button" value ="点击提示" onclick ="alert('你点我啦！')" > <br />
<input type ="submit" value ="提交信息" >
</form >
表单是网页和用户交互的核心（比如注册、登录、搜索），核心组成：
5.1 form 标签（表单域） form 包裹的范围就是 submit 提交的范围。
<form action ="submit.html" method ="get" >
</form >
action：提交的路径；method：提交的请求方法；
5.2 input 标签（核心表单控件） <input> 是'万能控件'，通过 type 属性切换类型：
<label > 用户名：</label >
<input type ="text" name ="username" placeholder ="请输入用户名" > <br />
<label > 密码：</label >
<input type ="password" name ="pwd" placeholder ="请输入密码" > <br />
<label > 性别：</label >
<input type ="radio" name ="gender" value ="male" > 男
<input type ="radio" name ="gender" value ="female" checked > 女<br />
<label > 爱好：</label >
<input type ="checkbox" name ="hobby" value ="reading" > 阅读
<input type ="checkbox" name ="hobby" value ="coding" > 编程
<input type ="checkbox" name ="hobby" value ="sports" > 运动<br />
<input type ="button" value ="点击提示" onclick ="alert('你点我啦！')" > <br />
<input type ="submit" value ="提交信息" >
name：是键值对中的键名 key，也就是说，到时候我们的数据是需要提交到后端的，那么你得使用这个变量来存储你的值；然后的话，name 值一样的时候同一组数据，比如我们的 name="hobby" 是同一组数据，那么到时候提交的时候如果是复选框，那么就是提交一组值；value：是键值对中的键值 value，也就是对应上述 name 属性对应的值，说白了，其实就是键值对，name 代表的是键，而 value 代表的是值；
5.3 select 标签（下拉菜单） <label > 所在城市：</label >
<select name ="city" >
<option value ="beijing" > 北京</option >
<option value ="shanghai" selected > 上海</option >
<option value ="guangzhou" > 广州</option >
</select >
5.4 textarea 标签（多行文本框） <label > 个人简介：</label >
<textarea name ="intro" rows ="3" cols ="30" placeholder ="请输入个人简介" > </textarea >
六、布局神器：div 和 span（无语义标签） div 和 span 没有固定样式，纯粹用来'装内容、做布局'，是网页布局的核心：
🧱 <div>：块级元素，独占一行（大盒子）；
🧱 <span>：行内元素，不独占一行（小盒子）。
<div class ="user-info" >
<span > 用户名：</span >
<span > 张三</span >
</div >
<div class ="user-hobby" >
<span > 爱好：</span >
<span > 编程</span >
<span > 阅读</span >
</div >
七、实战：制作简单的用户注册页面 把上面的知识点整合，写一个完整的注册页面（原创示例，和参考示例不同）：
<!DOCTYPE html >
<html lang ="zh-CN" >
<head >
<meta charset ="UTF-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0" >
<title > 用户注册页面</title >
</head >
<body >
<h1 align ="center" > 新手注册</h1 >
<form action ="success.html" method ="get" >
<p >
<label > 用户名：</label >
<input type ="text" name ="username" placeholder ="请输入 3-10 位字母/数字" required >
</p >
<p >
<label > 密码：</label >
<input type ="password" name ="pwd" placeholder ="请输入 6-16 位密码" required >
</p >
<p >
<label > 性别：</label >
<input type ="radio" name ="gender" value ="male" > 男
<input type ="radio" name ="gender" value ="female" checked > 女
</p >
<p >
<label > 爱好：</label >
<input type ="checkbox" name ="hobby" value ="coding" > 编程
<input type ="checkbox" name ="hobby" value ="reading" > 阅读
<input type ="checkbox" name ="hobby" value ="travel" > 旅行
</p >
<p >
<label > 所在城市：</label >
<select name ="city" >
<option value ="beijing" > 北京</option >
<option value ="shanghai" selected > 上海</option >
<option value ="shenzhen" > 深圳</option >
</select >
</p >
<p >
<label > 个人简介：</label >
<textarea name ="intro" rows ="3" cols ="30" placeholder ="简单介绍一下自己" > </textarea >
</p >
<p >
<input type ="submit" value ="提交注册" >
<input type ="reset" value ="重置" >
</p >
</form >
</body >
</html >
总结
HTML 是网页的骨架，核心是标签 ，大部分标签成对出现，部分为单标签，标签可加属性；
HTML 文件有固定骨架，VS Code 输入 ! 可快速生成，<body> 写可见内容，<head> 写配置；
常用标签分三类：内容标签（h1~h6、p、br、img、a）、结构化标签（table）、交互标签（form、input、select、textarea），布局用 div/span；
表单是用户交互核心，input 通过 type 切换控件类型，单选框需统一 name 才能实现'多选一'。
相关免费在线工具 Base64 字符串编码/解码 将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器 将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
Markdown转HTML 将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
HTML转Markdown 将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
JSON 压缩 通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
JSON美化和格式化 将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online
