前端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新标签
<header></header>头部<nav></nav>导航<section></section>定义文档中的节,比如章节、页眉、页脚<aside></aside>侧边栏<footer></footer>脚部<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 | .box1{ |
css3新特性
圆角
使用 CSS3 border-radius 属性,你可以给任何元素制作
“圆角”
border-radius 属性,可以使用以下规则:
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
- 一个值: 四个圆角值相同
阴影
box-shadow 向框添加一个或多个阴影。
1 | box-shadow: h-shadow v-shadow blur color; |
| 值 | 描述 |
|---|---|
| h-shadow | 必选,水平阴影的位置 |
| v-shadow | 必选,垂直阴影的位置 |
| blur | 可选,模糊距离 |
| color | 可选,阴影的颜色 |
动画
使用@keyframes规则,你可以创建动画
1 | @keyframes name { |
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 | .animation { |
设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
1 | <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> |
参数解释
width = device-width宽度等于当前设备的宽度initial-scale初始的缩放比例(默认设置为1.0)maximum-scale允许用户缩放到的最大比例(默认设置为1.0)user-scalable用户是否可以手动缩放(默认设置为no)
JS
querySelector()
ES6
常用命令行工具有两种
CMD命令行工具PowerShell命令行工具
CMD命令行
- 打开命令行窗口
- win:左下角开始,找到运行,点击,输入
cmd,回车 - win:
win+r快速打开命令行窗口
- win:左下角开始,找到运行,点击,输入
- 选择盘符:盘符名加冒号
E: - 查看盘符及目录下文件与文件夹:
win:dir - 清空命令行信息:
win:cls - 进入文件夹或目录:
cd 文件夹名称 - 返回到上一级目录:
cd ../ - 快速补全目录或文件夹名称:
tab - 创建文件夹:
mkdir 文件夹名称 - 查看历史输入过的命令:上下按键
PowerShell
- 打开方式
- 在开始位置搜索
PowerShell打开 - 在对应目录按住
shift+右键,打开
- 在开始位置搜索
- 其他保持一直
ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现,通常场合,这两个词是可以互换的。
ECMAScript 6(以下简称 ES6)是 JavaScript 语言的标准,在 2015 年 6 月发布。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
TypeScript
为什么你应当使用 TypeScript? TS 十分钟快速入门_哔哩哔哩_bilibili
参考视频和网站推荐
【HTML+CSS+JS+Vue】比大学课程还详细的Web前端教程,整整180集,学完即可兼职就业!附学习文档PDF,随时都能学_前端开发_WEB入门_哔哩哔哩_bilibili


