HTML / CSS大前端
HTML 零基础入门：从基础标签到实战页面
介绍 HTML 基础知识，涵盖网页骨架概念、文件结构、常用标签（标题、段落、图片、链接、表格）、表单交互及布局标签。内容包含 VS Code 环境配置、代码示例演示 h1-h6、p、img、a、table、form、input 等标签属性与用法，并整合知识点完成一个简单的用户注册页面实战，适合编程新手入门。
介绍 HTML 基础知识，涵盖网页骨架概念、文件结构、常用标签（标题、段落、图片、链接、表格）、表单交互及布局标签。内容包含 VS Code 环境配置、代码示例演示 h1-h6、p、img、a、table、form、input 等标签属性与用法，并整合知识点完成一个简单的用户注册页面实战，适合编程新手入门。
HTML 的全称是 HyperText Markup Language（超文本标记语言），你可以把它理解为网页的骨架 —— 没有它，网页就是一片空白。
HTML 的核心就是标签，所有网页内容都包裹在标签里，它的特点一眼就能懂：
< > 里，比如 <p>、<img>；<标签名> 是开始标签（开门），</标签名> 是结束标签（关门），内容写在中间；<br/>；<h2> 里的 id 就是属性，用来唯一标识这个标签。举个简单例子：
<!-- 成对标签 + 属性示例 --><h2 id="article-title">我的第一篇 HTML 笔记</h2><!-- 单标签示例 --><br/>
任何 HTML 文件都有固定的'骨架结构'，就像盖房子先搭承重墙：
<!DOCTYPE html>
<html>
<head><!-- head 里是网页的'隐藏属性'：标题、编码等，不显示在页面上 -->
<title>我的第一个网页</title>
</head>
<body><!-- body 里是网页的'可见内容'：文字、图片、按钮都写在这 -->
你好，这是我用 HTML 写的第一个页面！
</body>
</html>
核心说明：
<html>：根标签，所有内容都包在里面；<head>：头，网页的'后台配置区'，比如 <title> 定义浏览器标签栏显示的文字；<body>：身体，网页的'前台展示区'，用户能看到的内容都在这。HTML 标签不是乱堆的，有明确的父子、兄弟关系，就像家族里的长辈和同辈：
<html><!-- 爷爷 -->
<head><!-- 爸爸：html 的子标签 -->
<title>我的网页</title><!-- 儿子：head 的子标签 -->
</head>
<body><!-- 叔叔：和 head 是兄弟关系 -->
网页内容
</body>
</html>
💡 你可以用 Chrome 浏览器的 F12（开发者工具）→「Elements」标签，直接看到网页的标签层级（也就是常说的 DOM 树），直观又好懂。
手写 HTML 可以用记事本，但效率极低！新手首选 Visual Studio Code（VS Code）：
在 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：适配移动端，让网页在手机上显示正常。网页的标题有 6 级，数字越大，字体越小、权重越低（h1 一个页面最好只写 1 个，是页面核心标题）：
<h1>网站主标题（比如博客标题）</h1>
<h2>文章一级标题</h2>
<h3>文章二级标题</h3>
<h4>小标题</h4>
<h5>次要标题</h5>
<h6>最次标题</h6>
结果展示：
HTML 里直接换行/打空格没用，想把文字分成段落，必须用 <p> 标签：
<p>这是第一段内容：HTML 是网页的骨架，学好它是前端入门的第一步。</p>
<p>这是第二段内容：段落标签会自动给文本上下留空隙，让排版更清晰。</p>
结果展示：
💡 注意：<p> 标签的内容不会自动缩进（后续用 CSS 可以设置），多个空格/换行只会被识别为 1 个空格。
如果只想换行不想分段（比如诗歌、地址），用单标签 <br/>（规范写法，别写 <br>）：
<p>
床前明月光<br/>
疑是地上霜<br/>
举头望明月<br/>
低头思故乡
</p>
效果展示：
<img> 是单标签，必须加 src 属性（图片路径），否则图片显示不出来：
<!-- 1. 同级路径（图片和 html 文件在同一个文件夹） -->
<img src="cat.jpg" alt="可爱的猫咪" width="300">
<!-- 2. 下一级路径（图片在 image 文件夹里） -->
<img src="image/dog.jpg" alt="调皮的小狗">
<!-- 3. 网络路径（直接用网上的图片链接） -->
<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="风景图">
这里的话需要注意的是：图片路径的问题，分为相对路径和绝对路径，图片路径也可以是网络路径。
效果： 1）图片路径对的话，就显示的是对应的图片
2）如果图片路径不对就显示的 alt 属性中的内容
核心属性：
src：图片路径（相对路径/绝对路径/网络路径）；alt：图片加载失败时显示的文字（无障碍优化）；width/height：设置宽高（改一个就好，另一个等比例缩放，避免图片变形）。<a> 标签是网页的'桥梁'，核心属性是 href（跳转地址）：
<!-- 1. 跳转到外部网站 -->
<a href="https://www.baidu.com" target="_blank">打开百度（新标签页）</a>
<!-- 2. 跳转到本地页面（内部链接） -->
<a href="about.html">关于我</a>
<!-- 3. 空链接（暂时不跳转，占位置） -->
<a href="#">返回顶部</a>
💡 target="_blank"：在新标签页打开链接（默认 _self，在当前标签页打开）。也就是说这个属性 是代表再开启一个新的页面打开链接。
表格用来展示规整的数据（比如课程表、成绩单），核心标签：
<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>
效果：
属性说明：
border：表格边框（数字越大越粗）；align：表格整体居中；cellpadding：内容到单元格边框的距离；cellspacing：单元格之间的间距（设为 0 更美观）。表单是比较重要的一个标签，那么其实他的一个最重要的作用就是 form 和表单控件 submit 一起配合使用的时候，所提交的数据内容就是 form 所包裹起来的内容。
举个例子：
<form action="submit.html" method="get">
<!-- 1. 文本框（输入用户名） -->
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入用户名"><br/>
<!-- 2. 密码框（输入密码，内容隐藏） -->
<label>密码：</label>
<input type="password" name="pwd" placeholder="请输入密码"><br/>
<!-- 3. 单选框（性别选择，name 相同才能单选） -->
<label>性别：</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女<br/>
<!-- 4. 复选框（爱好选择，可多选） -->
爱好：
阅读
编程
运动
表单是网页和用户交互的核心（比如注册、登录、搜索），核心组成：
form 包裹的范围就是 submit 提交的范围。
包裹所有表单控件，定义数据提交的目标地址：
<form action="submit.html" method="get">
<!-- 表单控件写在这里 -->
</form>
属性说明：
action：提交的路径；method：提交的请求方法；<input> 是'万能控件'，通过 type 属性切换类型：
<!-- 1. 文本框（输入用户名） -->
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入用户名"><br/>
<!-- 2. 密码框（输入密码，内容隐藏） -->
<label>密码：</label>
<input type="password" name="pwd" placeholder="请输入密码"><br/>
<!-- 3. 单选框（性别选择，name 相同才能单选） -->
<label>性别：</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女<br/>
<!-- 4. 复选框（爱好选择，可多选） -->
<label>爱好：</label>
<input type="checkbox" = =>阅读
编程
运动
属性说明：
name：是键值对中的键名 key，也就是说，到时候我们的数据是需要提交到后端的，那么你得使用这个变量来存储你的值；然后的话，name 值一样的时候同一组数据，比如我们的 name="hobby" 是同一组数据，那么到时候提交的时候如果是复选框，那么就是提交一组值；value：是键值对中的键值 value，也就是对应上述 name 属性对应的值，说白了，其实就是键值对，name 代表的是键，而 value 代表的是值；适合选项较多的场景（比如选择城市）：
<label>所在城市：</label>
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="guangzhou">广州</option>
</select>
效果展示：
💡 selected：设置默认选中的选项。
适合输入大段文字（比如备注、简介）：
<label>个人简介：</label>
<textarea name="intro" rows="3" cols="30" placeholder="请输入个人简介"></textarea>
div 和 span 没有固定样式，纯粹用来'装内容、做布局'，是网页布局的核心：
<div>：块级元素，独占一行（大盒子）；<span>：行内元素，不独占一行（小盒子）。示例：
<!-- div：大容器，放一组内容 -->
<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>密码：</>
性别：
男
女
爱好：
编程
阅读
旅行
所在城市：
北京
上海
深圳
个人简介：
! 可快速生成，<body> 写可见内容，<head> 写配置；type 切换控件类型，单选框需统一 name 才能实现'多选一'。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online