我的前端笔记HTML和CSS

HTML

层级

        ./当前文件夹

        ../返回上一级

        ../../返回上上级

新标签中打开

        如果点击链接需要在新标签中打开<a href="#" target="_blank">

视频音频

        网页中音频和视频都是默认不会自动播放的，视频得配合muted（静音）和autoplay配合使用

无语义标签

        就是用来规划网页结构的，div独占一行、span不换行

列表

        无序ul、有序ol、自定义dl（dt、dd）

表格

        table（tr、td/dd）（rowspan、colspan）表头表身表尾不能跨行合并

表单

        上传数据用的；【下面的表单用form包裹】

        1.input（text、password、radio（单选）【audio音频、video视频】、checkbox（多选）、file）

        2.下拉菜单：select嵌套option

        3.文本域：textarea

        4.label（用来增大点击范围，用户点击文字光标即可指定内容）有两种写法

        5.按钮：button属性type（submit提交、reset需要配合form使用、button这个结合js使用）

        

CSS

css的引入方式（内部、外部、行内：行内用标签的属性style）

选择器

        标签选择器（不能多选）

        类选择器（可多选，用class类）

        id选择器（得配合js使用）

        通配符选择器（*{ }一般用于清楚网页的默认样式）

 盒子

        宽高背景色

文字

（浏览器默认字体大小为16px，下面的css功能可以用于清除字体的默认样式）

        font-weight（400为正常，700为加粗）

        font-style（normal/italic）

        

        行高如果是数字代表字体的倍数，行高可以使文字在盒子居中，行高和盒子高度一致（但换行之后就不行，不过一般都是单行的文字）

        家族名称复制tb或jd的官网就行（12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;）

        font一般用于网页文字公共样式

        

        文本缩进，属性用em，1em等于1倍字体的宽度

        text-align，用于文字或图片居中都可以，用div独占一整行包裹

        

        h1一般用于logo或网页名称

        text-align用于容器内的左中右对齐

图片也是文字的一种，图片和文字可以统一居中对齐

复合选择器

        后代复合选择器        标签 标签

        子代符合选择器        标签 > 标签

        并集符合选择器        标签，标签

        交集复合选择器        标签.类名

伪类选择器

        伪类意思是状态，就是状态选择器        选择器：状态 {css}

        这4种状态如果同时存在则需要按照lvha的顺序写

CSS特性

（用来简化代码、定位问题的）

        继承性：子集默认继承父级的文字属性，若子集自己有属性则该属性不继承，其余继承；一般用body修改整个页面的默认文字

        层叠性：相同属性会覆盖，后面的覆盖前面，其余不同的属性会生效

        优先级：

        复合选择器的权重，是由所有选择器类型决定的

Emmet写法

        就是快捷写法

        ul>li{$}*4

快捷键

        alt+shift：多选

背景属性

                        

百分比：100%宽度按照盒子宽度，高度按图片比例缩放

复合属性

显示模式（display显示模式）

        块级元素        div        独占一行，设置宽高生效

        行内元素        span        设置宽高不生效，由内容撑开

（行内元素只能修改横向margin、padding、border，纵向的只能用行高lin-high修改，若加了背景色，可以设置padding撑大区域，背景色会跟着padding增大）

        行内块元素        image（图片） 可设置宽高，默认和原图一样大

        测试其他标签是什么显示模式，写两个标签，默认显示是否和原尺寸一样，可否设置宽高，是否换行

        转换显示模式

                display:block        \        inline-block        \        inline

结构伪类选择器

        用于表单中选择某条数据

        n从0开始计算

伪元素选择器

        用来摆放装饰性内容的，文字也可以

        

盒子模型

        用于留白

        

        border和padding和margin方向写法一样，也可简写

盒子尺寸计算

        盒子尺寸        =        内容尺寸 + 左右的内边距 + 左右描边（注意不含margin外边距）

        在修改盒子尺寸的时候，若不想内容尺寸因为修改而撑大（margin不会撑大内容尺寸），则可以用内减模式

        内减模式：box-sizing：border-box

        版心居中：margin：0 auto；

清除默认样式

        清楚系统默认边距尺寸，且保持盒子大小：

        * { margin：0；padding：0；box-sizing：border-box }

        去掉列表的项目符号：

        li { list-style:none }

盒子内容溢出

        格式：overflow：hidden

        

盒子外边距margin的合并和塌陷

        合并，“垂直方向”两个相邻盒子之间的外边距margin按最大的计算

        塌陷，设置子级上外边距margin-top时，父级盒子会被子级盒子拖着一起移动后面两个方法的原理是通过找到父级的顶部的定位

行内元素设置盒子

        行内元素只能修改横向margin、padding、border，纵向的只能用行高lin-high修改，若加了背景色，可以设置padding撑大区域，背景色会跟着padding增大

盒子设置圆角

        border-radius：10px/10%

        圆型是正方形长或宽的50%，胶囊形状是高度的50%

盒子阴影

        

CSS书写顺序

网页的整体背景色

        body {

            background-color: #f1f1f1;

        }

img标签和背景图的区别

        装饰的时候使用背景图bgi，非装饰作用的用img

flex布局（display显示模式）

        一般运用于多个div为同一行

        display要加给父级，称为弹性容器，子集里的盒子则称为弹性盒子，默认主轴分布，若弹性盒子没有高度，则跟父级沿着侧轴拉伸

        align-items和align-content的对齐方式的属性值一样，但是注意align-content的必须要有flex-wrap才生效，即对单行盒子不生效

        space-around是盒子两侧相等，space-evenly是所有盒子间距相等

        主要用上面两个属性值（注意：align-items和align-self只用于弹性盒子即flex）

        stretch弹性盒子如果有高度则不生效，同样若没写父类的stretch和子类没有高度，默认子集高度也是拉伸至父级高度

        主轴改为垂直，控制主轴的排列标签不变，侧轴也一样

一般使用结构伪类选择器，然后设置弹性盒子占父级的比例，若未设置则按照行内展示

新建前端目录

        在外面新建好之后拖进去，base.css基本是默认复制的

搜索优化引擎logo

        

        一般用div包裹h1包裹a包裹关键字

        a里的文字就是用户搜搜索的关键字

开发笔记

        transparent为透明色

        vertical-align: middle用来处理行内块和行内的对齐方式，图文文本

        注意使用复合背景bg时，不要写成bgi

        注意：last-child是写在li后面的不是a后面，写完记得接a

        标题标签都是独占一行，设置高即可

        上面的是取消输入框的焦点效果

        下面的是选中占位字符设置样式

相对定位和绝对定位

        

        定位在设置值的时候，是相对于元素的上下左右为基线对齐

        使用了绝对定位的，盒子会变成行内块显示

        relative相对定位：改变的是原来的位置、占位不脱标、标签显示模式不变

        absolute绝对定位：（若绑定了子绝父相，则是相对于父级位置进行偏移，显示模式会变成具有行内块的特点）

        fixed固定定位：

        position：fixed一般用于悬浮卡片，记得也要用left、right、bottom、top进行定位

        一般定位可以写整体和个体，上下左右可以整体移动或个体移动

        需要hover后才显示，可以先display：none，后面hover后再display：block

堆叠层级

CSS精灵

        也叫css sprites 或 css雪碧，作用就是将设计将所有背景图合成一张图，以后只需要获取一次或存储在本地，从而优化访问速度(注意：移动的时候是取负数值)

若截取的是全图的一半，那么另一半可以写 background-position：right 0 ；

        

字体图标下载使用上传

        下载：

        使用：

    

        注意：在使用选择器的时候，最低要要.iconfont，否则就和默认一样了

        上传：

        svg格式，且选择去除颜色，调用的时候用css调色

        

垂直对齐vertical-align

        单独的图片取消图片对齐可以直接用 display：block

        一般用于图文，一般背景图下方有留白，只要不用baseline就能去除

        用法：哪个高加给谁

        一般单个图也会出现底部留白问题，可以用下面的方法解决

        

过渡动效transition

透明度opacity

光标鼠标类型cursor

       一般用于展示鼠标悬浮在指定区域内，鼠标的样式

小兔仙网页开发

SEO搜索引擎优化

网页title小图标

        图片格式用ico，和index.html放一个层级，直接在html表头，快捷输入link:favicon，自动生成

重置默认输入框

        

购物车数量图标

        

参考箭头指示

渐变颜色

        background-image: linear-gradient(180deg, rgba(137,137,137,0.00) 0%, rgba(0,0,0,0.90) 100%);

平面转换（2D）

平移

旋转

改变原点位置

复合transform

缩放

倾斜

线性渐变

径向渐变

空间转换（3D）

平移

        必须给直接父级添加视距perspective，取值范围800-1200

旋转

立体呈现

        一个面在旋转的时候，是坐标轴的方向是跟着旋转移动。面和面之间的坐标轴互不影响

缩放

动画

跑马灯

精灵动画

        animation可以使用多组动画

网页背景图全覆盖

视口（了解，跟随设备缩放）

注意固定图片之后会转成行内块，需要将宽度充满，li的话因为横向是4哥，所以每个占25%即可

rem适配

        开发参考375px来开发

        若宽度为750px，则视图必须改为2倍图

        宽度适配使用于pc端，等比适配使用于手机端     

        

媒体查询

书写顺序

当视口宽度小于700px

@media （max-width：700px）{ body { bgc：pink } }

当视口宽度大于1200px

@media （min-width：1200px）{ body { bgc：pink } }

快捷运算less

在less文件中编辑的单行注释，在css中不显示

注意：若文字大小和base.css里的默认大小一样，仍然需要转rem，因为base里的是px

禁止导出一般用于base、common已经导入index，base、common不用再自己生成css文件

vw适配

vw是根据视口的宽度，即 375*667，则根据宽度375的十分之一，即3.75*vw单位的值。简单理解，即视口变化，是参照视口的宽度还是高度进行计算是区分vw和vh的区别

vw和vh不能混用

酷我音乐开发object-fit：cover

        banner图可使用object-fit：cover；或contain，用法和背景覆盖一样。这个的作用是banner能等比缩放，按照之前给img宽高，就会导致图片被挤压

Bootstrap前端UI框架

下载好v5之后

页面左右伸缩之后，里面的内容会自适应换行

书写格式

按钮和表格的样式查看文档即可，轮播图或有交互效果的需要引入bootsrap自带的js

下载这个版本，最新版没有css和js

总结与其他补充

什么是TDK

文字换行