随笔分类 - Web前端入门
Web前端入门入门笔记
摘要：埋头苦写多年的 CSS，从没注意到 CSS 被浏览器分了类，直到偶然的一次翻阅开发者工具，才发现原来 CSS 属性也被浏览器归类收纳了。 Chrome 下面是 Chrome 的开发者工具中 CSS 的属性归类截图，一般情况都不会注意它，毕竟代码不出问题，谁会关心 CSS 属性是哪一类？ 当我偶然看到
阅读全文
摘要：学编码之前，当先学排查问题的能力。 在那个 IE 浏览器 当道的时代，前端开发简直就是刀耕火种一般，一个简单的圆角模块，嘿...不好意思，它不支持，用图片吧。 但凡经历过 IE 的洗礼，就会知道当时哪些 红极一时 的浏览器 bug，特别是 IE 6，它真是一个 老六 啊，悄悄咪咪的挖了好多坑，刚填平
阅读全文
摘要：曾经，CSS 颜色的写法很专一，就只有十六进制写法（#ff0000）和关键字写法（red）。 现在，它变了，变得花样多了，各种招式眼花缭乱。 以红色（red）为例： 1. 颜色关键字 直接使用预定义的颜色名称： color: red; 解释 直接使用关键词 red。 2. 6位十六进制 使用完整的
阅读全文
摘要：单位就是那个形容长度大小的东西。比如身高180cm(厘米)，cm就是单位。 css 也不例外，要描述一个盒子的大小，就必须要用到单位。 css 单位根据其作用分为几大类：绝对单位、相对单位、视口单位、角度单位、时间单位、网格单位、频率单位、分辨率单位。 动态计算单位 认识单位之前，先认识几个动态计算
阅读全文
摘要：任何地方都存在阶级，CSS 选择器也不例外，也会讲一个三六九等。 选择器类别 通配符选择器 标签选择器 类选择器 ID选择器 属性选择器 伪类选择器 伪元素选择器 关系选择器 流传已久的阶级划分 选择器 权重 继承父标签的样式、* 通配符选择器 0,0,0,0 标签选择器 0,0,0,1 类选择器、
阅读全文
摘要：HTML 在语法上并无大小限制，所以其结构可以浩瀚无边，CSS 选择器的作用则是在这些复杂的 HTML 结构中进行元素定位。 示例代码 记住此代码，后面所有的 css 选择器都是基于此代码。 注意：代码中存在两个一样的 id="p1" 元素，仅为了演示效果，正常编码中请保证 id 唯一性。 <!DO
阅读全文
摘要：HELLO，这里是大熊的前端开发笔记。 先了解一个关键词 FCP (First Contentful Paint): 首次内容绘制，指的是浏览器渲染来自 DOM 的任何内容（包括文本、图像、SVG 等）的时间点。这是用户第一次看到页面上出现的内容，标志着页面开始有内容展示给用户。 使用 开发者工具
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 11 系统。 HTML 页面内容越来越多，势必 CSS 也会跟着膨胀，如果 CSS 还是用内部样式表，那会导致 HTML 页面代码行数将会超长，这时候聪明的人类就会想到把 CSS 抽离出来单独管理，这时候外部样式表就诞生
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 上岸第一剑，先斩...内联样式~ 内联样式弊端 关系的发展都是一步一步的，内联样式最终还是被取代了，原因是它太死脑筋了，不够灵活。 如多个元素的样式都长一样，代码就成这样了： <p style="color: r
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 来源：百度百科 简单
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 虽然说 Web 前端开发用记事本也能玩，但正常的开发者绝不用记事本玩（大佬除外）。 想想要用记事本扣一个淘宝、京东，那场景可真是美呆了。 一个好的编辑器，绝对可以事半功倍的。 编辑器可以提供哪些功能 语法高亮：
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 有没有好奇，前面文章中的截图是怎么来的？怎样查看 HTML 的渲染结果？ Web 开发者的照妖镜 曾经火狐（ Firefox ）是 Web 前端开发者最喜爱的浏览器，因为他家有一个神器 firebug 方便调试前
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 HTML的魔法世界，多姿多彩，千变万化。 授人以鱼不如授人以渔，文档阅读是开发者必备的技能，毕竟代码出现 BUG，也要知道为什么会出现 BUG 吧。 就像车辆使用手册一样，多翻翻使用手册，总会发现一些小惊喜的~~
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 语义化：通俗地说，就是让机器可以理解编写出来的 HTML 代码。比如：搜索引擎、屏幕阅读器等。 非语义化写法 网站结构大概这样： <div class="header"></div> <div class="na
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 注意：以下截图都来源于 Chrome 浏览器，不同浏览器可能会产生不同的渲染结果。 思考一个问题：英文写法都分大小，HTML 标签和属性的大写和小写是否不一样？ 标签大小写 先看代码 <!DOCTYPE html
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 HTML 常用属性大约 70 个，是否又头大了？脸上笑嘻嘻，心里嘛...嘿嘿... 温馨提示：属性不用死记硬背，多练多写慢慢就记住了。 全局常用属性 全局属性为 HTML 元素的通用属性，可以在任何元素上使用。
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 截止发文，MDN 收录的 HTML 全量标签有 126 个，有 18 个标记已弃用。 名词解释：MDN MDN Web Docs （ 前身为 Mozilla Developer Network ） 是一个开源的、
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 曾经有一个神奇的 bug 摆在我面前，为什么套娃一样的 HTML 语法，在段落标签 <p> 身上不生效？ 上源码 注意源码中 p 标签分别嵌套了 span 、 p 、 div 标签。 <!DOCTYPE html
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 HTML 中的元素根据其默认的 显示类型 主要分为三类：块级元素、内联元素 和 内联块元素。 它们的核心区别在于布局行为和样式控制的支持程度。 块级元素 块级元素（Block Elements）是指在 HTML
阅读全文
摘要：HELLO，这里是大熊学习前端开发的入门笔记。 本系列笔记基于 windows 系统。 先电脑端浏览器打开任何一个网页，比如百度。 再用 ctrl + u 快捷键即可查看源码，瞅瞅第一行代码，是不是都是 <!DOCTYPE xxx> 开头。 是否好奇这这行代码有嘛用？ DOCTYPE 语法规则 声明
阅读全文
浙公网安备 33010602011771号