Web前端HTML+CSS笔记
上课学完一条一条记的
优惠券已抵扣
余额抵扣
还需支付
¥19.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
吴椰啵
快乐星球驾驶员
展开
-
34-grid网格布局
依旧支持父元素jusity-conten:space-between;子元素支持 margin等等。注意与table不同的是,grid网格布局是撑开格子的大小,只是看着效果和单元格类似。设为网格布局以后,容器子元素(项目)的。设置父元素容器为grid网格布局。中控制网格大小,和起始位置。原创 2024-01-03 22:54:31 · 336 阅读 · 0 评论 -
33-transform-style:preserve-3D;(3D转换),动画animation
取值:像素单位值,数值一般在800-1200px(透视和3D没有关系,只是为了看Z轴)空间:从坐标轴的角度定义的,x,y,z三条坐标轴构成了一个立体空间,transform属性不止能实现2D转换,也可以制作3D立体效果。方向旋转,负数表示沿对应坐标轴逆时针方向旋转。(取值为正负数均可,像素单位值px,百分比%)X轴正值是从上往下旋转,负值是从下往上旋转;Y轴正值是从左往右旋转,负值是从右往左旋转;Z轴正值是顺时针旋转,负值是逆时针旋转。透视也叫视距,人眼睛到屏幕的距离。属性:(添加给父级)原创 2023-12-24 12:10:57 · 450 阅读 · 0 评论 -
32-transform变换之translate平移,rotate旋转,origin盒子中心,scale缩放
方位名词:left,top,right,bottom,center。角度单位是deg ,取值正负都可以;取值为正,顺时针旋转。取值为负,逆时针旋转。transform:translate(X轴平移距离,Y轴平移距离);平面转换transform,改变盒子在平面内的变换(平移,旋转,缩放)scale值小于1,表示缩小。一般情况下,只为scale设置一个值,表示x轴和y轴等比例缩放。transform:scale(缩放倍数);2)%百分比(参照盒子的自身尺寸)3)X轴正向为右,Y轴正向为下。原创 2023-12-24 10:19:57 · 490 阅读 · 0 评论 -
31- :root vw和vh em和rem,英文单词字母大小写转换
1rem 是:root字体大小的倍数,经过计算也会被转成px。1rem * (root下de)font-size。2. 1em是字体大小的倍数,经过计算后会被转为px。原创 2023-12-16 16:09:23 · 381 阅读 · 0 评论 -
30-伪对象选择器 (伪对象选择器最初是一个:,后来为了区分伪类选择器,就变成两个::)
需要注意的是,::selection只能定义被选择时的。属性一起使用,并且必须定义content属性。1.4 设置对象被选择时的样式。(IE11尚不支持定义该属性)。1.3默认显示的文字。原创 2023-12-16 16:01:35 · 26 阅读 · 0 评论 -
29-empty,锚点,target,表单元素相关伪类选择器
4.2 匹配用户界面上处于选中状态的元素。(用于input type为radio。4.3 设置在打印时页面容器第一页使用的样式。2.锚点:可以实现内部文档的跳转。4. 表单元素相关的伪类选择器。该伪类选择符只允许定义。4.1 不可用。原创 2023-12-16 14:49:00 · 29 阅读 · 0 评论 -
28-属性选择器,伪类选择器,A链接的状态
4.子类选择器 :first-child (按照子元素的顺序)5.子类选择器(2) :nth-of-type。原创 2023-12-14 22:11:44 · 344 阅读 · 0 评论 -
27-flex-grow,flex-shrink,flex-basis,flex复合写法,order,flex-wrap
2.flex-shrink:弹性元素的缩小比例,默认值为1,即如果空间不足,该项目将缩小。1.flex-grow:弹性元素的放大比例,默认值为0,即如果存在剩余空间,也不放大。3.flex- basis:弹性元素的占据空间,默认值为auto,即项目的本来大小。4.order:用整数值来定义排列顺序,数值小的排在前面,可以为负值。原创 2023-12-06 21:52:41 · 344 阅读 · 0 评论 -
26-flex弹性盒
容器的主轴:元素的排列方向(水平:row,垂直:column)原创 2023-12-05 21:32:35 · 342 阅读 · 0 评论 -
25-display:block;display: inline;display: inline-block;
【代码】25-块标签,行内标签,行内块标签,特殊标签。原创 2023-12-05 16:50:26 · 365 阅读 · 0 评论 -
24-定位position:static, relative,absoluted,fixed,sticky
相对和绝对配合使用,让一个元素参考另一个父元素做定位。父级做相对定位relative,子级做绝对定位absoluted。定位position。原创 2023-12-04 14:16:55 · 366 阅读 · 0 评论 -
23-行块行内块,display转换,overflow,text-overflow,white-space,outline
(1)span行元素代码格式会有回车,执行后会有间距,是浏览器默认解析样式,回车变成间距。1.元素转换种类:行元素(行内块元素),块元素。行内块元素:同一行排列,并且可以设置宽高。行元素:统一行排列,不能设置宽高。块元素:独占一行,可以设置宽高。元素转换:display。原创 2023-12-01 16:03:46 · 39 阅读 · 0 评论 -
22-实战知识点:盒子阴影文字阴影,E:not(s) { sRules },vertical-align,@font-face,@media
【代码】22-实战总结知识点。原创 2023-11-30 20:26:48 · 339 阅读 · 0 评论 -
21-浮动,图文混排,清除浮动
是指元素在页面上的排列规则:行元素从左到右,块元素从上到下。(清除浮动但是浮动还在,所以没有浮动的元素可能会转换位置)让没有浮动元素清除两侧,是否允许它两侧出现浮动。让浮动元素撑开父级的高度就是它存在的意义。原创 2023-11-29 21:39:46 · 60 阅读 · 0 评论 -
20-图片精灵
【代码】20-图片精灵。原创 2023-11-29 15:46:16 · 48 阅读 · 1 评论 -
19-背景属性
【代码】19-背景属性。原创 2023-11-29 15:11:54 · 40 阅读 · 1 评论 -
18-margin padding,传统怪异盒模型,页面初始化
当margin有几个值相对应给哪几个设置外边距。语法同margin方向一样。,border复合写法。原创 2023-11-29 10:58:33 · 49 阅读 · 1 评论 -
17-CSS文字样式,opacity,visibility,display的显示隐藏;文字属性;text-indent首行缩进
CSS具有继承性(文字)子元素继承父元素的样式。原创 2023-11-29 09:51:04 · 204 阅读 · 1 评论 -
16-伪类选择器:hover和transition
当鼠标放在图片上hover缓缓放大,离开图片还原,需要img和img:hover的大小有中间值。在某一个元素内部末尾插入内容,无法选中(只能用于双标签内部,单标签不好使):hover 鼠标悬停的样式当鼠标放到图片上时,图片变大,离开复原。transition过渡。原创 2023-11-28 22:25:03 · 343 阅读 · 0 评论 -
15-CSS选择器:子代选择器,后代选择器,群组选择器,兄弟选择器,属性选择器,nth-of-type
只要是被这个元素标签包裹的标签,都统一称为他的后代(ul的后代子代,孙代所有后代都安装效果)(如下代码所示,只给ul的子元素的img安装效果,意思也是ul内部的img)一次性选择多个,任何选择器都可以往里面加,中间用逗号分开。给标签组当中第几项安装样式,可以应用在不想起名字的时候。给以什么开,以什么结尾和包含什么的标签赋予装饰。找到和当前元素相关的下一个元素 ,给安装效果。标签:nth-child(第几项)给p标签当中的第五个标签安装样式。原创 2023-11-28 21:39:48 · 27 阅读 · 0 评论 -
14-CSS引入方式,基本选择器:通用选择器,标签选择器,类选择器,id选择器,选择器优先级
类选择器:起class名字(同一个页面内可以拥有相同的多个class名字)id选择器:起id名字(同一个页面内相同的id名字只能用一个)外链式(单独在外部书写另一个CSS文件,然后使用标签引入)内嵌式(head标签内书写style双标签)important权重变最高)>Html:超文本标记语言:结构。行内样式(标签内书写样式)CSS:层叠样式表:表现。标签选择器:标签名字。原创 2023-11-28 20:26:12 · 32 阅读 · 0 评论 -
13-表单标签:input标记的type属性,按钮,<textarea>,下拉框<select>
属性,根据不同的type属性值,输入字段拥有很多中形式(可以是文本字段,复选框,掩码后的文本控件,单选按钮,按钮等)。在表单域中可以定义各种表单元素,这些变淡元素就是允许用户在表单中输入或者选择的内容控件。1)name和value是每个表单元素都有的属性值,主要是给后台人员使用。在网页中,和用户进行交互,收集用户资料,此时就需要表单。在英文单词中,input是输入的意思,而在表单元素中。1)在写表单元素之前,应该有个表单域把他们进行包含。标签用于定义表单域,以实现用户信息的收集和传递。原创 2023-08-10 20:24:40 · 70 阅读 · 1 评论 -
12-列表
中只能嵌套,直接在中只能嵌套,直接在和个数没有限制,经常是一个对应多个1)里面只能包含与原创 2023-08-07 17:40:46 · 45 阅读 · 1 评论 -
11-表格标签
</tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中。3)<td></td>用于定义表格中的单元格,必须嵌套在<tr>原创 2023-08-07 15:45:28 · 49 阅读 · 1 评论 -
10-注释标签和特殊字符
添加注释是为了更好的解释代码功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的。如果需要再HTML文档中添加一些便于阅读和理解但又不需要显示在页面中注释的文字,就需要用注释标签。在HTML页面当中,一些特殊的符号很难或者很不方便直接使用,此时我们就可以使用下面的字符来代替。一句话:注释标签里面的内容是给程序猿看的,这个代码是不执行不显示到页面中的。这三个,其余很少使用,如果需要回头查阅即可。HTML中的注释以"原创 2023-08-05 13:13:26 · 31 阅读 · 1 评论 -
9-链接标签
百度。3)空连接:如果当时没有确定链接目标时,首页原创 2023-08-05 12:25:08 · 28 阅读 · 1 评论 -
8-相对路径,绝对路径
页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件(images),这是在查找图片,就需要采用”路径”的方式来指定图像文件的位置。实际工作中,我们的文件不能随便乱放,否则用起来很难快速找到他们,因此我们需要一个文件夹来管理他们。就是普通文件夹,里面放了我们做页面所需要的相关素材,比如HTML文件,图片等。:是指目录下的绝对位置,直接达到目标位置,通常是从盘符开始的路径。文件----打开文件夹,选择目录文件夹,后期非常方便管理文件。味参考基础,而建立出的目录路径。图片处于HTML同一目录下。原创 2023-08-05 11:08:43 · 77 阅读 · 1 评论 -
7-图像标签<img>属性
属性之间不分先后顺序,标签名与属性,属性与属性之间必须以空格分开。设置图像的宽度,高度和宽度只修改一个,另一个等比缩放。当src中的图片加载失败 就会加载alt中的文本。所谓属性:简单理解就是属于这个图像标签的特性。提示文本,鼠标放到或经过图像上,显示的文字。图像标签可以拥有多个属性,必须写在标签后面。单词image的缩写,意为图像。属性采取键值对的格式,即Key=指定图像文件的路径和文件名。原创 2023-08-05 10:55:30 · 75 阅读 · 1 评论 -
6-div和span标签
Div是division的缩写,表示分割,分区。Span意为跨度,跨距。4.5div和span标签。原创 2023-08-05 10:32:27 · 44 阅读 · 1 评论 -
5-加粗,倾斜,删除,下划线标签
在网页中,有时需要为文本设置粗体,斜体或下划线等会效果,这时就需要用到HTML的文本格式化标签,使文本以特殊的方式显示。标签语义:突出重要性,比普通文本文字更重要。原创 2023-08-05 10:27:42 · 43 阅读 · 1 评论 -
4-段落标签和换行标签
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的端,然后才自动换行。根据标签的语义,在合适的地方给予一个最为合理的标签,可以让页面结构更清晰。1.文本在一个段落中根据浏览器窗口的大小自动换行。1.加了标题的文字会变的加粗,字号也会依次变大。标签语义:作为标题使用,并且依据重要性递减。标签语义:可以把HTML文档分割为若干段落。跟段落不一样,段落之间会插入一些垂直的间距。单词paragraph的缩写,意为段落。单词head的缩写,以为头部,标题。2.段落和段落之间保有空隙。原创 2023-08-05 10:21:51 · 92 阅读 · 1 评论 -
DOCTYPE和lang以及字符集的作用
其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文,这个属性对浏览器和搜索引擎(百度,谷歌等)还是有作用的。一般情况下,同意使用”UTF-8”编码,尽量统一写成标准的”UTF-8”,不要写错了。1.文档类型声明标签,告诉浏览器这个页面采取html5版本显示页面。2.告诉浏览器或者搜索引擎这是一个英文网站,本页面采取英文来显示。简单来说定义为en就是英文网页,定义为zh-CN就是中文网页。char-字符,set-集合,charset-字符集。1.en定义语言为英语。原创 2023-08-04 21:49:36 · 42 阅读 · 1 评论 -
前端VSCode-快捷键-以及常用技巧
设置方法:管理按钮–设置快捷键方式----输入shift+alt+a找到这个快捷键----点击编辑按钮----直接按下Ctrl+shift+/----最后按下回车 修改完毕。当我们一个页面需要修改大量的文字的时候,我们一个一个的修改超级麻烦,此时我们可以使用全局替换。当我们页面比较长的时候,上下滚动页面不方便,其实我们可以利用快捷键,快速的调到指定的行数上。快捷键:shift+alt+下箭头(上箭头) 或者Ctrl+c然后Ctrl+v。快捷键:Ctrl+ +/- Ctrl+加号或减号。原创 2023-08-04 21:33:42 · 868 阅读 · 1 评论 -
前端VSCode常用插件-以及常用技巧
刚才的插件是可以预览我们的页面,但是改完代码,浏览器必须要重新刷新,比较麻烦,因此推荐安装live sever这个插件,修改完代码,自动更新浏览器预览效果,爽歪歪~~刚开始学习前端,基本页面很少,就可以左编辑器,右浏览器,这样编写完毕代码,保存完毕后,浏览器自动更新了。我们写的less不能直接引入到HTML文件中,通过这个插件可以自动帮我们生成css文件。VSCode下载完毕是英文版的,先安装这个插件,改为中文版。编写完代码,需要浏览器预览,就可以安装这个插件。是的没有看错,这个插件的名字就是原创 2023-08-04 20:55:46 · 1490 阅读 · 2 评论