前端基础学习
关注
分享
扫一扫
文章平均质量分 90
charlie114514191
我是一个普通的嵌入式软件程序员，喜欢研究Linux（应用层跟内核从都有粗浅的涉略），单片机，操作系统和计算机体系架构等内容，目前是一枚普通的本科生。
笔者是一个朴素的开源主义者，我坚信代码和知识没有壁垒，也不应该有壁垒所在，任何人都应该平等的获取到所有的知识。笔者力所能及的将自己的代码项目开源到Github
笔者的github：https://github.com/Charliechen114514
笔者的私人博客（旧）：https://charliechen114514.github.io/
笔者的私人博客（新）：https://www.charliechen114514.tech/
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
面向C++程序员的JavaScript 语法实战学习4
本文摘要：面向C++程序员的JavaScript函数教程，涵盖函数定义、调用方式、作用域、闭包等核心概念。重点比较JS与C++差异：函数声明提升、动态this绑定、块级作用域(let/const)、闭包特性等。提供MDN参考链接，帮助C++开发者快速掌握JS函数编程范式。原创 2025-11-21 19:24:11 · 879 阅读 · 0 评论 -
CSS笔记4：CSS：列表、边框、表格、背景、鼠标与常用长度单位
这篇笔记总结了CSS中列表、边框、表格、背景、鼠标交互等常用样式的关键知识点。主要内容包括：列表样式的自定义与控制（list-style属性）、边框与圆角的设置技巧、表格布局优化方法（border-collapse和响应式处理）、背景图与渐变的叠加使用、鼠标悬停与焦点状态的设计建议（:hover和:focus），以及各类CSS长度单位（rem、vw等）的特点与适用场景。笔记还强调了可访问性注意事项，如确保表格语义化、键盘导航可见性等。原创 2025-11-13 10:25:07 · 595 阅读 · 0 评论 -
勇闯前后端：前端部分——Week1
文章摘要：本文介绍了前端开发中HTML语义化标签和CSS盒模型的核心知识。HTML部分重点讲解了常用语义化标签如<main>、<article>、<section>等的适用场景，并提供了语义化网页的写作练习。CSS部分详细解析了盒模型的四层结构（content、padding、border、margin）和box-sizing属性的两种模式（content-box与border-box）的区别，通过三个示例div演示不同设置下的渲染效果差异，并建议使用border-box原创 2025-11-13 10:07:44 · 694 阅读 · 0 评论 -
面向C++程序员的JavaScript 语法实战学习3：JS的循环与控制
本文对比C++和JavaScript的循环与控制语句，重点介绍JS特有的循环语法。主要内容包括：传统for/while循环与C++类似；for...in遍历对象属性；ES6新增的for...of遍历可迭代对象；标签语句配合break/continue控制外层循环；以及常见使用陷阱。文章强调JS循环的多样性，推荐优先使用for...of遍历数组，避免for...in的陷阱，并注意let在循环中的作用域问题。通过代码示例展示了各种循环语法的实际应用场景和最佳实践。原创 2025-11-12 08:47:40 · 496 阅读 · 0 评论 -
面向C++程序员的JavaScript 语法实战学习2
本文重点介绍了JavaScript中的块语句、条件语句和异常处理机制。块语句使用{}限定作用域，let/const具有块级作用域而var不是。条件语句包括if/else、三元运算符和switch，强调使用===严格相等比较。异常处理通过try/catch/finally实现，建议抛出Error实例而非基本类型，并注意finally的执行特性。文章对比了C++与JS的异同，指出了常见陷阱（如==的类型转换）和最佳实践（如边界错误处理、自定义错误类型等），为C++程序员学习JS提供了实用指导。原创 2025-11-12 08:16:19 · 720 阅读 · 0 评论 -
面向C++程序员的JavaScript 语法实战学习1
本文面向熟悉C++的程序员，介绍JavaScript基础语法。主要内容包括： 注释写法与C++基本相同； 变量声明方式var、let、const的区别，重点说明var的变量提升问题； JavaScript类型系统，包括原始类型（Number、String等）和对象类型； 常见类型陷阱，如NaN特性、null与undefined区别、相等比较规则等； 真值/假值概念在条件判断中的应用。文章强调JavaScript与C++的差异点，帮助C++开发者快速掌握JavaScript核心语法。原创 2025-11-10 16:12:47 · 1096 阅读 · 0 评论 -
CSS学习笔记6：定位与布局
本文介绍了CSS定位的基本概念和五种定位方式：static、relative、absolute、fixed和sticky。详细解析了每种定位的特性、参考对象、脱离文档流情况和常见用途，并比较了它们的差异。还介绍了z-index与定位的关系。最后简要提及了float的历史作用，强调理解定位对现代网页布局的重要性。原创 2025-11-04 09:59:03 · 814 阅读 · 0 评论 -
CSS学习笔记5：CSS 盒模型 & Margin 注意事项
CSS盒模型与Margin注意事项摘要 CSS盒模型包含content、padding、border和margin四层结构，默认content-box下width仅指内容区大小。推荐使用border-box以便width包含padding和border。 Margin存在合并现象：相邻块级元素的垂直margin会取较大值而非相加。父子元素的垂直margin还会发生塌陷，表现为两者margin重叠。可通过以下方法阻止塌陷： 父元素添加padding或border 创建BFC（如设置overflow或displ原创 2025-11-04 09:58:31 · 910 阅读 · 0 评论 -
CSS笔记4：CSS：列表、边框、表格、背景、鼠标与常用长度单位
这篇CSS笔记涵盖了列表、边框、表格、背景、鼠标交互和常用长度单位的关键知识点。主要内容包括：列表样式的自定义与语义化注意点；边框属性的灵活应用与性能优化；表格布局技巧与响应式方案；背景渐变与多重背景的实现；鼠标交互状态的可访问性处理；以及不同CSS单位的使用场景推荐。文章强调语义化标记、性能优化和跨设备兼容性，提供了实用的代码示例和最佳实践建议，适合前端开发者系统掌握CSS核心样式属性。原创 2025-11-04 09:57:47 · 1034 阅读 · 0 评论 -
CSS学习笔记3：颜色、字体与文本属性基础
本文总结了CSS基础知识中的颜色、字体与文本属性。颜色部分介绍了多种表示方法（十六进制、RGB/RGBA、HSL/HSLA）及CSS变量应用；字体部分讲解了字体系列、大小、粗细等设置，以及Web字体引入方式；文本排版部分涵盖了行高、间距、对齐、修饰等属性，并提供了单行省略、强制换行等实用技巧。这些基础知识构成了CSS样式的核心组件，是进一步学习布局等内容的前提。原创 2025-11-04 09:56:54 · 651 阅读 · 0 评论 -
HTML 系统理论笔记：表单
HTML表单是Web交互的核心组件，用于登录、搜索等关键功能。表单由<form>标签定义，包含action（提交URL）、method（get/post）等属性。常见控件包括<input>（文本、复选框等）、<textarea>（多行输入）、<select>（下拉菜单）。使用<label>提升可访问性，<fieldset>分组相关控件。表单设计直接影响用户体验和安全性。后续将结合JavaScript深入探讨表单功能。原创 2025-11-03 09:13:50 · 389 阅读 · 0 评论 -
从零开始理解 CSS：让网页“活”起来的语言2
本文总结了CSS三种样式格式（行内、内嵌、外部）的特点与使用场景，以及CSS选择器的优先级规则和分类。行内样式适合临时调试但不利于维护，内嵌样式适合单页应用，外部样式表最推荐用于大型项目。文章详细讲解了CSS选择器的类型（基本选择器、属性选择器、组合器等）和优先级计算方法，强调合理使用选择器对代码可维护性和性能的重要性。最后简要提及伪类和伪元素的使用场景。全文为CSS开发者提供了实用的样式管理和选择器使用指南。原创 2025-11-03 09:08:32 · 972 阅读 · 0 评论 -
从模仿到掌握：尝试一下Native CSS手写一个好看的按钮
这篇文章详细介绍了如何使用Native CSS制作一个美观且交互性强的按钮。作者从基础样式（内边距、圆角、指针样式）开始，逐步添加颜色、字体和过渡动画，最后实现悬停和点击的动态效果。文章提供了一份完整的CSS代码清单，并分解为六步操作指南：从基础形状构建到颜色设计，再到交互过渡、悬停浮起效果、点击物理反馈，最后鼓励读者自由组合创新。通过这种循序渐进的方式，读者既能学习具体CSS属性的作用，又能掌握如何通过组合这些属性创造出具有视觉吸引力和良好用户体验的按钮。原创 2025-10-29 09:33:39 · 697 阅读 · 0 评论 -
从零开始理解 CSS：让网页“活”起来的语言1
CSS是美化网页的核心技术，它通过选择器和声明块控制元素样式。本文介绍了CSS的基本概念、三种引入方式（内联/内部/外部）、盒模型（margin/padding/box-sizing）、元素显示类型（block/inline/inline-block）以及优先级规则（特异性计算）。重点讲解了如何利用CSS组合器精准控制样式，避免滥用ID选择器，并推荐使用外部样式表实现样式复用。最后解释了viewport元标签对移动端适配的重要性，以及浏览器默认样式的处理方式。掌握这些基础知识是进行网页设计的关键第一步。原创 2025-10-27 09:26:13 · 1027 阅读 · 0 评论 -
HTML 理论系统笔记2
本文介绍了语义化HTML的概念及其重要性。语义化HTML指使用具有明确意义的标签（如<header>、<article>等）构建网页，而非仅用<div>。这样做能提升可访问性（辅助设备识别）、SEO优化（搜索引擎理解内容）、代码可维护性和可读性。文章对比了表现型HTML与语义化HTML的差异，强调正确的标题层级结构，并列举了常用语义元素及其用途。语义化HTML是现代网页开发的最佳实践，使内容结构更清晰、更易维护。原创 2025-10-27 09:12:41 · 521 阅读 · 0 评论 -
HTML 理论笔记
HTML是构建网页结构的标记语言，与CSS和JavaScript共同构成前端三大核心技术。HTML负责定义内容结构和语义，通过元素和属性构建网页骨架，其中元素由标签和内容组成，属性提供额外信息或控制行为。HTML样板代码包括必要的元信息和文档声明，确保浏览器正确解析页面。基础元素如<div>用于分组，id和class属性用于CSS和JS交互。HTML实体用于显示特殊符号，<script>元素引入或编写JavaScript代码实现交互功能。原创 2025-10-24 10:39:57 · 1766 阅读 · 0 评论 -
前端常识基础——原生项目架构和一些网络文件类型小节
前端基础：项目架构与网络文件类型概述 本文介绍了前端开发的基础知识，包括项目架构和常见网络文件类型。在项目架构方面，文章阐述了合理的目录结构对于可维护性、团队协作和可扩展性的重要性，展示了典型的静态网页项目结构（包含assets、css、js等目录），并简要提及了使用CSS预处理器的项目结构变化。在网络文件类型方面，文章分类介绍了HTML/CSS/JS三大基础文件类型，以及常见的图像格式（JPEG/PNG/GIF/SVG）、音视频格式（MP3/MP4/WebM等）、字体格式（TTF/WOFF/WOFF2）和原创 2025-10-24 10:11:20 · 546 阅读 · 0 评论