前言:
国庆有点时间就这样整理了一遍：在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、<html></html>用来管理当前页面上的所有的内容。
2、<header></header> html中的一部分，用来存放一些头部信息
3、<title></title> 设置页面的结构
4、<body></body> 用来存放一些头部信息
标签：（重点）
分类：
双标签：成对出现 <html></html>
单标签：只有一个开头的标签，并且在开头标签中有个 "/",例如：<br/>
关系：
嵌套关系：将来如果两个标签是嵌套关系，书写时，被嵌套的标签需要向右有个缩进。
并列关系：将来如果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标签：
作用：在页面上可以添加一张图片
语法：<img/>
标签的属性：
作用：可以为标签设置一些信息。
src：路径。例如：src="login.png"
alt: 给图片设置描述信息，当图片无法正常加载时会显示这段文本。
title：给图片设置描述信息。
width：给图片设置宽度。如果只设置宽度，那么图片会等比例缩放。
height：给图片设置高度。
border：设置边框。
8、a标签：
作用：在页面添加链接。1、从一个页面跳转到另一个页面2、空链接3、锚链接
名称：链接、超链接、a标签
语法：<a>文本</a>
属性：
href 作用：设置超链接的跳转路径。
title 作用：设置链接的描述信息。
target： 作用：设置a 标签的跳转方式。
取值：_self 在原页面上跳转
_blank 在新的页面上跳转
base：可以统一设置当前页面的a 标签的跳转方式
9、路径
绝对路径：带有盘符的路径，换一条设备就不能打开。
相对路径：
a、同一目录下 <img src="1.jpg">
b、文件在图片的上一级目录
c、图片在文件的上一级目录
10、列表：
作用：用来管理一系列的数据。
无序列表（用的最多的）<ul><li></li></ul>
有序列表（用的比较少）<ol><li></li><ol>
自定义列表（基本不用）<dl><dt></dt><dd></dd></dl>
11、表格
作用：用来管理多组数据。
语法：
<table>
<tr>
<th></th>
<td></td>
</tr>
</table>
属性：
border 设置边框
width 设置宽
height 设置高
cellspacing 设置单元格和单元格之间的间距
cellpadding 设置单元格的边框与内容之间的距离
align 设置对齐方式
取值 left、right、center
完整结构
<table>
<caption></caption> 给表格设置标题
<thead></thead> 给表格设置表头 <tr></th> <th></th>
<tbody></tbody> 给表格设置内容 <tr></tr> <td></td>
<tfoot></tfoot> 给表格设置表尾 <tr></tr> <td></td>
</table>
合并单元格
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 标签之中引入小图标<link rel ="shortcut icon" href="favicon.ico">
b、精灵图：
原理：将多张小图放到一张大图上，将来请求图片只要请求一次就可以了
使用：
1、测出精灵图的大小，在页面上放好容器
2、测量出需要显示图标的大小，在页面上放好容器
3、将精灵图以背景图的方式放到容器中
4、通过修改background-posion 属性来移动背景图片的位置
#####SEO相关的3个标签：
搜索引擎的优化
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
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 标签之中引入小图标<link rel ="shortcut icon" href="favicon.ico">
b、精灵图：
原理：将多张小图放到一张大图上，将来请求图片只要请求一次就可以了
使用：
1、测出精灵图的大小，在页面上放好容器
2、测量出需要显示图标的大小，在页面上放好容器
3、将精灵图以背景图的方式放到容器中
4、通过修改background-posion 属性来移动背景图片的位置
SEO相关的3个标签：
搜索引擎的优化
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
Photoshop的基本使用
切图：
1、切图（最后面会有切图的步骤）：
Ctrl+ 左键 选中图层
改变图层的层级
2、文字：
文字工具
选中文字工具点击页面上的文字
3、放大和缩小
放大：点击放大
缩小：在放大工具中按 alt键
4、辅助线：
在标尺中点击左键向下、右拉推动
标尺：视图----> 标尺
切图步骤：
1、使用参考线选中要切图的区域
2、将指针切换为切片工具
3、使用切片工具选择区域
4、文件-->导出--->存储为web 格式
5、选择路径(保存)
网友评论