这个笔记本来是想先上文档版的，但由于里面有些标签会导致显示不出来，所以之前只上了个思维导图版的。
时隔好久，想发篇markdown版的博文时，一进来就看见这篇文档版的草稿，顺便学下markdown的写法，也补上上文档版的笔记。
笔记较多也较零碎，但是渡一的课程质量真的是杠杠的（哈哈哈！我是渡一忠实粉！），所以还是建议大家直接去看课程的好。
（js的课程还在学习中，后期也会整理出文档版和思维导图版笔记的，希望能给大家带来帮助，如有描述不当的地方，欢迎指出~ ^ _ ^）
课程链接：https://ke.qq.com/course/231570
思维导图版笔记：https://blog.csdn.net/weixin_43494837/article/details/88774396
文档版：
一、html初级篇
1．html：hyperText markup language，超文本标记语言
2．<meta charset = “utf-8”>
（1）charset：编码
① utf-8：万国码，包括所有国家的语言，8bit
② gb2312：国家标准码，不包括繁体
③ gbk：国家标准扩展码，包括繁体
3．<html lang = “en, ch”>
（1）lang：语言，为爬虫而标识
① en：英文
② ch：中文
4．基本标签
（1）<p>：段落标签，成段
（2）<h1>~<h6>：标题，成段，更改字体大小，加粗
（3）<strong>：加粗
（4）<em>：斜体
（5）<del>：删除线
（6）<address>：地址，成段，斜体
5．容器
（1）<div>：成段
（2）<span>：无效果
（3）作用：结构化，捆绑操作
二、html进阶篇
1．<div>里一个单词（没有空格）不换行，会溢出（文字超出div的框）
2．&打头：
（1） ：空格
（2）<：小于号（little）
（3）>：大于号（great than）
3．<br>：换行
4．标签分类
（1）单标签：不需要修饰，自己带有功能（<meta> <br> <hr>）
（2）双标签：包裹东西，修饰东西
5．列表
（1）有序列表
<ol type = “a” // 序号为小写字母
reversed = “reversed” // 排列为倒序
start = “8”> // 排序起始位置
（2）无序列表
<ul type = “disc”> // 序号为实心圆
square // 方块
circle // 圈（空心）
6．<img>
（1）alt 图片占位符
（2）title 图片提示符
7．<a>
href：hyperText reference，超文本引用
作用：
①超链接
②锚点（本页目录跳转）
③打电话 tel
④发邮件 mailto
⑤协议限定符 javascript:
8．<form> 传送数据必须：数据名、数据值
9．产品吸引注意力的3个特点
（1）刚需
（2）用户体验
（3）用户粘性（懒惰性），如默认选中
10．编程模式
结构（html）、行为（js）、样式（css）相分离
11．浏览器
（1）浏览器 = shell（外壳）+ 内核
（2）主流浏览器
①条件
1）在市场上有一定的份额
2）有自己研发的内核
②包括
1）IE trident
2）Firefox Gecko
3）Google chrome Webkit（旧） / blink（新）
4）Safari Webkit
5）Opera presto
12．注释 <!-- -->
作用：
①备注
②调试
三、css初级篇
1．css：cascading style sheet，层叠样式表
2．引入css
（1）行间样式 style = “ ”
（2）页面级 <style> </style>
（3）外部文件 <link rel=”stylesheet” href=””style.css> ，同时（异步）加载
3．css选择器
（1）Id选择器 #（井号）
（2）class选择器 .（点）
（3）标签选择器 （标签名）
（4）通配符选择器 *（星号）
（5）属性选择器 []（中括号）
四、css复杂选择器，权重计算问题，基础属性
1．复杂选择器
（1）父子选择器 / 派生选择器 空格
（2）直接子元素选择器（直接下一级） >
（3）并列选择器
（4）分组选择器（多个标签共用）
2．字体
Arial 通用字体，乔布斯发明
3．color
（1）土鳖式 纯英文单词：只能测试用
（2）颜色代码 #
（3）颜色函数 rgb( , , )
（transparent：透明色）
4．css权重
（1）!important infinity（无穷）
（2）行间样式 1000（256进制）
（3）id选择器 100（256进制）
（4）class选择器|属性选择器|伪类（:）选择器 10（256进制）
（5）标签选择器|伪元素（::）选择器 1（256进制）
（6）通配符选择器 0（256进制）
五、css企业开发经验、习惯，盒子模型，层模型
1．开发经验
（1）垂直居中（单行）：文本高度line-height = 容器高度height
（2）1 em = 1 font-size
2．元素分类
（1）inline 行级元素
① 包括
<span> <strong> <em> <a> <del>
② 特点 内容决定元素所占位置
不可以通过css改变宽高
（2）block 块级元素
① 包括
<div> <p> <ul> <li> <ol> <form> <addredd>
② 特点 独占一行
可以通过css改变宽高
（3）inline-block 行块级元素
① 包括
<img>
② 特点 内容决定元素所占位置
可以通过css改变宽高
3．盒子模型
（1）border 盒子壁 + padding 内边距 + content（width + height） 盒子内容
（2）magin / padding内容
①上|右|下|左 ②上|左右|下 ③上下|左右
（3）触发盒子的bfc
① bfc ： block format context
② 方法
1） position: absolute
2） display: inline-block
3） float: left / right
4） overflow: hidden
使用1）和3）时，浏览器内部会给盒子自动加上2）
4．层模型 position
（1）absolute
① 脱离原来位置进行定位
② 相对于最近的有定位的父级进行定位，否则相对于文档进行定位
（2）relative
① 保留原来位置进行定位（灵魂出窍）
② 相对于自己原来的位置进行定位
一般用relative进行参照，再用absolute进行定位
5．浮动模型 float
（1）浮动元素产生了浮动流
① 产生了浮动流的元素，块级元素看不到
② 产生了bfc的元素和文本类属性的元素以及文本，都能看到浮动元素
（2）清除浮动流 clear
生效条件：只作用于块级元素
六、css高级篇
1．伪元素
（1）::before
（2）::after
天生是行级元素，必填属性content
2．溢出容器，打点展示
（1）单行文本（三件套）
① white-space: nowrap
② overflow: hidden
③ text-overflow: ellipsis
（2）多行文本
① 后端估算返回（为适应旧浏览器）
② 前端只做截断（hidden），不做打点
3．图片代替文字（网速低于20k时，浏览器会屏蔽css和js）
（1）方法一
text-indent > width
white-space: nowrap
overflow: hidden
（2）方法二
height: 0
padding-top = 图片的height
overflow: hidden
4．公司规定
（1）行级元素只能嵌套行级元素（但<a>不能嵌套<a>）
（2）块级元素可以嵌套任何元素（但<p>不能嵌套<div>）
4556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
