admin 管理员组文章数量: 887021
第1章Html
Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。
就是给文本加上含有语义的标签。
接下来应该学习更多具体语义标签：
一、结构（固定的结构）
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>二、Html中的标签
标签：用“<>”包起来的内容。
Html标签：<html></html>
由于现在学习的html页面还是很简单的，为了能够让页面更加的“充实”我们要学习更多的标签。
h系列的标签(Header)：h1,h2,h3,h4,h5,h6
作用：把页面上的文字加上标题的语义。
代码：
h1,h2,h3,h4,h5,h6:将文字放大，加粗.并且逐渐变小。（h1标签是最大的。）
注意：一个页面只能有一个h1标签。
p标签(Paragraph)：段落标签
作用：给页面的上一段文字加上段落的说语义
代码：
<p>这是段落</p>特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。
hr标签(Horizontal Rule)
作用：在页面显示一条横线。
代码：
<hr/>特点：在页面显示一条横线，默认占整行。
br标签(break)
作用：换行。
代码：
<br/>特点：换行。
b(Bold),u(Underlined),i(Italic),s(Strikethrough),strong,em,del,ins
作用：
b：加粗
u: 下划线
i: 倾斜
s: 删除线
建议不要使用，因为这些标签没有语义。
作用：
strong:加粗
ins:下划线
em:倾斜
del:删除线
可以使用
img标签(image)：
作用：在页面显示一张图片。
代码：
<img src=”图片的路径” />特点：就是显示图片.
属性：
| src |
图片显示的路径 |
| alt |
如果图片加载不出来会显示这个属性中的文字 |
| title |
介绍这张图片 |
a标签(Anchor)：锚
a标签的其它名称：
超级链接，超链接，锚链接。
作用：可以在一个页面跳转到另一个页面。
代码：
<a href=”页面的路径”></a>注意：在a标签之内必须要写上文字，如果没有，那么这个标签在页面上找不到。
a标签的其它用法：
1.可以不跳转（跳转到当前页面）href=”#”
2.可以跳转到另外的页面。
3.可以在当前页面进行定位。
A.设置a标签的href属性为“#id名”，
B.在页面的指定位置加入一个目标标签（可以是任意标签）
C.必须给这个标签设置一个id名：
<p id=”mubiao”>这是目标</p>4.在跳转的页面进行定位。
5.可以进行下载。（强烈不推荐使用）
a标签的属性：
| href |
a标签跳转的目标地址 |
| target |
_blank:保留原始页面，再进行跳转 _self:在当前页面进行跳转 |
| base |
为页面上所有的a标签设置跳转的方式（base标签一般放在titile标签下面） |
列表
有序列表
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>无序列表
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
表格
创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释。
1、<table><</table>：用于定义一个表格。
2、<tr><</tr>：用于定义表格中的一行，必须嵌套在 <table></table>标签中，在 <table> </table>中包含几对 <tr> </tr>，就有几行表格。
3、<td></td>：用于定义表格中的单元格，必须嵌套在< <tr></tr>标签中，一对 <tr> </tr>中包含几对< <td> </td>，就表示该行中有多少列（或多少个单元格）。
4、thead：表格头部
5、tbody：表格主体
6、tfoot：表格底部
7、caption表格标题
表格属性
表单控件
input控件
<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。
label 标签
label 标签为input 元素定义标注（标记）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
如何绑定元素呢？
for 属性规定 label 与哪个表单元素绑定。
<label for="male">Male</label>
<input type="radio" name="sex" value="male">textarea 标签
如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>select标签
使用select控件定义下拉菜单的基本语法格式如下
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select><select></select>中至少应包含一对<option></option>。
在option 中定义selected=" selected "时，当前项即为默认选中项。
button标签
<button> 按钮 </button> 单独的一个表单控件，就是普通按钮的意思。只不过它是双标签哦！
form表单
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>常用属性：
Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method 用于设置表单数据的提交方式，其取值为get或post。
name 用于指定表单的名称，以区分同一个页面中的多个表单。
注意： 每个表单都应该有自己表单域。
三、当前的主流文档类型：
| 文档类型 |
分类 |
备注 |
| HTML |
HTML Strict DTD |
请求比较严格的html类型 |
| HTML Transitional DTD |
相对而言比较规范不太严禁 |
|
| Frameset DTD
|
框架级的类型 |
|
| xHTML |
HTML Strict DTD |
请求比较严格的html类型 |
| HTML Transitional DTD |
相对而言比较规范不太严禁 |
|
| Frameset DTD
|
框架级的类型 |
xHtml(html2.0版本（是一种相对html语法更加严谨的hmtl）):
注意：将来在使用DOCTYPE的时候建议使用html5的类型。每个页面都要设置一个doctype，如果不设置，浏览器会默认开启quirks mode（怪异模式）解析（quirks mode（怪异模式）是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式）。
Html标签
作用所有html中标签的一个根节点。
Head标签
作用：用于存放：
title,meta,base,style,script,link
注意：每个head标签中都必须有一个有title标签，其它的可选。
Body标签
作用：用于存放所有的html的结构标签：
p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,
Title标签：
作用：让页面拥有一个属于自己的标题。
meta 标签：
常用用法：
1. Description：可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。
2. Keywords：关键词，可以用来提高页面的关健词的比重（提升排名的一种方式。）
3. 字符集（编码格式）：
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
Charset（字符集的格式）：UTF-8.
注意：字符集（文字在电脑是存储的字典）：
电脑是不能直接存储文字的，一般情况下电脑存储的是这个文字在“字典”里对应的位置。
gb2313---->gbk;
国标2313---->国标
gbk,utf-8之间的区别：
相同点：都是字符的编码格式。
区别：
utf-8:收录是全世界所有的语言中的文字。
gbk:收录了汉字，片假名。
大小：
utf-8>gbk
性能：
uft-8<gbk
约定：将来我们在整个学习过程中都用utf-8;
utf-8存储一个汉字占3个字节，
gbk存储一个汉字上2个字节
四、标签的分类
双标签：有开始有结束，开始和结束之间是存在内容
<h1></h1>,<p></p>
单标签：只有一个标签，自己闭合自己。
<hr/> ,<br />
五、标签与标签之间的关系
嵌套关系：一个标签包含另外一个标签，他们之间构造父子关系。
并列关系：两个标签并列，他们构造兄弟关系。
注意：将来在书写代码的时候如果两个标签之间的关系是嵌套关系，最好通过代码直接反映出来（子元素相对于父元素有一个缩进）。如果是并列关系，最好要有对齐。
六、标签的属性
<img src=”a.jpg” />属性为 HTML 元素提供附加信息，img标签中的src就是img标签的一个属性。
七、路径问题
第一种：绝对路径
带有盘符的路径：C:\上课内容\上课视频\01html第一天\4-源代码\1.jpg.
第二种：相对路径
由页面是一个文件，图片 也是一个文件，而现在需要在页面上输出图片，所以需要得到图片相对于文件的路径.
a.如果页面与图片在同一目录下面：
<imgsrc=”2.jpg” />b.如果页面在图片一上级目录：
<img src=”image/1.jpg” />c.如果图片在页面的上一级目录：
<img src=”../2.jpg” />只要不出意外情况都是用相对路径：因为相对路径的可移植性要强。
第2章CSS
一、字体设置及选择器
1、font属性的设置
font-size字体大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少
Google和火狐默认字体大小为：16px；
font-family字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:"微软雅黑";}可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
font-weight字体粗细
字体加粗除了用 b 和 strong标签之外，可以使用css 来实现，但是css 是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
font-style字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用css 来实现，但是css 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
2、CSS中注释写法
CSS规则是使用 /* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。
3、颜色的不同写法
a、直接写英文单词yellow red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgba（0,0,0,0.5）a为透明度
4、css各类选择器
标签选择器
标签选择器写法
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
效果：会将所有的这类标签都加上相同的css属性
类选择器
类选择器的写法
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器最大的优势是可以为元素定义单独或相同的样式。
将拥有这个类名的所有元素加上css样式
命名的取值规范只能是：0-9，a-z，A-Z，_，-，不能以数字开头
id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
元素的id值是唯一的，只能对应于文档中某一个具体的元素。
将拥有这个id名的唯一元素加上css样式
5、关于text属性的设置
line-height行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
text-align文本内容水平对齐
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent首行文本缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
二、复合选择器及伪元素
1、复合选择器
交集选择器
选择器选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
注意：两个选择器之间是没有空格的。
并集选择器
选择器 ，选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
将两种类型的元素全部选择出来。
后代选择器
选择器 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
注意：两个选择器之间是要有空格的。
子代选择器
选择器>选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
注意：两个选择器之间是要有大于号隔开。
2、元素的三种显示方式
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
3、伪类和伪元素的使用
伪类
| :link |
伪类将应用于未被访问过的链接 |
| :hover |
伪类将应用于有鼠标指针悬停于其上的元素。 |
| :active |
伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。 |
| :visited |
伪类将应用于已经被访问过的链接 |
| :focus |
伪类将应用于拥有键盘输入焦点的元素。（ie8以上支持） |
链接伪类，他们规定执行有顺序的，不能随便更改位置：
要按照 :link --> :visited --> :hover--> :active 的顺序。
text-decoration检索或设置对象中的文本的装饰
text-decoration : none || underline || blink || overline || line-through
none : 无装饰
underline : 下划线
line-through : 删除线
overline : 上划线
伪元素
更改第一个字或字母的样式：first-letter
更改第一行文本的样式：first-line
向前面添加：before
向后面添加：after
4、css三大特性：继承性、层叠性、优先级、权重
| 继承或者* 的贡献值 |
0,0,0,0 |
| 每个元素（标签）贡献值为 |
0,0,0,1 |
| 每个类，伪类贡献值为 |
0,0,1,0 |
| 每个ID贡献值为 |
0,1,0,0 |
| 每个行内样式贡献值 |
1,0,0,0 |
| 每个!important贡献值 |
∞ 无穷大 |
三、背景及盒模型
1、background背景
背景颜色
background-color：
背景图片
语法：
background-image: none | url (url)
参数：
none : 无背景图（默认的） url : 使用绝对或相对地址指定背景图像
background-image属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
背景平铺
语法：
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数：
repeat : 背景图像在纵向和横向上平铺（默认的）
no-repeat: 背景图像不平铺
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向平铺
背景位置
语法：
background-position: length || length
background-position: position || position
参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 position : top | center | bottom | left |center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：
position后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
背景附着
background-attachment：scroll（滚动）
background-attachment：fixed（固定）
2、盒子模型
border边框
语法：
border :border-width || border-style || border-color
边框属性—设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
表格边框问题
border-collapse:collapse;表示边框合并在一起。
border-spacing:px;定义边框之间的间距。
padding内边距
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
| 值的个数 |
表达意思 |
| 1个值 |
padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
| 2个值 |
padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3个值 |
padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4个值 |
padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
margin外边距
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
宽度高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
盒子的总宽度= width+左右内边距之和+左右边框宽度之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和
注意：
1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
四、浮动与定位
浮动
选择器{float:属性值;}
| 属性值 |
描述 |
| left |
元素向左浮动 |
| right |
元素向右浮动 |
| none |
元素不浮动（默认值） |
清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}| 属性值 |
描述 |
| left |
不允许左侧有浮动元素（清除左侧浮动的影响） |
| right |
不允许右侧有浮动元素（清除右侧浮动的影响） |
| both |
同时清除左右两侧浮动的影响 |
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。
给父级添加overflow属性
可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
使用after伪元素
使用方法：
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} //ie6、7 专有优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用zoom:1触发 hasLayout。
注意：content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox7.0前的版本会有生成空格。
给伪元素添加空白字符
content:"\200B";这个参数，Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden。
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.当然有些网站也用 content:"\0200" 的，都是空格的意思。
使用before和after双伪元素
使用方法：
.clearfix:before,.clearfix:after{
content:".";
display:table;
clear:both;
}
.clearfix{*zoom:1;}优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用zoom:1触发 hasLayout。
定位
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
在CSS中，通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比。具体解释如下表所示：
| 边偏移属性 |
描述 |
| top |
顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom |
底部偏移量，定义元素相对于其父元素下边线的距离 |
| left |
左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right |
右侧偏移量，定义元素相对于其父元素右边线的距离 |
也就说，以后定位要和这边偏移搭配使用了，比如 top: 100px; left: 30px; 等等
2、定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值;}
position属性的常用值
| 值 |
描述 |
| static |
自动定位（默认定位方式） |
| relative |
相对定位，相对于其原文档流的位置进行定位（不脱标） |
| absolute |
绝对定位，相对于其上一个已经定位的父元素进行定位（脱标） |
| fixed |
固定定位，相对于浏览器窗口进行定位（脱标） |
总结
| 定位模式 |
是否脱标占有位置 |
是否可以使用边偏移 |
移动位置基准 |
| 静态static |
不脱标，正常模式 |
不可以 |
正常模式 |
| 相对定位relative |
不脱标，占有位置 |
可以 |
相对自身位置移动 |
| 绝对定位absolute |
完全脱标，不占有位置 |
可以 |
相对于定位父级移动位置 |
| 固定定位fixed |
完全脱标，不占有位置 |
可以 |
相对于浏览器移动位置 |
3、叠放次序z-index
z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
4、display显示
display 设置或检索对象是否及如何显示。
display: none 隐藏对象 与它相反的是display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。
5、visibility可见性
设置或检索是否显示对象。
visible: 对象可视
hidden : 对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）
6、overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible: 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条
六、界面样式及精灵图
1、界面样式
cursor鼠标样式
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor :default 小白 | pointer 小手 | move 移动 | text 文本
尽量不要用hand 因为 火狐不支持 pointer ie6以上都支持的尽量用
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline轮廓
outline: outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是 ： outline: 0;
resize防止拖拽
resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动文本域。
vertical-align垂直居中
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单等。
| 模式 |
单词 |
| 基线对齐： 默认的是文字和图片基线对齐 |
vertical-align: baseline; |
| 垂直居中： 默认的是文字和图片基线对齐 |
vertical-align: middle; |
| 顶部对齐： 默认的是文字和图片基线对齐 |
vertical-align: top; |
2、精灵图
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
七、CSS文本属性及优化
1、margin负值
margin是可以设置为负数的
定位后元素的层级要高于标准流的层级
2、给网站添加favicon图标
<link rel="shortcut icon" href=“favicon.ico">3、logo优化
1、我们要在logo里面放一个h1标签，就是为提权，说明这个盒子很重要。
2、我们继续在h1 里面放一个链接a 要和 logo盒子一样大。
3、注意 a链接 里面要放上网站标题。（是为了优化）
4、链接里面的文字对用户体验不好，这里不需要看见。有两种方法实现：
5、利用text-indent:-2000em; 或者 利用padding 挤开盒子并且overflow 切割
6、给链接添加 title 提示文本 增强用户体验。
4、文本属性
letter-spacing字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。
word-break自动换行
normal 使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。
white-space空白符处理
使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下：
normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
pre：预格式化，按文档的书写格式保留空格、空行原样显示。
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记 <br />
。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。(重要)
text-overflow文字溢出
text-overflow: clip | ellipsis
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
clip : 不显示省略标记（...），而是简单的裁切
ellipsis: 当对象内文本溢出时显示省略标记（...）
文本超出以省略号代替:
white-space: nowrap;//（强制一行显示）
overflow: hidden;//（溢出隐藏）
text-overflow: ellipsis;//（溢出显示省略号）
5、css条件注释语法的使用
<!--[if IE]> <p>你在非IE中将看不到我的身影</p> <![endif]-->
<!--[if IE 7]>只能被 IE7 识别;<![endif]-->
<!--[if lte ie 版本号]>小于等于ie版本号<![endif]-->
<!--[if ! ie]><!-->要判断非ie<!--<![endif]-->
第3章JS
一、流程控制语句
程序三种基本结构--顺序结构、选择结构、循环结构
1、选择结构
if语句
if (判断条件) {
执行语句
}elseif (判断条件) {
执行语句
}else{
执行语句
}switch语句
switch(表达式) {
case 取值：
执行语句
break；
case 取值：
执行语句
break；
default：
执行语句
}case里必须是具体的值，但是如果表达式可以返回一个具体的值true或者false也可以是表达式，这时switch里面是true
三元表达式：判断条件？条件为真的结果：条件为假的结果；
2、循环结构
for语句:1初始化表达式、2控制表达式、3循环后表达式
for(vari = 0; i < n ; i ++){
执行语句
}while语句
var i=0；
which(判断条件){
执行语句
}do while 语句 先执行后判断至少执行一次
var i= 0;
do {
执行语句
}while(判断条件)二、基本类型和复杂类型
基本数据类型（值类型）：直接存储值
number、string、boolean、undefined、null（基本类型只有这五个）
复杂数据类型（引用类型）：存储引用 object
一、数组
1、数组的声明
①通过构造函数
var arr = new Array ();②通过字面量
var arr = [];2、数组的赋值和取值
赋值：arr [索引号] = 1；
批量赋值 for循环
取值：arr [索引号]；
3、数组的遍历（重点）
for (var i = 0; i < arr.length; i++){
}防止稀疏数组 arr (arr.length)= i;
4、转换数组
|
|
console.log(arr.);打印输出 |
|
| console.log(arr); |
[1, 2, 3] |
先以对象的形式输出，刷新后把直接量输出，其实就是调用了valueOf |
| valueOf() |
[1, 2, 3] |
某种程度上说 它就是调用了toString |
| toString() |
1,2,3 |
调用了join，把每一项的值取出来用逗号拼接 |
| join("-") |
1-2-3 |
不传参数，默认用逗号拼接1,2,3，传入参数，会用这个参数拼接 |
5、检测数组（掌握）
| var arr = [1, 2, 3]; |
console.log打印输出的返回值 |
| typeOf arr; |
object |
| arr instanceof Array; |
true |
| {} instanceof Array |
false |
| Array.isArray([]); |
true |
| Array.inArray({}); |
false |
| Array.prototype.isArray; |
|
| Array.isArray; |
|
| Ovject.prototype.toString.cell(arr); |
[object Array] |
6、增删方法
| push(1,2,3,4); |
从后面添加元素，可以同时加入多个 |
| console.log(arr.push(1,2,3,4)); |
返回值是新数组的长度 |
| unshift(a); |
从前面添加 可以添加多个 |
| console.log(arr.unshift(a)); |
返回值是新数组的长度 |
| shift(); 无参数 |
从前面删除一个 |
| console.log(arr.shift()); |
返回删除的元素 |
| pop(); 无参数 |
从后面删除最后一个 |
| console.log(arr.pop()); |
返回删除的元素 |
找到数组中第一个a的位置：arr.indexOf(a);
找到数组中最后一个a的位置arr.lastindexOf(a);
找到数组中所有的a的位置
function getIndex (arr,str) {
var index = -1;
do {
index = arr.indexOf(str, index + 1);
console.log(index);
if (index != -1) {
console.log(index);
}
}while(index != -1);
}MDN官方介绍indexof:
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1
// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4
console.log(beasts.indexOf('giraffe'));
// expected output: -1语法
arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])参数
searchElement
要查找的元素
fromIndex
开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.
返回值
首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
在数组中元素出现的次数
var arr = ["c", "a","z", "a", "x", "a"]
var o = {}; //属性名 元素--> 属性值 次数
for (var i = 0; i < arr.length; i++){
var item = arr[i];
if(o[item]) { //能进来说明有值，没有进来说明之前没有出现过
o[item]++; //等于o[item] = o[item] + 1;
}else{
o[item]= 1; //能进来说明是undefined，也就是说之前没有出现过，这是第一次出现
}
}
7、操作方法
concat();把参数拼接到当前数组
slice[begin，end);从当前数组中把要的东西复制一份，不影响原来的数组
splice(begin，删除个数，插入的新元素);删除或替换当前数组的某些元素，返回这些元素
8、位置方法
indexOf(); 从前往后寻找元素在数组中的位置
lastIndexOf(); 从后往前找，没有找到返回-1
9、迭代方法
every();
filter();
forEach(); 对数组遍历
arr.forEach(function(element, index, array) {
console.log(element);
})
map();
some();
10、sort 方法（了解）
原理：
function sort(arr, fn) {
for(var i = 0; i < arr.length - 1; i ++) {
var flag = true;
for(var j = 0; j < arr.length - 1 - i; j ++){
if(fn(arr[j] > arr[j + 1]) > 0){
vartemp = arr[j];
arr[j]= arr[j+1];
arr[j+1]= temp;
flag =false;
}
}
if(flag) {
break;
}
}
returnarr;
}
var array = [3, 2, 1];
console.log(arr);
console.log(sort(array, function (a, b){
return a - b;
}));
console.log(arr);
二、函数
1、函数的定义和调用
函数的定义
①函数的声明：function 函数名 () {
函数体（要执行的代码）
}
②函数表达式：var 函数名 = function () {
函数体
};
函数的调用：函数名 ();（要调用先引用）
2、函数的参数
有参数的函数的声明：function 函数名 (参1，参2) { //函数声明时的参数只是一个占位符，是形式参数
函数体
}
有参数的函数的调用：函数名 (参1，参2) //函数调用时传入的参数是具体的数值，是实际参数
形参和实参没有关系，只不过在调用的时候把实参的值复制了一份赋值给了形参
3、函数返回值
①return 要返回的值；（函数的返回值是什么，调用这个函数就相当于调用了什么）
②函数在执行完成return语句后便会退出函数，后面的代码不会执行
③如果只打印函数名，会通过函数名找到函数体，如果想打印的是函数的返回值，那么一定要加小括号()
4、匿名函数
匿名函数：函数定义完后就赋值给了一个变量，通过变量名来调用这个函数，所以就没有必要起名字
5、递归函数
函数自己调用自己的编程技巧
6、回调函数(重点)
被当做函数传递的函数
三、对象
1、键值对
一种对应关系，通过键能够方便地找到值 key:value; 对象也是键值对
属性名：属性值、索引：元素的值
2、对象的声明
①通过构造函数
varobj = new.Object();
②通过字面量
varobj = {};
3、属性
用来描述对象的特征 一般是名词 对应变量
定义：对象.属性名 = 要赋的值；
调用：对象.属性名；
4、方法
用来描述对象的行为 一般是动词 是一种函数（属于某个对象的函数就叫方法）
定义：对象.方法名 =function(){ //函数体}；
调用：对象.方法名；
5、访问属性的两种方式（重点）
①点语法（属性名是什么就必须写什么）：obj.属性名；
②中括号（通过字符串找属性名，字符串可以通过编程拼接）：obj["属性名"];
6、遍历的两种方式（重点）
①for循环
②for-in
for(var k in json) { 语句}
k变量代表的是json中的各个属性（key）和 var i= 0中的i是一个意思 名字不同而已
json JavaScript Object Notation（JavaScript对象标记法）是仿照JS中对象字面量的格式去书写的一串 用来记录对象数据的字符串，可以用于数据传输。
7、Null
null常被用于期望一个对象，但是当前先不附加任何值的情况
undefined派生自null
undefined== null //true
undefined=== null //false
四、字符串的方法
字符串的所有方法都不会修改字符串本身
1、操作方法（重点）
slice(参1，参2) 从start开始，截取到end位置，end取不到；参1：开始的位置 ；参2：结束的位置[start,end).遇到负数把length和负数相加
substring() 从start开始，截取到end位置，end取不到；遇到负数，把负数变为0，两个参数交换位置
substr() 从参1，start开始，截取参2，length个字符
charAt() 获取指定位置处的字符
str[0]; 和charAt 等效，IE8+支持
trim() 只能去除字符串前后的空白
split() 把字符串切割成字符数组
大小写转换：
to(Locale)UpperCase() 转换大写
to(Locale)LowerCase() 转换小写
2、查找字符串中所有的o的位置
var str= "dmsosekkdsoosns";
varindex= -1；
do{
index = str.indexOf("o",index +1);
console.log(index);
}while(index != -1);
3、将字符串中所有的o替换成！
do{
str =str.replace("o","!");
}while(str.indexOf("o")!= -1);
console.log(str);
4、统计字符串中每个字符出现的次数
var o = {};
for (var
版权声明：本文标题：前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1725920116h892861.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论