
前端基础
文章平均质量分 66
前端基础
codest
这个作者很懒,什么都没留下…
展开
-
Web前端HTML5+CSS3知识点(6)css入门和基本语法(一)
1. CSS简介结构(html)表现(css)行为(js)CSS:层叠样式 层叠:蛋糕、化妆.网页实际是一个多层的结构,通过css为每一层设置样式。但我们最终能看到网页最上边的一层。使用CSS来修改样式:第一种:style属性。名字:value .内联样式,缺点不方便维护。耦合太紧。<p style="color:red;font-size: 60px;"> codest</>第二种:样式写到的head的style标签。内部样式表。通...原创 2021-07-02 10:32:07 · 103 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(12)css入门--背景及表单
1. 背景1.background-color-设置背景颜色2.background-image-设置背景图片3.background-repeat-设置背景的重复方式-可选值:repeat(默认值,背景会沿着x轴、y轴重复平铺)、repeat-x(沿着x轴重复)、repeat-y(沿着y轴重复)、no-repeat(不重复)4.background-position-设置背景的位置-方位词可选值:top、right、center、bottom、left-使用方位词时,必须使用两个.原创 2021-07-07 10:53:34 · 326 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(13)css入门-过渡及动画
1 过渡transition的作用通过过渡,可以指定一个属性发生变化时的切换方式。通过过渡,可以创建一些非常好的效果,提升用户的体验。2.transition的属性值transition-property:指定需要过渡的属性,多个属性间用逗号隔开,如果所有属性都需要过渡,则可以使用all关键字。大部分有数值的属性,都支持过渡效果(能够计算的值)。注意:过渡时,必须从一个有效值向另外一个有效值进行过渡。ransition-duration:指定需要过渡的时间。时间单位包括秒和毫秒,1s=1000ms,原创 2021-07-07 09:35:49 · 343 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(11)css入门--弹性盒
1. flex(弹性盒、伸缩盒)简介-弹性盒是css中的又一种布局手段,它主要用来代替浮动来完成页面的布局。-flex可以使元素具有弹性,可以让元素根据页面大小的改变而改变。弹性容器(想象为弹簧,可伸可谈)使用了flex可以不用float解决了很多问题。要设置弹性盒,必须先将一个元素设置为弹性容器。我们通过 display来设置弹性容器display-flex:设置为块级的弹性容器display-inline-flex:设置为行内的弹性容器(用的少)弹性元素弹性容器的子元素是弹性元素(弹性..原创 2021-07-06 12:03:34 · 234 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(11)css入门---less
1.less简介.div.box$*3css中也能使用一些强大的功能,比如css原生也支持变量的设置,在html中可以用 --变量名:变量值来指定,又比如可以使用calc()函数来计算某个值。但是css中的新特性兼容性不好,实际上这些新特性并不怎么用。使用 var(--变量名)less是一门CSS的预处理语言less是CSS的增强版,通过less我们可以编写更少的代码,实现更强大的功能。在less中添加了许多新特性,增加了对变量的支持、对mixin的支持。less...原创 2021-07-05 17:49:00 · 119 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(10)css入门---字体
八、字体族1.字体相关的样式-color:设置字体的颜色-font-size:字体的大小,em(相当于当前元素的font-size),rem(相当于根元素的font-size)-font-family:指定字体族的、字体格式,可选值:serif(衬线字体)、sans-serif(非衬线字体)、monospace(等宽字体)-指定字体的类别,浏览器会自动使用该类别下的字体。-font-family可以同时指定多个字体,多个字体间使用逗号隔开,字体生效时优先使用第一个,第一个无法使用则使用第二个,依原创 2021-07-05 10:12:53 · 159 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(9)css入门---定位
p69一、定位(position)1.定位是一个更加高级的布局手段。2.通过定位可以让元素摆放在页面的任意位置。3.使用position属性来设置定位。4.可选值:(1)static(默认值,元素是禁止的,没有开启定位)(2)relative (开启元素的相对定位) (3)absolute(开启元素的绝对定位) (4) fixed(开启元素的固定定位) (5)sticky(开启元素的粘滞定位)二、相对定位(relative)1.当我们元素的position元素的属性值设置为relative原创 2021-07-04 10:28:36 · 106 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(8)css入门和基本语法(三)
一、盒子的大小1.盒子的大小1.默认情况下,盒子的可见框大小由内容、内边距、边框共同决定。-box-sizing:用来设置盒子大小的计算方式(设置width和height的作用范围)。可选值:content-box(默认值,宽度和高度用来设置内容区的大小)border-box(宽度和高度用来设置整个盒子的可见框大小,width和height指的是内容区、边框、内边距的总大小)2 轮廓、阴影和圆角outline-用来设置元素的轮廓线,用法与border一模一样。轮廓和边块不同点.原创 2021-07-04 08:19:59 · 62 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(7)css入门和基本语法(二)
一、样式的继承1、样式的继承定义我们为一个元素设置的样式,也会应用到它的后代元素。继承是发生在祖先和后代之间的。优点:继承的设计是为了方便我们的开发,利用继承我们可以将一些通用的样式设置到共同的祖先元素上,这样我们只需要设置一次,就可以让所有元素都获取到该样式。注意:并不是所有的样式都会被继承,比如背景、布局等相关的这些样式都不会被继承。2.选择器的权重解决选择器冲突的问题:1.当我们通过不同的选择器选中一个相同的元素,并且为相同的样式设置不同的值时,...原创 2021-07-03 08:00:01 · 128 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(1)字符编码
一、字符编码codest->110000110110(编码)110000110110->codest(解码)-所有的数据在计算机存储时都是以二进制形式存储的,文字也不例外。所以一段文字存储到内存时,都需要转换成为二进制。当我们读取文字时,计算机会将编码转换成字符,供我们阅读。二、字符集类比密码本子编码和解码所采用的规则如果编码和解码所采用的字符集不同,则会出现乱码问题常见的字符集:UTF-8(万国码)、ASCII(美国)、ISO88591(欧洲)、GB2312(中国国标原创 2021-07-01 10:39:40 · 144 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(5)音视频
1.音频播放1.audio标签:用来向页面中引入一个外部的音频文件的。2.音视频文件引入时,一般情况下不允许用户自己播放。3.controls属性:是否允许用户自己播放(不用赋值)。4.autoplay属性:音频文件是否自动播放(不用赋值),如果设置了autoplay,则音乐在打开页面时会自动播放,但目前来讲,大部分浏览器都不会自动对音乐进行播放。5.loop属性:对音频进行循环播放。6.除了通过src来指定外部音频的路径,还可以通过source来指定,如:<source …>。原创 2021-07-01 22:44:22 · 200 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(4)超链接和相对路径
1. 超链接页面跳转。使用<a>标签。也是行内元素。在a标签中可以嵌套它自身外的任何元素。-href属性,用来指定跳转的路径。-href的值可以是外部网页的一个地址,也可以写一个内部页面的地址。2.跳转到当前页面其他位置-最好使用相对路径2. 相对路径1.一般当我们需要跳转到一个服务器的内部页面时,都会使用相对路径2.相对路径都会使用./或…/开头,当没有写./或…/时,默认使用了. 表示当前文件所在的目录,表示当前文件所在目录的上一级目录。3. 超链接属性1.t原创 2021-07-01 22:28:50 · 766 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(3)语义化标签
1. 概述html :负责结构应该关注他的语义,而不是表现(长什么样子)css:负责表现 H1 H22.标题标签 6级H1-H6重要性递减。H1最重要,仅次于title ,一般情况标题标签只会使用到H1-H3, H4-H6很少用。在页面中独占一行,称为块元素。注意hgroup的使用,把标题放到一起。3.P标签表示一个段落,是有间距,标题标签都是块元素。注意:em标签用于语音语义的加重。(表现是变为斜体,但是表现不重要),注意他是行内元素,不独占一行。str...原创 2021-07-01 21:49:34 · 271 阅读 · 0 评论 -
Web前端HTML5+CSS3知识点(2)实体和meta标签
实体:1.实体概念:在网页中编写的多个空格,默认情况下,会被浏览器解析为一个空格在HTML中有些时候,我们不能直接书写一些特殊符号,比如多个空格,比如字母两侧的<,>号等(因为这些在网页中有一些特殊的含义、语法)。如果我们需要在网页中书写特殊的符号,则需要使用HTML中的实体(转义字符)2.实体写法:&实体名字;,如: ;(空格)、>;(大于号)、<;(小于号)、©;(版权),可利用w3school查询me原创 2021-07-01 12:53:55 · 188 阅读 · 0 评论