前端知识点视频补充

这篇具有很好参考价值的文章主要介绍了前端知识点视频补充。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用工具:

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-阿里巴巴矢量图标库

前端知识点视频补充,前端

 

如果要改变字体图标的样式,建议新建一个类。例如下图:

前端知识点视频补充,前端

 

到了这里,关于前端知识点视频补充的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端一些知识点

    由来 cookie设计的初衷是用于维护HTTP状态 原理 浏览器首先发送一个无状态请求到服务端 服务端带上cookie返回 浏览器后面的请求都会带上cookie(如果客户端或者服务端对cookie没有操作的话) 生成机制 服务端生成,在Http Response Header 中 Set-Cookie 客户端生成,通过 document.cookie设

    2024年03月13日
    浏览(49)
  • 关于前端的那些知识点

    2024年04月22日
    浏览(38)
  • 最全前端 HTML 面试知识点

    1.1.1 定义 超文本标记语言(英语:HyperTextMarkupLanguage,简称:HTML)是一种用于创建网页的标准标记语言 HTML元素是构建网站的基石 标记语言 (markup language ) 由无数个标记(标签、tag)组成 是对某些内容进行特殊的标记,以供其他解释器识别处理 使用标记的文本会被识别为“

    2024年02月20日
    浏览(45)
  • h5视频落地页知识点整理

    1.引入微信SDK script src=\\\"http://res.wx.qq.com/open/js/jweixin-1.6.0.js\\\"/script 2.     document.addEventListener(\\\'WeixinJSBridgeReady\\\', function() {         const timer = setInterval(() = {         WeixinJSBridge.call(\\\'hideOptionMenu\\\')         console.log(\\\'hideoptionmenu\\\')         const videoPlayer = document.querySelector(`#videoele`)

    2023年04月22日
    浏览(39)
  • 前端Vue3框架知识点大全

    Vue.js是一种流行的JavaScript前端框架,它的第三个版本Vue3带来了许多令人兴奋的新特性和改进。 1、响应式数据 : Vue 3采用了基于Proxy的响应式系统,相比Vue 2中的Object.defineProperty,Proxy提供了更强大和灵活的拦截器,可以捕获对象的各种操作。这使得Vue 3的响应式系统更加高效

    2024年02月11日
    浏览(49)
  • 前端工作中常用 CSS 知识点整理

    1.1文字溢出省略号 文字单行溢出: 多行文字溢出: 1.2css变量 CSS变量 又称 CSS自定义属性 ,通过在 css 中自定义属性 --var 与函数 var() 组成, var() 用于引用自定义属性。谈到为何会在 CSS 中使用变量,以下使用一个示例讲述。 1.3渐变 渐变分为 线性渐变 、 径向渐变 ,这里笔者直

    2024年02月15日
    浏览(58)
  • 前端知识点——快看看忘了多少

    说说对浏览器缓存的了解 浏览器缓存是一种用于存储Web页面资源的临时存储机制,旨在提高网页加载速度和减少对服务器的请求。当你访问一个网站时,浏览器会下载并保存页面的各种资源,如HTML、CSS、JavaScript文件、图像以及其他多媒体内容。这些资源会被缓存在本地,以

    2024年04月16日
    浏览(42)
  • 【前端】快速掌握HTML+CSS核心知识点

    1.HTML核心基础知识 1.1.编写第一个HTML网页 快捷键生成html模板 标签含义 标签名 定义 说明 HTML标签 页面中最大的标签,根标签 文档头部 注意在head标签中我们必须设置的标签是title 文档标题 让页面拥有一个属于自己的标题 文档主体 元素包含文档的所有内容,页面内容 1.2.超

    2024年02月12日
    浏览(48)
  • 前端知识点、技巧、webpack、性能优化(持续更新~)

    可以把  图片转换成  base64  放在src里面   减少服务器请求  但是图片会稍微大一点点 以上的方法不需要一个一个自己转化 可以在webpack  进行 性能优化   (官网有详细描述)

    2024年03月10日
    浏览(46)
  • 今日前端十个知识点——CSS篇(二)

    1、伪元素和伪类 伪元素:在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成,只在外部显示可见,不会在文档的源代码中找到它们 伪类:将特殊的效果添加到特定选择器上,它是已有元素上添加类别,不会产生新的元素 2、line-height的赋值方式

    2024年01月24日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包