这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

学习前端已经有一年时间了，前端给我最大的印象就是知识点非常多，在本节 HTML、CSS、JS 学习中，突然发现自己其实最基础的三件套掌握的其实也不是很好，基础打不牢，后期很多东西容易出问题，尤其是 HTML 的许多标签没见过或者忘记怎么用了，这次的笔记主要记录自己目前遗漏或者忘记的知识点，当然字节的课程主要是总结课，还需要多逛一些 MDN、W3C 等网站重新学一遍基础知识。

HTML

列表

有序列表：

<h1>票房排行榜</h1>
<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ol>

有顺序的列表

票房排行榜

阿凡达

泰坦尼克号

复仇者联盟

无序列表：

<h1>购物清单</h1>
<ol>
    <li>苹果</li>
    <li>葡萄</li>
    <li>橙子</li>
</ol>

无顺序的列表

购物清单

苹果

葡萄

橙子

定义列表：

<dl>
    <dt>导演:</dt>
    <dd>陈凯歌</dd>
    <dt>主演:</dt>
    <dd>张国荣</dd>
    <dt>上映日期:</dt>
    <dd>1993-01-01</dd>
</dl>

整合列表

导演:

陈凯歌

主演:

张国荣

上映日期:

1993-01-01

链接

target=“_blank” 代表新打开页面，而不是替换当前页面

<a href="https://blog.plumbiu.club">我的博客</a>
<a href="https://blog.plumbiu.club" target="_blank">我的博客</a>

媒体标签

controls 代表有控制界面

<img src="xxx" alt="图片加载失败的文字" width="400" />

<audio src="xxx" controls></audio>

<video src="xxx" controls></video>

输入标签

input 的type 属性有很多值，同时有关时间数字的 type 类型会有 min 和 max 属性

<input placeholder="默认显示文本" />
<input type="range" />
<input type="number" min="1" max="10" />
<input type="date" min="2018-02-10" />
<textarea>Hey</textarea>

多选

checked 属性表示默认选中

<p>
    爱好:
    <label>
        唱<input type="checkbox" />
    </label>
    <label>
        跳<input type="checkbox" checked />
    </label>
    <label>
        rap<input type="checkbox" checked />
    </label>
    <label>
        篮球<input type="checkbox" checked />
    </label>
</p>

单选

type = “radio”

<p>
    性别:
    <label>
        男<input type="radio" name="sport" />
    </label>
    <label>
        女<input type="radio" name="sport" />
    </label>
</p>

下选框

<select>
    <option></option>
    <option></option>
    <option></option>
</select>

提示输入

<input list="countries" />
<datalist id="countries">
    <option>喜羊羊</option>
    <option>沸羊羊</option>
    <option>懒羊羊</option>
</datalist>

文本标签

cite 表示引用文字的来源

<blockquote cite="xx">
    沸羊羊你真粗鲁
</blockquote>

cite 短引用：表示书名或某个章节

q 短引用：表示引用的具体内容

我最喜欢的书是<cite>小王子</cite>

在<cite>第一章</cite>，我们说<q>字符串是不可变量</q>

code 代码标签

<code>const</code>

引用多行代码

<pre>
    <code>
        const arr = [1, 2, 3, 4, 5]
        arr.forEach(item => {
            console.log(item)
        })
    </code>
</pre>

内容划分

<plumbiu.github.io/images/QQ截图20230115102418.png" style="zoom:50%;" />

CSS

选择器(Selector) {
    属性(Property): 属性值(Value)
    (声明(Declaration))
}

h1 {
    color: white;
    font-size: 14px;
}

CSS3新增选择器

属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者id选择器

注意：类选择器、属性选择器、伪类选择器权重为10。

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素

nth-child(n) 选择某个父元素的一个或多个特定的子元素（n可以使数字、关键字和公式）

如果n是数字，就是选择第n个元素

nth-child(n) 中的 n 可以是关键字：even(偶数)、odd(奇数)

n 可以是公式：常见的公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素或者超出了元素的个数被忽略）

区别：

nth-child 对父元素所有孩子排序选择（序号是固定的），先找到第 n 个孩子，然后看看是否和E匹配

nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E，然后再根据 E 找第 n 个元素

伪元素选择器

伪元素选择器可以帮我们利用 CSS 创建新标签元素，而不需要 HTM L标签，从而简化 HTML 结构。

/* CSS3语法 */
element::before { 样式 }

/* （单冒号）CSS2 过时语法（仅用来支持IE8） */
element:before { 样式 }

/* 在每一个p元素前插入内容 */
p::before { content:"Hello world!" }

注意∶

before和 after 创建一个元素，但是属于行内元素

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

语法: element::before

before 和 after 必须有content 属性

before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        /* 默认是行内元素，不能设置大小，要转化或者定位或者浮动 */
        div::before {
            /* 这个content必须要写 */
            content:"我";
            width: 30px;
            height: 40px;
            background-color: purple;
            display: inline-block;
        }
        div::after {
            content: "吴彦祖";
        }
    </style>
</head>
<body>
    <div class="div">
        是
    </div>
</body>
</html>

伪元素清除浮动

.clearfix::after {
    content: "";
    display:  block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix::before,.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear:both;
}

CSS3盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有两个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

box-sizing:content-box 盒子大小为 width + padding + border （默认的）

box-sizing:border-box 盒子大小为 width

如果盒子模型我们改为了 box-sizing: border-box ，那么 padding 和 border 就不会成大盒子了（前提是 padding 和 border 不会超过 width 宽度）

CSS3其他特性

图片变模糊

CSS3 滤镜 filter：filter， CSS 属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数();/* 例如:filter:blur(5px); blur模糊处理 数值越大越模糊 */

计算盒子宽度 calc 函数：

calc() 此 CSS 函数让你在声明CSS属性值时执行一些计算。

width:calc(100% - 80px);

括号里面可以使用 + - * / 运算（两边都要有空格）

CSS3过渡

过渡（transition）是CSS3具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过度动画：是从一个状态渐渐地过渡到另一个状态

可以让我们页面更好看，动感十足，不支持低版本浏览器

通常和 :hover 一起搭配使用

transition: 要过度的属性 花费时间 运动曲线 何时开始;

解释：

属性︰想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。

花费时间:单位是秒(必须写单位)比如0.5s

运动曲线:默认是ease(可以省略)

何时开始︰单位是秒(必须写单位)可以设置延迟触发时间默认是0s（可以省略)

注意想要写多个属性，要用,进行分割

CSS3 2D转换

转换(transform)是CSS3中最具有颠覆性的特征值之一，可以实现元素的位移、旋转、缩放等效果

转换(transform)可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

2D转换是改变标签在二维平面上的位置和形状的一种技术，网页二维坐标和数学中的有所区别

移动 translate

2D 移动是 2D 转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法：

transform: translate(x,y); /* 或者分开写 */
transform: translate(n);
transform: translate(n);

重点：

定义2D转换中的移动，沿着X和Y轴移动元素
translate 最大的优点：不会影响到其他元素的位置
translate 中的百分比单位是相对于自身元素的 translate(50%,50%);
对行内标签没有效果

2D转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针或者顺时针旋转。

语法：

transform:rotate(度数)

注意：

rotate 里面跟度数，单位是 deg，比如 rotate(45deg)
角度为正时，顺时针旋转，负数逆时针
默认旋转中心点是元素的中心点

转换中心点 transform-origin

我们可以设置元素转换的中心店

语法：

transform-origin: x y;

注意：

后面的参数x y用空格隔开
x y 默认转换的中心点是元素的中心点 (50% 50%)
还可以给 x y 设置像素或者方位名词 (top bottom left right center )

缩放scale

语法：

transform: scale(x,y);
/* x宽度，y高度 */

注意：

其中的 x 和 y 用逗号分隔
transform:scale(1,1) 宽和高都放大一倍，相对于没有放大
transform:scale(2,2) 宽和高都放大了2倍
transform:scale(2) 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
transform:scale(0.5,0.5)缩小
sacle 缩放最大的优势可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

JavaScript

JS 编码原则

各司其职：

HTML/CSS/JS 各司其职
应当避免不必要的由 JS 直接操作样式
可以用 class 表示状态
纯展示类交互寻求零 JS 方案

组件封装：

组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计(HTML)、展示效果(CSS)、行为设计(JS)
重构：插件化、模板化、抽象化(组件封装)

过程抽象

过程抽象/HOF/装饰器
命令式/声明式

leftpad

最开始的

function leftpad(str, len, ch) {
    str = String(str)
    var i = -1
    if(!ch && ch !== 0) ch = ''
    len = len - str.length
    while(++i < len) {
        str = ch + str
    }
    return str
}

优化后的

function leftpad(str, len, ch) {
    str = "" + str
    const padLen = len - str.length
    if(padLen <= 0) {
        return str
    }
    return ("" + ch).repeat(padLen) + str
}

优化后的版本代码更加整洁，而且 repeat 方法默认采用快速幂形式，效率更高

前端三件套拾遗 ｜ 青训营笔记