一、HTML
一个静态网页的形成就是通过HTML和CSS，你可以把HTML理解成大楼的钢筋水泥基础结构。CSS的作用相当于装修装饰。两者缺一不可，CSS对HTML起作用。
HTML由各种各样的标签组成，这些标签也在不断的扩充，但是主要分为下面3大类型：
1 块元素 block
独占一行，可以通过css改变宽高
display: block
<h1>-<h6>、<p>、<ul/ol/li>、<table>、<div>、<form>、<address>
2 行级元素/ 内联 inline
内容决定元素所占位置，不可以通过css改变宽高
display: inline
<b>、<td>、<a>、<span>、<strong>、<em>、<del>
3 行级块元素
内容决定大小，可以通过css改变宽高
display: inline-block
<img>
1 基础标签
p 段落标签
h1 ~h6 标题
strong 加粗
em 斜体
del 删除线
address 地址标签 少用
div
span
2 空格和回车 文字分隔符
html编码 &;
1 空格文本
2 尖角符号 < < > >
3 换行 <br>
4 水平线 <hr>
3 高级标签
3.1 有序标签 ol-li i
<ol>
<li>举个例子1</li>
<li>举个例子2</li>
</ol>
属性：
type默认是1，可以使用a，A, i罗马数字，I大写罗马数字
reversed 降序
start=“数字”
3.2 无序列表 ul-l
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
属性：
type默认是disc实心圆，square方块，circle空心圆
3.3 图片标签
<img src="url" />
属性：
src
1 网上的url
2 本地的绝对路径（两文件不同路径，要把文件地址写完整）
3 本地的相对路径（ 两个文件在同一路径，直接写文件名即可）
alt 图片占位符
用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
title 图片提示符
鼠标移动到图片上，出现的提示
3.4 超链接
<a href="url">Link text</a>
属性：
href: hyperText reference 超文本引用
填写要指向的链接地址
target=“_blank" 在新标签页打开
href=“tel:177****2801” 打电话
href=“mailto:521300259@qq.com” 发邮件
href=“javascript:...” 强制运行javascript代码
跳转页面不同位置
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
3.5 form 表单
<form>
First name:<input type="text" name="firstname">
Last name:<input type="password" name="lastname">
</form>
action 定义在提交表单时执行的动作
method 规定在提交表单时所用的 HTTP 方法（GET 或 POST）
<input>元素
<input type="text" name="firstname" value="Mickey">
input type
text常规文本
radio单选 ，通过name统一，value 值
checkbox复选
submit提交按钮
name 数据名
value 选项值
checked=“checked” 默认选中
<select>元素 下拉菜单
<select>
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
二、CSS
浏览器是由shell和内核组成的， 浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
1 内核，这部分知识权当了解就可以。
主流浏览器 内核
IE trident
FireFox Gecko
Chrome webkit/blink(2014年)
Safari webkit
Opera presto
2 注释，CSS文件中使用的注释。
普通注释：
<!-- 这是一条注释 -->
条件注释：
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
3 CSS，cascading style sheet 层叠样式表
3.1 引入css：
1 行间样式
<div style=“”></div>
2 页面级css
在<head>中，<style></style>
3 外部css文件
<link rel="stylesheet" type="text/css" href="">
3.2 选择器
1 id选择器 #id{}
2 class选择器 .class{}
3 标签选择器 div{}
4 通配符选择器 *{}
5 属性选择器 [id]{} , [id=“only"]{}
3.3 选择器优先级
!important > 行间样式 > id选择器 > class选择器 | 属性选择器 > 标签选择器 > 通配符选择器
3.4 css权重 （256进制）
!important Infinity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
4.5 权重计算问题
1 父子选择器/派生选择器
用空格间隔
<div class="test">
<span>1123</span>
</div>
.test span{
background-color: red;
}
2 直接子元素选择器
div下面的直接子元素em
div > em{
}
3 并列选择器
用多个限制条件，不加空格
div.demo {
}
4 分组选择器
逗号分隔
<div class="demo1">123</div>
<div class="demo2">234</div>
.demo1 {
background-color: red;
}
.demo2 {
background-color: green;
}
.demo1,
.demo2{
width: 100px;
height: 60px;
}
三、CSS基础属性
1 字体
font-size: 16px
字体大小 默认是16px (设置字体的高度)
font-weight: bold
lighter normal bolder(取决于字体包里有没有该样式)
font-style: italic
italic 斜体
font-family: arial 字体
font-variant: small-caps 小型的大写字母字体
2 边框
color 颜色
1 纯英文单词 color:red;
2 颜色代码 #ff4400
3 颜色函数 rgb(244,244,244)
border 边框
border:1px solid black 复合属性
border-width:1px;
border-style:solid; dotted点状虚线，dashed条状虚线
border-color:black;
3 文本
text-align: center 对齐方式
line-height: 20px 单行文本高度
让单行文字在区域内居中：让区域height = line-height
text-indent: 2em 缩进
text-decoration: line-through 文本装饰
underline： 指定文字的装饰是下划线
overline： 指定文字的装饰是上划线
line-through： 指定文字的装饰是贯穿线 <del>
cursor: help 光标形状
4 伪类选择器
:hover{
}
5 伪元素
::befor / ::after
6 标签初始化
<body> 默认有一个margin 8px
初始化页面的边距：
* {
margin:0;
padding:0;
}
初始化<a>标签样式：
a {
text-decoration:none;
color:#424242;
}
初始化列表样式：
ul {
list-style:none;
padding:0;
margin:0;
}
四、盒子模型
1 盒子壁 border
2 内边距 padding
3 盒子内容 width + height
4 外边距 margin
padding: 10px 20px 30px 40px; 上 右 下 左
padding: 10px 20px 30px; 上 左右 下
padding: 10px 20px; 上下 左右
类似的还有 border-width/margin 等
五、层模型 （定位）
position 定位
1 absolute 绝对定位，脱离原来位置进行定位
相对最近的有定位的父级进行定位，如果没有，就相对于文档定位
2 relative 保留原来位置进行定位
相对于自己原来的位置定位
3 fixed 广告定位 相对窗口为参考，对象不会跟着滚动
*让relative成为定位基架，让absolute成为移动对象
*然后再通过 bottom/top/left/right 等对absolute对象进行定位
4 z-index 层级
z-index: 1 值越大越靠近外层
案例：1 容器内居中
div {
position: absolute;
left: 50%;
top: 50%;
width:100px;
height:100px;
margin-left: -50px;
margin-top: -50px;
}
六、浮动模型 float:left/right
这里介绍原声HTML+CSS，VUE中可以通过v-for循环创建元素。
本文开篇处提到div标签是块元素，默认独占一行。可以通过浮动模型使其编程行级块元素。
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
</div>
.wrapper {
width: 300px;
height: 300px;
border: 1px solid black;
}
.content {
float: left;
width: 100px;
height: 100px;
background-color: orange;
}
如果 float:right
排序方式不同
思考：
浮动元素产生了浮动流：
所有产生了浮动流的元素，块级元素看不到他们。只有产生了bfc的元素和文本类(带inline属性)的元素以及文本才能看到他们。
<div class="float1"></div>
<div class="float2"></div>
.float1 {
width: 100px;
height: 100px;
background-color: black;
float: left;
opacity: 0.5;
}
.float2 {
width: 150px;
height: 150px;
background-color: orange;
}
float1的div产生了浮动，所以float2的div看不到他，产生了覆盖。
应用：
两栏布局
两个< div> 在同一行
注意：一定要先写right，再写left
因为先设置right的position:absolute，下面的div才会移动上去
<div class="right”>right</div>
<div class="left”>left</div>
.right {
position: absolute;
right: 0;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
.left {
margin-right: 100px;
height: 100px;
background-color: orange;
}
浮动模型中的bug：
1 margin塌陷
问题：父子嵌套的元素，在y轴方向
解决：改变父级的渲染规则，让父级变成BFC
BFC: block format context
如何触发一个盒子的BFC：
1 position:absolute
2 display:inline-block
3 float:left/right
4 overflow:hidden 溢出部分隐藏
2 margin合并
问题：相同元素的margin在y轴方向margin合并
解决：单一设置一个元素的margin
3 浮动元素无法让父元素自适应大小
解决1：在浮动元素最后加入一个<p>标签，设置p标签的css，clear:both清除浮动
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<p class="bottom"></p>
</div>
.wrapper
border: 1px solid black;
}
.content {
float: left;
width: 100px;
height: 100px;
background-color: orange;
}
p {
border: 0 solid green;
clear: both;
}
但是这种解决方式需要在HTML文件中添加一个无意义的<p>标签，这不太符合我们程序设计的原则。
解决2：伪元素
::befor / ::after 天生是行级元素，若要修改其宽高等属性，需要修改成块级元素，或者行级块元素
修改上面代码
.wrapper::after {
content: "";
display: block;
clear: both;
}
clear生效一定要块级元素，能清除浮动的一定要块级元素
解决3：BFC
原理：为什么父级元素看不到浮动元素？
因为，父级元素是一个<div>块级元素，块级元素看不到有浮动流的元素
所以，让父级触发bfc，它就可以被浮动元素看到
position:abolute; float:left/right
内部把元素转换成inline-block; 所以它的宽度由内容决定
.wrapper {
position: absolute;
border: 1px solid black;
}
七、经典案例
案例1：溢出容器，要打点现实
1 单行文本
处理：
p标签换行：
1 让文本失去换行功能 white-space: nowrap;
2 益处部分隐藏 overflow:hidden;
3 益处部分用…展示 text-overflow: ellipsis;
2 多行文本
处理1: 对于老版本浏览器
人工估算显示区域的文本容量，在文本内容最后手动替换成"..."
处理2:
只做文本截断，overflow:hidden; 让区域height是line-height的整数倍。
案例2：标签中放背景图片
以div标签为例：
div {
width: 200px;
height: 200px;
background-image: url(xxx.jpg);
background-size: 100px 100px;
background-repeat: no-repeat; /* 默认是repeat */
background-position:50% 50%; /* 中心居中 */
}
案例3：图片代替文字 a标签
处理1: 把a标签默认文字用css放在显示区域外
<a class="a-img" href="[http://www.taobao.com](http://www.taobao.com)">淘宝网</a>
/*初始化a标签样式*/
a {
text-decoration: none;
}
.a-img {
display: block;
width: 142px;
height: 58px;
/*padding-top: 90px;*/
background-image: url([https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);](https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);)
background-size: 142px 58px;
text-indent: 200px;
white-space: nowrap; /*取消换行*/
overflow: hidden;
}
处理2: 利用padding上可以添加背景图的性质
.a-img {
display: block;
width: 142px;
height: 0px;
background-image: url([https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);](https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);)
background-size: 142px 58px;
padding-top: 58px;
overflow: hidden;
}
八、规则
1 行级元素只能嵌套行级元素
2 块级元素可以嵌套任何元素
特例：
1 p标签里不能嵌套div
如果嵌套，p标签会被内部的div砍成上下2个
2 a标签里不能嵌套a标签
Flex 布局：
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
设置：
1 display:flex 指定为块容器模块，在一行内显示子元素
可以使用flex-wrap指定是否换行：nowrap(不换行)，wrap(换行)，wrap-reverse(换行第一行在下面)
2 display:block 指定为行内容器模块
小程序中 view、scroll-view、swiper 都是默认display:block
设置之后，元素就是一个flex container伸缩容器。
主轴和侧轴（flex-direction）：
flex-direction：
row :从左到右的水平方向为主轴
row-reverse：从右到左的水平方向为主轴
column:从上到下的垂直方向为主轴
column-reverse从下到上的垂直方向为主轴
对齐方式（justify-content、align-items）:
justify-content 定义子元素在主轴上面的对齐方式
align-items 定义子元素在侧轴上对齐的方式
justify-content:
flex-start 主轴起点对齐(默认值)
flex-end 主轴结束点对齐
center 在主轴中居中对齐
space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。
eg：这里默认 flex-direction: row 为主轴
align-items：
stretch 填充整个容器(默认值)
flex-start 侧轴的起点对齐
flex-end 侧轴的终点对齐
center 在侧轴中居中对齐
baseline 以子元素的第一行文字对齐
eg：这里默认 flex-direction: row 为主轴
