前言:
国庆有点时间就这样整理了一遍：在Typora 整理觉得挺好看的，这里显示真心难看，排版不出效果。时间关系就这样吧！
HTML
浏览器：
作用：
1、发送请求
2、接收响应
3、解析响应代码
分类：
谷歌、火狐、IE、苹果、欧鹏
内核：作用：相当于浏览器的发动机。
发展：
1、只有结构（HTML）单调。
2、加入样式。（css）页面更加美观，但缺少交互
3、加入行为（js）使网页具有交互效果。
web标准：
结构(html)、样式(css)、行为标准（js）。
结构标准（html）
概念：
1、(HyperText Mark Language)超文本标记语言
2、超文本：本质上是普通文本，但是可以解析为图片、链接、音频、视频...
3、语言：它是web标准中描述结构的语言。
4、标记：这种语言的一个特点：a、书写需要使用一个标记来进行突出。b、以"<"开头，以">"结尾
骨架格式：
1、用来管理当前页面上的所有的内容。
2、
3、
4、 用来存放一些头部信息
标签：（重点）
分类：
双标签：成对出现
单标签：只有一个开头的标签，并且在开头标签中有个 "/",例如：
关系：
嵌套关系：将来如果两个标签是嵌套关系，书写时，被嵌套的标签需要向右有个缩进。
并列关系：将来如果2个标签是并列关系，在书写时，2个代码需要左对齐。
常用标签：
1、p标签：作用：段落
2、h系列的标签：作用：标题。分类：h1,h2,...,h6。注意：一个页面只允许出现一个 h1
3、hr 标签。作用：水平线（无语意）
4、br 标签。作用：换行（无语意）
5、没有语意的标签（常用）：
div：
特点：单独可以占一行
作用：结合css进行页面的布局，（div+css布局）
span：
特点：一行可以显示多个
作用：将来也是在div+css布局中辅助布局
6、文本格式化标签：
没有语意：
b:作用：加粗文本
s:作用：给文本添加删除线
i:作用：给文本添加倾斜效果
u:作用：给文本添加下划线
强调语意：
strong：作用：加粗文本。
del: 作用：给文本添加删除线
em: 作用：给文本添加倾斜效果
ins: 作用：给文本添加下划线
7、img标签：
作用：在页面上可以添加一张图片
语法：![]()
标签的属性：
作用：可以为标签设置一些信息。
src：路径。例如：src="login.png"
alt: 给图片设置描述信息，当图片无法正常加载时会显示这段文本。
title：给图片设置描述信息。
width：给图片设置宽度。如果只设置宽度，那么图片会等比例缩放。
height：给图片设置高度。
border：设置边框。
8、a标签：
作用：在页面添加链接。1、从一个页面跳转到另一个页面2、空链接3、锚链接
名称：链接、超链接、a标签
语法：文本
属性：
href 作用：设置超链接的跳转路径。
title 作用：设置链接的描述信息。
target： 作用：设置a 标签的跳转方式。
取值：_self 在原页面上跳转
_blank 在新的页面上跳转
base：可以统一设置当前页面的a 标签的跳转方式
9、路径
绝对路径：带有盘符的路径，换一条设备就不能打开。
相对路径：
a、同一目录下 
b、文件在图片的上一级目录
c、图片在文件的上一级目录
10、列表：
作用：用来管理一系列的数据。
无序列表（用的最多的）
有序列表（用的比较少）
自定义列表（基本不用）
11、表格
作用：用来管理多组数据。
语法：
属性：
border 设置边框
width 设置宽
height 设置高
cellspacing 设置单元格和单元格之间的间距
cellpadding 设置单元格的边框与内容之间的距离
align 设置对齐方式
取值 left、right、center
完整结构
给表格设置内容
合并单元格
rowspan 跨行合并
colspan 跨列合并
12、表单元素
text 文本框
value 默认值
password 密码
value 默认值
radio checked="checked"
name 分组
button 按钮
value 设置文本
file 上传框
label 给label中的文本设置点击时选中的表单元素
属性 for="id名"
CSS
表单元素
作用：收集用户信息
常用元素：input、select、textarea
input
type="text" 文本框、type="password" 密码框、type="radio"单选框、type="checkbox" 多选框（属性name 用来设置分组）checked="checked"
type = "file" 上传框
type="button" 按钮
type="submit" 提交按钮、属性 ：value 改变按钮中的默认文本。必须与form结合起来使用。要提交的表单元素必须具有name属性。
type="reset" 重置按钮、属性：value 改变按钮中的默认文本。必须与form结合起来表单提交才有效果。
type="image" 图片按钮。属性：src
select
下拉框
标签：option 下拉选项 属性：selected = "selected" 设置默认选中
textarea
文本域
属性：
rows 设置行数
clos 设置列数
css 层叠样式
作用：修改html 页面中的结构
属性：
color、width、height、background、border
字体相关属性：
font-style: normal、italic(斜体)
font-weight: 作用设置字体的粗细。normal/400，bold/700 加粗
font-size: 作用 设置字体风格，单位 px
font-family: 作用：设置字体类型。取值：微软雅黑、宋体、黑体、楷体、中文
简写：font-style、font-weight、font-family。注意：font-style、font-weight可以省略。font-size、font-family 不能省略。
水平方向：left、center、right
垂直方向：top、center、bottom
text-align ：
作用：设置容器中的内容在容器的水平方向上的位置。
取值：left ：水平靠左（默认值）
left：水平靠右
center：水平居中
text-height
设置一行文本的高度
应用：可以让文本在容器的垂直方向上居中（让line-height = 容器的高度）
注意点：如果light-height < 容器的高度，文字会向上偏。= 文字居中，> 文字会向下偏。
text-indent
作用：设置文本的首行缩进
单位：px 具体的像素
em 一个字体大小
text-decoration
作用：设置文本修饰
取值：none 没有任何装饰（默认）
underline 下划线
选择器
单一选择器：
1、标签选择武器
p{}、span{}
2、类选择器
.login{}、.content{}
3、id选择器
#id{}
4、通配符选择器
*{margin:0,padding:0}
复合选择器
1、后代选择器 父元素后所有子元素 关键字： 空格
2、子代选择器 父元素下面的第一层子元素中对应的标签 关键字： >
3、交集选择器 选中多个选择器交集的元素 关键字：无
4、并集选择器 选中多个选择器中集合合并的部分 关键字： ,
链接伪类选择器：
LVHA 记忆：买了个LV，心里乐 HA 哈！
1、为被访问：a:link{属性名:属性值}
2、被访问过：a:visited{}
3、鼠标停留：a:hover{}
4、被点击时：a:active{}
解析：在css中为链接准备了4种状态。给开发者设置这些样式。
分类
注意：根据css样式所在的位置我们可以将css分3大类
行内样式
通过标签的style属性来设置样式。
特点：只能作用在当前行、结构与样式混合在一起不利于管理和维护
一般情况下不建议使用。
内部样式
在header 标签之中的style标签里面写属性。来设置样式
特点：只能作用在当前页面
结构与样式相对分离，管理维护相对方便。
外部样式
通过在一个后缀名为.css 的文件中写属性。 设置link 为样式表。
标签 link rel="stylesheet" 设置当前link为样式表
href="" 设置外部样式的路径
特点：样式可以作用在任意页面
结构与样式完全分离
元素的显示方式：display
块级元素：
1、单独占一行
2、可以设置宽高
3、如果不设置宽高，宽度默认是一整行，高度默认是由内容觉决定的
关键字：display:block
具体：p、h、div、ul、ol、dl、dd、li
行内元素：
1、一行内可以显示多个
2、无法设置宽高
3、宽高都由内容来决定
关键字：display:inline
具体：
b、u、i、strong、ins、、del、em、span、a、label
行内块级元素：
一行内可以显示多个
可以设置宽高
如果不设置宽高，宽高由内容决定
关键字：
display：inline-block
具体： img、input、textarea、select
css的三大特性
继承性
作用：给父元素设置样式，子元素也会起作用
特殊情况：a标签的颜色、h标签的大小
那些属性可以继承？
color、fon-、text-align
层叠性
定义：是浏览器处理冲突的一种能力
规则：优先级
优先级
定义：层叠的规则
在单一选择器： 行内 > id > 类 > 标签 > 通配符 >继承
复合选择器：算法：权重
格式：（0,0,0,0）
第一个 0 表示是行内元素：如果样式行为 行内元素。 如果有个id选择器，给这个数字添加1,(1,0,0,0)
第二个0 表示的是这个复合选中 id选择器 的个数。如果有个id选择器，给这个选择器加 1
第三个 0，表示的是这个复合选择器中 类选择器 的个数。如果有个类标签选择器，给这个数字添加1, (0,0,1,0)
第四个 0，表示的是这个复合选择器中标签选择器的个数，如果有个标签选择器，给这个数字添加1，（0,0,0,1）
比较方式：从左到右依次比较四个数字，左边数字大的就大，如果相等比较下一个数字
注意： 权重越大，优先级越高，继承的权重为0
div 盒子模型
内容：给元素设置宽高，其实是给元素的盒子模型的内容设置的。
border 边框：
border：给盒子设置边框
语法：border: 1px solid #000
border-style:
作用：设置边框的分隔。取值：solid实线、dotted双线、dashed虚线、double双线
属性：
border-top、border-right、border-bottom、border-left
扩展属性：
border-collapse：collapse 去掉单元格与单元格之间的间距，并且显示为细线。
padding 填充（内边距）：
作用：设置盒子的边框与内容之间的距离。
语法：
padding: padding:50px; 给元素的上下左右都设置50px的padding
padding: 50px 100px; 给元素的上下padding设置50，左右padding设置 100
属性：
padding-top
padding-right
padding-bottom
padding-left
特点：
一般情况下如果设置padding 会改变盒子的大小。
计算盒子的大小：
宽 = border-left-width + padding-left + width + padding-right+border-right
高 = border-width + padding-top + height + padding-bottom + border-bottom-width
在特殊情况下设置padding不会改变盒子的大小：
在父盒子中有个子盒子，父盒子设置宽度，子盒子不设置宽度，默认情况下子盒子的宽度会占父盒子的一整行。在这种情况下如果给盒子设置padding-left/padding-right,不会改变盒子的宽度，但是如果设置上下的padding会改变盒子的高度。
margin（外边距）:
盒子与盒子之间的距离
语法：
margin:100px 给盒子上下左右设置100px;
属性：
margin-top、margin-right、margin-bottom、margin-left
注意：
margin的合并现象（margin的塌陷现象）
1、两个相邻的元素，如果给上一个元素设置margin-bottom给下面的元素设置，margin-bottom两个外边距不会叠加，只会重合
2、如果在一个大盒子中有个小盒子，给这个小盒子设置margin-top大盒子也会跟着一起向下位置。
解决2的塌陷问题：
a、给父盒子设置一个边框
b、给父盒子设置一个属性：overflow:hidden
c、浮动
浮动
作用：用来设置元素的位置。
取值：
left：左浮动，在父元素内部靠左显示。
right：右浮动，在父元素的内部靠右显示。
浮动后元素的“显示”的特点：
1、脱离标准流（会覆盖在标准流之上，在标准流中不占位置）。标准流：a、块级元素单独占一行 b、行内元素一行内显示多个
2、改变元素的显示方式。
3、显示方式与行内快元素相同
浮动后元素的“位置”特点：
1、如果浮动的元素的上一个元素是标准流中的元素，那么浮动元素会在这个标准流元素之"下"显示。
2、如果浮动的元素的上一个元素是浮动的元素，那么这个浮动的元素会跟着上一个浮动元素之"后"。
浮动的应用：
1、文字环绕图片（已经被淘汰）
2、制作导航
3、用来进行页面布局。 名词：通栏、版心、左右分栏
!import 的权重最高
清除浮动
找到浮动元素的父元素，给这个父元素设置一个overflow:hidden 的属性。（可能会对页面上的元素进行裁剪）
// ---------------------------- 使用伪元素来清除 ---------------------------
.clearfix:after {
content:"";
display:block;
height:0;
line-height: 0;
visibility: hidden;
clear:both;
}
.clearfix {
*zoom: 1;
}
// ------------------ 使用双伪元素来清除 -----------------------------
.clearfix:before , .clearfix:after {
content:“”；
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
关键字：clear:both;
伪元素：
定义： 页面不存在，可以通过css代码来动态给html添加结构内容
关键字： :after{}、:before{}
属性： content 用来设置伪元素的内容
定位
相对点位：
position:relative
绝对定位：
position:absolute
固定定位：
position:fixed
怎么快速将子元素定位到父元素的中间位置？
1、将子元素的位置设置为50%。
2、使用margin向反方向平移自身宽、高的一半。
emment语法
作用：提升书写代码的速度。
注意：它是插件来的。
例如：!+tab 生成HTML骨架；$ 生成带有顺序字母的内容。tac+tab 生成 text-align:center
元素的隐藏属性及一些小技巧：
display :none 隐藏（页面上不会占据位置）
display : block 显示
overflow:hidden 隐藏、scroll 显示滚动、auto 自动（根据内容决定是否显示滚动条）
鼠标样式：cursor取值、pointer 小手
outline: 设置输入框获取焦点时都得边框样式。none 没有边框。
防拖拽属性：resize:none
vertical-align: 设置文字和图片的对齐方式。 baseline ：默认值（基线）middle：中线（对齐），只能和“行内块”元素结合起来使用，否则无效。应用：1、文本与图片垂直居中对齐 2、去除图片低侧空白缝隙。
滑动门：用来设置导航的背景图片（由于导航的文字多少不一，导航的宽度也不一致，为了能够让一张图片解决所有的背景图片的问题，我们需要用到滑动门。实现思路：li标签放左边的半圆、a标签放右边的半圆）
项目总结：
1、得到项目的psd文件、图片
2、创建项目的目录
index.html 网站入口
imgs 管理网站中所有的图片
css 管理网站中所有的样式
3、清除浏览器的默认行为。
进行css的初始化：
1、清除默认 margin:0、padding:0
2、清除图片的默认边框
3、去掉图片下面几个像素的空白
4、去掉ul、li中的默认小点
5、去掉去掉a标签的下划线
6、清除input默认的padding
7、给页面设置统一的字体
8、左右浮动
9、清除浮动
补充：
a、网站小图标：
1、使用 “比特虫 http://www.bitbug.net/”
2、放在当前网站的根目录
2、将小图标改名为： favicon.ico
3、在head 标签之中引入小图标
b、精灵图：
原理：将多张小图放到一张大图上，将来请求图片只要请求一次就可以了
使用：
1、测出精灵图的大小，在页面上放好容器
2、测量出需要显示图标的大小，在页面上放好容器
3、将精灵图以背景图的方式放到容器中
4、通过修改background-posion 属性来移动背景图片的位置
#####SEO相关的3个标签：
搜索引擎的优化
1、得到项目的psd文件、图片
2、创建项目的目录
index.html 网站入口
imgs 管理网站中所有的图片
css 管理网站中所有的样式
3、清除浏览器的默认行为。
进行css的初始化：
1、清除默认 margin:0、padding:0
2、清除图片的默认边框
3、去掉图片下面几个像素的空白
4、去掉ul、li中的默认小点
5、去掉去掉a标签的下划线
6、清除input默认的padding
7、给页面设置统一的字体
8、左右浮动
9、清除浮动
补充：
a、网站小图标：
1、使用 “比特虫 http://www.bitbug.net/”
2、放在当前网站的根目录
2、将小图标改名为： favicon.ico
3、在head 标签之中引入小图标
b、精灵图：
原理：将多张小图放到一张大图上，将来请求图片只要请求一次就可以了
使用：
1、测出精灵图的大小，在页面上放好容器
2、测量出需要显示图标的大小，在页面上放好容器
3、将精灵图以背景图的方式放到容器中
4、通过修改background-posion 属性来移动背景图片的位置
SEO相关的3个标签：
搜索引擎的优化
Photoshop的基本使用
切图：
1、切图（最后面会有切图的步骤）：
Ctrl+ 左键 选中图层
改变图层的层级
2、文字：
文字工具
选中文字工具点击页面上的文字
3、放大和缩小
放大：点击放大
缩小：在放大工具中按 alt键
4、辅助线：
在标尺中点击左键向下、右拉推动
标尺：视图----> 标尺
切图步骤：
1、使用参考线选中要切图的区域
2、将指针切换为切片工具
3、使用切片工具选择区域
4、文件-->导出--->存储为web 格式
5、选择路径(保存)