（一）PS操作：
m----选框工具
f8---信息窗口
f7---图层
ctrl--r标尺
ctrl+c--剪切
ctrl+n--新建
ctrl+v--粘贴
ctrl+加号--放大
ctrl+减号--缩小
空格+鼠标左键--拖拽
（二）HTML（及标签）：
1：HTML的文档构成：
<!doctype html>
document type html
文档 类型
2：HTML：具有严谨型和过渡型
head 文档头
<meta charset="utf-8">注意：unicode编码
utf-8 国际编码
gb2312/gbk 中国编码
<meta name="author" content="作者" />-------->作者
<meta name="copyright" content="版权" />----->版权
<meta name="description" content="描述" />---->描述
<meta name="keywords" content="关键字"/>---->关键字
<title>标题</title>---->标题
注：文档必须要有文档头，所有的标签使用打偶要使用小写英文。
html需要用双引号，img标签必须要有alt属性，双标签的使用必须要有闭合，单标签的使用要合理的闭合。
html页面中文字大小最小只能设置到12px
3：标签：
h1---标题标签 样式（<h1>标题的内容</h1>）
注（标题标签只有h1-h6，其中h1标签最大h6标签最小，h1-h6属于标题标签，其中h1标签属于LOGO标签，一个页面只允许出现一次。）
p---段落标签，会自带默认的行距. 样式（<p>段落内容</p>）
br--换行标签 样式（<br />）
a---超链接标签 样式（<a href="链接地址"></a>）
img--图片标签 样式（<img src="图片源" alt="文本替换内容"/>）
div---空标签 样式（<div></div>）
strong 加粗（具有语义化）
b 加粗
em 倾斜（具有语义化）
i 倾斜
span 空标签
实体字符： (空格)
cursor：poiniter; 鼠标变小手
标签分为两种：
1：单标签：例如：<br /> <img />
2：双标签：例如： h标签 p标签 a标签
标签属性：
href-------超链接地址
title------文本提示（鼠标移入提示内容）
alt--------文本替换
width------宽度
height-----高度
src--------图片的源（图片的路径地址）
border-----边框
1：私有属性：href/width/height/alt/src
2：共有属性：title
3：写法样式： 属性名="属性值"
（三）CSS：
样式写法： 样式名="样式值"
css:的样式是需要写在style里
width：样式值 高度
height：样式值 宽度
border：边框
1：border的样式和几种写法：
border-width:"" 边框的宽度
border-style:"" 边框的线性
border-color:"" 边框的颜色
border-top: 上边框
border-bottom: 下边框
border-left： 左边框
border-right: 右边框
border的缩写：border:"边框的宽度 边框的线性 边框的颜色"
border的线性：
1：solid-----实线
2：dashed----虚线
3：dotted----点化线
background的样式和背景写法：
background-color:"" 背景颜色
background-image:"" 背景图片
background-repeat:"" 背景图平铺
背景图的集中特性:
background:"no-repeat" 背景图不平铺
background:"repeat-x" 背景图x轴平铺
background:"repeat-y" 背景图y轴平铺
background-position:"写x轴和y轴的值" 背景图定位
背景图的缩写：background:"图片的路径 平铺 背景图定位"
颜色： 颜色可写英文，可写十六进位制，也可写rgb格式。
（四）文本的样式和写法：
1：color:"" 文本颜色
2：tetxt-align:"center" 文本水平居中/right 文本靠左/ left 文本靠右
3:line-height:"" 文本垂直居中（也叫文本纵向居中） 写入行高
4：font-size:像素px 文字的大小
5：font-style:itlic 文字倾斜/ normal 文字不倾斜
6：font-weight:bold 文字加粗/normal 文字不加粗
7：font-family: 文本的字体（可输入中文或者英文也可输入unicode码）
8：文本省略号的三要素：
1：white-space：nowrap 文字不换行
2：overflow：hidden 溢出隐藏
3：text-overflow:ellipsis 省略号
注：三者缺一不可，而且奥设置宽度。
9：a链接下划线的样式：
text-decoration：none 取消下划线/ underline 下划线/ overline 上划线/line-through 中划线
10：文本的缩进：text-indent:-999999单位值 注：单位有 px em %
11：字体继承：颜色 字体大小 文字的加粗 倾斜 字体 下划线 行高
注：a标签不可以继承颜色，strong和b 不会继承加粗， em和i不会继承倾斜
（五）引入网址的地址分两种：
1：绝对路径：file:///C|/Users/Administrator/Desktop/下的什么文件
2：相对路径：../images/下的文件（优先使用）
注：路径中不要出现中文。
（六）CSS样式的选择器：
1：写在标签里的样式叫做：行内样式
2：写在style标签里的叫做：内链样式也叫做内部样式。
3：<div> 叫做标签选择器
4：class 叫做类选择器
5：ID选择器： id=""
6：通配符选择器： *{}
7：群组选择器：div逗号p
8：嵌套选择器：div空格p
注：class可以有很多个，但是ID只可以有一个
（八） 特性：
1：行标签：
1，不可以设置宽高
2，并到一行
3，会受到换行或是空格影响
4，宽度是内容的宽度，根据内容来撑起
2：块标签：
1，可以设置宽高
2，独占一行
3，不会受到换行与空格的影响
4，不设置宽度，宽度就是父级的宽度
3：行内块：
1，可以设置宽高
2，会并到一排
3，会受到空格与换行影响
4：行，块，行内块的转换
display:block--->转换成块
display:inline--->转换成行
display:inline-block--->转换成行内块
white-space:nowrap; 不换行
overflow:hidden; 溢出隐藏
text-overflow:ellipsis; 省略号
块标签可以包任何标签：p标签只可以包行内
行标签只能包行标签(*不可以包自己)：a可以包任何标签
什么都可以包这个img
语义化：
像说话一样写代码；
有语义化：h1-h6 p img a strong em
无语义化：div span b i
列表：
1：有序列表：
<ol>
<li></li>
<li></li>
</ol>
2：无序列表：
<ul>
<li></li>
<li></li>
</ul>
3：标题（描述）列表：
<dl>
<dt></dt>----标题
<dd></dd>----标题内容
</dl>
注（list-style:none 清除列表里自带的样式）主要因为电脑自带的的不方便使用需要自己写需要把自带的样式清除掉。
（九）盒模型:
1：可以写盒模型的有：
width
height
border
padding
注：margin不算是盒子。
padding 指盒模型的（内边距）要写边框到内容的距离
margin 指盒子到另外一个盒子的距离
2：关于padding
1：padding：5px 指内边距上下左右的距离
2：padding：100px 50px 指到内边距的上下 左右距离
3：padding：20px 60px 100px 指到内边距的上 左右 下的距离
4：padding：20px 60px 80px 120px 指到内边距上左下右顺时针的距离
5：padding不可以使用负值
padding-top： px
padding-left：px
padding-right：px
padding-bottom： px
注：每一个方向，只有一个值， 给了padding的距离后就要用宽度和高度减去这个padding的距离，如果没有设置宽度和高度就不需要减去。
行标签只可以给左右的padding的距离。
3：关于margin：
1：margin：5px 指上下左右到外边距的值
2：margin：100px 50px 指上下 左右到外边距的值
3：margin：20px 60px 100px 指上 左右 下到外边距的值
4：margin：20px 60px 10px 120px 指上下左右顺时针到外边距的值
5：margin:0 auto;居中
6：margin的负值：
当使用负值 （left或者right）时不可以设置宽
当使用负值（top或者bottom）时不可以设置高
注：行标签只可以给左右margin的值，写代码钱必须要清除掉margin和padding的默认样式。写法： *（通用符）{ margin：0；padding：0；}
4：margin的BUG：margin会拖拽父级造成塌陷。
解决办法如下：
overflow：hidden；
border:1px solid #000;
padding-top:50px;(注：使用时优先考虑此方法。推荐使用)
margin的合并：解决的办法：是给单一方向加上一个你想要的距离（需要取最大值）。
图片下方的以像素白边：img{display:block;}
（十）浮动：float:浮动
1：浮动的特性：是一个有方向的；可变成块；并到一排；顶对齐；
宽度不够会掉下来；脱离文档流；
*加上浮动的元素只会对下面的元素有影响
*文本环绕
2：加浮动必须得：
1:只要有一个标签加上了浮动，同级的标签都要加浮动
2:加上浮动就必须清浮动（只能写在父级）
3:overflow:hidden;
4:一定要设置宽度，不给宽度会是内容的宽度
（十一）清浮动
1：清浮动：overflow:hidden(溢出隐藏)
2：清浮动要加给父级加
样式：<div style="clear:both"></div>*必修要用块标签，单独再写一个标签，给这个块标签加上一个clear：both;
3：清除掉左右浮动：
.clearfix:after{ display:block;
clear:both;
content:""; }
.clearfix{zoom:1;} *清浮动一定要给父级
（十二）定位：
1：position：absoulute 绝对定位
*绝对定位：1》脱离文档流 2》把元素变成块 3》根据body来定位
*display：none;(隐藏元素)
2：position：relative 相对定位
*相对定位：1》本身还在站位 2》并不会改变元素 3》根据自己原先的位置来定位
3：position：fixed； 固定定位
（根据可视区域来定位的，并脱离文档流）
* 定位：后写的定位要比先写的层级高，用Z-index：可以写正数也可以写负数。
使用：Z-index 来提升层级
（十三）伪类选择器：
1》:link（未访问过）
2》：visited（访问过）
3》:hover（鼠标移入）
4》：active（鼠标按下）
伪类选择器的优先级： 1：link: 2：visited 3：hover 4：active *只有a 标签才可以加这几个伪类选择器
*伪类选择器visited只支持文字的颜色，背景色，划线
1：罩层：
opacity：0.5；（指透明度）
filter：alpha（opacity：80）用来兼容IE的BUG
*定位不可以多使用，能用浮动就尽量使用浮动，
*文字不能卸写在透明层里，否则文字也会被透明。
（十四）表单：
1：<input type="text" /> ------文本输入框（也叫明文输入框）
2：<input type="submite" value=""/> --提交按钮
submite 提交按钮 value 可以在按钮里或文本里输入文字
3：<input type="password" name=""/> 密文输入框
4：<form action="" method="get"></fom>
action 只提交数据的地址 method 只提交的方式
*当使用get 提交数据时密文会显示在地址栏里
*当使用post会提交到后台 *想要提交就要必须给他一个名字（name）
5：<input type="checkox" value=""/>复选框
6：<input type="radio" name="sex" id="id"/>单选框 *要使用相同的name
如：（<input type="radio" name:"sex" id="nv"/><label for=nv></lael> 注：ID名字一定要相同）
7：<select>
<option><option>
<select> 下拉框
8：<input type="burron" value=""/> 普通按钮
9：<textarea></textarea> 文本域
------------------------------
表单的另一种：
<table border="1"(边框的值) cellpadding="0"(清除单元格的默认样式) cespacing="0"(指单元格的间距)>
<thead>-----> 表头
<tr>------> 表头行
<th></th>-->表头列
</tr>
</thead>------> 表头
<tbody>------> 表身
<tr>-------> 表身行
<td></td>----> 表身列
</tr>
</tbody>-------> 表身
<tfoot>--------> 表尾
<tr>--------> 表尾行
<td></td>----> 表尾列
</tr>
</tfoot>---------> 表尾
</table>
*注，在表格中的三个类别里，表头和表尾可以省略不写，但是表身必须要有。
表格里的样式：
1:border-collapse：collapse；取消间距
2:colspan="3" 行的单元格合并
3:rowspan="2" 列的单元格合并
*注：如果没有内容的话单元格要给高度和宽度。（因为不设置宽高的话单元格是根据内容撑开）
（十五）锚点：
1：同一个网页中：
<a href="idname"></a>
<h2 id="idname"></h2>
2：在不同页面中：
<a href="另外的一个HTML页面ID名并加上 # "></a>
（十六）有关HTML的重点部分：
1：什么是XHTML：
1>文档必须要有文档头
2>所有的标签都要用小写英文来写
3>html需要用双引号（英文）
4>img标签必须有alt属性
5>双标签必须要闭合标签
6>单标签需要合理闭合
7>在浏览器中会把，多个换行，或是多个空格当做一个空格来处理
8>h1在一个页面当中只可以用一次
2：那些是行标签，那些是块标签，特性
行标签： a/i/stron/b/em/ span
1，不可以设置宽高
2，并到一行
3，会受到换行或是空格影响
4，宽度是内容的宽度，根据内容来撑起
注：a标签不可以继承颜色； strong和b不会继承加粗 em和i不会继承倾斜
块标签： h1---h6/p/ div/ol/ul/dl
1，可以设置宽高
2，独占一行
3，不会受到换行与空格的影响
4，不设置宽度，宽度就是父级的宽度
注：公有属性，私有属性
公有属性： title;
私有属性： width height alt border href
3：颜色几种写法
1：可写英文
2：也可以写#加十六进位制的颜色
3：还可以写 rgb 的颜色格式
4：什么是相对路径，什么是绝对路径
相对路径是指按文件所在的层级去找，绝度路径是指在固定的盘符下的文件
5：选择器都有哪些
1>标签选择器：( div h2 p span)
2>class选择器（类选择器）：(class="")
3>ID选择器：(id="")
4>通配符选择器： *{}
5>群组选择器：(div逗号p)
6>嵌套选择器：(div空格p)
注：class可以有很多个，但是ID只可以有一个
6：什么是行内块
1》img是行内块什么标签都可以包这个img
2》行内块：1，可以设置宽高 2，会并到一排 3，会受到空格与换行影响
*行与块与行内块的转换方式：
1》display:block 转换成块
2》display:inline 转换成行
3》display:inline-block 转换成行内块
4》块标签可以包任何标签而p标签只可以包行内块
5》行标签只能包行标签(*不可以包自己)
6》a可以包任何标签
7：什么是语义化请举例：
1》像说话一样写代码；
2》有语义化：h1-h6 p img a strong em
3》无语义化：div span b i
8：有关盒模型：width height border padding
9：关于margin和padding：
1》关于padding
padding (内边距)：是指:边框到内容的距离，也叫作：内补白，内补丁
padding：5px 指内边距上下左右的距离
padding：100px 50px 指到内边距的上下 左右距离
padding：20px 60px 100px 指到内边距的上 左右 下的距离
padding：20px 60px 80px 120px 指到内边距上左下右顺时针的距离
注：每一个方向，只有一个值， 给了padding的距离后就要用宽度和高度
减去这个padding的距离，如果没有设置宽度和高度就不需要减去。
行标签只可以给左右的padding的距离。
2》关于margin：
margin（外边距）：是指一个盒子到另一个盒子的距离，也叫作：外补白，外补丁
margin：5px 指上下左右到外边距的值
margin：100px 50px 指上下 左右到外边距的值
margin：20px 60px 100px 指上 左右 下到外边距的值
margin：20px 60px 10px 120px 指上下左右顺时针到外边距的值
注：行标签只可以给左右margin的值，写代码钱必须要清除掉margin和padding
的默认样式。写法： *（通用符）{ margin：0；padding：0；}
1：margin不算盒子
2：注行标签只可以给左右的margin 。并在写代码之前必须清除默认的样式。
3：margin的BUG: 拖拽父级（塌陷）
解决的办法如下所述：
写入：overflow:hidden;
或者写一个边框：border:1px solid #000;
在或者给一个：padding-top:50px;(推荐)
4：margin合并
解决的办法如下所述：给单一方向加上你想要的距离（取最大值）
10：浮动：
float:浮动 书写样式：（float：right/left）
1：浮动的特性：
1》是一个有方向的；
2》变成了块；
3》并到一排；
4》顶对齐；
5》宽度不够会掉下来；
6》脱离文档流；
2：加上浮动的元素只会对下面的元素有影响
3：加浮动必须得：
1》只要有一个标签加上了浮动，同级的标签都要加浮动
2》加上浮动就必须清浮动（只能写在父级）
3》一定要设置宽度，不给宽度会是内容的宽度
4：清浮动的三种办法
1》清浮动：overflow:hidden(溢出隐藏)
2》清浮动要加给父级加。 样式：<div style="clear:both"></div>*必修要用块标签，单独再写一个标签，给这个块标签加上一个
3》使用 .clearfix:after选择器清除掉浮动：
.clearfix:after{
display:block;
clear:both;
content:"";
}
.clearfix{zoom:1;} *清浮动一定要给父级
5：如何清除掉img的一像素白边：给img样式里写入：{ display:block;}
网友评论