阶段性总结（一）-CSDN博客

计算机通用知识

命令行的基本使用：mkdir，touch，mv，rm -r dir，pwd
计算机使用二进制使用的原因：模拟信号不精确；二进制是模拟信号传达的数字信号
模拟信号：把设备的物理量直接读出来使用衰减小，传输距离远
数字信号：把介质上的物理量读出来理解为01，衰减快，传输距离近。
unicode：unicode是对全世界的每一个符号进行统一的编号标准。utf8编码方式，前面代表编码的字符占多少个字节，每个字节开始用10表示，里面填入的内容就是，拿出对应字节的内容组合就是unicode编码的序号.解码就是把内容化成二进制数，然后放入编码字节中，在对每一个字节求出其对应的16进制数。

单字节： 0_______
双字节： 110_____ 10______
三字节： 1110____ 10______ 10______
四字节： 11110___ 10______ 10______ 10______
计算机的俩种操作方式：
图形化用户界面(GUI):鼠标指哪打哪
命令行接口(CLI):使用输入命令的形式跟系统和软件进行交互的形式,程序的结果往往也是以文字的形式给出
图片的格式和特点
jpg：有损压缩，适合保存现实世界的照片
png: 无损压缩，适合保存大片颜色相同的照片，有四个字节，三个为颜色支持透明
gif：无损压缩，保存颜色会取256种，导致失真，支持透明
webp:有损压缩，支持透明，质量和压缩率都比jpg好，移动端已有很多网站在使用
psd：ps专有格式，保存了图片创作的所有信息，比较大
bmp：位图，颜色数据未经压缩直接储存，一个颜色点有三个字节
媒体类型(MIME Type),以type/subtype来表达文件的类型形式，他会让很多软件(浏览器)解析文件的方式，常见的有：text/html,application/javascript,text/css,application/json

HTML

标签按类型分类

块状元素： hx div p ul li dl section header footer article nav form
行内元素：span img i em a label
行内块元素：表单元素 input button select textarea

列表

有序列表ol li
无序列表 ul li
自定义列表dl dd dt

表单

form标签：写在表单开始之前属性:

action=“”表单提交的地址
method提交http请求的方法

input 标签

确认表单类型type="text"文本，"email"密码，"password"提交，"reset"重置，"button"按钮，"radio"单选框，"checkbox"复选框,"time"时间，"search"搜索，"color"颜色，"file"地址(去除表单的默认边框设置outline:none)
表单属性hidden隐藏，autofocus自动聚焦，placeholder提示文本，required必填，disabled禁用
value值，name提交的地址。输入框中value是填入的值，也可以写死，name为提交的地址。选择框，value与name一起用，name为分组，当多选单选name相同才是一个组，value为默认的提交值

下拉框和文本域

select标签，里面把optgroup把option选择项进行了分组,selected属性为默认被选中，multiple属性为可以多选。optgroup分组的命名为label="xx"
textarea标签，rows，cols文本框的行数和列数，还有一个就是可以自动拉伸，设置样式resize:horizontal/vertical/none/both设置拉伸行为

表单元素的绑定和分类

表单元素绑定方法：1. label标签可以通过label的for属性和表单元素的id属性相同来让label标签和表单标签绑定起来。2.是直接把表单的元素写在label标签里面，当存在多个的时候第一个生效。一般是用来扩大表单的点击范围和设置表单的样式
分类：fieldset标签来让同类型的表单设置在一起，legend用来给这一类的表单命名

表格

<table border>
    <caption>货品列表</caption>
    <colgroup>
      <col>
      <col bgcolor="red">
    </colgroup>
    <thead>
      <tr>
        <th>编号</th>
        <th>品名</th>
        <th>进价</th>
        <th>出价</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>001</th>
        <td>苹果</td>
        <td rowspan="2">5</td>
        <td>8</td>
      </tr>
      <tr>
        <th>001</th>
        <td>桔子</td>
        <td>8</td>
      </tr>
      <tr>
        <th>001</th>
        <td>香蕉</td>
        <td>5</td>
        <td>8</td>
      </tr>
      <tr>
        <th>001</th>
        <td>山竹</td>
        <td>5</td>
        <td>8</td>
      </tr>
    </tbody>
  </table>
复制代码

标签属性

全局属性：class，id，title，data-(自定义属性)，style，hidden，role((表明其当前表达的视觉元素是什么 )，aria-(通过aria-*=*来表达该ui元素的状态等信息)，contenteditable="true"可编辑段落
traget属性标签：base(有地址标签设置默认地址)，a，form,area。href属性的标签：base，a，link，area

html 基本格式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 
</body>
</html>
复制代码

!DOCTYPE html 标准模式渲染，未声明的为怪异模式，在ie6下，怪异模式会让box-sizing为border-box
html lang="en"html根标签的语言
meta charset="UTF-8"编码的方式
meta name="viewport"移动端布局的设备宽度，initial-scale初始缩放等级
meta http-equiv="X-UA-Compatible" content="ie=edge"文档模式兼容的定义，用最高级的ie版本进行渲染
title文档标题
html head body为根标签，头部标签，内容标签。当不设置时，浏览器会自动添加

CSS

CSS和CSS3样式

html引入css样式：
内嵌式：在head里面写一个style标签
内联式：标签内直接写style="color:red"
外部式：在head内引入一个css文件，<link rel="stylesheet"(声明引入文件和这个文件的关系:样式表) href="a.css" type="text/css"
CSS单位
px一个css像素，在网页不放大的时候是一个操作系统像素，在系统分辨率和物理分辨率相同时，它是一个物理像素点的大小
em是当前文字字号的大小根据父元素的px算出,rem根据根元素的字号大小算出
vw,vh是视口宽度/高度的百分之一
vmax/vmin为vw和vh俩者中字号较大者或者较小者

扩展：
移动端布局:
1. 为了让写出的页面兼容所有宽度的手机设备，在页面设置标签<meta name="viewport" content="width=device-width" user-scalable=no (不能缩放)>自动识别手机宽度
2. 布局:设置内容的宽度和高度为rem，根元素的单位用vw来设置，大小为x=100vw/视觉稿宽度*100(有些是直接用脚本算出根元素应当设置多少px)，这样就可以1vw等于这个视觉稿的宽度的大小，然后直接量出视觉稿宽度来写就可以了，当元素在视觉稿宽度为200px，这个元素就为2rem，因为字体的最小默认值的关系才会乘以100，则200rem要写成2rem。
3. 这样设置元素的单位就可以让不同的手机设备都可以实现，重布局:使用rem来让网站等比缩放。重内容:使用px为基本单位实现布局，做到屏幕越大，字越多

基本样式:

字体样式：书写规范font:[font-style||font-variant||font-weight] [font-size/line-height] font-family
文字样式：text-transform改变文字的大写变小写，小写变大写。text-decoration文字上划线，下划线。word-break单词折断。word-space单词间距。letter-spacing单词间距。white-space换行。text-indent缩进
阴影：text-shadow/box-shadow：阴影方向inset向里、水平偏移、垂直偏移(默认正为右下，负为上左)、模糊半径、扩散半径。单方向的阴影让扩散半径为负数绝对值等模糊半径
图片样式：
background-img/background-color
background-size:cover、contain(cover为图片覆盖住元素，contain为元素包裹图片放大其宽高当有一个值和元素相等即可)img标签有一个样式也可以使其改变图片大小object-fit
background-position/background-origin(哪个盒子开始画)/background-clip(图片裁剪出的盒子内容)
background-attachment(图片相对什么元素移动fixed相对于窗口，scoll当元素有滚动条内容定位)/-webkit-background-text:text(通过文字看到图片背景)
渐变与动画
transition：property属性 duration时间 timing-function缓动函数 delay延迟时间
animation 先定义一个动画函数@keyframs 名字{0%{} 100%{}},在添加动画：animation:name 时间(alternate永久) fill-mode开始播放的状态，play-state：paused暂停键
transform-origin设置不动点/transform-scale缩放/transform:translate移动/transform:rotate旋转/transform-style:preserve-3d(3D视图)/transform:matrix矩阵移动/perspective远近点看元素

布局

盒模型： contnet，padding，border，margin组成，当要确定一个盒模型的宽高时，首先明确盒模型的box-sizing：

content-box width属性的值指的是content-box（也即内容区域）的宽度，高度同理

border-box width属性的值指的是border-box的宽度，高度同理。内容区域则由宽度减去border与padding的宽度得到。 margin合并的问题：垂直外边距合并当元素不存在border和padding，兄弟元素margin选大的，自己上下margin合并，当高度为父元素高度auto，父子元素的margin会合并

行内元素布局

em 框，内容区，行内框，行内框base-line，行框概念
em框：文字框，高度是字号，字形可能超出em框
内容区：em框串起来形容的区
行内框：inline元素：行高框与内容框区的中点对齐也就是行高的大小。inline替换元素(特点是：没有子元素和宽高会有默认值):margin-box
行内框的baseline：inline元素：文字的baseline为x下方的位置。行内元素为最后一行内容的baseline。行框：包含该框所有行内框的最小框，行框内的元素会以各个行内框的baseline对齐，当元素设置vertical-align自行偏移
vertical-align:会根据这个行框对齐方式，当设置一个行内元素vertical-align：middle时，行内元素的垂直中点会对齐匿名文本x的中点。假象出一个x会对齐这个x偏下的地方，不是真正的居中，所以需要让父元素的font-size为0使这个x高度为0就是真正的居中了。

行内块布局时需要清除中间的空隙，font-size为0即可

定位布局:

fixed固定定位：脱离文档流，根据浏览器窗口定位，通过让trbl为0，然后margin为auto让元素居中。一个元素的七个值加起来等于浏览器视口宽度
relative相对定位：相对于自身的位置，常规流依然保存它的位置
absolute固定定位：脱离文档流，相对于离自身定了位的祖先定位，会变成块框
sticky粘连定位：当元素四个边框都在窗口以内的时候是sticky，当元素任意一边脱离文档时就为fixed，他自身的box不能脱离其包含块
z-index 当定位在同一个元素的时候z-index越大就在越上面

浮动布局

浮动定位会脱离其文档流，块状元素会当浮动元素不存在，行内元素会绕着其渲染。浮动元素会盖在块状元素上面，行内会盖在浮动元素上面
清除浮动与闭合浮动清除浮动：通过让自己下移来避开浮动元素clear:both 闭合浮动：
1.让元素触发bfc(使一个元素成为一个独立单元，不会影响外边也不会受外边元素的影响)，overflow：hidden/display:flow-root/display:tabel。
2.在浮动元素父元素里面最下面写一个块状元素让其独占一行这样元素的父元素就会被撑高了。设置一个伪类::after{display:block;clear:both;content:""}

flex布局

父元素为flex子元素水平排列，宽度设置flex-grow：父元素剩余宽度的分配，flex-shrink：超出部分的收缩计算
元素的空间分配方向，flex-direction为主要方向，flex-wrap为次要方向
元素摆放：justify-content水平，align-items垂直单列，align-content多条轴垂直摆放。会根据空间分配方向来确定是水平还是垂直，当分配方向为column时垂直就为justify-content
自身摆放align-self单个空间位置，order排列位置，flex为计算宽度

表格布局

通过设置display的属性对应在表格里面的标签。来实现表格布局
table-layout: fixed/auto;border-collapse: separate/collapse;单元格的设置，默认是表格自己计算出来的宽高，表格边框合并原则是：border:hidden 边框粗细边框样式双边框单边框虚线框按表层顺序
表格内的单元格没有margin，通过设置border-spacing(指定相邻单元格边框之间的距离): h v;来让单元格分开

多列布局

column-cout列数，column-width列宽度，column-gap列之间的间隙，column-rule列之间的分隔线，column-span跨列的设置

css注意点

选择器的优先级，import，内联，id选择器，类选择器/属性选择器/伪类选择器，类型选择器/伪类
字体图标的使用方法俩种目前：1.阿里图标的引用加入购物车，下载代码，添加字体文件，找到字体图标对应的代码用类引用2.font-awesome引用文件，添加类
css sprite：css精灵/雪碧，把图片都一起放在一张图片中，然后使用图片移动来让其对应的显示在页面中。优点：节省文件大小（“拼接”文件会使总体积变小）节省网络流量（下载一张图比下载多张图节省流量）加快速度，图标的出现不会闪烁，缺点：不能是动图不方便维护放大后不清晰。现代采用字体图标，svg图标
reset与normalize：

reset: 是一套用于把页面的样式统一成一个特定风格的css代码

normalize: 是用来让不浏览器显示页面尽量接近各浏览器默认的样式的。
css工具less/sass,scss的引入和使用，使用代码生成。引入可以使添加一个script标签和添加外部文件
使用input为radio来实现图片轮播