《撩课-玩转H5大前端》

基于《撩课-玩转H5大前端》 3
快捷键和webstorm使用技巧 4
第一章 8
知识体系介绍 8
（一）HTML标签-Day1 8
img标签 8
input标签 8
< a href>标签 9
列表标签 9
表单标签（常用于登录注册） 10
样式/节（用的最多的标签之一 60%-70%） 10
HTML5新增的标签 10
标签之间的关系 11
站点图标/网站缩略logo标志转换网站 11
导入站点图标 11
Meta标签的属性补充 11
河马牙医网页开发过程 12
第二章 13
（二）CSS样式-Day2 13
CSS选择器 13
标签类型划分 18
（1）块级标签： 18
（2）内联（行内）标签： 18
（3）块级-内联（行内）标签 18
（4）块元素与内联元素相互转换 18
块属性 19
盒子模型： 19
padding: 20
浮动 21
标签居中 22
vertical-align属性： 22
（三）CSS常用属性-Day3 23
可继承属性和不可继承属性 23
visibility 23
cursor[ˈkɜːrsər](ker sir)：设定要显示的光标类型 23
字体 23
字体粗细 24
字体风格（是否倾斜） 24
设置首行缩进 24
转换字母大小写 24
list-style（列表属性） 24
（overflow（控制内容溢出的情况） 25
line-height 25
box-sizing 25
a标签的空隙问题 25
行高和行间距 25
（四）页面布局-Day4 27
定位 27
层级z-index 28
圆角border-radius 28
背景 28
背景图片平铺（重复） 29
背景图片位置 29
背景图片尺寸 29
背景图片是否随页面滚动background-attachment 30
动画 31
Mac桌面开发 31
（五）Day5 32
整体写页面的思路： 32
雪碧图(精灵图)-CSS Sprites 32
高度塌陷-处理使用float时出现的问题 32
高度重叠： 34
序号选择器 35
匹配所有以指定内容开头的选择器。 36
匹配所有的含有指定内容，但是内容位置任意的选择器。 36
第三章 37
rem的综合使用-可以在不同尺寸屏幕上向用户显示更合适的布局 37
（七）Day7 37
字体图标-可以像字体一样使用图标 37
伸缩布局-完全应用于移动端-电脑端也可以用，但主要用其他布局方式 39
主轴和侧轴 39
flex-direction：指定主轴的方向 39
justify-content：主轴上子项的对齐方式 40
align-items：指定侧轴上子项的对齐方式 40
小米官网首页开发 40
 
基于《撩课-玩转H5大前端》
0.2019-8-18 我现在的主要问题是不熟悉找标签和调用标签选择器，老是搞混标签，或者根本找不到想要的
1.相对看书和网站学习，看网课的优点是学习有侧重点，当然这跟授课人的水平高度相关
2.老师开发过程的技巧：先在标签中填充背景色，然后设置标签位置，最后将内容填入标签
3.做页面的基本原则：先大后小，先外后里

快捷键和webstorm使用技巧
1.快速获得指定数量的标签:例如6个section标签输入 ，再按tab
2.多点编辑：①Ctrl+C复制需要在其他标签里粘贴的内容，②alt+左键，一个个选中需要粘贴内容的标签，例如下图中右侧有白线的就是需要编辑的标签
③按空格后跳出图中内容，按粘贴ctrl+V即可
3.快速填充单词或词组：只用打两个字母然后回车，就能自动填充完成的属性或者方法。
例如 →回车→ 或者 →回车→ 边框宽度默认是1px，实线，颜色是#000
4.取消链接下划线：
4.1给链接或者文字添加下划线
上划线
删除线
5.百分百单位：
6. 简写背景的多个属性
7. 去除所有链接的下划线：
在

9.css样式开头设置margin：0和padding：0的快速方法。
输入 ，然后按tab
10.p标签中显示一个空格： 
11.dl dt dd li的联系和区别：首先

12.快速创建子目录：只要在命名的时候加一个斜杠就行
13.去除，在点击按钮和输入框时出现的外边框，使更加好看：
outline：none;

第一章
知识体系介绍
（1）浏览器最重要的的核心是“浏览器内核”，也叫渲染引擎。
（2）网页主要由三部分组成：
（3）HTML是用来描述网页的标签语言
（4）头部：文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等
（5）

（2）插入音频：
（3）插入视频：
标签之间的关系
分为两大部分：head和body
关系有
1、例如head是meta和title的父元素，则h1和p是body的子元素
2、兄弟元素是平级的。

站点图标/网站缩略logo标志转换网站
http://www.faviconico.org/
拿别人网站缩略图的方法：在网址的后缀加/favicon.ico 例如百度https://www.baidu.com/favicon.ico
导入站点图标
把ico格式的图标放在根目录下，再引用即可,
Meta标签的属性补充

webkit的渲染更快 河马牙医网页开发过程 1.头部，2.中部多个文档中的节section，3.尾部 ①将整个页面分成三大部分处理，分别写出对应的代码

②头、中、尾部填充颜色，以及设置与图片相同的高度
③填充内容（分为头部和尾部的功能栏，以及中部的直接插入图片）
直接插入图片会出现图片的宽度和网页的最大宽度不一致，所以需要设置宽度比例为100% ，而设置完宽度比例后，可以把图片的具体高度删除，因为高度会按照宽度的比例自动调整
④处理每张图片的不必要间距
使用CSS设置图片格式为顶部对齐
 
第二章
（二）CSS样式-Day2
主要使用的是
页内样式：作用于全局
行内样式：优先级大于页内样式
外部样式：独立的CSS文件，不管哪个文件，需要里面的样式就可以直接引用
样式的优先级：代码从上往下执行，前面的被后面的覆盖，所以下面的代码优先级更高。但是行内代码优先级最高。
CSS选择器
（1）通用选择器：选择页面中所有元素。语法：*{}
（2）标签选择器：对一个指定类型的所有标签进行样式修改。语法：
例如p标签：p{} div标签：div{}
（2.1）通用选择器的优先级最低，在最底层。
（3）类选择器：可以对不同类型、相同类名class的标签进行修改。语法：.类名{}
（3.1）多个类选择器可以同时作用于同一条语句。例如类选择器test和test2同时起作用
（4）id选择器：可以为标有特定id的HTML元素指定特定的样式。语法：以#来定义。
例如：
（4.1）id选择器只能用于一个标签
（4.2）id选择器用于最外层的布局结构，然后里面用类选择器class或者标签选择器div
（5）复合选择器：不同类型标签里用同一个类选择器或id选择器时，需要对指定的标签进行修改，则需要用到复合选择器。
语法：div标签中名为main的id选择器
div标签中名为test1的类选择器
（6）群组选择器：多个选择器同时应用指定的样式。
语法：用逗号分开每个选择器
（7）后代选择器：只要是该标签的后代，不管是直接后代 还是间接后代，都能起作用。 对名为main的id选择器中的所有p标签改为红色字体
（7.1）直接后代选择器：只会对标签的直接后代起作用。
语法：将名为main的id选择器的直接后代p的字体改为红色
（8）兄弟选择器
语法：查找后面一个兄弟元素：p标签必须要紧挨着div标签，才算是div的兄弟标签，才修改样式的语句才能起作用
查找后面所有兄弟元素：div后面的所有p标签都可以同时被修改
（9）属性选择器：可以挑选带有特殊属性标签（用复合选择器也同样能实现）
对所有div中的带有name属性的语句设置红色字体
因为name的值有所不同，所以是设置name值为liiaoke的语句背景颜色
多属性： 用多个中括号
（10）伪类和伪元素：
伪类以单冒号： 开头
：hover选择被鼠标悬浮着的元素。当鼠标放在被：hover标记的标签上时，执行：hover中的内容。
例如
当鼠标移到class为test1的p标签上时，将整个段落的高度自动变为600px，背景颜色变天蓝色
：focus选择拥有键盘输入焦点的元素（用于输入框，文本显示框无效）。鼠标点击输入框时，自动将输入框的宽度和高度变为设定的大小
伪元素以双冒号：：开头
：：first-letter
：：first-line
：：after
：：before
（11）否定伪类：选择不是其他标签的某个标签。
（12）选择器的优先级： （12.1）什么叫权值相同，后定义的优先？
Test1和test2是相同的权值，但test2是后定义的更优先，所以显示test2的内容（也可以理解为后面定义的覆盖了前面定义的）

（12.2）important的使用：当某个样式非常重要，并且不能被其他样式覆盖时，则要使用important 例如p标签很重要，则使用！impsortant
（13）内联：把样式写在标签内部。例如p标签里的style就是内联。

标签类型划分
（1）块级标签：单独占一行，就像一个段落，可以随时设置宽度和高度。

（2）内联（行内）标签：不会独占一行，就像一个单词，一直往后排
（2.1）内联（行内）标签的高/宽度、内/外边距无法改变
（3）块级-内联（行内）标签
结合了前两者的优点，既能设置高/宽度，也能在同一行显示
（4）块元素与内联元素相互转换
（4.1）将块级标签转换为行内标签
原来的块级标签的高和宽的设置会被取消
转换前
转换后
（4.2）将行内标签转换为块级标签
因为是块级标签，所有可以设置标签的高宽等参数
转换前：
转换后：
（4.3）将标签变为行内-块级标签
块属性
盒子模型：在网页中，一切皆盒子
网页上每一个标签都是一个盒子。

content：内容。盒子里装的东西。
padding:盒子的内边距，盒子的边框与盒子内部元素的距离。相当于泡沫，起缓冲作用。

border:边框。相当于纸盒本身。
单独设置一边的边框。语法：border-位置：
例如上边框
边框圆角：30个像素点的圆角
设置为圆：
设置左上方和右上方为圆角
margin:盒子的外边距，盒子与盒子之间的距离。
（1.2）width和height指的是content内容的宽度和高度
浮动
（1）要对两个或以上块级标签设置高度和宽度，并且要独占一行，就需要使用浮动。
（2）搭配margin使用，控制浮动标签的边距。

标签居中
水平居中（更常用）
块级标签水平居中：只需要在该子标签中加上这一行。
行内标签和行内-块级标签水平居中：只需在父标签中加上这一行
span的父标签是div，所以在#box{}中加入即可。
垂直居中：
定位原则：“子绝父相”绝对定位和相对定位
vertical-align属性：通过调整基线实现置图片和文字的对齐方式
 
（三）CSS常用属性-Day3
可继承属性和不可继承属性

visibility

visibility属性的值hidden与display属性的值none
相同点：都可以隐藏标签。
不同点：hidden会把原有的空间保留，而none则是完全“消除”标签。
cursor[ˈkɜːrsər](ker sir)：设定要显示的光标类型
鼠标移到该标签后，会变化为指定光标。
鼠标显示为等待中：
字体
电脑里没有前面的字体，就默认使用后面位置的字体
字体粗细

字体风格（是否倾斜）

设置首行缩进
转换字母大小写
list-style（列表属性）
设置列表的显示为小写字母还是罗马字母或者其他的格式
（overflow（控制内容溢出的情况）
横向和纵向滚动条：
只有纵向的滚动条：

line-height
box-sizing
添加内边距padding和边框border是默认从内容content内往外扩，也就是
如果需要从内容里往内扩，则需要添加语句
为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
a标签的空隙问题
在父标签设置font-size为0
然后在a标签设置大小不为0的字体
行高和行间距
行高line-height是可以自己设置的，而行间距是(行高-文字高度)/2

①是行高 ②是行间距
 
（四）页面布局-Day4
定位
可以将页面中的元素，摆放到页面的任意位置。
（1）相对定位relative：相对自己，以自身为参照物
（1.1）相对定位的元素会提升一个层级，导致覆盖其他的内容。但不会像float一样脱离文档流。
（1.2）不会改变元素的性质，块级/行内标签的性质不变
例如开启了相对定位的box2覆盖了box3
（2）绝对定位absolute：相对于父标签
（2.1）父标签有直接父标签和间接父标签之分。
（2.2）绝对定位的元素是相对于距离他最近的开启了定位的祖先元素 进行定位。
该标签会一直往上找到距离最近的进行定位的父标签。
如果所有祖先元素未开启定位，才是相对于浏览器窗口进行定位。
（2.3）绝对定位会改变元素性质。内联变块，块的高度和宽度都被内容撑开，不会独占一行
（2.4）绝对定位的元素会完全脱离文档流。
（3）固定定位fixed:相对于整个窗口/浏览器
（3.1）特殊的绝对定位。大部分特点和绝对定位相同，不同的是固定定位的元素永远相对于浏览器窗口进行定位，并且不会随滚动条滚动。
层级z-index
（1）使用层级的前提是开启定位

圆角border-radius
可以设置指定方位的圆角弧度：
宽度和高度相同时，显示为圆。宽度高度不同时，为椭圆。
背景
（1.1）设置背景颜色的四种方式：
rgba（）可以设置透明度（取值为0-1）
（1.2）单独设置颜色透明度的方法：（取值是0-1）
（1.3）设置背景图片：url放本地图片的路径

背景图片平铺（重复）
（1.1）设置背景图片平铺方向
：
（1.2）取消背景图片平铺（重复）：
背景图片位置
（1.1）背景图片大于标签，则显示背景图片的左上角
（1.2）background-position：两个参数分别为x和y轴偏移量
（1.3）可以通过调整图片位置，只显示部分图片，从而实现“裁剪”的功能。
背景图片尺寸
（1.1）通过设置背景图片的尺寸设置背景图片在不平铺（重复）时，占满整个标签。
完全占满整个标签

精细设置图片尺寸： 宽是400px，高是200px
（1.2）cover和contain的区别：
相同：①都是将图片以相同横纵比缩放以适应整个容器的宽高
②因为是按图片原来的横纵比拉伸的，所以图片不会失真
不同之处在于：
在no-repeat情况下，如果容器宽高比与图片宽高比不同
cover：图片宽高比不变、铺满整个容器的宽高，而图片多出来的部分则会被截掉
contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域
PS:其实，从英文的意思来说：cover意味着“遮罩、遮盖”—此处理解为“塞满”较恰当，contain意为“包含”–也就是：图片虽然缩放了，但是整个图是被“包含”在你里面的，你必须把我显示完整、不能裁剪我一丝一毫 。

背景图片是否随页面滚动background-attachment

动画
（1.1）确定动画的类型调用：hover伪类，当鼠标移到标签上时，图片放大到原来的1.5倍
（1.2）设置动画的方向:从底部往中间运动

（1.3）设置动画过渡的时间和效果: 0.25秒完成动画，线性变化

Mac桌面开发
底部图标栏背景设置为灰色0.5透明度

（五）Day5
整体写页面的思路：以经典页面布局为例。
1、首先搭建整体结构：分三大块，用对应的文字和颜色标记
2、按照从上到下，从左到右的顺序分别处理每一块的内容
3、去除背景颜色
雪碧图(精灵图)-CSS Sprites
（1.1）获取大图片中的小图片
将多个小图标以.png的格式引用到页面上，使用雪碧图相当于只要引入最后的大图即可。
节省了内容和宽带，提升性能。
（1.2）借助软件firework
示例：截取小图片后，需要设置div的宽度为15px，高度17px
background-position:-48px -198px 注意x和y都要取负值

高度塌陷-处理使用float时出现的问题
父标签高度自适应，子标签float浮动后，造成父标签高度为0，称为高度塌陷。
父标签属性：
子标签把父标签的高度撑了起来：

子标签右浮：造成父标签高度为0，高度塌陷

解决方法：
方法一：开启父标签的BFC。
在父标签设置overflow的值为hidden
BFC:块级格式化环境

开启BFC后
方法二（用得最少）：在塌陷元素的最后添加空白div，然后对该div进行清除浮动

缺点是会增加多余的div，造成代码冗余
方法三（最常用）：使用after伪元素。原理和方法二一样，只是不用添加多余div标签。

高度重叠：
本来黄色和紫色盒子的上面的边应该分开，但是却发生了重叠。

解决方法：
方法一：添加table标签。
缺点是造成代码冗余。

方法二：使用伪元素。例如#box4

clearfix改进：
table不是固定的，根据实际情况要进行更改
序号选择器
不区分类型
:first-child
选中同级别中第一个标签
:last-child
选中同级别中最后一个标签
:nth-last-child(n)
选中同级别中倒数第n个标签
:nth-child(n)
选中同级别中第n个标签
:only-child
选中同级别中唯一子元素标签
区分类型
:first-of-type
选中同级别中同类型第一个标签
:last-of-type
选中同级别中同类型最后一个标签
:nth-of-type(n)
选中同级别中同类型第n个标签
:nth-last-of-type(n)
选中同级别中同类型倒数第n个标签
:only-of-type
选中同级别中唯一同类型子元素标签
奇偶选择
:nth-child(odd)
选中级别中所有奇数
:nth-child(even)
选中同级别中所有的偶数
:nth-child(xn+y)
x,y是用户自定义的 n为计数器,从0开始递增选择, 到元素的总个数停止

匹配所有以指定内容开头的选择器。例如匹配所有以icon-开头的class类选择器
匹配所有的含有指定内容，但是内容位置任意的选择器。例如匹配所有内容中含有icon-的选择器。只要选择器中含有icon-，就能被匹配到。

第三章
rem的综合使用-可以在不同尺寸屏幕上向用户显示更合适的布局
（1）默认字体高度为16px
（2）1rem=16px
（3）可以自定义rem 的大小。例如实际开发中设置所有标签和字体的font-size为10px，则此时1rem=10px，便于计算
（4）单独设置字体大小时，要在body中设置。例如1rem=10px时，要设置字体为1.2rem，则要先设置html然后设置body
（七）Day7
字体图标-可以像字体一样使用图标
优点：
矢量图库：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
图标转换：https://icomoon.io/
①在矢量图标网站下载svg图片
②将svg图放入指定文件夹（例如img文件夹）
③进入iconmoon网站：
④导入本地的字体图标
⑤选择要转换的图标（例如下面是全选）
⑥点击右下角的创建
⑦在左上角进行对应的属性设置
⑧点击右下角下载压缩包即可
⑨将压缩包中的style.css和font文件夹复制到webstorm
⑩引用图标：使用类选择器，然后复制点之后，冒号之前的内容即可引用。（例如下图的icon-icon_即为e900对应的图标-e900的内容在图标转换网站可以看到 ）
伸缩布局-完全应用于移动端-电脑端也可以用，但主要用其他布局方式

常用属性
主轴和侧轴
主轴：默认是水平方向，从左往右
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下
flex-direction：指定主轴 的方向
justify-content：主轴上子项的对齐方式

align-items：指定侧轴上子项的对齐方式

flex-wrap：指定子项是否换行

小米官网首页开发