俊秀的松鼠-CSDN博客

原创【大白话前端 10】从页面互跳到锚点定位，关于＜a＞标签最容易被忽视的 5 个实操

网页如果没有超链接，就只是一座座无法访问的孤岛。把它们连成网的，是<a>（Anchor）标签。<a>标签本身是个壳，真正决定点击后触发什么行为的，是它的核心属性。下面按实际开发中最常见的 5 种场景，介绍超链接的用法。

2026-03-10 22:06:32 413

原创【白话前端 09】HTML网页结构搭建：从语义化标签到整站规划

div>。结果就是页面里堆叠了几百个<div>。人眼能通过 CSS 样式看出哪里是头部、哪里是侧边栏。但对于搜索引擎爬虫、或是视障者的屏幕阅读器来说，这只是一坨没有主次的文本碎片。机器根本不知道这几个英文字母代表核心内容。HTML5 引入<header><main>等语义化标签，本质不是为了给页面换个长相，而是。当把核心代码放进<main>，把底部备案信息扔进<footer>，爬虫一进来就明确知道：“抓取有效信息直接去<main>里找，底部的东西可以直接跳过。”这就是语义化的底层价值。

2026-03-09 20:13:28 1644

原创【大白话前端 08】HTML 文本语义化：6 类非 div 标签的速查指南

写 HTML 标签时，先定。

2026-03-08 16:30:42 675

原创【大白话前端 07】`＜ul＞、＜ol＞和＜dl＞` 怎么选：前端页面的 3 种基础结构

HTML 里只有 3 种列表标签。它们的作用主要是告诉浏览器和机器这些数据是什么关系。

2026-03-07 19:20:58 389

原创【大白话前端 06】HTML文本强调标签

📝速记总结<strong>= 真的非常重要（必须警惕/重视）。<em>= 改变句子的重音位置（从而改变含义）。<b><i>= 仅仅需要视觉高亮或标明特殊语境，但不改变重要性。想改样式（变大、加粗），一律使用 CSS。到目前为止，我们一直在死抠“单段文字”的细节：用h1写标题，用p写段落，用strong抓重点。但是，如果在网页上遇到“一大串同类信息”该怎么排版？比如，教用户做菜的 10 个步骤，或是电商网站顶部的 5 个导航按钮？难道就是敲 10 个段落标签然后再手动标上1. 2. 3.吗？

2026-03-06 10:02:05 460

原创【大白话前端 05】HTML标题与段落

📝总结h1-h6用于搭建网页的骨干大纲，<p>负责划分内容的血肉区块。把“写给机器看”的结构与“仅供展示看”的样式彻底剥离开来，是前端编码的底层铁律。既然结构和样式要严格分离，那当我们在一个段落里，想突出某几个极其重要的字时，该怎么办？初学者的本能反应通常是“加粗”，也就是直接敲一个<b>标签。但这同样掉进了“用样式代替语义”的陷阱——眼睛看到字变黑了，但机器却毫无反应。在下一篇《06.HTML文本强调标签》中，我们将继续深入段落内部，拆解<strong>（语义强调）与<b>

2026-03-05 14:56:36 432

原创【大白话前端 04】HTML 头部的底层逻辑：决定网页解析与检索的隐形配置单

HTML文档的核心区域是<head>和<body>，其中<head>虽不直接显示内容，但对网页功能至关重要。它包含字符编码声明<meta charset="utf-8">防止乱码，<title>标签定义网页标题影响搜索排名，<meta description>提供搜索摘要，Open Graph标签优化社交分享展示，<link>引入CSS和JS文件（使用defer避免卡顿），以及favicon图标。正确配置

2026-03-04 10:10:11 385

原创【大白话前端 03】Web 标准与最佳实践

语义化：用对标签，让机器能读懂层级。代码分层：把 HTML、CSS、JS 物理拆分，方便后期维护。响应式：放弃写死固定尺寸，用百分比和媒体查询适配所有屏幕。坚守这三条底线，你的代码在任何浏览器下都能正常显示。上述所有的规范和代码拆分，处理的都是页面上能被用户直接看到的区域（即<body>里的内容）。但在实际开发中，很多引发致命报错的问题（比如跨设备乱码、分享到微信时不显示图标、甚至首屏莫名其妙白屏报错）往往不是正文写错了，而是网页的配置出了问题。

2026-03-03 12:59:30 695

原创【大白话前端 02】网页从解析到绘制的全流程

上一章我们讲到，浏览器在网络层面一路跋山涉水，最终把被切碎的数据包拼装成了一份纯文本文件。拿到文件后，便立刻交给了浏览器内部的渲染机器。这台机器本质上就是一个精密的代码代工厂。纯文本的 HTML、CSS 和 JS 是无法直接变成眼前绚丽的页面，机器必须执行一套严密的 5 步流水线工序，把纯文本拼装成最终的交互画面。fill:#333;important;important;fill:none;color:#333;color:#333;important;fill:none;fill:#333;

2026-03-02 16:16:00 498

原创【大白话前端 01】从输入网址到页面显示：网页加载的 6 个物理步骤

你在浏览器输入网址并回车，几秒后就看到了页面。但这短短几秒内，发生了极其密集的物理协作。网页加载的本质，就是你的设备（客户端）跨越千山万水，找别人的电脑（服务器）要一份文本文件。这不是随口一要就能拿到，机器必须经过以下 6 道关卡。

2026-03-01 21:01:09 711

原创 JavaScript 基础入门

不管是做简单的按钮点击，还是复杂的网页游戏，JS 的核心交互逻辑永远逃不开这 4 步。把这张图印在脑子里，你就算真正入门了！fill:#333;important;important;fill:none;color:#333;color:#333;important;fill:none;fill:#333;height:1em;找到目标用户触发计算完毕1. 找元素2. 听事件3. 做处理逻辑判断/存取数据4. 更页面修改 DOM/样式。

2026-02-26 17:17:39 334

原创 CSS 基础入门

在早期，网页的“内容”和“样式”是混在一起的。想改 100 个标题的颜色，就得改 100 次 HTML 代码，简直是噩梦。1996 年，CSS（层叠样式表）诞生，彻底解决了这个问题。HTML 是“搭骨架”：决定哪里是墙、哪里是门（内容结构）。CSS 是“搞装修”：决定墙刷什么漆、地板铺什么砖（视觉外观）。核心优势：结构与样式分离。样式写一次，全站复用，极大地提升了维护效率。引入方式：知道该把 CSS 写在哪里（首选外部样式表）。基础语法：学会用“选择器”精准定位元素，用“属性: 值;”修改样式。

2026-02-25 10:33:24 421

原创 HTML基础入门：零基础快速上手

HTML（超文本标记语言）是网页的骨架。结构化内容：用“标签”区分标题、段落、图片等，让文档排版清晰。超链接：实现点击跳转，把孤立的文档连成“万维网”。

2026-02-24 11:33:10 796

qq_28634867的博客