教程地址：这里
并非完整笔记！主要是记录重点知识
笔记1,2整合，方便查
Table of Contents
1.导入
2.vscode使用
3.html
实体
meta标签：
语义化标签
块元素和行内元素
列表
超链接
路径：
图片标签
内联框架
音视频
CSS
设置样式：
语法：
选择器：
单个选择器：
复合选择器：
父子兄弟选择器：
属性选择器
伪类选择器：
否定伪类：
超链接伪类：
伪元素选择器：
权重
继承
单位
字体：
颜色：
文档流
盒子模型
水平方向布局
垂直方向布局
外边距的折叠问题
行内元素的盒模型
盒子的大小
border样式
浮动
高度塌陷：
解决方法（BFC）：Block Formatting Context 块级格式化环境
方法2：after伪类选择器
类似的我们可以用来解决外边距重叠问题
clearfix
Clear
定位
相对定位
绝对定位
包含块（containing clock）
固定定位
粘滞定位（兼容性差）
元素层级
字体族
图标字体（iconfont）
注释：<!-- -->
文档声明：<!doctype html>
字符集设置：<meta charset="utf-8">
使用！+Tab可以生成一个完整结果
向下复制：alt+shift+向下箭头
自动生成英文文本：lorem
网页中需要些特殊符号，使用html中的实体，语法为: &实体名字；
例如：
> <
description：用于指定网站的描述，显示在结果页面
http-equiv：用于重定向，时间+网址
<strong></strong>
<blockquote></blockquote>长引用，<q></q>短引用
块元素中可以放任何东西（<p>内什么都不能放）
行内元素是不可以使用width和height来设置
我们可以使用display来设置元素显示的类型：
inline表示将元素设置为行内元素
block表示将元素设置为块元素
inline-block（尽量不用）表示将元素设置为行内块元素，可以设置宽高但是不会独占一行
none元素不在页面中显示
visiblity用来设置元素的显示状态
visible默认值，元素在页面中正常显示
hidden元素在页面中隐藏，不显示，但是依旧占据位置
无序列表<ul>
有序列表<ol>
自定义列表<dl>
list-style:设置样式
<a>是一个行内元素，其中可以嵌套任何元素（除自身）
其中的href属性为跳转路径，如果设置为#，返回顶部。href="#"
如果设置了id属性，那么我们可以在href中设置：#目标元素id值，进行跳转
动href="javascript:;"表示一个空的跳转，也就是什么都不懂
target属性：打开超链接的方式，_self在当前页面打开,_blank新页面打开
./当前文件所在目录 ../表示上级目录
这是一个替换元素。
src：路径，alt：显示不出来就显示alt中文字，并且搜索引擎根据alt中的内容来识别图片
用于向当前页面中引入一个其他页面,网页中嵌套网页
src：指定要引入的网页的路径
frameborder：边框
音视频文件引入时，默认情况下不允许用户控制
<audio></audio>替换元素，src，source都是指明地址，source可以指定失败时的文字，可以多版本文件选择，兼容性更好。
controls：允许用户控制，autoplay：设置自动播放，loop：循环播放
<video></video>替换元素，src
0.通常情况下我们需要去除浏览器的默认样式，
*{margin：0；padding：0；}
1.通过标签内style属性来设置元素样式---内联样式表
例如：style="color:red;font-size:60px"
2.写到head中的<style></style>中的标签---内部样式表
div{内容}
3.样式编写到css文件中---外部样式表
在head中连接到外部样式表
例如：<link rel="stylesheet" href="./style.css">
编写到外部文件，可以使用浏览器的缓存机制，加快网页的加载速度，提高用户体验。
注释：/**/
选择器 声明块（名：值；）
元素选择器：直接把元素名写下来即可
id选择器：语法：#id属性值 { }
class选择器：语法：.class属性值{ }，多个class可以使用空格隔开
通配选择器：* { }
交集选择器：语法：选择器1选择器2选择器3 { }
如果有元素选择器，必须使用其开头
并集选择器：选多个选择器
语法：选择器1，选择器2，选择器3 { }
子元素选择器：语法：父元素>子元素
注意只能隔一代，孙子元素不行
后代元素选择器：语法：祖先 （空格）后代
既可以隔一代也可以多代，选择的是全部
兄弟元素选择器
选下一个兄弟 语法：前一个+后一个
选下边所有的兄弟 语法：前一个~后面所有
语法：【属性名】选择含有指定属性的元素
【属性名=属性值】选择含有指定属性和属性值的元素
【属性名^=属性值】选择属性值和指定值开头的元素
【属性名$=属性值】选择属性值和指定值开头的结尾
【属性名*=属性值】选择属性值中含有指定值的
不固定的元素可以使用伪类标签添加样式
开头第一个元素： ：first-child 例如：ul>li:first-child{}
最后一个元素： ：last-child
第n个子元素： ：nth-child(n) 如果写n表示全选，2n表示选中偶数，2n+1为基数
odd表示奇数，even表示偶数
以上这些伪类都是根据所有的子元素排序，如下例子第一个为span，所以如果我们设置ul>li:first-child{}就无效。因为没有第一个li
如果需要在相同类型元素中排序我们可以使用,用下述伪类选择器就可以忽略掉上栗中的span。
:first-of-type :last-of -type :nth-of-type
：not（）将符合条件的元素从选择器中去除，如下例子：除了第三个元素都设置为绿色
：link用来表示正常的链接（不论是否访问过）
：visited用来表示访问过的链接，由于隐私的问题，所以visited伪类只能修改链接的颜色
：hover用来表示鼠标移入的状态，悬停状态
：active用来表示鼠标点击，正在点击
表示页面中特殊的位置。使用：：例如选择第一个字母：p：：first-letter{}
：：first-letter 第一个字母
：：first-line 第一行
：：selection 表示选中的内容（鼠标选中内容）
：：before 元素的开始
：：after 元素的结束，这两个必须结合content属性使用，并且鼠标无法选中
例如：
px：像素
em：相对于当前字体大小
rem：相对于当前html字体大小
网页是多层结构，通过css为每个层设置样式，用户只看得到最上面一层，最下层称之为文档流，是网页的基础。我们所创建的元素都在默认在文档流中排列的
对我们来说元素共有两种状态：在文档流中，不在文档流中
元素在文档流中的特点：
块元素：独占一行，默认宽度是父元素的全部（会把父元素撑满），默认高度被内容撑开
行内元素：不会独占一行，只占自身大小，行内元素在页面中从左向右排列，如果一行中没法容纳所有元素，换到第二行自左向右排列。
可见框：content+padding+border
content：内容区 ，使用height，width设置长宽
padding：内边距，会影响到盒子大小，背景颜色会延伸到内边距上
border：边框：要设置边框，需要至少设置三个样式
border-width:其中还有border-xxx-width可以设定上下左右，缺省3px
border-color:同上，缺省黑色
border-style:缺省为none
margin：外边距，可以写负值，影响到盒子的实际占地大小
width,,margin-left,margin-right可以设置为auto，auto的值会自动调整auto使等式成立
如果没有设置auto就自动调整margin-right来使等式满足
如果将一个宽度和一个外面距设置为auto，则宽度会调整到最大
如果三个值都设置为auto，则外边距都是0，宽度最大
如果将两个外边距设置为auto，跨度固定那么居中
如果子元素大小超过了父元素，那么子元素会从父元素中移除
我们可以使用overflow属性来设置父元素如何处理溢出的子元素
overflow：visible，缺省，hidden，scroll，auto
同时还有overflow-x,overflow-y
同时这个还可以用来设置BFC
相邻的垂直方向外边距会发生重叠现象
兄弟元素：兄弟元素之间的响铃外边距会取两者之间绝对值较大的
父子元素：父子之间的相邻外边距，子元素的会传递给父元素（上外边距）
会影响到布局，需要处理
行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
行内元素可以设置border，垂直方向不影响
行内元素可以设置margin，垂直方向不会影响布局
这里说的不影响是指不会把其他垂直方向的元素挤到其他位置，而是会覆盖
默认情况下，盒子可见框的大小由内容区决定，内边距和边框共同决定的
我们可以通过设置box-sizeing来设置盒子尺寸的计算方式（设置width和height的作用）
当我们设置为content-box时：缺省，宽高设置内容区
当我们设置为border-box时：宽高设置整个盒子可见框
border：会影响格式
outline：不会影响布局，设置轮廓线
我们可以设置阴影：不会影响布局使用box-shadow
box-shadow：左偏移量 右偏移量 模糊半径 颜色；
我们可以设置圆角，使用border-radius,参数是设置半径大小
同样可以设置椭圆，设置两个参数，第一个为x轴，第二个为y轴
这个时候需要使用/来设置椭圆
设置圆形：border-radius：50%；
通过浮动可以使一个元素向父元素的左右移动使用float设置
none：缺省，元素不浮动
left：元素向左移动
right：右浮动
这个时候我们的元素已经脱离了文档流，我们之前的等式不需要绝对成立。
浮动元素不会覆盖文字，文字会自动环绕在浮动元素周围，可以用作文字环绕图片的效果 。
元素脱离文档流之后元素的特点会发生变化。
元素脱离文档流之后元素的特点会发生变化。
块元素：
1.块元素不再独占一行
2.脱离文档流之后，块元素的宽高和高度默认都被内容撑开
行内元素：
1.行内元素脱离文档流之后变成块元素，特点同上
父元素的高度默认被子元素撑开，当子元素浮动之后，脱离文档流，无法撑起父元素的高度，导致父元素高度丢失。
是css中的一个隐含属性，可以为一个元素开启BFC,开启BFC钙元素会变成一个独立的布局区域。和其他块不同。
开启后特点：1.元素不会被浮动元素覆盖
2.元素子元素和父元素外边距不会重叠
3. 元素可以包含浮动的子元素
开启BFC方式：设置浮动（不推荐），
将元素设置为行内块元素（不推荐）
将元素的overflow设置为非visible的值（常用）
overflow：hidden
原理：在结尾使用一个div，并且设置clear：both来消除浮动元素的影响。例如
但是这样不好。因为我们使用html来修改了我们的样式，增加了耦合，不符合理念。但是我们有伪类选择器，我们可以选择到这个元素的最后也就是box1：：after
可是这样并不能解决问题，因为：：after是一个行内元素，所以清除浮动没有任何影响，我们需要把它设置为一个块元素，所以最终方案就是：
父元素共享了子元素的margin，如果子元素设置了margin我们父元素同样会跟着子元素漂移，所以我们可以按照上述思想来解决问题，外边距重叠如下所示：
我们在box1和box2中设置一个东西撑开接口实现我们想要的效果，这个时候我们需要使用到的就是before伪类选择器，我们display设置为table可以避免出现设置为inline-block（直接当成一个字）时会出现的跳出一段距离的问题。
直接在需要的地方添加上clearfix类即可，直接设置为table可以同时解决两个问题
用过clear属性来去除浮动元素对当前元素的影响，left：清除左边浮动元素对当前元素的一下昂，right：清除右边的影响，both：清除两侧中最大影响的那侧。设置需要清除影响的元素，而不是浮动的元素。
原理：设置清除之后，浏览器会自动为元素设置一个上外边距，一遍其位置不受其他元素影响
是一种更高级的布局方式，可以把元素摆到任意位置，使用position属性来定位
可选值： static缺省，元素是静止的没有开启定位
relative相对定位
absolute绝对定位
fixed固定定位
sticky粘滞定位
偏移量（只有开启定位了才可以使用偏移量）：
top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下边的距离
left：定位元素距离定位位置左侧的距离
right：定位元素距离定位位置右侧的距离
开启相对定位之后如果不设置偏移量，元素不会发生任何变化。
相对定位是参照于文档流中元素本身的位置，这个操作不会使元素脱离文档流，同样也不会改变元素性质，块开始块，行内还是行内。
相对定位会提升元素的层级
开启绝对定位之后，如果不设置偏移量元素位置不会改变。
元素会从文档流中脱离，绝对定位会改变元素的性质。行内编程块，块的宽高被内容撑开。
绝对定位会提高元素层级。
绝对定位元素是相对于其包含块进行定位的。也就是最近的开启了定位的祖先元素。
水平方向上的布局等式需要添加left和right两个值规则和之前一样。
当出现了过度约束，如果没有auto则自动调整right，如果有auto则自动调整auto元素。left和right默认值是auto。
垂直方向上的布局等式同样要满足。
所以我们可以通过绝对定位设置正中心
正常情况下：就是当前元素的最近的祖先元素，没有脱离文档流的情况下
开启绝对定位情况下：包含块就是离他最近的开启了定位的祖先元素。
html，根元素，初始包含块。
也是一种绝对定位。
唯一不同的是，固定定位永远参考与浏览器的视口（不论浏览器是否有滚动都不动）
和相对定位特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
当到0的位置的时候就固定不动。
只要是定位层级就是一样的。
祖先元素的层级再高也不会盖住后代。
对于开启了定位的元素，可以只用z-index来设置元素层级，z-index需要一个整数作为参数，越大层级越高。有限显示靠下的。
color：用来设置字体颜色
font-size：字体大小
font-family：字体族（字体格式）可选值：serif衬线字体 sans-serif非衬线字体 monospace等宽字体
可以指定多个字体，使用逗号隔开，优先前面的字体生效。
网页中经常需要使用一些图标，但是使用图片来引用图标，不灵活而且图片本身就较大。所以我们可以在使用图标的时候，将图标直接设置为字体，然后通过font-face来引入。
国外图标字体：font awesome
注意css和webfonts需要在同一级目录下
通过伪元素设置图标字体，在content中设置字体编码，
