《Web前端》学习总结

第1章 HTML语言基础
第2章表格与框架
第3章表单
第4章 CSS语言基础
第5章 CSS页面布局
第6章 JavaScript语言基础
第7章 JavaScript对象

第1章 HTML语言基础

     HTML是一种描述性标记语言，用来描述页面内容的显示方式；HTML是一种纯文本文件，以“.html”或“.htm”为后缀；HTML的基本组成单元是元素，语法结构如下

     <div>一个简单页面</div>

HTML具体结构

     <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>一个简单页面</title></head><body>网页正文部分<img src="data:images/logo.jpg" /><table><tr><td>Hello,HTML!</td></tr></table></body></html>

< head >中可以包含以下子元素：< title >、< meta >、< base >、< link >、< script >以及< style >等
< title >标签：在浏览器中的标题栏显示标题

<html><head><title>魁首</tile></head><body><div></div></body>
</html>

< meta >标签：用于向客户的浏览器传递信息和命令，不显示内容。
一个< head >标签中可以包含一个或多个< meta >标签。

属性名	属性值	描述
name	keywords	定义页面的关键词，关键词之间用英文“,”隔开。
name	description	定义页面的描述内容，简短的文字描述网站或网页的主要内容。
name	robots	用来告诉搜索引擎页面是否允许索引与查询。
name	author	标注网页的作者。
http-equiv	content-type	设定页面使用的字符集。
http-rquiv	refresh	自动刷新并跳转到新页面。
http-equiv	set-cookie	设置页面缓存过期时间。
http-equiv	expires	设置网页到期时间。
content	text	文本内容，用于描述name和http-equiv属性相关内容。

文本修饰标签

标签	描述
< font >	用于设置文本的字体样式。
< b >	以加粗的方式显示，效果和< strong >相同。
< i >	以斜线的方式显示。
< s >	被添加一条删除线。
< u >	被添加一条下划线。
< sup >	以上标的形式显示。
< sub >	以下标的形式显示。
< strong >	以加粗的方式显示，效果和< b >相同。

特殊字符

特殊字符	实体引用	特殊字符	实体引用
双引号（"）	& quot;	左箭头（←）	& larr;
&号	& amp;	上箭头（↑）	& uarr;
空格	& nbsp;	右箭头（→）	& rarr;
小于号（<）	& lt;	下箭头（↓）	& darr;
大于号（>）	& gt；	左右箭头（↔）	& harr;
小于等于（≤）	& le;	左下箭头（↵）	& crarr;
大于等于（≥）	& ge;	左双箭头（⇐）	& lArr;
版权号（©）	& copy;	上双箭头（⇑）	& uArr;
商标符号（™）	& trade;	右双箭头（⇒）	& rArr;
注册商标（®）	& reg;	下双箭头（⇓）	& dArr;
分数（¼）	& frac14;	交集（∩）	& cap;
分数（½）	& frac12;	并集（∪）	& cup;

< p > 标签用于对网页内容提供块级格式。
< br />标签用于在文本内容不结束的情况下对文本进行换行。
< hr />标签在页面中产生一条水平线，将文本区域内容分开。

<html><head><meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /><title></title></head><body><h3>内容展示</h3><hr size="3" noshade="noshade" color="boue" width="400px; align="right" /><p>文本内容1<br />文本换行内容2 </p><p>文本内容3</p> </body>
</html>

列表元素

列表元素	描述
ul	unordered lists的缩写 (无序列表)
li	list item的缩写（列表项目）
ol	ordered lists的缩写（有序列表）
dl	definition lists的英文缩写 (自定义列表)
dt	definition term的缩写 (自定义列表组)
dd	definition description的缩写（自定义列表描述）
nl	navigation lists的英文缩写（导航列表）
tr	table row的缩写（表格中的一行）
th	table header cell的缩写（表格中的表头）
td	table data cell的缩写（表格中的一个单元格）

有序列表：使用数值或者字母作为编号。

<ol><li>列表项1 </li><li>列表项2 </li>
</ol>

通过type属性可以指定有序列表编号的样式，取值方式有以下几种:

编号样式	描述
“1”	代表阿拉伯数字（1、2、3）
“a”	代表小写字母（a、b、c）
“A”	代表大写写字母（A、B、C）
“i”	代表小写罗马数字（i、ii、iii）
“I”	代表大写罗马数字（I、II、III）

通过start属性指定列表序号开始的位置，例如start="3"表述从C开始

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>有序列表</title></head><body><ol type="A" start="3"><li>购物区</li><li>男装</li><li>女装</li><li>童装</li><li>休闲装</li><li>运动装</li></ol></body>
</html>

无序列表：使用项目符号作为编号。

<li type="类型"> <li>列表项1 </li><li>列表项2 </li>
</li>

type属性用于设置图形前缀，取值可以是circle(圆)、disc(点)、square(方块)、none等，默认为disc(点)

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无序列表</title>
</head>
<body><ul type="square"><li>购物区</li><li>男装</li><li>女装</li><li>童装</li><li>休闲装</li><li>运动装</li></ul></ul>
</body>
</html>

定义列表：列表中的每个项目与描述匹配显示。

<dl><dt>标题</dt><dd>描述</dd>
</dl>

每一个子项都由：标题（dt）和描述（dd）组成。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>定义列表</title>
</head>
<body><dl><!-- 第一项开始 --><dt>购物区</dt><dd>近年来，随着经济社会和现代物流业的快速发展，带动了电子商务的快速发展……</dd><!-- 第一项结束 --><dt>影视区</dt><dd>能够在线收看高清电影电视剧、体育直播、游戏竞技视频、动漫视频、综艺视频、财经资讯视频播放流畅、完全免费，是网民喜爱的休闲娱乐区。</dd><dt>餐饮区</dt><dd>通过互联网使消费者及时了解餐厅营运、在线点菜、优惠套餐等方式进行网络销售传播，便利充分地实现餐厅服务价值交换。</dd></dl>
</body>
</html>

图像标签

 <img src="url" alt=" " .../>

属性名	描述
src	图像的地址，可以是绝对路径，也可以是相对路径。
alt	图像的描述，浏览器无法显示图像时，改文本作为图像的替代；
align	图像的对齐方式：top、bottom、middle、left、right.
border	指定图像边框的宽度。
height	指定图像的高度，可以是固定值，也可以是百分比（占外层容器的百分比）。
weight	指定图像的宽度，可以是固定值，也可以是百分比（占外层容器的百分比）。

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图像标签的使用</title>
</head>
<body><img src="logo.jpg" alt="魁首的logo" /><img src="data:images/logo.jpg" /><img src="data:images/logo.jpg" alt="魁首的ogo" width="200" height="200" /><img src="data:images/logo.jpg" border="2" width="50%" />
</body>
</html>

超链接标签

<a href=“url” name=" "  target=" "></a>

target属性可以改变目标文档的显示窗口。

值	描述
_blank	在新窗口中打开被连接的文档。（用的比较多）
_self	默认值，在当前窗口打开被连接的文档。
_parent	在父框架集中打开被连接的文档。
_top	在整个窗口中打开被连接的文档。
frameName	在指定的框架中打开被连接的文档。

<a href="http://www.baidu.com" target="_blank">打开目标链接</a>

第2章表格与框架

<table border="1" ><!--行是表格的水平元素，使用tr表示--><tr><!--单元格是表格的基本元素，使用td表示--><td>姓名</td><td>部门</td><td>邮箱</td><td>电话</td></tr><tr><td>张三</td><td>市场部</td><td>zhangsan@qq.com</td><td>18966882233</td></tr><tr><td>李四</td><td>研发部</td><td>lisi@qq.com</td><td>13688995566</td></tr>
</table>

表格基本标签

属性	取值	描述
align	left、center、right	设置表格相对周围元素的对齐方式
bgcolor	rgb(x,x,x)、#xxxxxx、colorName	设置表格的背景颜色
border	像素	设置边框的宽度
cellpadding	像素和百分比	设置单元格与内容之间的距离
cellspacing	像素和百分比	设置单元格之间的距离
height	像素和百分比	设置表格的高度
width	像素和百分比	设置表格的宽度
rules	none、groups、rows、cols、all	设置表格中的表格线显示方式，默认all

单元格标签

属性	描述
align	设置单元格内容的水平对齐方式：left、center、right
valign	设置单元格内容的垂直对齐方式：top、middle、bottom、baseline
rowspan	设置单元格跨行数
colspan	设置单元格跨列数

行标签

属性	描述
align	设置单元格内容的水平对齐方式：left、center、right
valign	设置单元格内容的垂直对齐方式：top、middle、bottom、baseline
bgcolor	设置单元格背景颜色
bordercolor	设置行内单元格的边框颜色

行分组
< thead >标签定义表头，用于创建表格的头部信息
< tfoot >标签定义表尾，用于创建表格的脚注部分
< tbody >标签定义表格主体，用于表示表格的主体部分
< caption >标签定义表格标题，显示在整个表格的上方
列分组

属性	描述
align	设置单元格内容水平对齐方式：left、center、right、justify
valign	设置单元格内容垂直对齐方式：top、middle、bottom、baseline
span	规定该列组应该横跨的列数，默认为1
width	设置列的宽度

frame框架

<frameset rows="行高度所占窗口的像素或比例,.." cols="列宽度所占窗口的像素或比例,.." ><frame src="..."/>......
</frameset>

frame框架的属性

属性	描述
name	框架名，在设置超链接时用作框架的标记,frame
src	设置在框架中显示页面的URL
frameborder	框架边框是否显示，取值为0或1，frameset
marginheight	定义内容与框架的上下边缘高度，默认为1，frame，设置2独立本地页面观察效果
marginwidth	定义内容与框架的上下边缘宽度，默认为1，frame，设置2独立本地页面观察效果
scrolling	设置框架中是否显示滚动条，取值为yes、no、auto、fraame
noresize	设置框架不能调整大小，需要设置frameborder=1的时候可测试

iframe内联框架

<iframe src="url" name=" " width=" " height=" " ></iframe>

iframe 内联框架的属性

属性	描述
align	设置iframe与周围文本对齐方式，取值left、right、top、middle、bottom
frameborder	设置iframe的边框是否显示，取值0或1
marginheight	定义iframe的顶部和底部的边距
marginwidth	定义iframe的左部和右部的边距
scrolling	设置iframe中是否显示滚动条，取值yes、no、auto
scr	设置iframe中显示页面的URL

第3章表单

表单标签

<form action="处理数据程序的URL地址" method="get|post" name="表单名称">
</form>

属性	描述
action	当提交表单时，向何处发送单中的数据
accept-charset	服务器可处理的表单数据字符集
enctpe	表单数据内容类型，可以为application/x-www-form-urlencoded、text/plain、multipart/form-data
id	表单对象的唯一标识符
name	表单对象的名称
target	打开处理URL的目标位置（不建议使用）
method	规定向服务器端发送数据所采用的方式，取值可以为get、poost
onsubmit	向服务器提交数据之前，执行其指定的JavaScript脚本程序
onreset	重置表单数据之前，执行其指定的JavaScript脚本程序

表单域

<input type="text" name="…" size="…" maxlength="…" value="…"     disabled="disabled" readonly="readonly"/>

属性	描述
id	设置当前控件的唯一ID，在界面设计时，CSS、JavaScript中可以引用
name	设置当前控件的名称，在向服务器发送数据时，服务器根据name属性获取对应表单域的值
value	设置表单域的初始值，网页加载过程中，默认显示该值
type	该属性是必须的，用来说明当前控件的类型，取值可以是text、password、radio、checkbox、file、hidden、button、submit、reset、image等
maxlength	设置输入到文本框的最大字符数；输入达到最大数后，用户按下更多键，也不会添加新的字符
size	设置文本输入控件的宽度，单位为字符

密码域

<input type="password" name="..." size="..." maxlength="..."  value="..." />

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单域-密码框</title>
</head>
<body>
<form>用户名：<input type="text"  name="userName" id="userName"         value="请输入用户名"/> <br/><br/>密　码：　<input type="password" name="userPwd" id="userPwd"/><br/><br/>确认密码：<input type="password" name="userRePwd" id="userRePwd" size="25"        disabled="disabled" value="请输入确认密码"/><br/><br/>
</form>
</body>
</html>

单选按钮

<input type="radio" name="..." value="..." checked="checked" />

<form>性别：<input type="radio" name="sex" value="man" checked="checked" />男<input type="radio" name="sex" value="woman" />女<br />专业：<input type="radio" name="major" value="computer" />计算机<input type="radio" name="major" value="physics" />物理<input type="radio" name="major" value="chemical" />化学
</form>

复选框

<input type="checkbox" name="..." value="..." checked="checked" />

<form>爱好：<input type="checkbox" name="hobby" value="music" />音乐 <input type="checkbox" name="hobby" value="swimming" />游泳 <input type="checkbox" name="hobby" value="football" checked/>足球 选修：<input type="checkbox" name="choice" value="computer" checked />计算机<input type="checkbox" name="choice" value="physics" />物理<input type="checkbox" name="choice" value="chemical" checked />化工
</form>

文件选择框

<input type="file" name="..." accept="..." />

隐藏域

<input type="hidden" name="..." value="..." />

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表单域-隐藏域</title></head><body><form><input type="hidden" name="hiddenData" value="不显示的数据"/></form></body>
</html>

多行文本框

<textarea name="..." rows="..."  colos="..."  wrap="...">文本内容</textarea>

属性	描述
off	默认值，文本域中内容足够多的时候，会在文本域中添加滚动条
virtual	实现文本区内的自动换行，以改善对用户的显示；但在传输给服务器时，文本只在用户按下Enter键的地方进行换行，其他地方没有换行的效果
physical	实现文本区内的自动换行，并以这种形式传送给服务器

列表选择框

<select name="…" size="…" multiple="multiple"><option value="…" selected="selected">选项描述内容</option>
</select>

< select >标签的属性列表

属性	描述
name	设置列表名称
size	设置列表中可见选项的数目
multiple	设置列表是否允许按住Ctrl键进行多选，默认只能选择一项
disabled	设置列表是否被禁用

< option > 标签的属性列表

属性	描述
value	设置选项的值，如果选中该项，则该项的值发送给服务器
selected	当页面加载时，该项是否被选中
disabled	该项在首次加载时被禁用

< optgroup >标签：用于对列表进行分组

属性	描述
label	指定每个分组的名称，且分组名不能被选择
disabled	用于设置该分组是否被禁用

<form> 请选择国家：<select name="country"><option>中国</option><option>俄罗斯</option><option>德国</option></select><br />请选择省份：<select name="province" size="4" multiple="multiple" ><option value="HN">湖南</option><option value="HB">湖北</option><option value="GD">广东</option><option value="SH">上海</option><option value="TW">台湾</option></select><br />请选择城市：<select name="city"><option value="cs">长沙<option><option value="zz">株洲<option><option value="xt" selected="select">湘潭<option></select ><br />请选择日期：<select name="day"><optgroup label="-----工作日-----"><option value="monday"> 星期一</option><option value="tuesday"> 星期二</option><option value="wednesday"> 星期三</option><option value="thursday"> 星期四</option><option value="friday"> 星期五</option></optgroup><optgroup label="-----休息日-----"><option value="saturday">星期六</option><option value="sunday" >星期日</option></optgroup><optgroup label="-----节假日-----"><option value="NewYear">春节</option><option value="MayDay">五一</option><option value="OctoberDay">十一</option></optgroup></select>
</form>

按钮控件

<button type="submit | reset | button" value="..."  name="...">按钮</button>

<from action="https://www.baidu.com" method="post"><button type="submit" value="提交内容">提交内容</button><button type="reset" value="重置内容">重置内容</button><button type="button" value="普通按钮" onclick="alert('调用javascript脚本')">普通按钮</button><button type="submit" value="提交内容"><img src="../images/submit.jpg" width="100"/></button>
</form>

分组控件

<fieldset><legend>请选择个人爱好</legend><input type="checkbox" value="music" />音乐<br /><input type="checkbox" value="swimming" />游泳<br /><input type="checkbox" value="football" />足球<br />
</fieldset>

第4章 CSS语言基础

CSS基本语法结构

CSS三种格式：内嵌样式、内部样式、外部样式

内嵌样式(行内式)

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
<h4 style="color:red;font-weight:bold;">内嵌样式的使用</h4>
<span style="color:red;font-weight:bold;">内嵌样式</span>是混合在HTML标记里使用，这种方法可以很简单的对某个元素单独定义样式。

内部样式表

<head>
<style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

外部样式表（外联式）

<head><link href="CSS文件的路径"  rel="stylesheet" />
</head>
<link type="text/css" rel="stylesheet" href="url" />

CSS选择器：基本选择器、组合选择器、属性选择器

基本选择器

类型	示例
通用选择器	`*{ }`
标签选择器	`p{font-family:宋体;}`
类选择器	`.classname{backgroundcolor:red;}`
ID选择器	`#id{color:red;}`

优先级：ID选择器 > 类选择器 > 标签选择器 > 通用选择器

组合选择器

类型	示例
多元素选择器	`p.div{font-size:14px;color:bule;}`
后代选择器	`div p{background-color:#ccc;}`
子元素选择器	`div > p {font-weight:bold;}`
相连兄弟选择器	`h3+p{font-size:24px;color:red;}`
普通兄弟选择器	`.content ~ span{color:bule;}`

属性选择器

类型	示例
存在选择器	`p[id]`
相等选择器	`p[name="teaName]`
包含选择器	`p[name ~ = "stu"]`
连字符选择器	`p[name="zh"]`
前缀选择器	`p[lang\|^="zh"`
子串选择器	`p[title*="zh"`
后缀选择器	`p[title$="zh"]`

<h3 id="se">属性选择器，选择语法</h3>
<p><span attr='attr-se'>s属性选择器，选择语法span[attr='attr-se']</span><br><span attr='attr-se se attr'>类有多个的时候，使用span[attr~='attr']</span><br><span name='sele'>类为sele选择器，可以使用span[name|=sele]</span><br>
</P>

伪类选择器

选择器	示例	描述
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择每个p元素是其父元素的第一个p元素
:in-tange	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:list-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个P元素
:not(selector)	:not§	选择所有p元素以外的元素
:nth-child(n)	p:nth-child(2)	选择所有p元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-cild	选择所有兼有一个子元素的p元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个< p > 元素的第一个字母
:first-line	p:first-line	选择每个< p > 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 < p > 元素
:before	p:before	在每个< p >元素之前插入内容
:after	p:after	在每个< p >元素之后插入内容
:lang(language)	p:lang(it)	为< p >元素的lang属性选择一个开始值

a:link{color:#ff0000;}/*未访问的连接*/
a:visited{color:#00ff00;}/*已访问的连接*/
a:hover{color:#ff00ff;}/*鼠标划过的连接*/
a:active{color:#0000ff;}/*已选中的连接*/

CSS样式属性

属性名	功能	描述
缩进文本	text-indent	设置行的缩进大小或负值，单位可以用em、px或百分比（%）
水平缩进	text_align	设置文本的水平对齐方式，取值left、right、center、justify
垂直缩进	vertical-align	设置文本的垂直对齐方式，取值bottom、top、middle、baseline
字间距	word-spacing	设置字（单词）之间的标准间隔，默认normal（或0）
字母间隔	letter-spacing	设置字符或字母之间的间隔
字符转换	text-transform	设置文本中字母的大小，取值none、uppercase、lowercase、capitalize
文本修饰	text-decoration	设置段落中强调的文字，取值none、underline（下划线）、overline（上划线）、line-through（删除线）、blink（闪烁）
空白字符	white-space	社会源文档中多余的空白，取值normal（忽略多余）、pre（正常显示）、nowrap（文本不换行，除非遇到< br/ >标签）

字体属性

功能	属性名
文本颜色	colro	设置文本颜色
字体类型	font-family	设置文本字体
字体风格	font-style	设置字体样式，取值normal（正常)、italic（斜体）、oblique（倾斜）
字体变形	font-variant	设定小型大写字母，取值normal（正常）、small-caps（小型大写字母）
字体加粗	font-weight	设置字体的粗细，取值bolder（特粗）、bold（粗体）、normal（正常）、lighter（细体）或100~900之间的9个等级
字体大小	font-size	设置文本的大小，值可以是绝对值或相对值，其中绝对值从小到大以次xx-small、x-small、small、medium（默认）、也可以采用百分比（%）的形式
行间距	line-height	设置文本的行高，即两行文本基线之间的距离
字体简写	font	属性的简写可以ongoing以次设置元素字体的两个或更多的方面，书写顺序font-style、font-variant、font-weight、font-size、line-height、font-family

背景属性

功能	属性	描述
背景颜色	background-coor	设置元素的背景色
背景图像	background-image	设置背景图像
背景重复	background-repeat	设置背景平铺的方式，取值no-repeat(不平铺)、repeat-x(横向平铺)、repeat-y(纵向平铺)、repeat（x/y双向平铺）
背景定位	background-position	设置图像在背景中的位置，取值top、bottom、left、right、center或具体值、百分比
背景关联	background-attchment	设置背景图像是否随页面内容一起滚动，取值scroll（滚动）、fixed（固定）
背景尺寸	background-size	用来设置背景图片的尺寸
背景区域	background-origin	规定background-position属性相对于什么位置来定位
填充区域	background-clip	规定background-position属性相对于什么位置来定位
背景简写	background	在一个声明设置所有的背景属性

伪类

伪类名	描述
:active	向被激活的元素添加样式
:focus	向拥有键盘输入焦点的元素添加样式
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:readonly	向只读元素添加样式
:checked	向被选中的元素添加样式
:disabled	向被禁用的元素添加样式
:enabled	向可用的元素添加样式

伪元素

伪元素	描述
:first-line	向文本的首行添加特殊样式
:first-letter	向文本的第一个字母或汉字添加特殊样式
:before	在元素之间添加内容
:after	在元素之后添加内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><style>.box,.a-box{color:red;width:200px;height:200px;background-color:red;}.box:hover:after{content:'';display:block;width:200px;height:200px;background-color:greed;position:relative;left:200px;}.a-box:hover:before{content:'';display:block;width:0px;height:0px;border-top:100px solid transparent;border-bottom:100px solid green;border-bottom:100px solid transparent;position:relative;left:200px;}</style>
</head>
<body>
<div class="box">
</div>
<p>当我鼠标移动上去到box,它可以产生一个新的box</p>
<div class="a-box">
</div>
<p>当我鼠标移动上去到a-box,它可以产生一个新的三角形</p>
</body>
</html>

第5章 CSS页面布局

盒子模型

盒子模型由：内容（content)、边框（border）、内边距（padding）和外边距（margin）四部分组成

内容区content

值	描述
Visible	默认值，溢出的内容不会被修剪，会呈现在元素框之外
hidden	溢出的内容将不可见
scroll	溢出的内容会被修剪，但是可能通过滚动条查看隐藏部分
auto	由浏览器决定如何处理溢出部分

<style type="text/css">div{width:400px;height:200px;overflow:scroll;/*浏览器会自动添加一个滚动条*/}
</style>

边框border属性列表

值	描述
border-width	设置元素所有边框的宽度
border-style	设置元素所有边框的样式
border-color	设置元素所有边框的颜色
border-radius	圆角边框的简写形式，用于设置四个border-*-radius属性
box-shadow	向边框添加一个或多个阴影

边框样式取值

值	描述
none	无边框
hidden	隐藏边框
dotted	定义点状边框，在大多数浏览器中呈现为实线
dashed	定义虚线
solid	定义实线
double	定义双线，双线的宽度定于border-width的值
groove	定义3D凹槽边框
ridge	定义3D菱形边框
inset	定义3D凹边
outset	定义3D凸边

圆角边框

边角边框的圆线是椭圆的一条弧线，HR代表椭圆的水平半径，VR代表椭圆的垂直半径

当border-top-left-radius具有一个参数时，水平半径和垂直半径相同；border-top-left-radius:8px;

当border-top-left-radius具有两个参数时，第一个参数时水平半径，第二个是垂直半径;border-top-left-radius：8px 20px;

当border-radius属性只有一个参数时，top-left,top-right,bottom-right,bottom-left取值相同；border-radius:10px;

当boder-radius属性有两个参数时，border-radius:10px 20px;说明左右为10px,上下为20px;

边框阴影

值	描述
h-shadow	水平阴影的位置
v-shadow	垂直阴影的位置
blur	模糊距离
spread	阴影的尺寸
color	阴影颜色
inset	内部阴影

box-shadow:[水平阴影的位置] [垂直阴影的位置] [blur模糊的距离] [spread阴影的距离] [颜色] [3D凹边]
box-shadow:[h-shadow] [v-shadow] [blur] [spread] [color] [inset]
box-shasow:10px 6px 10px 5px #AAAAAA;

.imageDiv{width:294px;padding:10px 10px 20px 10px;border:1px solid #FFFFFF;background-color:white;/*添加边框阴影box-shadow*/box-shadow:10px 6px 10px 5px #aaaaaa;
}

第6章 JavaScript语言基础

行内JavaScript脚本

在HTML中嵌入js脚本，例如鼠标时间和超链接等

<body><h1>行内JavaScript</h1>    <img scr="..." onclick="alert('你点击了一张图片')"/><a href="javascript:alert('你点击了一个a标签')"></a>
</body>

内部JavaScript脚本

统一放在< script>< /script>标签中,< script>< /script>标签位于< head>或< body>标签中

<head><script type="textr/javascript">alert("head中的JavaScript");</sctript>
</head>
<body>    <script type="text/JavaScript">alert("body中的JavaScript");</script>
</body>

外部JavaScript脚本

<script type="text/javascript" src="js/main.js"></script>

转换语句

使用转换语句来控制程序执行的方向，包括break、continue、return

switch中，遇到break语句时，就会跳出switch分支结构；

continue当程序执行过程中，遇到continue时，仅仅跳出当前本次循环。

<script type="text/javascript">function count(){var sum=0;for(var i=100;i<1000;i++){sum+=i;if(sum<10000){document.write("<br/>已统计到："+i);continue;}if(i>200){break;}return sum;}document.write("不会被执行到的代码！");}document.write("<br/>统计结果为："+count());</script>

函数

函数	描述
parseInt()	将字符串转成整型
parseFloat()	将字符串转成浮点型
isNaN()	测试是否不是一个数字(全称：is not a number）
isFinite()	测试是否是一个无穷，如果是，返回一个false,否则返回true
eval()	用于将JavaScript中字符串作为脚本代码来执行
unescape()	解码由escape函数编码的字符
escepe()	将字符串转成Unicode码

第7章 JavaScript对象

Array数组对象

var goodsType = new Array();
goodsType[0] = "远动装";
goodsType[1] = "休闲装";
var foods= new Array["牛肉","羊肉","鸡肉"];

常用的方法

方法	描述
concat()	用于连接两个或多个数组
join()	把数组中所有元素放入一个字符串，并用指定的分隔符割开
push()	可向数组中的末尾添加一个或多个元素，并返回新的长度
pop()	用于删除并返回数组中最后一个元素
shift()	用于删除并返回数组中第一个元素
reverse()	在原有数组的基础上，颠倒数组中元素的顺序，此过程中不会创建新的数组
slice()	可从已有数组返回选定的元素
sort()	用于对数组元素进行排序
splice()	向数组添加/删除一个/多个元素，并返回被删除的元素

concat()方法：返回的是合并后的新数组，原数组保持不变。

var a = [1,2,3];
document.write(a.concat(4,5));/*输出：1,2,3,4,5*/

join()方法：用于把数组中的所有元素放入一个字符串中，并通过指定的分隔符割开。

var arr = new Array(3);
arr[0] = "zhangsan";
arr[1] = "lishi";
arr[2] = "wangwu";
document.write(arr.join());    /*输出：zhangsan,lishi,wangwu*/

push()方法：用于向数组的末尾添加一个或多个元素，返回数组的长度

var arr = new Array('zhangsan','lishi','wangwu');
document.write(arr + "<br />");
document.write(arr.push("James") + "<br />");/*输出：4*/
document.write(arr);/*输出：zhangsan,lishi,wangwu,James*/

reverse()方法：用于颠倒数组中元素的顺序（反转数组）

var arr = new Array(1,2,3);
document.write(arr+"<br />");/*输出：1,2,3*/
document.write(arr.reverse());/*输出：3,2,1*/

shift()方法：用于删除数组的第一个元素，并返回第一个元素的值

var arr = new Array(1,2,3);
document.write(arr+"<br />");/*1,2,3*/
document.write(arr.shift()+"<br />");/*1*/
document.write(arr);/*2,3*/

slice()方法：从某个已有的数组返回选定的值

var arr = new Array('zhangsan','lishi','wangwu');
document.write(arr.slice(1)+"<br />");/*lishi,wangwu*/

**sort()**方法：用于对数组的元素进行排序（排序数组）

var arr = new Array(6);
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr+"<br />");/*10,5,40,25,1000,1*/
document.write(arr.sort());/*1,10,1000,25,40,5*/
------------------------------------------------
var arr = ["C","B","E","D","A"];
document.write(arr+"<br />");/*C,B,E,D,A*/
arr.sort();
document.write(arr);/*A,B,C,D,E*/

sclice()方法：向数组添加/删除一个/多个元素，并返回被删除的元素

var arr = new Array(1,2,3,4,5);
document.write(arr+"<br />");/*1,2,3,4,5*/
arr.splice(2,1,'6');/*2代表删除数组中第二位也就是‘3’；1代表从数组2的位置开始删除多少元素；‘6’代表要替换的值*/
document.write(arr);/*1,2,6,4,5*/

forEach()方法：为每个数组元素调用一次函数（回调函数）

var txt = "";
var numbers = [1,2,3,4,5];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;
function myFunction(value,index,array){txt = txt + value + "<br/>";
}

map()方法：对每个数组元素执行函数来创建新数组

var numbers1 = [1,2,3,4,5];
var numbers2 = numbers1.map(myFunction);
document.getElementById("demo").innerHTML = numbers2;
function myFunction(value,index,array){return value * 2;
}

filter()方法：创建一个包含通过测试的数组元素的新数组

var numbers = [1,2,3,4,5]
var over = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over;
function myFunction(value,index,array){return value > 3;
}

reduce()方法：在每个数组元素上远行函数，以生成单个值

var numbers = [1,2,3,4,5];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "总和："+sum;
function myFunction(total,value){return total + value;
}

reduceRight()方法：在每个数组元素上运行函数，以生成单个值。
—到此结束，perfect