一：基础

简介就不说了，这东西没什么用且占位置

1：常见的语义化的标签

有一下这几个标签：
h1：标题标签
p：段落标签
i：斜体标签
b：加粗标签
还有一些其他的不重要的标签比如sub等等就不列举出来了

2：元素

元素分为三种，分别是块元素，行内元素，行内块元素
块元素(block element):
特点:
1.块元素具有布局特点,一般常用页面的整体布局
2.块元素独占(其父元素)页面的一行
3.块元素可以嵌套任何类型的元素(除p元素以外,p元素中不能嵌套任何的块元素)
4.块元素可以设置宽,高 默认的宽度是其父元素的宽度
5.块元素默认高度是由内容决定的
行内元素(inline element):
特点:
1.正常情况下,行内元素是不会换行的
2.行内元素会在一行排不下时进行换行
3.行内元素不能设置宽 高 行内元素的宽和高都是由其内容决定的
4.行内元素一般不会嵌套块级元素,大多数是嵌套文本或者其他的行内元素
行内块元素(inline-block element):
特点:
1.行内块元素不会独占一行,在一行排列
2.可以设置宽高(默认是内容的宽 高)
行内块元素(inline-block element):
特点:
1.行内块元素不会独占一行,在一行排列
2.可以设置宽高(默认是内容的宽 高)

3：列表

有序列表ol：会自动排序
无序列表ul：不会自排序，但是前面会有一个小黑点

4：常用标签

块级元素标签：div
行内元素标签：span
图片标签：img
超链接：a

二：css基础

1：引入

引入css的四种方式
1：行内样式
不推荐
2：内联样式
不推荐
3：外联样式
推荐使用
4：style中引入css

2：选择器

元素选择器 通过元素的名字去选择对应的元素 如：div span p ul
id选择器 语法 #id值 每一个元素都具备id属性 id值是唯一的
类选择器 语法 .类名 每一个元素都具备class属性 类名是可以重复的
通配符选择器 语法： * 选中页面中所有的元素

复合选择器
交集选择器： 选择器1选择器2选择器3
被选中的元素需要满足所有的选择器条件，才会被选中

并集选择器： 选择器1,选择器2,选择器3
被选中的元素只需要满足其中一个选择器条件，就会被选中
除此之外还有关系选择器，属性选择器，伪类选择器等等

3：伪类

伪类，就是不存在的类，我们大致可以将其分为两种
结构伪类
动态伪类
动态伪类（常用）：
- link 表示未被访问过的超链接 （只能用于a标签）
- visited 表示已经被访问过的超链接 （只能用于a标签）
- active 表示被用户点击的元素 （用于任何元素）
- hover 鼠标移入到某个元素 (用于任何元素)

4：css三大特性

1，层叠性：当有多个相同选择器或者同类型的选择器选中同一个元素，并且为该元素设置同一个样式属性，但是属性值设置的不一样
- 拉架（解决样式冲突问题）
- 会优先使用，靠近元素的选择器所设置的样式

注意：当选择器权重（优先级）不同时，无法通过层叠性解决样式冲突
优先级（权重）：
- * 通配符选择器 没有权重 权重最低
- 元素选择器 0,0,0,1
- 类/伪类 0,0,1,0
- id选择器 0,1,0,0
- 行内样式（style） 1,0,0,0
- !important 无限大 谨慎使用
注意：选择器最终的优先级是变化，可以进行叠加的！但是只能在最高位的值，不能突破等级！
继承性：css规定一些通用的样式属性，不需要频繁的去写，通过继承性实现即可
- 注意：不是所有的css属性都能够被后代元素继承
- 可以被继承的css属性： 字体相关 、字体颜色、 列表相关的、文本相关的等
font-xxx、 text-xxxx 、 color 、 list-xxx

三：元素浮动

1：浮动

浮动的简介：
元素可以通过设置float属性，让一个子元素向其父元素的左侧或则右侧移动
float：
none 默认值 ，元素不浮动，正常状态
left 元素向左浮动
right 元素向右浮动

• float属性，最开始设计并不是为了水平布局排列的，最开始只是为了实现文字的环绕效果，但是在后续的使用过程
  发现float可以使得块元素水平排列！但是也带来了很多的问题！

• 浮动元素的特点：
  1、元素一旦设置float后，它将会脱离文档流，不再占据文档流中的位置，以至于后续的正常元素会自动向上移动，填满空隙
  2、设置浮动以后，元素会向父元素的左侧或者右侧移动
  3、浮动元素默认情况下不会从父元素中移出，不会逃离父元素的掌控
  4、浮动元素向左或者向右移动时，不会超过它前边的浮动元素
  5、如果浮动元素的上边是一个没有浮动的正常块元素，则浮动元素会停止上移
  6、如果浮动元素的后边是一个正常没有浮动的块元素，则正常元素会自动上移

2：带来的问题即解决

在css正常布局中，一般情况不会给父元素设置具体的高度值。通常是由子元素以及内容将其撑开！实现父元素的高度问题

    注意： 
        - 浮动元素，无法撑开父元素，从而会造成父元素的高度塌陷

    解决：
        -1、给浮动元素的父元素设置具体的高度值  （不推荐）
        -2、给父元素开启一个BFC模式， （BFC：不会影响上下文的局部块）
        -3、给父元素设置浮动，同样能够开启BFC，防止父元素的高度塌陷
        -4、通过overflow：hidden；可以开启BFC 该方式也是比较推荐，整体影响最小的一种方式 （但此方法还不是最优解）
        -5、display：table;
1
2
3
4
5
6
7
8
9

3：最终解决方案

使用clearfix清除浮动对他的影响

.clearfix::after,
      .clearfix::before {
        content: '';
        clear: both;
        display: table;
      }
1
2
3
4
5
6

四：定位

定位（position）：
- 定位是一种更高级的布局手段
- 通过定位可以将元素摆放到页面的任意位置
- 通过css的属性 position 为元素设置定位

position：
- 可选值：
- static 默认值，元素是没有开启定位的，静止的
- relative 为元素开启相对定位
- absolute 为元素开启绝对定位
- fixed 为元素开启固定定位
- sticky 为元元素开启粘滞定位

相对定位：元素相对于自身本身的位置！最开始占据文档流的位置来进行定位
绝对定位：元素相对于其最近的开启了定位的包含块元素为基准进行定位
偏移量：
- 通过css提供的方位属性，对开启定位的元素设置，偏移量
- top left right bottom
- 注意：一般只需要设置两个方位即可对元素进行定位，偏移量也支持负数值

• relative（相对定位）
  - 当元素的position属性值设置为relative则为该元素开启了相对定位
  - 相对定位的元素具备以下特点：
  1、元素开启相对定位后，不设置偏移量元素是不会发生任何的位置变化
  2、相对定位是参照元素自身在文档流中的位置进行定位的
  3、相对定位会提升元素的层级关系
  4、相对定位的元素不会脱离文档流，元素的特性不会被改变，块还是块，行内还是行内

• absolute(绝对定位)：
  - 当元素的position属性值设置为absolute，则为该元素开启了绝对定位
  - 绝对定位的特点：
  1、开启绝对定位后，如果不设置偏移量元素的位置不会发生改变
  2、开启绝对定位后，元素会脱离文档流，不再占据页面的实际位置，会影响其他正常元素的布局
  3、绝对定位会改变元素的性质，不再区分行，块，行内块的概念
  4、绝对定位会提高元素的层级
  5、绝对定位的元素是相对于最近的开启了定位的包含块来进行定位的

一般会为子元素设置绝对定位，给他的父元素设置相对定位，（子绝父相）
包含块：正常情况下，包含块指的就是该元素的父元素（祖先元素）

五：表格

表格（table）：

标准的一个表格分成三部分：
头部 thead
主体 tbody
底部 tfoot

th 表示头部的单元格
tr 表示行
td 表示正常的单元格

表格标签

如何合并单元格：
rowspan 纵向单元格的合并

colspan 横向单元格的合并

表格相关的样式属性：
border-spacing 指定表格边框之间的距离
border-collaps 设置边框是否合并

注意：tr标签不是table的子元素，即便tbody省略的情况下！
浏览器会自动加上tbody标签，并且把tr放到里面

六：表单

表单：
- 用于提交数据的容器
- 现实生活中，个人信息登记表、调查问卷等
html中也可以收集用户的数据（信息） 通过form表单标签

form标签的属性：
- action 填写数据最终提交到服务器地址
- methed 方法 ，提交 get post

表单相关的控件：
- label 绑定控件，指导用户
- input 决定输入控件的类型
type属性：
- radio 单选框控件
- checkbox 复选框控件
- text 文本信息
- password 密码框
- button 按钮框
- number 数值

• select 下拉列表控件
• option 下拉列表项
• textarea 富文本框（多行文本）
• button

如何将表单中的数据收集起来，提交给服务器
- 利用表单控件的两个属性 name value 产生一个键值对 key：value

七：弹性盒

是css中又一种高级的布局手段，主要就是用来替代浮动布局
flex布局通常是用于移动端，自适应布局
弹性容器：开启了flex属性的元素称作为弹性容器
弹性容器的css属性：
1、flex-direction 指定容器中元素的排列方式（更改主轴）
- row 默认值 弹性元素在容器中从左往右水平排列 - 主轴
- column 弹性元素在容器从上往下垂直排列 - zhu’zhou
2、flex-wrap 设置弹性元素是否在容器中自动换行
- nowrap 默认值 ，不会换行
- wrap 沿着侧轴换行

3、 flex-flow 是flex-direction和 flex-wrap的简写形式
4、 justify-content 设置弹性元素在主轴上的排列方式
- flex-start 沿着主轴排列 （默认值）
- flex-end 沿着主轴反方向排列
- center 主轴水平居中排列
- space-around 分配空白区域
- space-between 分配空白区域
- space-evenly 分配空白区域

5、 align-items 元素在侧轴上的对齐方式，排列方式
- stretch 默认值
- flex-start 沿着侧轴起点排列
- flex-end 沿着侧轴终点排列
- center 在侧轴上居中对齐
- baseline 基线对齐
6、 align-content 分配侧轴元素之间的空白（注意该属性一定是 flex-wrap: wrap; ）
- flex-start
- flex-end
- center
- space-between
- space-around

八：过渡属性和动画属性

1：过渡属性

通过过渡可以指定一个属性发生变化时的切换方式
过渡属性可以创建一些比较好的效果，让用户体验更好（整体不会太生硬）
相关的几个属性
transition-property ： 指定要执行过渡的属性 属性1，属性2
该属性可以同时指定多个需要执行过渡的属性 多个属性之间逗号分隔
通过 all 关键字 指定所有能够产生过渡的属性
transition-duration : 指定过渡持续的时间， 默认值是0 瞬间发生
transition-timing-function ： 指定过渡效果的时许函数，运动轨迹
transition-delay ： 过渡开始的延迟时间，等待一段时间开始过渡效果
transition简写属性

二：动画属性

动画属性和过渡属性的区别
相同点：都是产生一段动画效果
不同点：
1、过渡属性只会发生在某个属性值产生了变化后，才会进行
2、动画效果不需要某个属性值发生了变化，可以直接进行
设置动画效果
必须设置一个关键帧，关键字设置了动画执行的每一个步骤，每一个画面

@keyframes 动画名{
            from {
                css样式属性
            }


            to {
                css样式属性
            }

        注意：除了使用from 和 to  还可以将整个动画流程看成是100%进度 

        }
1
2
3
4
5
6
7
8
9
10
11
12
13

使用动画
为元素设置某个关键帧（名字）
animation-name 指定对当前元素生效的关键字名字

九：学习总结

目前处于学习html的前期，感觉还是比较简单的，不是那么的困难，希望到了后期也能如此吧