HTML与css的复习汇总

一、HTML

1. WEB三大标准

   web有三大标准，也就是我们前端课程需要学习的三个点。第一是HTML（结构），HTML在前端中相当于最基础的结构，就像是一个的骨架。

   第二是CSS（表现），在HTML结构基础上对基本的代码结构进行各种各样的修饰，相当于人有了骨架后有了器官组织结构，浓眉大眼大帅哥，亦或者美丽的girl。

   第三是JS（行为），这是之后我们要学习的一个点，就现在我认为的JS就是让数据进行交互，让我做的网页可以真正的“动”起来，就像一个人虽然好看还不行，你还得给他大脑下达指令，让其进行各种各样的动作指令。

2. HTML有什么

   HTML结构可以是文本、数字、视频、音频、超链接等，通过给不同的标签可以在浏览器产生不一样的效果。

   例如：h1~6是描写6中依次递减的标题标签

   ​ p标签是一个描写段落的标签

   ​ img是图片标签，后面必须有SRC路径属性

3. HTML标签三大性质

   一，行内元素：行内元素值得是不能设置宽高，可以并排如a,span,b(strong),u(ins),i(em),s(del)。

   二，行内块元素：行内元素升级版，可以设置宽高当依旧一行可以有多个。如

   img，input，textarea。

   三，块元素：我称之为老大元素，可以设置宽高但一行独占，霸气的化身。如

   div,h1~6,p,ul,ol,dl.

   CSS

   1. 引入方式

      外联：通过给头部区域添加Link标签把大量CSS代码 独立放在一个地儿，在公司项目开发中最常用

      内嵌：也就是在代码头部区域填写，在小demo中最常使用，优点利于测试，不过缺点也就是代码一多容易杂乱不够优雅，所以只用于小demo

      行内：直接在HTML代码行内添加，这种写法一般在后期一般配合JS进行使用。style=“属性值”

   2. 选择器

      选择器简单理解就是我选择HTML中那个标签，然后改变这个标签的各种样式。有以下几种选择器：

      类选择器：代码是.类名(也就是在HTML中给标签用class=""起的类名)只要是给的一样的类名标签都能生效CSS的属性，也就是可以给多个标签使用。

      ID选择器：代码是#ID名(就是在HTML中给一个标签其实ID名)因为是ID名，所以只能给独特的一个标签使用，具有专一性。

      标签选择器：标签名，也就是直接把想要修改样式的标签名抽出来选择，一般用于需要统一修改样式的标签。如在做网页是想统一修改a的下划，就可以直接用标签选择器统一选择修改。

      后代选择器：用空格隔开两个选择器，代表选中哪个标签里的谁，可以一直向后选。

      子代选择器：用父亲＞儿子选择，只能向下一代选择。

      并集选择器：用逗号","连接两个选择器，代表选中两个选择器一起。

      交集选择器：用点"."连接两个选择器，代表即什么又什么。

      伪类选择器：用"::"两个冒号加上after/before在标签前后添加一个相当于不存在的行内标签，必须加content=""

      结构伪类：nth-child()表示选中第几个标签进行选择，例如在括号中写2n这表示只要是偶数的被选中的标签进行样式修改；2n-1则是奇数修改。或者

      ​ nth-first/last表示选择第一个和最后一个

      选择器的优先级：important！>行内>ID>类>标签>*>继承

      其实不用死记，选择范围越广权重越低，important！天下无敌，不过不可以改变继承的权重。

   3. 属性

      大体分两类

      文字类：Font家族,(style,weight,size,family)

      ​ color颜色

      ​ text-align水平对其方式：left、center、right。

      ​ text-indent文本缩进

      ​ text-decoration文本装饰（用于去斜划线）

      ​ line-hight：设置行高，一般用于给文字在行内居中的效果。

      盒子类：margin外边距

      ​ padding内边距

      ​ 可以四个方向left/right/top/bottom，也有连写，四值按照顺时针方向，三值写法则上，左右，下。两值则上下，左右。

      ​ border边框

      ​ width height宽高

      ​ background背景属性：color/img/repect/position/size

      repect平铺：后面可以连写：是否平铺，x轴/y轴左中右对齐方式

      position选定背景图位置：用于CSS精灵图，属性为X/Y两个坐标，参照两坐标数字选出指定图，可以给负数。

      size尺寸：有contain让尺寸等比例于盒子，可能导致盒子留白；cover覆盖整个盒子可能导致图片展示过大。也可以手动W/H设置尺寸。

      ​ float浮动left/right，让元素脱标，也就是浮起来。可以设置宽高切一行显示多个

      ​ 定位position，让元素指定在某一个位置上

      ​ 相对定位：relative,参考当前位置移动，保留当前显示模式。不脱标，占位置。

      ​ 绝对元素：absolute:参考已经定位的父级进行位移，如果父级没有则参考浏览器可视区域，具备行内块特点，脱标不占位

      ​ 固定元素：参考浏览器窗口改变位置，具有行内块特点，脱标。无论浏览器下拉到哪，始终定在固定的位置上。

      在定位使用中，一般遵循父相子绝进行使用。

   不熟悉的点

   1.HTML三大元素有具体对应哪些标签

   2.background-size代码不够理解

   3.对于浮动或者定位后标签显示特点（是否改变成行内块还是块）。

   ​