【CSS】nth-child和nth-of-type的区别
两个都可以选择元素的兄弟节点
不同的是nth-of-type规则作用的范围是与元素类型一致的兄弟节点
nth-child规则作用的范围是所有兄弟节点（选择了范围之后，再判断是否与元素类型一致）
示例： 在线查看
12345678910111213141516171819202122232425262728293031<style>/* 不起作用，因为第三个不是p标签 */.test01 p:nth-child(3){ color: red;}.test01 a:nth-child(3){ color: red;}.test02 p:nth-of-type(3){ color:red;}</style><body><section class="test01"> <h1>try nth-child</h1> <p>1st p</p> <a href="#">I ...
【FE学习-CSS】CSS布局
正常布局流normal flow⁍
浏览器默认的HTML布局方式
块方向/内联方向
块方向在英语等具有水平书写模式(writing mode)的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的内联方向是内联内容（如句子）的运行方向。
display、浮动、position、表格布局和多列布局都会覆盖默认布局
display⁍
基础值： block/inline/inline-block (见盒模型)
全新布局方式：flex/grid
弹性盒子flex⁍
display: flex
主轴： 沿flex元素放置方向延伸的轴：flex-direction:column/row
row-reverse/column-reverse可以反向排向flex项
交叉轴： 垂直于flex元素垂直方向的轴
flex-wrap: wrap：防止溢出
简写：flex-flow: row wrap
可以嵌套使用
flex项⁍
给每个flex项添加属性，flex: 数值表示每一项占的属性
123article { flex: 1 200px;}
指定 ...
【FE学习-CSS】盒模型
Block Box 和 Inline Box⁍
这里讨论的是外部显示模型
块级
内联
inline-block
设置display
block
inline
inline-block
默认
标题/p
<a>/<span>/<em>/<strong>
无（常用于导航栏）
是否换行
是
否
否
width和height属性是否会发挥作用
是
否
是
垂直方向
内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
会被应用，但不会把其他处于 inline 状态的盒子推开。
同块级
水平方向
同上
可以把其他处于 inline 状态的盒子推开。
同块级
内部显示类型，它决定了盒子内部元素是如何布局的。可以通过使用类似 flex 的 display 属性值来更改内部显示类型。 如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。 该盒子的所有直接子元素都会成为flex元素.
Lear ...
【FE学习-CSS】字体/文本等样式化
font和文本样式⁍
font简写顺序： font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.
必需：font-size 和 font-family
font-size 和 line-height 属性之间必须放一个正斜杠
网页安全字体（通用）⁍
字体名称
泛型
注意
Arial
sans-serif
通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。
Courier New
monospace
某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。
Georgia
serif
Times New Roman
serif
某些操作系统有一个 Times New Roman 字 ...
【FE学习-CSS】CSS重点知识总结
本文参考[^1]的提纲，进行知识的梳理与整理，更新中~
CSS引入方式⁍
外部样式表⁍
在<head>-<link>中引入样式表
1<link rel="stylesheet" type="text/css" href="sheet1.css" media="all">
Points
media属性是媒体描述符，可选，多个用逗号隔开，指明CSS样式针对的媒体类型
可以用多个link引入多个样式表。如果这下样式表都没有设定title，就是永久样式表，浏览器会合并样式，如果设定了title，浏览器会选择其中的一个，忽略其它的。[^2]
候选样式表：把rel属性设置为alternate stylesheet，title属性里指定样式表名称。用户可以在浏览器里选择对应的样式表（只要浏览器支持的话，如基于WebKit的浏览器就不支持选择候选样式表，比如chrome）[^2]
内部样式表⁍
将CSS放在HTML文件<head>-<style>标 ...
【FE学习-CSS】基础CSS
依据freeCodeCamp、MDN、《CSS权威指南》等相关知识的笔记整理
实时更新代码仓库Augu1sto/FE-learning: 一个练习前端的小仓库，争取日更 (github.com)
CSS如何运行[1]⁍
浏览器加载网页的基本步骤（不同浏览器或许会有所差异）
载入HTML ：浏览器载入HTML文件（比如从网络上获取）。
转化为DOM ：将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
加载资源 ：接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理，简单起见，同时此节主讲CSS，所以这里对如何加载JavaScript不会展开叙述。
解析CSS，创建渲染树 ：浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节 ...
【FE学习-HTML】HTML重点汇总
参考教程：
《HTML&CSS设计与构建网站》
HTML 教程 - 网道 (wangdoc.com)
主要参考的是网道的教程，个人认为它比较新，仅记录个人理解的重点和不熟悉的地方
网页的基本概念⁍
HTML的标签和属性都是 不分大小写 的，onclick和onClick是同一个属性。
标签与元素⁍
浏览器渲染网页时，会把 HTML 源码解析成一个标签树，每个标签都是树的一个节点（node）。这种节点就称为 网页元素（element）。
“标签”和“元素”基本上是同义词，只是使用的场合不一样：
标签 是从 源码 角度来看
元素 是从 编程 角度来看
比如<p>标签对应网页的p元素。嵌套的标签就构成了网页元素的层级关系（父元素/子元素）。
块级元素，行内元素⁍
块级元素（block）⁍
默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。
例如： p
行内元素（inline）⁍
行内元素默认与其他元素在同一行，不产生换行。
例如： span、sup（上标）、sub（下标）、b、i
行内元素还有哪些呢？
网页的基本标签⁍
符合 HTML ...
nowcoder-前端面试题-HTML部分
该文章由自制脚本抓取 Augu1sto/getNowcoder-interviewList: 将牛客上的面试题集锦保存为markdown文件 (github.com)
对格式进行了一定调整，详细内容有待细化更新
浏览器页面有哪三层构成，分别是什么，作用是什么?⁍
构成：结构层、表示层、行为层
分别是：HTML、CSS、JavaScript
作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。
Discussion
HTML5的优点与缺点？⁍
优点：
a、网络标准统一、HTML5本身是由W3C推荐出来的。
b、多设备、跨平台
c、即时更新。
d、提高可用性和改进用户的友好体验；
e、有几个新的标签，这将有助于开发人员定义重要的内容；
f、可以给站点带来更多的多媒体元素(视频和音频)；
g、可以很好的替代Flash和Silverlight；
h、涉及到网站的抓取和索引的时候，对于SEO很友好；
i、被大量应用于移动应用程序和游戏。
缺点：
a、安全：像之前Firefox4的websocket和透明代理的实现存在严重的安全问题， ...
前端学习资源与计划
写在前面：
写这篇文章主要是为了激励自己x
其实之前一直从众想做java后端来着，但我发现我为数不多的项目经历无一不会关注界面怎么写。
最近面了一个开发岗之后决定直视自己的内心。
但是我对前端的了解也只是局限于不是很熟练的HTML/CSS，虽然写Electron-vue的项目有用Js和vue，但其实并不了解。。一边用一遍搜索来着。。还是要打好基础才好！
下面整理一下看到的资源和课程，加油努力啦！
学习资源⁍
要学什么⁍
HTML/CSS⁍
因为本科学过网页设计的课程，有一定HTML和CSS的基础，决定遵循[1]的建议，快速把下面几本书（前三本）先过一遍。当然CSS的基础会相对弱一些，因为记不住qaq，可能会码一些freecodecamp.org上的练习，记录在github仓库中，再找一些网站的总结。同时根据一些常见面试题查漏补缺。
代码环境主要是VSCode+Live server本地热启动服务器的方式实时预览。
《HTML&CSS设计与构建网站》（1-9&最后两章？）
HTML 教程 - 网道 (wangdoc.com)
《HTML5秘籍》（1 ...
Hexo建站与美化 | 关于Butterfly主题一些高级功能和修改方法的记录
标签外挂⁍
Butterfly 安裝文檔(三) 主題配置-1 | Butterfly
Tab⁍
使用方法⁍
123456789101112131415161718192021{% tabs Unique name, [index] %}<!-- tab [Tab caption] [@icon] -->Any content (support inline tags too).<!-- endtab -->{% endtabs %}Unique name : Unique name of tabs block tag without comma. Will be used in #id's as prefix for each tab with their index numbers. If there are whitespaces in name, for generate #id all whitespaces will replaced by ...
