使用工具:
Vscode使用:
需要下载插件:open in browser。这个插件可以快速打开浏览器。
选择文件夹有两种方式:选择打开文件、拖拽方式(这种最方便)
快捷键:快速生成Htm结构文件:!+回车 (注意是英文符号)
代码格式化:shift+alt+f
向上移动:Alt+up
快速复制一行(复制到上行):shift+Alt+up
一、HTML补充
HTML5 是超文本标记语言。它有两种表现形式:双标签(html、p、div) 和单标签(img、meta)。
<meta>是单标签 用来指定网页格式。常用:<meta charset="utf-8">
路径:
路径分为绝对路径和相对路径。绝对路径就是从d盘一直到目标所在。
相对路径:分为
父级路径: ../ 一般表示回退到上一个文件夹。然后找到图片所在位置。
子级路径: /1.jpg
同级路径: ./images/1.jpg
一般来说,子级路径和同级路径是一起使用的。比如上面一个例子。
超文本链接:<a>
内联元素和块级元素:
HTML5新版本 新增的标签:
新增标签的目的是为了利于SEO(搜索引擎)的排名。利于搜索爬虫快速找到。
需要注意的是:存在浏览器版本兼容性问题。
选择器的优先级:
二、CSS补充
CSS是层叠样式表,又叫 级联样式表,简称样式表。
语法:由两部分构成: 选择器;一条或多条声明。
CSS引入样式:
分为:
内联样式:<p style="~"> </p>
内部样式:在头部定义。<style> </style>
外部样式:<link rel="stylesheet" href=" .css">
选择器:
分为:
全局选择器:*{ } 它的优先级是最低的
元素选择器:根据HTML元素选择。而且一旦选择了,就是body部分所有这个元素的样式。
类选择器: 用圆点 . 定义。针对所需要的标签使用。注意命名:不能以数字开头。同一个标签可以使用多个类选择器,用空格隔开。例如:<p class="first second"></p>
ID选择器:在css里面用#定义。 <h2 id="content" /> #content{ } 。特点:它的名称只能使用一次。(和类选择器不同,类选择器可以使用多次。)
合并选择器: p,h2{ } 或者: .text,.title{ }
需要注意 选择器的优先级:行内样式优先级最高、同级类元素,后者会覆盖前者。
关系选择器:
分为
后代选择器:E F{ } 选择E里面所有的F标签
子代选择器:div > p { } 紧跟div后的p标签
相邻兄弟选择器:h3+p{ } 只有相邻的。隔一个都不行
通用兄弟选择器:E~F{ } 选择E之后的所有同级标签。
CSS盒子模型:
注意下边图像的四个概念。
外边距:透明的、消除边框外的区域。 (撑开自身,内容大小不变)//不是撑大噢
边框:
内边距:消除内容周围区域,是透明的。不过会因为背景的改变而改变,外边距不会。(它会撑大自身,内容大小不变。)
content:显示文本和图像。
弹性盒模型(flex box):
目的:为了适应不同屏幕的大小。提供一种更加有效的方式对一个容器中的子元素进行排列、对齐和分配 空白空间。
组成:弹性容器(flex-container)和弹性子元素(flex-item)组成。
设置display:flex;(定义 一个弹性容器) 默认是横向摆放。
flex-direction 属性:
row、row-reverse、column(垂直摆放)、column-reverse。
justify-content:
就是相当于 子元素是什么方向,那么它的样式就是什么方向。
align-items属性:
相当于 子元素是什么方向,它的方向就是子元素的纵向。它一般和justify-content搭配使用。搭配使用可以定义五个方向的位置。
小结:弹性盒模型只能定义5个位置的方向。如果需要指定位置存放。在后续,浮点元素和定位元素会有介绍。
扩展:flex元素,定义宽度权重。
例如:在一个父框架里面定义n个子框架。在子框架设置:flex:2 ;flex:1;flex:1。那么就是占用父框架的几分之几。
文档流:
存在几个问题:高矮不齐、底边对齐;元素之间无空隙;空格折叠。
文档流就是,普通定义的一些选择器,它们会在一个文档里面的样式。
为了解决文档流的问题,提出了脱离文档流的方法。
分别是:浮动、绝对定位、固定定位。
脱离文档流:
浮动:
定义: 它会脱离文档流,相当于在上层有一个布局。 (如果有两个图片都定义:float:left;它们都显示在上层,不会出现有空隙的情况。)
浮动也可以使 同级元素横向摆放。类似于:display:flex;
当浮动的元素超出容器的框架,它会被挤在容器下面。
不同点:浮动可以设置宽高,flex可以适应屏幕。
注意:浮动使元素脱离文档流,且只有左右浮动,无上下浮动。
清除浮动:
浮动的缺点:会造成 父元素高度的塌陷;后续元素受影响。
例如:如果没有设置 父框架的高度,它的框架是靠子元素撑开。而一旦设置子元素为浮动,那么父元素的高度就会变为0。而且后续添加的子元素或者同级元素,它会出现在原本父元素的位置,被设置为浮动的子元素所覆盖。
清除浮动的方法:
父元素设置高度; //它可以直接撑开框架,就不需要子元素撑开了。
对受影响的元素增加clear属性。例如:后续添加的子元素,使用clear:both;无论是左浮动还是右浮动都可以消除。
overflow清除浮动。 在父元素上添加:overflow:hidden; clear:both; 这种情况下,父元素不能设置高度。
伪对象方式。 在父元素添加: .container::after{ content:""; display:block; clear:both; }。同样,父元素不能设置高度。
小结:在没有对父元素设置高度的情况下,一般使用第三种清除浮动的方式。而第二种清除浮动方式,用于会受影响的子元素或者同级元素下才使用。
定位position:
分为:relative、absolute、fixed。后面两种方式可以脱离文档流。 它们有四个属性值:left、right、top、bottom。
绝对定位absolute:每设置一个绝对定位相当于单独设置一层。
固定定位fixed:它的特点是无论页面怎么流动,它都会固定在页面上。
相对定位和绝对定位 是相对于具有定位的父级属性进行位置调整,如果没有父级元素,就往上找,直到最底层是文档流。
z-index:决定堆叠顺序。谁大,谁放在上面。
CSS新特性:
圆角:border-radius
50%或者100%都表示圆形。它有四个值:分别表示的顺序是:左上,右下;右上,坐下。
border-radius:1px 2px 3px 4px;
回顾:margin:0 auto;表示图形 在屏幕居中。0表示上下位置不用管,auto表示左右自适应。
阴影:box-shadow
它也有四个值,分别的含义是:h-shadow水平阴影、v-shadow垂直阴影、blur(模糊)和color。
注意blur和color可以合起来 用rgba表示。rgba(0,0,0,0.1)。 0.1就是模糊度。
box-shadow:2px 2px rgba(0,0,0,0.1);
动画:
是指 使元素从一种样式逐渐变化为另一种样式的效果。(可以改变任意次)
需要指定变化的时间:两种方式:
使用关键词: from (等同于0%)、to(等同于100%);使用百分号:0%表示动画开始、100%表示动画完成。
@keyframes创建动画:
@keyframes myAnim{ 0% {top: 0px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 200px;} 100% {top: 0px;} }
animation执行动画: p{ animation:myAnim 5s linear 0s infinite} //分别表示动画器名称、持续时间、速度(匀速)、延迟时间、循环次数(无数次)
还可以加上鼠标触碰就停止的效果:p:hover { animation-play-state:paused;}
执行动画的一些详情值见下图所示:
文章来源地址https://www.toymoban.com/news/detail-600778.html
媒体查询:
会根据设备的大小 自动识别加载不同的样式。
一般都是在开头设置meta标签:使用设备的宽度作为视图宽度并禁止初始的缩放。(比如:一些在pc屏幕设置宽度后,在缩放,它会等比例缩放,而不是,按照我们需要的样式不变。)
<meta name="viewport" content=" width=device-width ,initial-scale=1,maximum-scale,user-scale=1 ">
媒体查询的语法:
@media screen and()
雪碧图Css Sprite:
也叫做css精灵图。
原理:通过background-image 引入背景图片;通过background-position 将背景图片移动到自己需要的位置。
注意:display:block;表示将一个行内联元素变为块级元素。
字体图标:
当使用图标时,我们可能遇到图片失真的情况,也可能因为图片的数量很多,使页面的加载很慢。继而提出了字体图标的方式。
它的用法:可以参考图标库。从图标库下载代码,然后复制到我们的项目中直接使用。
iconfont-阿里巴巴矢量图标库
如果要改变字体图标的样式,建议新建一个类。例如下图:
文章来源:https://www.toymoban.com/news/detail-600778.html
到了这里,关于前端知识点视频补充的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!