Python
【JavaEE01-前端部分】从零入门HTML：从基础到实战，手把手教你写第一个网页
✅ 适合编程新手，用最通俗的语言讲清HTML核心知识点，搭配原创示例代码，看完就能上手写网页！ 一、认识HTML：网页的'骨架语言' 1.1 什么是HTML？ HTML的全称是HyperText Markup Language（超文本标记语言），你可以把它理解为**网页的骨架** —— 没有它，网页就是一片空白。 **超文本**：不只是单纯的文字，还能包含图片、视频、链接，甚至是可点击的按钮，…
✅ 适合编程新手，用最通俗的语言讲清HTML核心知识点，搭配原创示例代码，看完就能上手写网页！ 一、认识HTML：网页的'骨架语言' 1.1 什么是HTML？ HTML的全称是HyperText Markup Language（超文本标记语言），你可以把它理解为**网页的骨架** —— 没有它，网页就是一片空白。 **超文本**：不只是单纯的文字，还能包含图片、视频、链接，甚至是可点击的按钮，…
✅ 本文适合编程新手，用最通俗的语言讲清HTML核心知识点，搭配原创示例代码，看完就能上手写网页！
HTML的全称是HyperText Markup Language（超文本标记语言），你可以把它理解为网页的骨架 —— 没有它，网页就是一片空白。
HTML的核心就是标签，所有网页内容都包裹在标签里，它的特点一眼就能懂：
< >里，比如<p>、<img>；<标签名>是开始标签（开门），</标签名>是结束标签（关门），内容写在中间；<br/>；<h2>里的id就是属性，用来唯一标识这个标签。举个简单例子：
<!-- 成对标签 + 属性示例 --><h2id="article-title">我的第一篇HTML笔记</h2><!-- 单标签示例 --><br/>
任何HTML文件都有固定的'骨架结构'，就像盖房子先搭承重墙：
<!DOCTYPEhtml><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键，瞬间生成标准骨架：
<!DOCTYPEhtml><htmllang="zh-CN"><!-- 改成中文，避免浏览器提示翻译 --><head><metacharset="UTF-8"><metaname="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文件在同一个文件夹） --><imgsrc="cat.jpg"alt="可爱的猫咪"width="300"><!-- 2. 下一级路径（图片在image文件夹里） --><imgsrc="image/dog.jpg"alt="调皮的小狗"><!-- 3. 网络路径（直接用网上的图片链接） --><imgsrc="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. 跳转到外部网站 --><ahref="https://www.baidu.com"target="_blank">打开百度（新标签页）</a><!-- 2. 跳转到本地页面（内部链接） --><ahref="about.html">关于我</a><!-- 3. 空链接（暂时不跳转，占位置） --><ahref="#">返回顶部</a>
💡 target="_blank"：在新标签页打开链接（默认_self，在当前标签页打开）。也就是说这个属性 是代表再开启一个新的页面打开链接。
表格用来展示规整的数据（比如课程表、成绩单），核心标签：
<table>：整个表格；<tr>：表格的一行；<td>：一行里的一个单元格【也就是列】；<thead>/<tbody>：可选，区分表头和表体，结构更清晰。示例（课程表，和示例的人员信息表不同）：
<tableborder="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更美观）。表单是比较重要的一个标签，那么其实他的一个最重要的作用就是from和表单控件submit一起配合使用的时候，所提交的数据内容就是from所包裹起来的内容。
举个例子：
<formaction="submit.html"method="get"><!-- 1. 文本框（输入用户名） --><label>用户名：</label><inputtype="text"name="username"placeholder="请输入用户名"><br/><!-- 2. 密码框（输入密码，内容隐藏） --><label>密码：</label><inputtype="password"name="pwd"placeholder="请输入密码"><br/><!-- 3. 单选框（性别选择，name相同才能单选） --><label>性别：</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女<br/><!-- 4. 复选框（爱好选择，可多选） --><label>爱好：</label><inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="sports">运动<br/><!-- 5. 普通按钮（搭配JS使用） --><inputtype="button"value="点击提示"onclick="alert('你点我啦！')"><br/><!-- 6. 提交按钮（提交表单数据） --><inputtype="submit"value="提交信息"></form> from表单的包裹范围减小 <!-- 1. 文本框（输入用户名） --><label>用户名：</label><inputtype="text"name="username"placeholder="请输入用户名"><br/><!-- 2. 密码框（输入密码，内容隐藏） --><label>密码：</label><inputtype="password"name="pwd"placeholder="请输入密码"><br/><!-- 3. 单选框（性别选择，name相同才能单选） -->性别：<inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女<formaction="submit.html"method="get">爱好：<inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="sports">运动<inputtype="button"value="点击提示"onclick="alert('你点我啦！')"><inputtype="submit"value="提交信息">
表单是网页和用户交互的核心（比如注册、登录、搜索），核心组成：
form包裹的范围就是submit提交的范围。
包裹所有表单控件，定义数据提交的目标地址：
<formaction="submit.html"method="get"><!-- 表单控件写在这里 --></form>
属性说明：
action：提交的路径；method：提交的请求方法；<input>是'万能控件'，通过type属性切换类型：
<!-- 1. 文本框（输入用户名） --><label>用户名：</label><inputtype="text"name="username"placeholder="请输入用户名"><br/><!-- 2. 密码框（输入密码，内容隐藏） --><label>密码：</label><inputtype="password"name="pwd"placeholder="请输入密码"><br/><!-- 3. 单选框（性别选择，name相同才能单选） --><label>性别：</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女<br/><!-- 4. 复选框（爱好选择，可多选） --><label>爱好：</label><inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="sports">运动<br/><!-- 5. 普通按钮（搭配JS使用） --><inputtype="button"value="点击提示"onclick="alert('你点我啦！')"><br/><!-- 6. 提交按钮（提交表单数据） --><inputtype="submit"value="提交信息">
属性说明：
name：是键值对中的键名key，也就是说，到时候我们的数据是需要提交到后端的，那么你得使用这个变量来存储你的值；然后的话，name值一样的时候同一组数据，比如我们的name="hobby"是同一组数据，那么到时候提交的时候如果是复选框，那么就是提交一组值；value：是键值对中的键值value，也就是对应上述name属性对应的值，说白了，其实就是键值对，name代表的是键，而value代表的是值；适合选项较多的场景（比如选择城市）：
<label>所在城市：</label><selectname="city"><optionvalue="beijing">北京</option><optionvalue="shanghai"selected>上海</option><optionvalue="guangzhou">广州</option></select>
效果展示：
💡 selected：设置默认选中的选项。
适合输入大段文字（比如备注、简介）：
<label>个人简介：</label><textareaname="intro"rows="3"cols="30"placeholder="请输入个人简介"></textarea>
div和span没有固定样式，纯粹用来'装内容、做布局'，是网页布局的核心：
<div>：块级元素，独占一行（大盒子）；<span>：行内元素，不独占一行（小盒子）。示例：
<!-- div：大容器，放一组内容 --><divclass="user-info"><span>用户名：</span><span>张三</span></div><divclass="user-hobby"><span>爱好：</span><span>编程</span><span>阅读</span></div>
把上面的知识点整合，写一个完整的注册页面（原创示例，和参考示例不同）：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>用户注册页面</title></head><body><h1align="center">新手注册</h1><formaction="success.html"method="get"><!-- 用户名 --><p><label>用户名：</label><inputtype="text"name="username"placeholder="请输入3-10位字母/数字"required></p><!-- 密码 --><p><label>密码：</label><inputtype="password"name="pwd"placeholder="请输入6-16位密码"required></p><!-- 性别 --><p><label>性别：</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女 </p><!-- 爱好 --><p><label>爱好：</label><inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="travel">旅行 </p><!-- 城市 --><p><label>所在城市：<selectname="city"><optionvalue="beijing">北京<optionvalue="shanghai"selected>上海<optionvalue="shenzhen">深圳个人简介：<textareaname="intro"rows="3"cols="30"placeholder="简单介绍一下自己"><inputtype="submit"value="提交注册"><inputtype="reset"value="重置">
<h1>用户注册</h1><table><tr><td>用户名：</td><td><inputtype="text"placeholder="请输入用户名"></td></tr><tr><td>手机号：</td><td><inputtype="number"placeholder="请输入手机号"></td></tr><tr><td>密码：</td><td><inputtype="password"placeholder="请输入密码"></td></tr></table><div><inputtype="submit"value="提交"><span>是否已有账号？</span><ahref="#">登录</a></div>
!可快速生成，<body>写可见内容，<head>写配置；type切换控件类型，单选框需统一name才能实现'多选一'。看完这篇，我想老铁已经掌握了HTML的核心知识点，动手写一个注册页面试试吧！
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 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