前端2——巩固

发表于 更新于 分类于 ， 阅读次数：

vscode

代码格式化：shift+alt+f

向上或向下移动一行:Alt+Up或Alt+Down

快速开始新一行：ctrl+enter

快速复制一行代码:Shift+Alt+Up 或Shift+Alt+Down

快速保存:Ctrl +S

快速查找:Ctrl + F

快速替换:Ctrl+ H

快速移动一行 alt + ↓或↑

多光标： alt + 鼠标左键

html5

合并单元格

  • 水平合并：colspan
  • 垂直合并：rowspan

h5新标签

  1. <header></header> 头部
  2. <nav></nav> 导航
  3. <section></section>定义文档中的节,比如章节、页眉、页脚
  4. <aside></aside> 侧边栏
  5. <footer></footer> 脚部
  6. <article></article> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

查漏补缺

<figure>元素表示文档流中独立的内容块。这个内容通常与主文档相关，但可以被移动到文档的其他位置（如侧边栏、脚注或独立的附件）而不会影响理解文档的其余部分。

<section>元素用于定义文档中的一个区域（section），它通常表示文档中的一个主题或内容块。

图像标题（figcaption）元素用于添加标题以描述 figure 元素中包含的图像。<figcaption> 必须是 <figure> 元素的子元素，并且它必须是 <figure> 中的第一个或最后一个子元素

“URL” 是 “Uniform Resource Locator” 的缩写，中文意思是 “统一资源定位符”。它是一种用于在互联网上定位和访问资源（如网页、图像、视频等）的地址。

fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起。 fieldset 元素是块级元素，这意味着它们出现在新的一行上。

legend 元素充当 fieldset 元素中内容的标题。 它为用户提供了应该在表单的该部分中输入什么的上下文。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />是一个非常重要的 HTML 元标签，用于控制网页在移动设备上的布局和显示方式

article和section

article标签表示文档、页面、应用或网站的一部分，具有独立性和完整性。它通常包含一些内容，如新闻报道、博客文章、论坛帖子等，这些内容可以被单独地分享、链接和索引。

section标签则表示文档或应用的一部分，但不具有独立性和完整性。它通常用于组织内容，将页面或应用分成不同的部分，例如头部、主体、脚注等。

method 属性指定了如何将表单数据发送到 action 属性中指定的 URL。 表单数据可以通过 GET 请求作为 URL 参数发送（method="get"）或通过 POST 请求作为请求正文中的数据发送（method="post"）。

给密码 input 元素添加 pattern 属性，要求输入匹配 [a-z0-5]{8,}。上面是一个正则表达式，匹配 8 个以上的小写字母或数字 0 到 5。

<select> 和 <option> 是 HTML 中用于创建下拉列表的元素

<textarea> 是 HTML 中的一个表单元素，用于多行文本输入，允许用户输入和编辑大量文本。

英文全称记忆

<ul> ： “Unordered List”

<li> ： “List - item”

src： “source”

css text-align: “text alignment”（文本对齐方式）

link rel:relationship

<hr>:“Horizontal Rule”

css3

查漏补缺

opacity 是 CSS 中用于控制元素透明度的属性。它可以设置一个元素的透明度级别，取值范围从 0（完全透明）到 1（完全不透明）

box-shadow 属性允许你在元素周围应用一个或多个阴影。box-shadow: offsetX offsetY blurRadius color;

linear-gradient 是 CSS 中用于创建线性渐变背景的属性。它允许你在元素的背景中定义多种颜色之间的平滑过渡效果

hsla（Hue色相, Saturation饱和度, Lightness, Alpha透明度）是一种在 CSS 中定义颜色的方式，基于 HSL（色相、饱和度、亮度）颜色模型，并且允许设置透明度（alpha 值）。

vh 是 CSS 中的一种相对长度单位，表示视口高度（Viewport Height）的百分比。具体来说，1vh 等于视口高度的 1%。视口是指浏览器窗口中可见的部分，不包括工具栏、地址栏等非内容区域。

em 是 CSS 中的一种相对单位，用于表示元素的字体大小（font-size）的倍数。具体来说，1em 等于当前元素的字体大小。例如，如果一个元素的字体大小为 16px，那么 1em 就等于 16px。

rem（Root Em）是 CSS 中的一种相对单位，表示相对于根元素（html 元素）的字体大小（font-size）的倍数。

在 CSS 中，cursor 属性用于定义鼠标指针位于元素上时的形状或图标。它对于改善用户体验非常重要，因为它为用户提供了视觉反馈，让他们知道可与页面上的不同元素进行哪些操作。

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    z-index: 2;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
    position:absolute;
    z-index: 1;
}

css3新特性

圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”

border-radius 属性，可以使用以下规则：

  1. 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
  2. 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  3. 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  4. 一个值： 四个圆角值相同

阴影

box-shadow 向框添加一个或多个阴影。

1
box-shadow: h-shadow v-shadow blur color;
值 描述
h-shadow 必选，水平阴影的位置
v-shadow 必选，垂直阴影的位置
blur 可选，模糊距离
color 可选，阴影的颜色

动画

使用@keyframes规则，你可以创建动画

1
2
3
4
5
6
7
8
9
10
11
@keyframes name {
    from|0%{
    	css样式
    }
    percent{
    	css样式
    }
    to|100%{
    	css样式
    }
}

name：动画名称，开发人员自己命名；

percent：为百分比值，可以添加多个百分比值；

animation执行动画

1
animation: name duration timing-function delay iteration-count direction;
值 描述
name 设置动画的名称
duration 设置动画的持续时间
timing-function 设置动画效果的速率（如下）
delay 设置动画的开始时间（延时执行）
iteration-count 设置动画循环的次数，infinite为无限次数的循环
direction 设置动画播放的方向（如下）
animation-play-state 控制动画的播放状态：running代表播放，而paused代表停止播放
timing-function值 描述
ease 逐渐变慢（默认）
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
direction值 描述
normal 默认值为normal表示向前播放
alternate 动画播放在第偶数次向前播放，第奇数次向反方向播放

切换背景颜色

1
<div class="animation"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite;
}
.animation:hover {
    animation-play-state: paused;
}
@keyframes anima {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blueviolet;
    }
}

设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

1
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

参数解释

  1. width = device-width 宽度等于当前设备的宽度
  2. initial-scale 初始的缩放比例（默认设置为1.0）
  3. maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）
  4. user-scalable 用户是否可以手动缩放（默认设置为no）

JS

querySelector()

ES6

常用命令行工具有两种

  1. CMD 命令行工具
  2. PowerShell 命令行工具

CMD命令行

  1. 打开命令行窗口
    1. win：左下角开始，找到运行，点击，输入cmd，回车
    2. win：win+r 快速打开命令行窗口
  2. 选择盘符：盘符名加冒号E:
  3. 查看盘符及目录下文件与文件夹：win:dir
  4. 清空命令行信息：win:cls
  5. 进入文件夹或目录：cd 文件夹名称
  6. 返回到上一级目录：cd ../
  7. 快速补全目录或文件夹名称：tab
  8. 创建文件夹：mkdir 文件夹名称
  9. 查看历史输入过的命令：上下按键

PowerShell

  1. 打开方式
    1. 在开始位置搜索PowerShell打开
    2. 在对应目录按住shift+右键，打开
  2. 其他保持一直

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现，通常场合，这两个词是可以互换的。

ECMAScript 6（以下简称 ES6）是 JavaScript 语言的标准，在 2015 年 6 月发布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

TypeScript

为什么你应当使用 TypeScript? TS 十分钟快速入门_哔哩哔哩_bilibili

参考视频和网站推荐

【HTML+CSS+JS+Vue】比大学课程还详细的Web前端教程，整整180集，学完即可兼职就业！附学习文档PDF，随时都能学_前端开发_WEB入门_哔哩哔哩_bilibili

Learn to Code — For Free — Coding Courses for Busy People