Ps：
打开文件：将图片或PSD文件拖拽到ps软件内容区域（无任何打开文件）；将图片或PSD文件拖拽至ps软件头部进行打开操作（有已打开的文件）；文件---打开（快捷：ctrl+o）。
标尺：调出---视图---标尺（ctrl+R）；量取---做出参考线，利用选框工具拉出对应选框；F8或Fn+F8调出信息面板查看宽高等详细信息
清除参考线：将参考线拖拽出内容区域；视图---清楚参考线
显示/隐藏参考线：ctrl+‘；’
放大页面：ctrl+加号
缩小页面：ctrl+减号
100%显示文件：ctrl+shift+0（数字0）
文字相关：PSD分层文件使用文字工具‘T’操作文字相关信息
（jpg文件无法测量）；查看/设置文字信息 文字工具‘T’---工具栏字符面板进行查看/设置
画板移动：空格键+鼠标单击移动
颜色值吸取：打开前景色面板，吸取相应颜色；点击吸管工具，吸取相应颜色
行高量取：上一行开始位置至下一行相应位置之间的距离
取消选框：Ctrl+D
自动选取图层：点击：移动工具 + 自动选择 + 图层
选中图片元素：Ctrl+单击图层缩略图
图片格式
Jpg            无透明     选择最佳
Jpeg           无透明     选择最佳
Png            可透明     选择png24
Gif            可透明     选择颜色256
Psd            分层源文件
图层合并：无分组图层合并：选中图层---ctrl+E合并（按住CTRL键可多选图层）；有分组图层合并：右击单机‘转换为智能对象’
移动图层：前移一层：ctrl+ 】；后移一层：ctrl+【；置于顶层：ctrl+shift+ 】；置于底层：ctrl+shift+【
图层复制
拖拽复制：选择相应的图层拖拽至右下角复制按钮
快捷键复制：选中图层，按ctrl+J
异位复制：Alt键+单机移动相应图片
切图：使用切图工具切去相应图片---文件---导出---储存为web格式图片格式选取，设置切片：1、所有切片2、所有用户切片3、选中切片
删除切片：切片选择工具选中切片按Delete键；视图---清除切片
Cutterman插件切图：图层面板选中要导出的图层和组；选择导出web端；选择导出路径，最后到处选中图层。注：导出切片选择所有切片
参考线和选区工具切图（不推荐）：拉出选框---ctrl+C---ctrl+N---ctrl+V---储存为web格式
Html：
标题：总共分为6个档次，权重依次递减
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
在实际开发的时候h1标签一个页面只能出现一次，并且建议h1里面放网站logo，h2标签在一个页面中建议最多出现两次一般放主标题，h3到h6可以任意使用；
常见的文本修饰标签（小标签）
加粗标签：<b>单纯的加粗</b>   <strong>语义化强调</strong>
倾斜标签：<i>单纯的加粗</i>     <em>语义化强调</em>  
删除线标签：<s>单纯的加粗</s>   <del>语义化强调</del>
下划线标签：<u>单纯的加粗</u>   <ins>语义化强调</ins>
图片图像标签 img（重点）
img标签是单标签，我们在用img引入图片的时候必须配合原则性属性src属性找到图片对应的路径；
<img src=”图片路径” />
图片标签img的常见属性
src  属性值 --- url（图像路径）
alt  属性值 --- 替换文本    图像不能正常显示的时候替换文本；
title属性值 --- 提示文本    鼠标移入图片显示提示文本；
width属性值 --- 自定义数值    设置图片的宽度；
height属性值 --- 自定义数值    设置图片的高度；
border   属性值 --- 自定义数值    设置图片的描边，一般不使用，后期会使用css进行设置；
超链接a（重点）
概念：双标签  <a href=”文件路径”></a> Href是原则性属性必须要书写，双引号里面是要跳转的目标文件；
锚点链接
作用：实现页面内部的跳转
锚点链接的添加：
01 确认要跳转的位置标签，然后在标签身上添加id=”id名称”；
02 调用id名称，用超链接a进行调用，<a href=”#id名称”>锚点按钮</a>
注意：我们常用的特殊符号是：空格&nbsp;、小于号&lt;、大于号&gt;、版权&copy；
表格：table嵌套tr，tr嵌套多个td，tr表示行，td单元格我们也可以认为是列；table表示整体，tr表示行，td表示列；
表格的常见属性：
宽：width；   
高：height；   
边框：border，如果设置border=0是没有边框；
对齐方式：align  取值left、center、right；设置表格在网页中的水平对齐方式；
单元格和单元格之间的距离：cellspacing
单元格内容到单元格边框的距离：cellpadding
table单元格合并：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
注意：合并单元格的顺序：先上后下，先左后右；
列表分为：无序列表，有序列表，自定义列表
表单（重点）：
作用：搜集用户信息
组成部分：提示文本、表单、表单域（总体的提交数据的标签）组成  
input控件；通过更改input的type取值来实现不同的网页表单效果；取值 value 可以设置我们默认的显示文字或者数据；<input type="text" value="默认值" >；Name属性，后天可以通过不同name名称获取不同的数据；
文本框 type=”text”     <input type="text" >
密码 type=”password”  <input type="password">
单选按钮：type=“radio” , <input type="radio" >想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类；
复选按钮：type=“checkbox”，<input type="checkbox" >也可以设置同样的name名称，但是 不会影响多选的效果；
input按钮组：
普通按钮：<input type=“button” value=“普通按钮” />  必须要自己设置value值；
提交按钮：<input type=“submit” />；
重置按钮：<input type=“reset” />；
图片按钮：<input type=“image“ src=”图片路径” />   src属性必须书写查找图片路径；
文件域名：<input type=“file” /> 上传文件使用；
button标签按钮：<button>我也是按钮</button>
form表单域
作用：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
默认属性：action=“url地址”   -----  用于指定接收并处理表单数据的服务器程序的url地址。
method=“ 提交方式”  ---- 取值 get/post，get是明文提交，post是密文提交；
name=“名字”  设置不同的取值名称用于后台提交；
注意：一个页面中可能会出现过个form标签，我们需要用添加name属性设置不同的表单名称来区分；
<form action="" method="post" name="表单名称1"></form>
<form action="" method="post" name="表单名称2"></form>
Css
Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式
行内：
语法：<div style=”属性1:属性值1；属性2:属性值2；…… ”></div>
内部样式（内联样式）：
书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；因为style只是html的一个标签；
外部连接：
操作：新建一个.css文件，放在项目下面的css文件夹里面； 单标签link标签配合自己的3属性书写在head标签里面：
rel  关系   告诉浏览器当前引入的文件和html是样式表的关系
type 类型   告诉浏览器当前引入的是css文件类型
href  路径   告诉浏览器去这个路径找到我们的css文件
<link rel="stylesheet" type="text/css" href="css/style.css">
Css样式的书写格式
选择器 { 属性1:属性值1;  属性2:属性值2;   属性3:属性值3；…… }

font-size    取值单位是px和em，px常用，em表示一个字的大小；
font-family取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字或者特殊符号和有空格隔开的英文，要用英文状态的引号引起来；
字体加粗样式font-weight：
加粗：font-weight:bold; font-weight:700;   
不加粗：font-weight:normal;  font-weight:400;
字体风格font-style：倾斜：font-style:italic;不倾斜：font-style:normal;
字体综合写法font：
font：是否倾斜   是否加粗   文字大小/ 行高   字体；
font：font-style font-weight font-size/line-height font-family;
文本行高line-height；首行缩进text-indent；文本装饰text-decoration ；文字居中显示text-align；文字颜色 color
text-decoration:none;没有线  ---- 取消超链接a默认的下划线
text-decoration：underline；下划线 --- 给需要加下划线的文字加下划线
text-decoration:line-through; 中划线/删除线
text-decoration:overline;上划线
链接的伪类
四种状态：
       a:link        未访问的链接（访问前）
       a:visited    已访问的链接（访问后）
      a:hover      鼠标移动到连接上（鼠标经过）
      a:active      选定的链接（按下鼠标的时候）
盒子的实体化三属性
宽 width
高height
背景  background
实际开发中我们只要将实体化三属性设置好就不会出现兼容问题；
border:边框粗细 边框线条样式 边框的颜色；
不同方向设置
border-left:3px  solid  #ccc;  左边框
border-right:3px  solid  #ccc;  右边框
border-top:3px  solid  #ccc;  上边框
border-bottom:3px  solid  #ccc;  下边框
没有边框border：none；
内边距padding
Padding相关设置不同方向：
padding:30px;   四个方向的内边距都是一个值；
padding-left:40px;  设置左边的内边距；
padding-right:40px;  设置右边的内边距
padding-top:40px;  设置距离顶部的内边距
Padding-bottom:40px;  设置距离底部的内边距
外边距margin
Margin设置不同方向的外边距：
margin:30px;   四个方向的外边距都是一个值；
margin-left:40px;  设置左边的外边距；
margin-right:40px;  设置右边的外边距
margin-top:40px;  设置距离顶部的外边距
margin-bottom:40px;  设置距离底部的外边距
*{marin:0；padding:0; } 清除所有元素的默认边距和默认样式；

元素的显示和隐藏
隐藏：display:none;
显示：display:block; 将隐藏的元素显示出来
一般情况下我们显示和隐藏配合定位属性实现一些列的小效果
让元素visibility显示与隐藏
占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏
取值不同表示意思不一样
overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
overflow:scroll; 显示横向和竖向的滚动条显示；
overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示；
overflow:hideen;的常用技巧
01 overflow:hideen;可以让超出固定范围的内容隐藏掉；
02 overflow:hideen;可以清除浮动，布局的时候我们做左右或者左中右布局，都是父级嵌套子级盒子，然后将子级盒子浮动，但是如果没有给父级添加固定的高度，子级浮动以后父级的高度为0，不占位，会影响后面的布局，就给父级添加overflow:hideen;来解决；
03 overflow:hideen; 嵌套的父子级盒子出现外边距塌陷问题，两个嵌套的盒子，都没有浮动或者定位，给子级盒子添加了margin-top就会出现父级跟着掉下来的塌陷问题，就给父级添加overflow:hideen;来解决；
用户界面-鼠标样式鼠标样式：cursor
小白（默认） cursor:default;
小手： cursor:pointer;  常用一般是用在一些提示要点击的样式，不能跳转的时候；
移动： cursor:move;
文本： cursor:text;
禁止： cursor:not-allowed;
取消表单默认的蓝色交互框
表单元素默认选中的时候会有一个蓝色的边框，各个浏览器设置是不一样的，所以我们在开发过程中直接去掉就可以，代码如下：
outline:none;

Ps：
打开文件：将图片或PSD文件拖拽到ps软件内容区域（无任何打开文件）；将图片或PSD文件拖拽至ps软件头部进行打开操作（有已打开的文件）；文件---打开（快捷：ctrl+o）。
标尺：调出---视图---标尺（ctrl+R）；量取---做出参考线，利用选框工具拉出对应选框；F8或Fn+F8调出信息面板查看宽高等详细信息
清除参考线：将参考线拖拽出内容区域；视图---清楚参考线
显示/隐藏参考线：ctrl+‘；’
放大页面：ctrl+加号
缩小页面：ctrl+减号
100%显示文件：ctrl+shift+0（数字0）
文字相关：PSD分层文件使用文字工具‘T’操作文字相关信息
（jpg文件无法测量）；查看/设置文字信息 文字工具‘T’---工具栏字符面板进行查看/设置
画板移动：空格键+鼠标单击移动
颜色值吸取：打开前景色面板，吸取相应颜色；点击吸管工具，吸取相应颜色
行高量取：上一行开始位置至下一行相应位置之间的距离
取消选框：Ctrl+D
自动选取图层：点击：移动工具 + 自动选择 + 图层
选中图片元素：Ctrl+单击图层缩略图
图片格式
Jpg            无透明     选择最佳
Jpeg           无透明     选择最佳
Png            可透明     选择png24
Gif            可透明     选择颜色256
Psd            分层源文件
图层合并：无分组图层合并：选中图层---ctrl+E合并（按住CTRL键可多选图层）；有分组图层合并：右击单机‘转换为智能对象’
移动图层：前移一层：ctrl+ 】；后移一层：ctrl+【；置于顶层：ctrl+shift+ 】；置于底层：ctrl+shift+【
图层复制
拖拽复制：选择相应的图层拖拽至右下角复制按钮
快捷键复制：选中图层，按ctrl+J
异位复制：Alt键+单机移动相应图片
切图：使用切图工具切去相应图片---文件---导出---储存为web格式图片格式选取，设置切片：1、所有切片2、所有用户切片3、选中切片
删除切片：切片选择工具选中切片按Delete键；视图---清除切片
Cutterman插件切图：图层面板选中要导出的图层和组；选择导出web端；选择导出路径，最后到处选中图层。注：导出切片选择所有切片
参考线和选区工具切图（不推荐）：拉出选框---ctrl+C---ctrl+N---ctrl+V---储存为web格式
Html：
标题：总共分为6个档次，权重依次递减
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
在实际开发的时候h1标签一个页面只能出现一次，并且建议h1里面放网站logo，h2标签在一个页面中建议最多出现两次一般放主标题，h3到h6可以任意使用；
常见的文本修饰标签（小标签）
加粗标签：<b>单纯的加粗</b>   <strong>语义化强调</strong>
倾斜标签：<i>单纯的加粗</i>     <em>语义化强调</em>  
删除线标签：<s>单纯的加粗</s>   <del>语义化强调</del>
下划线标签：<u>单纯的加粗</u>   <ins>语义化强调</ins>
图片图像标签 img（重点）
img标签是单标签，我们在用img引入图片的时候必须配合原则性属性src属性找到图片对应的路径；
<img src=”图片路径” />
图片标签img的常见属性
src  属性值 --- url（图像路径）
alt  属性值 --- 替换文本    图像不能正常显示的时候替换文本；
title属性值 --- 提示文本    鼠标移入图片显示提示文本；
width属性值 --- 自定义数值    设置图片的宽度；
height属性值 --- 自定义数值    设置图片的高度；
border   属性值 --- 自定义数值    设置图片的描边，一般不使用，后期会使用css进行设置；
超链接a（重点）
概念：双标签  <a href=”文件路径”></a> Href是原则性属性必须要书写，双引号里面是要跳转的目标文件；
锚点链接
作用：实现页面内部的跳转
锚点链接的添加：
01 确认要跳转的位置标签，然后在标签身上添加id=”id名称”；
02 调用id名称，用超链接a进行调用，<a href=”#id名称”>锚点按钮</a>
注意：我们常用的特殊符号是：空格&nbsp;、小于号&lt;、大于号&gt;、版权&copy；
表格：table嵌套tr，tr嵌套多个td，tr表示行，td单元格我们也可以认为是列；table表示整体，tr表示行，td表示列；
表格的常见属性：
宽：width；   
高：height；   
边框：border，如果设置border=0是没有边框；
对齐方式：align  取值left、center、right；设置表格在网页中的水平对齐方式；
单元格和单元格之间的距离：cellspacing
单元格内容到单元格边框的距离：cellpadding
table单元格合并：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
注意：合并单元格的顺序：先上后下，先左后右；
列表分为：无序列表，有序列表，自定义列表
表单（重点）：
作用：搜集用户信息
组成部分：提示文本、表单、表单域（总体的提交数据的标签）组成  
input控件；通过更改input的type取值来实现不同的网页表单效果；取值 value 可以设置我们默认的显示文字或者数据；<input type="text" value="默认值" >；Name属性，后天可以通过不同name名称获取不同的数据；
文本框 type=”text”     <input type="text" >
密码 type=”password”  <input type="password">
单选按钮：type=“radio” , <input type="radio" >想要实现单选效果我们需要给input标签设置相同的name进行设置归为一类；
复选按钮：type=“checkbox”，<input type="checkbox" >也可以设置同样的name名称，但是 不会影响多选的效果；
input按钮组：
普通按钮：<input type=“button” value=“普通按钮” />  必须要自己设置value值；
提交按钮：<input type=“submit” />；
重置按钮：<input type=“reset” />；
图片按钮：<input type=“image“ src=”图片路径” />   src属性必须书写查找图片路径；
文件域名：<input type=“file” /> 上传文件使用；
button标签按钮：<button>我也是按钮</button>
form表单域
作用：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
默认属性：action=“url地址”   -----  用于指定接收并处理表单数据的服务器程序的url地址。
method=“ 提交方式”  ---- 取值 get/post，get是明文提交，post是密文提交；
name=“名字”  设置不同的取值名称用于后台提交；
注意：一个页面中可能会出现过个form标签，我们需要用添加name属性设置不同的表单名称来区分；
<form action="" method="post" name="表单名称1"></form>
<form action="" method="post" name="表单名称2"></form>
Css
Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式
行内：
语法：<div style=”属性1:属性值1；属性2:属性值2；…… ”></div>
内部样式（内联样式）：
书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；因为style只是html的一个标签；
外部连接：
操作：新建一个.css文件，放在项目下面的css文件夹里面； 单标签link标签配合自己的3属性书写在head标签里面：
rel  关系   告诉浏览器当前引入的文件和html是样式表的关系
type 类型   告诉浏览器当前引入的是css文件类型
href  路径   告诉浏览器去这个路径找到我们的css文件
<link rel="stylesheet" type="text/css" href="css/style.css">
Css样式的书写格式
选择器 { 属性1:属性值1;  属性2:属性值2;   属性3:属性值3；…… }

font-size    取值单位是px和em，px常用，em表示一个字的大小；
font-family取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字或者特殊符号和有空格隔开的英文，要用英文状态的引号引起来；
字体加粗样式font-weight：
加粗：font-weight:bold; font-weight:700;   
不加粗：font-weight:normal;  font-weight:400;
字体风格font-style：倾斜：font-style:italic;不倾斜：font-style:normal;
字体综合写法font：
font：是否倾斜   是否加粗   文字大小/ 行高   字体；
font：font-style font-weight font-size/line-height font-family;
文本行高line-height；首行缩进text-indent；文本装饰text-decoration ；文字居中显示text-align；文字颜色 color
text-decoration:none;没有线  ---- 取消超链接a默认的下划线
text-decoration：underline；下划线 --- 给需要加下划线的文字加下划线
text-decoration:line-through; 中划线/删除线
text-decoration:overline;上划线
链接的伪类
四种状态：
       a:link        未访问的链接（访问前）
       a:visited    已访问的链接（访问后）
      a:hover      鼠标移动到连接上（鼠标经过）
      a:active      选定的链接（按下鼠标的时候）
盒子的实体化三属性
宽 width
高height
背景  background
实际开发中我们只要将实体化三属性设置好就不会出现兼容问题；
border:边框粗细 边框线条样式 边框的颜色；
不同方向设置
border-left:3px  solid  #ccc;  左边框
border-right:3px  solid  #ccc;  右边框
border-top:3px  solid  #ccc;  上边框
border-bottom:3px  solid  #ccc;  下边框
没有边框border：none；
内边距padding
Padding相关设置不同方向：
padding:30px;   四个方向的内边距都是一个值；
padding-left:40px;  设置左边的内边距；
padding-right:40px;  设置右边的内边距
padding-top:40px;  设置距离顶部的内边距
Padding-bottom:40px;  设置距离底部的内边距
外边距margin
Margin设置不同方向的外边距：
margin:30px;   四个方向的外边距都是一个值；
margin-left:40px;  设置左边的外边距；
margin-right:40px;  设置右边的外边距
margin-top:40px;  设置距离顶部的外边距
margin-bottom:40px;  设置距离底部的外边距
*{marin:0；padding:0; } 清除所有元素的默认边距和默认样式；

元素的显示和隐藏
隐藏：display:none;
显示：display:block; 将隐藏的元素显示出来
一般情况下我们显示和隐藏配合定位属性实现一些列的小效果
让元素visibility显示与隐藏
占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏
取值不同表示意思不一样
overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
overflow:scroll; 显示横向和竖向的滚动条显示；
overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示；
overflow:hideen;的常用技巧
01 overflow:hideen;可以让超出固定范围的内容隐藏掉；
02 overflow:hideen;可以清除浮动，布局的时候我们做左右或者左中右布局，都是父级嵌套子级盒子，然后将子级盒子浮动，但是如果没有给父级添加固定的高度，子级浮动以后父级的高度为0，不占位，会影响后面的布局，就给父级添加overflow:hideen;来解决；
03 overflow:hideen; 嵌套的父子级盒子出现外边距塌陷问题，两个嵌套的盒子，都没有浮动或者定位，给子级盒子添加了margin-top就会出现父级跟着掉下来的塌陷问题，就给父级添加overflow:hideen;来解决；
用户界面-鼠标样式鼠标样式：cursor
小白（默认） cursor:default;
小手： cursor:pointer;  常用一般是用在一些提示要点击的样式，不能跳转的时候；
移动： cursor:move;
文本： cursor:text;
禁止： cursor:not-allowed;
取消表单默认的蓝色交互框
表单元素默认选中的时候会有一个蓝色的边框，各个浏览器设置是不一样的，所以我们在开发过程中直接去掉就可以，代码如下：
outline:none;