HTML星球大冒险之路线图
第一章:欢迎来到 HTML 星球!
1.1 宇宙的基石:HTML 是什么?
- 🌍 比喻:HTML 是网页世界的「乐高积木」,用标签搭建一切可见内容
- 🎯 目标:理解 HTML 的作用,掌握第一个
<!DOCTYPE html>
声明
1.2 认识 HTML 文档的「骨骼结构」
- 🧩 趣味比喻:HTML 文档像汉堡包
<html>
是包装盒(根标签)<head>
是配料表(元信息)<body>
是汉堡本体(可见内容)
- 👀 示例:打印「Hello, HTML 星球!」
第二章:标签大狂欢:从基础到变形
2.1 文本标签的魔法咒语
- ✨ 幽默教学:
<p>
:专治「文字乱跑症」的段落标签<h1>
-<h6>
:标题标签的「身高排行榜」<em>
&<strong>
:斜体和加粗的「抢戏二人组」
- 🎨 练习:用标签写一个搞笑段子
2.2 图片与链接的「穿越门」
- 🔗 梗:链接标签
<a>
是「网页传送门」,href
是目的地坐标 - 📸 趣味示例:用
<img>
插入一张「会说话的猫」表情包 - ❗ 注意事项:
alt
属性的重要性(比如图片挂掉时显示「此处应有猫片」)
第三章:布局大师:用标签建造梦幻家园
3.1 列表的「强迫症治疗术」
- 📝 比喻:
<ul>
:无序列表是「叛逆少年」(默认带圆点)<ol>
:有序列表是「乖乖学生」(自动编号)<dl>
:定义列表是「百科全书」(术语+解释)
- 🤖 挑战:用列表做一个「程序员早餐清单」
3.2 表格的「数据棋盘」
- 🎲 幽默类比:表格标签
<table>
是「数据麻将桌」<tr>
是麻将行,<td>
是麻将格子- 用
<caption>
给表格起个风骚标题
- 🚀 示例:用表格做「星球大战 vs 星际迷航」对比表
第四章:表单与交互:打造你的「数据捕手」
4.1 表单元素的「奇葩收集器」
- 🕹️ 趣味比喻:
- 文本框
<input type="text">
:人类输入的「吐字器」 - 密码框
<input type="password">
:隐藏秘密的「黑匣子」 - 单选按钮
<input type="radio">
:「非此即彼」的选择题
- 文本框
- 💡 搞笑案例:设计一个「你是哪种奇怪人类」测试表单
4.2 多媒体:给网页加点「蹦迪特效」
- 🎵 梗:用
<audio>
标签插入「好运来」BGM - 🎥 挑战:用
<video>
标签播放「土拨鼠尖叫」视频 - 🚨 警告:别滥用自动播放(否则会被用户追杀)
第五章:HTML5 大升级:解锁未来技能
5.1 语义化标签的「身份认证」
- 🕵️ 比喻:
<header>
是「网页大脑门」<nav>
是「导航机器人」<article>
是「文章小宇宙」
- 🤔 趣味对比:用旧标签和新标签分别写「朋友圈动态」
5.2 本地存储:给网页装个「记忆芯片」
- 💾 幽默解释:
localStorage
是「网页的硬盘」,能记住用户喜好 - 🍪 示例:用存储功能实现「自动记住用户名」的登录框
第六章:响应式设计:让网页「见风使舵」
6.1 媒体查询:网页的「变形金刚」
- 🦸 比喻:媒体查询是「网页的变形指令」,根据屏幕大小切换形态
- 📱 练习:让一个按钮在手机上变大,在电脑上变小
6.2 视口元标签:专治「手机屏幕晕车症」
- 🚗 梗:
viewport
是「网页的安全带」,防止页面缩放变形 - 🌐 案例:用视口设置让网页适配所有移动设备
第七章:实战项目:建造你的「HTML 太空站」
7.1 项目 1:个人博客(从 0 到 1)
- 🚀 步骤:
- 搭建骨架(
header
/nav
/article
/footer
) - 添加文章内容和评论表单
- 用媒体查询实现手机适配
- 搭建骨架(
- 💡 彩蛋:给博客加个「愚人节模式」按钮
7.2 项目 2:电商产品页(进阶挑战)
- 🛒 任务:
- 用表格展示产品参数
- 用图片和链接实现「立即抢购」功能
- 加入「库存不足」的本地存储提醒
- 🎉 成就:完成后可自称「网页包工头」
第八章:进阶技巧与「反人类」陷阱
8.1 代码优化:让 HTML 跑得更快
- 🚀 比喻:优化代码像给火箭减重(减少冗余标签)
- 🧹 技巧:用 Chrome 工具检测性能问题
8.2 常见错误:避开「代码雷区」
- 💥 搞笑警告:
- 忘记闭合标签 → 网页「半身不遂」
- 图片路径错误 → 显示「叉叉怪物」
- 🕵️ 挑战:修复一个满是 bug 的网页
第九章:总结与未来展望
9.1 回顾:从「Hello World」到「网页建筑师」
- 📈 成长树:列出学习过程中的关键里程碑
- 🎉 成就系统:完成所有挑战可解锁「HTML 星球征服者」称号
9.2 未来:HTML 与 CSS/JS 的「三角恋」
- 💘 预告:下一章将教你用 CSS 给网页化妆,用 JS 让网页「活过来」
附录:趣味索引与工具推荐
- 📚 标签速查表:用漫画形式展示常用标签
- 🧰 工具推荐:有趣的在线 HTML 编辑器(如 CodePen 上的恶搞模板)
特色说明:
- 拟人化标签:每个标签都有性格(如
<div>
是「盒子狂魔」,<span>
是「文字化妆师」) - 搞笑案例:用「土拨鼠尖叫」「好运来 BGM」等流行梗降低学习压力
- 互动挑战:每个章节设置「程序员专属脑筋急转弯」巩固知识
- 视觉化比喻:用汉堡、乐高、变形金刚等形象类比抽象概念
需要具体章节的详细内容或代码示例,可以随时告诉我! 🚀
相关文章:
HTML星球大冒险之路线图
第一章:欢迎来到 HTML 星球! 1.1 宇宙的基石:HTML 是什么? 🌍 比喻:HTML 是网页世界的「乐高积木」,用标签搭建一切可见内容🎯 目标:理解 HTML 的作用,掌握…...
网络安全与七层架构
网络安全与七层架构 随着互联网技术的迅猛发展,网络安全问题日益凸显。网络安全不仅影响到个人用户的信息安全,更是企业及国家安全的重要组成部分。而七层架构(OSI模型)为网络通信提供了理论支撑,能够有效地帮助我们理…...
2025-03-13 学习记录--C/C++-PTA 练习2-17 生成3的乘方表
合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。💪🏻 一、题目描述 ⭐️ 练习2-17 生成3的乘方表 输入一个非负整数n,生成一张3的乘方表,输出3^0~$$3^n$$的值…...
改进YOLOv8系列,AAAI 2025,多尺度特征提取自注意力模块,全局信息聚合,即插即用!分享
**论文:https://arxiv.org/pdf/2404.07846 **代码地址: https://github.com/nagejacob/TBSN/blob/main/network/tbsn.py 改进YOLOv8系列:多尺度特征提取自注意力模块,全局信息聚合,即插即用!分享 🚀论文研究概括🚀加入到网络中的理论研究🚀需要修改的代码1 🍀🍀…...
我又又又又又又更新了~~纯手工编写C++画图,有注释~~~
再再再次感谢Ttcofee提的问题 本次更新内容: 鼠标图案(切换),版本号获取,输入框复制剪切板 提前申明:如果运行不了,请到主页查看RedpandaDevc下载,若还是不行就卸了重装。 版本号&…...
Vue源码深度解析:从2.x到3.x的架构演进与核心原理剖析
Vue源码深度解析:从2.x到3.x的架构演进与核心原理剖析 一、框架演变:从Vue2到Vue3的跨越 1.1 革命性升级 Vue3的发布标志着前端框架进入新纪元,其核心改进体现在三个方面: 性能飞跃:包体积减少41%,初始…...
评委打分5个评委 去掉一个最高分和一个最低分 取平均分
一键替换max用min 按shiftF6 public static int getMin(int[]scores){int min scores[0];for (int i 0; i < scores.length; i) {if(scores[i]> min){min scores[i];}}return min;} 这里有和c/c不一样的知识点 c/c调用函数类似于java的方法,但是c/c的函数调用需要声明…...
javabean类(测试类之外的类)
altinsert快捷键生成构造方法和get、set方法 或者插件ptg(连接外网搜索插件并且下载)...
C++ 邻接矩阵(代码)
C邻接矩阵代码,见下: #include<iostream>using namespace std;#define inf -1 class Graph{ private:int vertices;int **edges;public:Graph(int vertices);~Graph();void addEdge(int u, int v, int w);void printGraph(); };Graph::Graph(int …...
Cookie与Session详解
Cookie简介 Cookie 是浏览器提供的持久化存储数据的一种机制。是指某些网站为了辨别用户身份、进行会话跟踪而储存在用户本地终端上的数据(通常经过加密)。以下是关于 Cookie 的详细介绍: Cookie工作原理 当你访问一个网站时,该网…...
OpenBMC:BmcWeb 处理http请求
OpenBMC:BmcWeb 读取http请求头-CSDN博客 介绍了,在读取完http头后,将调用Connection::handle处理http请求 1.Connection::handle void handle() {...req = std::make_shared<crow::Request>(parser->release(), reqEc);...req->session = userSession;accept …...
【算法题解答·六】栈队列堆
【算法题解答六】栈队列堆 接上文【算法方法总结六】栈队列堆的一些技巧和注意事项 栈队列堆相关题目如下: 232.用栈实现队列 简单 准备两个栈,一个负责入队的栈A,一个负责出队的栈B出队和返回队列开头元素,都要先进行以下操作…...
计算机视觉算法实战——手势识别(主页有源码)
✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ 1. 领域简介:手势识别的价值与挑战 手势识别是连接人类自然行为与数字世界的核心交互技术,在智能设备控制、…...
JobScheduler省电机制
1.前言 JobScheduler(任务调度器)是 Android 提供的一种任务调度机制,可以替代传统的 WakeLock 和 Alarm 来执行后台任务。那么,它们之间的区别是什么?JobScheduler 又有哪些特别之处呢? 1.1 WakeLock 和 …...
设计模式学习笔记——命令模式
2025年3月13日,周四下午 相同的保存逻辑在各个组件中重复出现。 且需要修改保存逻辑时,各个组件的保存逻辑都需要进行相应修改。 使用了命令模式把保存逻辑从三个组件中独立出来后,减少了代码冗余。 可以通过“保存命令”来使用保存逻辑&am…...
[TPCTF 2025] crypto 复现两题
周末很忙。比赛都没怎么看。晚上把密码复现两个。 randomized random 这题在小鸡块博客里见过,稍有区别。 # FROM python:3 import random with open("flag.txt","rb") as f:flagf.read() for i in range(2**64):print(random.getrandbits(3…...
电子元器件选型与实战应用—16 怎么选一个合适的MCU芯片?
文章目录 1. 选型要素1.1 价格1.2 技术支持1.3 厂家优势1.4 功耗1.5 特殊功能1.6 统计外设1.7 确定外设占用的内存和flash大小1.8 确定外设通信接口1.9 确定外设通信接口的电平1.10 确定外设的GPIO数量1.11 确定外设的供电和功耗1.12 确定外设GPIO的种类1.13 确定ADC的数量1.14…...
第6关:牛牛鱼缸-附加题
任务描述 本关任务:问题描述:牛牛有一个鱼缸,鱼缸里面已经有n条鱼,每条鱼的大小为fishSizei,牛牛现在想把新捕捉的鱼放入鱼缸。鱼缸里存在着大鱼吃小鱼的定律。经过观察,牛牛发现一条鱼A的大小为另外一条鱼…...
go中间件学习
本博文源于笔者正在学习go中间件,罗列了较为常用的中间件,例如日志记录、认证授权、跨域资源共享、请求体解析、静态文件处理、错误处理、性能分析、速率限制、session 1、日志记录中间件 可以追加打印用,例如,将请求进行打印 …...
若依RuoYi-Cloud-Plus微服务版(完整版)前后端部署
一.目标 在浏览器上成功登录进入 二.源码下载 后端源码:前往Gitee下载页面(https://gitee.com/dromara/RuoYi-Cloud-Plus)下载解压到工作目录。 前端源码: 前往Gitee下载页面(https://gitee.com/JavaLionLi/plus-ui)下载解压到工作目录。 文档地址&a…...
航空电动力系统适航标准要点手册
航空电动力系统适航标准要点手册 1.标准制定背景与必要性1.1 为什么需要制定和遵循标准?1.2 标准制定依据与发布机构 2.关键核心标准概述2.1 电动航空与电推进系统2.2 混合动力系统2.3 硬件与通用要求 3.标准详细解读与应用场景3.1 DO-160G:环境适应性测…...
深入理解JavaScript构造函数与原型链:从原理到最佳实践
一、开篇:为什么需要理解原型链? 在JavaScript开发中,90%以上的"诡异"bug都与原型链机制相关。理解构造函数与原型链的运行原理,不仅能帮助我们写出更优雅的代码,还能在框架源码阅读、性能优化等场景中游刃…...
java每日精进 3.12 【WebSocket进阶】
基于 SpringWebSocket 进行二次封装,实现了更加简单的使用方式。例如说,WebSocket 的认证、Session 的管理、WebSocket 集群的消息广播等等。 1. 用户认证与登录用户信息传递 1.1 Token 过滤器 (TokenAuthenticationFilter) ① 在 WebSocket 连接建立…...
国家网络安全事件应急预案
目 录 1 总则 1.1 编制目的 1.2 编制依据 1.3 适用范围 1.4 事件分级 1.5 工作原则 2 组织机构与职责 2.1 领导机构与职责 2.2 办事机构与职责 2.3 各部门职责 2.4 各省(区、市)职责 3 监测与预警 3.1 预警分级 3.2 预警监测 3.3 预警研判…...
Markdown:Mermaid 画图
目录 安装基本语法流程图时序图甘特图总结 Mermaid 是一款用于生成流程图、时序图、甘特图等图表的 JavaScript 库。它可以将简单的文本描述转化为美观的图表,方便开发者进行可视化展示。 安装 Mermaid 可以直接在浏览器中使用,也可以在 Node.js 环境中…...
【视频】ffmpeg、Nginx搭建RTMP、HLS服务器
1、源码安装Nginx 1)源码下载 因为要使用Nginx的模块nginx-rtmp-module,所以要下载 nginx 和 nginx-rtmp-module 的源码。 下载地址: http://nginx.org/en/download.html https://github.com/arut/nginx-rtmp-module/tags2)解压、配置 在同一个目录中解压 nginx 和 nginx…...
时间有限,如何精确设计测试用例?5种关键方法
精确设计测试用例能够迅速识别并修复主要缺陷,确保产品质量,降低后期维护成本,并通过专注于核心功能来提升用户体验,为项目的成功奠定坚实基础。若未能精确设计测试用例,可能会导致关键功能测试不充分,使得…...
【算法】图论
⭐️个人主页:小羊 ⭐️所属专栏:Linux 很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~ 目录 持续更新中...1、DFS2、BFSN 叉树的层序遍历二叉树的锯齿形层序遍历二叉树最大宽度 3、多源BFS腐烂的苹果 4、拓扑排序 持续更新中…...
ADQ32 5G采集卡
ADQ32是一款高端12位双通道数据采集板,针对高通量科学应用进行了优化。ADQ32具有以下特性: 一个和两个模拟输入通道包括每通道5和2.5 GSPS7GB/s的持续数据传输速率至GPU7GB/秒的持续数据传输速率两个外部触发器通用输入/输出(GPIO)开放式FPG…...
机器人领域专业名词汇总
1. 电机与驱动 电机类型 DC Motor(直流电机):通过直流电源驱动的电机。Stepper Motor(步进电机):通过脉冲信号控制旋转角度的电机。Servo Motor(伺服电机):带有反馈控制的…...
拆解 “ES 已死“ 伪命题:Agentic RAG 时代搜索引擎的终极形态
作者:来自 Elastic 李捷 xxx:“ES已死,#%#……” 我:??? 最近,某厂商发了一堆公关文章,翻来覆去地炒作 “ES 已死”,“放弃 ES”。这哪是什么正经的技术文章&…...
eNSP中路由器的CON/AUX接口、GE Combo接口、Mini USB接口、USB接口、WAN侧uplink接口、FE接口、GE接口介绍
路由器常见接口的详细介绍及其应用示例: 1. CON/AUX 接口 全称:Console/Auxiliary(控制台/辅助接口)作用: CON(Console):通过命令行界面(CLI)直接配置路由器…...
平面的四种方程及一些应用
平面的四种方程及一些应用 点法式方程一般式方程三点式方程截距式方程一些应用已知平面方程,找出平面上不共线的三个点 点法式方程 平面经过点 ( x 0 , y 0 , z 0 ) (x_0,y_0,z_0) (x0,y0,z0)且法向量为 ( a , b , c ) (a,b,c) (a,b,c),则平面的点…...
记录一个SQL自动执行的html页面
在实际工作场景中,需要运用到大量SQL语句更新业务逻辑,对程序员本身,写好的sql语句执行没有多大问题(图1),但是对于普通用户来说还是有操作难度的。因此我们需要构建一个HTML页面(图2࿰…...
SpringBoot——Maven篇
Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的工具。它具有许多特性,其中一些重要的特性包括: 1. 自动配置:Spring Boot 提供了自动配置的机制,可以根据应用程序的依赖和环境自动配置应用程序的各种组件ÿ…...
数据批处理(队列方式)
数据批处理(队列方式) public class DataProcessor {private static final int THREAD_COUNT 4;private static final int QUEUE_SIZE 10;private LinkedBlockingQueue<Data> queue new LinkedBlockingQueue<>(QUEUE_SIZE);public DataP…...
从零开始搭建搜索推荐系统(五十四)多路召回之万剑归宗
聊的不止技术。跟着小帅写代码,还原和技术大牛一对一真实对话,剖析真实项目筑成的一砖一瓦,了解最新最及时的资讯信息,还可以学到日常撩妹小技巧哦,让我们开始探索主人公小帅的职场生涯吧! (PS…...
c++介绍函数指针 十
指针代表内存中地址标识符,变量,数组都是存储内存中的数据。所以可以获得它们的地址,用指针来表示这块内存。 如图输出内存中的地址。 对于一个函数来说,也是内存中存储这段数据,所以我们也可以获取函数的地址。 函数…...
redis数据库
一、redis数据库介绍 NoSQL Not Only SQL 非关系型数据库 1、关系型数据库与非关系型数据库的区别 非关系型数据库性能高、速度快、支持高并发连接 1、非关系型数据库基于内存存储数据 2、摒弃了关系型数据的约束限制 3、采用o1算法进行设计开发 2、作用 关系型数…...
关于 NoC 中数据安全传输的设计与实现的详细介绍
片上网络(Network-on-Chip,NoC)作为一种新兴的片上通信架构,解决了传统总线架构在大规模集成电路设计中面临的诸多问题。然而,随着芯片系统的复杂性和应用场景的多样化,NoC 中数据安全传输变得至关重要。以…...
OpenGL(4)着色器
文章目录 一、着色器1、什么是着色器?2、着色器类型2.1、顶点着色器(Vertex Shader)2.2、片段着色器(Fragment Shader) 3、着色器属性3.1、layout 属性3.2、in 属性3.3、out 属性3.4、总结 4、示例 前言: 在…...
PHP批量去除Bom头的方法
检查的代码: <?php$dir __DIR__; $files new RecursiveIteratorIterator(new RecursiveDirectoryIterator($dir));foreach ($files as $file) {if ($file->isFile() && pathinfo($file, PATHINFO_EXTENSION) php) {$content file_get_contents(…...
51单片机的keil c51软件安装教程
Keil(C51)介绍、下载、安装与注册_keil c51-CSDN博客 参考 安装 不一定是这个大小,也可以下载别的版本KEID C51 注册 加入芯片型号 …...
JavaScript基本知识
文章目录 一、JavaScript基础1.变量(重点)1-1 定义变量及赋值1-2 变量的命名规则和命名规范判断数据类型: 2.数据类型转换2-1 其他数据类型转成数值2-2 其他数据类型转成字符串2-3 其他数据类型转成布尔 3.函数3-1函数定义阶段3-2函数调用阶段…...
导数,积分及常用公式
导数定义: 求导是数学计算中的一个计算方法,它的定义就是,当自变量的增量趋于零时,因变量的增量与自变量的增量之商的极限。在一个函数存在导数时,称这个函数可导或者可微分。可导的函数一定连续。不连续的函数一定…...
鸿蒙应用开发—ZDbUtil高效使用数据库
文章目录 介绍下载安装基本使用注解TableIdColumnOneToOne 使用方法定义实体类初始化数据库并根据被Table注解的类创建表创建表查数据插入数据删除数据清空数据 参考 介绍 ZDbUtil是一款基于SQLite的鸿蒙数据库框架,通过注解标注实体类与属性,让数据更能…...
强化学习(赵世钰版)-学习笔记(7.时序差分学习)
本章是课程算法与方法中的第四章,介绍的时序差分学习算法是基于随机近似方法设计的强化学习方法,也是model-free的方法。 时序差分算法是一种近似估计策略状态值的算法,具体的形式如下: 本质上是在当前t时刻,被访问到的…...
正则表达式入门及常用的正则表达式
正则表达式(Regular Expression,简称 Regex)是一种强大的文本处理工具,用于匹配、查找和替换字符串中的特定模式。以下是入门指南和常用正则表达式示例: 一、正则表达式入门 1. 基本语法 符号说明示例.匹配任意单个字…...
大白话如何在 Vue 项目中进行路由懒加载?
大白话如何在 Vue 项目中进行路由懒加载? 在 Vue 项目里,路由懒加载是种很实用的技术,它能让你在需要的时候再去加载对应的路由组件,而不是在项目启动时就把所有组件都加载进来,这样能加快项目的启动速度。下面就详细…...
手动实现一个RTTI系统
在 C 中,RTTI(Runtime Type Information,运行时类型信息)是一组允许程序在运行时获取对象类型信息的机制 。虽然C通过虚接口的方式提供了良好的抽象,但是对于一个复杂的系统,过于依赖抽象而忽略业务的复杂性…...