一、HTML
# 一、HTML
如何创建一个简单的网页
1、使用编辑器（前端常用的开发工具：微软的VS Code、WebStorm、Sublime等等）
2、打开编辑器
3、新建一个文档：文件名称为index.html（直接在电脑磁盘新建一个index.html文件也是可以的，选择使用VS Code打开index.html）
4、双击打开index.html其实只是一个空白的页面，在编辑器中输入 html5 ,然后点击键盘tab键，会显示如下内容：
<!DOCTYPE html> // 这里是文档声明
<html lang="en"> // 这里是html标签 成对的形式存在，包裹住网页内容
<head> // 头部标签
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> // 浏览器最顶部的tab显示的标题
</head>
<body> // 网页的主要内容就存在于body内部
</body>
</html>
# HTML的语义化：
<title> <!--：页面主体内容。-->
<hn> <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul> <!--：无序列表。-->
<li> <!--：有序列表。-->
<header> <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav> <!--：标记导航，仅对文档中重要的链接群使用。-->
<main> <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
<article> <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section> <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<aside> <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
<footer> <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->
<small> <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong> <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em> <!--：将其中的文本表示为强调的内容，表现为斜体。-->
// 下方标签不重要了
<mark> <!--：使用黄色突出显示部分文本。-->
<figure> <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
<figcaption><!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<cite> <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto><!--：定义块引用，块引用拥有它们自己的空间。-->
<q> <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time> <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
<abbr> <!--：简称或缩写。-->
<dfn> <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address> <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del> <!--：移除的内容。-->
<ins> <!--：添加的内容。-->
<code> <!--：标记代码。-->
<meter> <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
<progress> <!--：定义运行中的进度（进程）。-->
工作中，常用的标签是：
// 块级元素 ： 独占浏览器显示区域一整行
<div></div>
<p></p>
<ul></ul>
<li></li>
<table></table>
// 内联元素：仅占据内容显示区域，不会重新换行
<span></span>
<a></a>
<img/> // img标签是单闭合标签
# HTML语义化的优点：
- 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页
- 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
非重点先不看：HTML5新增标签及API（看一下即可，无需关注其属性作用）
新增选择器 document.querySelector、document.querySelectorAll
拖拽释放(Drag and drop) API
媒体播放的 video 和 audio
本地存储 localStorage 和 sessionStorage
离线应用 manifest
桌面通知 Notifications
语意化标签 article、footer、header、nav、section
增强表单控件 calendar、date、time、email、url、search
地理位置 Geolocation
多任务 webworker
全双工通信协议 websocket
客户端和服务端双向通信
历史管理 history
跨域资源共享(CORS) Access-Control-Allow-Origin
页面可见性改变事件 visibilitychange
跨窗口通信 PostMessage
Form Data 对象
绘画 canvas
# B站视频里的重点
1、怎样注释html
Control + / control + 右shift左侧的键
注释后的html显示为：
2、什么是标签？
标签有双闭合标签和单闭合标签
举例说明：
双闭合：
我是双闭合标签，我以成对的形式出现，右侧的标签会多一个 /
单闭合：
3、图片标签的使用
// src表示图片的路径
4、绝对路径和相对路径（这个是重点）
5、列表：
分为有序列表和无序列表，常用的是无序列表
无序列表：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
有序列表：
<ol>
<li></li>
<li></li>
<li></li>
</ol>
6、input、table、button等标签的使用
# CSS视频重点
1、如何引入css
2、什么是选择器？选择器有哪些？
3、水平对齐方式
4、浏览器调试工具的使用
5、总结出什么是块、行内、行内块？它们如何转换？
6、什么是CSS的继承性和层叠性？
7、css的盒模型？关于盒模型的一些计算
8、如何清除浮动？有哪些方法？
# 二、CSS
这一块儿要自己总结一下
块级：
行内：
行内块：
选择器：
# css的继承：
# 无继承性的属性：
1、display:规定元素应该生成的框的类型
2、文本属性：
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的修饰
text-shadow:文本阴影效果
white-space:空白符处理
unicode-bidi:设置文本方向
3、盒子模型属性：
盒模型很重要，必须掌握
标准盒模型：盒子总宽度/高度 =width/height + padding + border + margin。（ 即 width/height 只是 内容高度，不包含 padding 和 border 值 ） IE盒子模型：盒子总宽度/高度 =width/height + margin = (内容区宽度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）
重要：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、padding、padding-top、padding-right、padding-bottom、padding-left
了解：border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、
4、背景属性：
重要：background、background-color、background-image
了解：background-repeat、background-position、background-attachment
5、定位属性：
float、clear、position、top、right、bottom、left、overflow、z-index
其他。。。
# 有继承性属性
1、字体系列：
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
2、文本系列属性：
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色 a元素除外
3、元素可见性
visibility
其他。。。
块级元素哪些属性可以继承？
text-indent、text-align、visibility、cursor
# 样式优先级：（权重这里也必须掌握）
!important
内联
1000id选择器 #content
100类选择器（伪类和属性选择器） .content
10类型选择器和伪元素选择器 div p
1通配符（*）、子选择器（>）、相邻选择器(+) 0
继承的样式没有权值
盒子塌陷
本应该在父盒子内部的元素跑到了外部。
当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。
解决盒子塌陷的方法：
1、设置盒子的宽高
2、给外部的父盒子也添加浮动，让其脱离标准文档流
3、父盒子添加overflow属性
4、父盒子最下方引入清除浮动块 clear:both
5、after伪元素清除浮动
6、父盒子添加border
7、父盒子设置padding-top
伪类和伪元素的区别
伪类：
- 其核⼼就是⽤来选择DOM树之外的信息,不能够被普通选择器选择的⽂档之外的元素，⽤来添加⼀些选择器的特殊效果。
- ⽐如:hover :active :visited :link :visited :first-child :focus :lang等
- 由于状态的变化是⾮静态的，所以元素达到⼀个特定状态时，它可能得到⼀个伪类的样式；当状态改变时，它⼜会失去这个样式。
- 由此可以看出，它的功能和class有些类似，但它是基于⽂档之外的抽象，所以叫 伪类。
伪元素：
- DOM树没有定义的虚拟元素
- 核⼼就是需要创建通常不存在于⽂档中的元素，
- ⽐如::before ::after 它选择的是元素指定内容，表示选择元素内容的之前内容或之后内容。
- 伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于⽂档中，所以称为伪元素。⽤于将特殊的效果添加到某些选择器
总结：
- 伪类和伪元素都是⽤来表示⽂档树以外的"元素"。
- 伪类和伪元素分别⽤单冒号:和双冒号::来表示。
- 伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类)，
- 是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类
- 伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。
- 伪类其实就是基于普通DOM元素⽽产⽣的不同状态，他是DOM元素的某⼀特征。
- 伪元素能够创建在DOM树中不存在的抽象对象，⽽且这些抽象对象是能够访问到的。
# 行内元素的margin padding
- 水平方向：水平方向上，都有效；
- 垂直方向：垂直方向上，都无效；（padding-top和padding-bottom会显示出效果，但是高度不会撑开，不会对周围元素有影响）
min-height和max-height min-width和max-width
- max-width 会覆盖 width，即使 width 是行内样式或者设置了 !important。
- min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候；
# 下面内容可以先不看
BFC是什么？(边距重叠解决方案)
BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。 父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取margin与 padding 的最大值。
BFC原理？
（1）内部的Box会在垂直方向，从顶部开始一个接着一个地放置； （2）Box垂直方向的距离由margin(外边距)决定，属于同一个BFC的两个相邻Box的margin会发生重叠； （3）每个元素的margin Box的左边， 与包含块border Box的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此； （4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置float； （5）BFC 的区域不会与float Box重叠（清浮动）; （6）计算BFC的高度时，浮动元素也参与计算。
CSS在什么情况下会创建出BFC？
0、根元素，即 HTML 元素（最大的一个BFC） 1、浮动（float 的值不为 none） 2、绝对定位元素（position 的值为 absolute 或 fixed） 3、行内块（display 为 inline-block） 4、表格单元（display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性) 5、弹性盒（display 为 flex 或 inline-flex） 6、默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）
布局：
# 未知高度元素垂直居中、垂直居中的实现方式有哪些？
1、绝对定位+css3 transform:translate(-50%,50%)
.wrap{
position:relative;
}
.child{
position: absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
2、css的flex布局
.wrap{
display:flex;
justify-content:center;
}
.child{
align-self:center;
}
3、table布局
<div class="wrap">
<div class="child">
<div>sadgsdgasgd</div>
</div>
</div>
.wrap{
display:table;
text-align:center;
}
.child{
background:#ccc;
display:table-cell;
vertical-align:middle;
}
.child div{
width:300px;
height:150px;
background:red;
margin:0 auto;
}
图片垂直居中的方法
// flex
<style>
body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}
</style>
<div class="flexbox">
<img src="1.jpg" alt="">
</div>
// 绝对定位
<style>
body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}
</style>
rem适配
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<script>
const WIDTH = 750 //设计稿尺寸
const setView = () => {
document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'
}
window.onorientationchange = setView
setView()
</script>
</head>
清除浮动的方法：
1、clear：both 添加了无意义的标 签，结构化比较差
2、overflow:hidden 内容增多的时候不会自动换行导致内容被隐藏掉，无法显示出要溢出的元素。
3、伪元素：after伪元素清除浮动
.clearfix:after{
content:"."; /*尽量不要为空，一般写一个点*/
height:0; /*盒子高度为0，看不见*/
display:block; /*插入伪元素是行内元素，要转化为块级元素*/
visibility:hidden; /*content有内容，将元素隐藏*/
clear:both;
}
.clearfix {
*zoom: 1; /* *只有IE6,7识别 */
}
4、after伪元素空余字符法
.clearfix::after{
content:"\200B"; /* content:'\0200'; 也可以 */
display:block;
height:0;
clear:both;
}
.clearfix {
*zoom: 1;
}
5、使用before和after双伪元素清除浮动
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
px:绝对长度单位
em:相对长度单位 值不固定，继承父元素的字体大小 相对父元素的大小
rem：相对长度单位 相对于根元素换算