Internet相关知识
TCP/IP：
传输控制协议/网际协议
TCP/IP通信是点对点的，即通信是网络中一台主机与另一台主机之间的。
在TCP/IP中，HTTP协议用于浏览网页，FTP协议用于Internet文件共享。
IP地址和域名：
IP地址是分配给网络上计算机的一组由32位二进制数值组成的编号，来对网络中计算机进行标识。
IP地址对应一台计算机，并且是唯一的。
（注意所谓的唯一是指在某一时间段内唯一。
如果是动态IP，那么每一次分配的IP地址不同，在使用网络的这一时间段内IP唯一
如果是静态IP，即固定将一个IP地址分配给某计算机使用）
网络中的服务器就是使用静态的IP地址
URL：
统一资源定位地址
通俗地讲，就是平常所讲的网址
静态网页和动态网页
静态网页是相对于动态网页而言的，并不是说网页中的元素都是静止不动的。
静态网页是指浏览器与服务器端不发生交互的网页，网页中的GIF动画等都会发生变化。
静态网页的执行过程大致如下：
1、浏览器向网络中的服务器发出请求，指向某个静态网页；
2、服务器接到请求后将指定的静态网页传输给浏览器，此时传送的只是文本文件；
3、浏览器接到服务器传来的文件后解析HTML标签，将结果显示出来。
动态网页除了静态网页中的元素外，还包括一些应用程序，这些程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要服务器中的应用程序服务器才能完成。
无论网页是否有动态效果，采用动态网站技术生成的网页都成为动态网页
在动态网页网址中有一个标志性符号——“？”
HTML、CSS、JavaScript
HTML代码：
<html>
<head></head>
<body></body>
</html>
在编写HTML的记事本中执行“文件—>另存为”，将其保存为.html格式文件，使用IE浏览器打开该文件，就可以看到网页效果
CSS代码：
<style type="text/css">
<!--
h1{
font-family:微软雅黑;
font-size:30px;
font-weight:bold;
color:#F00;
}
-->
</style>
JavaScript代码：
<script language="javascript>
<!--
alert("这是JavaScript实现的弹出窗口");
-->
</script>
什么是XHTML？
XHTML是HTML的一种扩展
HTML是一种基本的网页实际语言
XHTML是一种基于XML（可扩展编辑语言）的标识语言，看起来与HTML非常相似
XHTML就是一种扮演着类似HTML角色的XML
与HTML最主要的不同之处在于：
XHTML元素一定要正确的嵌套
XHTML元素必须要关闭
标签名称必须使用小写字母
XHTML文档必须拥有根元素
文档类型声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html >元素和名字空间
名字空间是< html > 元素的一个属性，写在其起始标签中
<html xmlns="http://www.w3.org/1999/xhtml">
</html>
XHTML有严格强制执行的嵌套限制：
1、< a >标签中不能包含其他< a >标签
2、< pre >标签中不能包含< object >< big >< img >< small >< sub >< sup >标签
3、< button >标签中不能包含< input >、 < textarea >、 < label >、< select >、< button >、< form >、 < iframe >、< fieldset>、< isindex >标签
4、< label >标签中不能包含其他< label >标签
5、< form >标签中不能包含其他的< form>标签
在XHTML页面中，所有的特殊字符都用编码表示
如 & 必须使用 & amp; 的形式
在XHTML中，使用< !-- – >作为页面注释
XHTML中使用< !-- – >在注释中插入脚本
但是在xml浏览器中会被简单地删除，导致脚本或样式的失效，推荐使用外部链接来调用脚本
<script language="JavaScript1.2" type="text/javascript" src="scripts/menu.js">
</script>
HTML结构设置
网页说明：
设置网页说明的基本语法：
<meta name="description" content="网页说明内容" />
在该语法汇总，name为属性名称，作用是将元信息属性设置为页面说明
content中定义具体的网页内容说明
设置网页关键字的方法类似
<meta name="keywords" content="网页关键字内容"/>
在网页中可以设置语言的编码格式
常用的编码格式有 国际编码 charset=utf-8 和 简体中文 charset=gbk
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
在该语法中，http-equiv用于传送HTTP通信协议的标头，而在content中才是具体的属性值
，
，
网页定时跳转refresh
<meta http-equiv="refresh" content="跳转时间; URL=跳转的地址" >
如：
<meta http-equiv="refresh" content="5; URL=main.html">
网页基址< base >标签
基底网址的实质是统一设置超链接的属性，基底的网址标签是< base/ >
有两个属性：
href：用于设置基底网址的路径
target：用于设置超链接的打开方式
<base href="基底网址" target="打开方式" />
如：
<base href="http://www.xxx.com" target="_blank" />
在该HTML页面中设置了基底网址，网页中所有的超链接地址都将在前面加上“http://www.xxx.com”
即转换为绝对地址。
并且，页面中的超链接打开方式都是在新窗口打开。
网页边距margin
基本语法：
<body topmargin="value" leftmargin="value" rightmargin="value" bottommargin="value">
默认链接文字link
在body标签中可以自定义超链接的颜色
<body link="color" />
<body link="#00FFFF">
<a href="#" >超链接文字</a>
</body>
使用alink属性可以设置鼠标单击超链接是的文字颜色
使用vlink属性可以设置已访问的超链接颜色
<body link="#00FFFF" alink="#FF0033" vlink="#00FF33">
<a href="#">超链接文字</a>
</body>
滚动文本
文字的滚动效果用< marquee >标签实现，默认从右到左，循环滚动
基本语法;
<marquee>滚动文本</marquee>
设置文本滚动方向
<marquee direction="文字滚动方向">滚动文本</marquee>
文本滚动的方式和速度：
<marquee
onMouseOver="stop();"
onMouseOut="start();">滚动文本</marquee>
<marquee scrollamount="滚动速度">滚动文本</marquee>
此外，可以设置height属性，指定滚动文本区域的高度，width属性，指定滚动文本区域的宽度
HTML列表
<ul>
<li>
<li>
<li>
</ul>
可以设置< ul >标签中的type属性（默认为实心小圆点）
1、circle：无序项目列表前将显示为空心小圆点
2、disc：无序列表前将显示为实心小圆点
3、square：无需向没有列表前将显示为实心小方块
< dl >标签
<dl>
<dt>line1</dt><dd>description</dd>
<dt>line2</dt><dd>description</dd>
<dt>line2</dt><dd>description</dd>
</dl>
< dl >< /dl >标签插入定义列表
< dt >< /dt >标签定义列表项名称
< dd >< /dd >标签解释说明< dt >中定义的列表项名称
< dt >标签与< dd >标签不会在一行中显示，而是分别占据一行的空间
目录列表< dir >
菜单列表< menu >
这两个标签的用法与< ul >,< ol >一样
在网页中插入图像
基本语法：
<img src="URL">
< img >标签可以设置多个属性值
1、src：用来设置图像文件的路径
2、alt和title：alt和title属性都可以用于设置图像的提示文字
3、width和height：用于设置图像的宽度和高度
4、border：用于为图像设置边框效果
5、vspace：用于设置图像的垂直间距
5、hspace：用于设置图像的水平间距
6、align：用于设置图像的水平对齐效果
尽量不要通过height和width属性来缩放图像，因为这样用户必须下载大容量的图像。
正确的做法是，在网页上使用图像之前，通过软件把图像处理为合适的尺寸
在设置图像的宽度和高度是，如果只给出宽度或高度的其中一项，则图像将按原宽高比例进行缩放；
超链接< a >标签基本语法：
<a href="URL" name="链接名称" title=“提示文字” target=“打开方式”>链接显示文本</a>
target 的取值有五个：
1、_blank：在一个全新的空白窗口打开链接
2、_parent：在当前框架的上一层打开链接
3、_self：在当前页打开链接
4、_top：在链接所在的最高级窗口中打开
5、new：与_blank类似，将链接的页面以一个新的浏览器打开
创建Email链接
<a href="mailto:**********@qq.com"></a>
空连接
<a href="#">链接文字</a>
创建文件下载链接
当被链接的文件是exe或rar文件等浏览器不支持的类型时，这些文件会被下载，这就是网上下载的方法
基本语法：
<a href="目标地址文件">链接文本</a>
脚本链接
基本语法：
<a href="JavaScript:执行的脚本程序">...</a>
创建关闭网页窗口链接
基本语法：
<a href="JavaScript:window.close()">链接文本</a>
创建锚点链接
锚点链接，是指同一个页面中不同位置处的链接。可以在页面的某个分项内容的标题上设置锚点
创建锚点
<a name="锚点名称"></a>
设置锚点链接
<a href="#锚点名称"></a>
//
//
//
//
//
图像热点区域链接
可以将图像的某一部分设为链接，这要通过设置图像映像来实现
基本语法：
<img usemap="热点名称" />
<map>
<area shape="热点形状" coords="区域坐标" href="URL" alt="替换文字">
</map>
、
、
、
、
、
HTML中多媒体设置
使用< embed >标签可以在网页中插入多种多媒体元素
插入flash动画
基本语法：
<embed src="URL" width=" " height=" "></embed>
插入flv视频
基本语法：
<object classid="clsid:D27CDB6E-AE6D-11cf=96B8-444553540000" width="530" height="348" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf"/>
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=images/movie&autoPlay=true&autoRewind=false"/>
</object>
设置背景音乐：
基本语法：
<bgsound src="url" loop="播放次数"/>
嵌入音频
<embed src="URL" width=" " height=" " autostart="是否自动播放（true/false）" loop="是否循环播放(true/false)" ></embed>
HTML表单设置
基本语法：
<form action="表单的处理程序">
</form>
表单的传送方式
表单的method属性用于指定在数据提交到服务器时使用哪种HTTP提交方法，可以取值为get或post
基本语法：
<form method="传递方法">
</form>
get：
表单数据传送到action属性指定的URL。然后这个新的URL被送到处理程序上
post：
表单数据被包含在表单主题中，然后被送到处理程序上
表单的编码方式
enctype属性用于设置表单信息提交的编码方式
<form enctype="编码方式">
</form>
enctype属性为表单定义了MIME编码方式，编码方式取值：
1、application/x-www-form-urlencode
该方式为默认的编码方式
2、multipart/form-data
MIME编码，上传文件的表单必须选择该项
target属性用来指定目标窗口的打开方式，表单的目标窗口往往用来显示表单的返回信息
插入表单元素：
1、插入文本字段
<input name="name" type="text" id="name" value="初始值" maxlength="最多字符数" readonly="true">
readonly 属性仅仅显示内容，不允许浏览者输入内容
2、密码字段
<input type="password" name="password" id="password">
3、图像域
<input type="image" src="URL">
4、多行文本区域
<textarea name="textarea" id="textarea" cols="行宽" rows="行高"></textarea>
cols属性类似于单行文本框的字符宽度
rows属性的值则设定多行文本框的具体行数
5、隐藏域
隐藏域在页面中对于浏览者来说是不可见的，隐藏域主要用于存储一些信息，以便于被处理表单的程序所使用
<input name="hiddenField" type="hidden" value="隐藏域">
value属性用于设置要为隐藏域指定的值，该值将在提交表单时传递给服务器
6、复选框
<input name="checkbox" type="checkbox" checked="checked">
checked属性是用来设置在浏览器中载入表单时，该复选框是处于选中状态还是未选中状态
一组中每个复选框name属性不同
7、单选按钮
<input type="radio" name="radio" checked="checked">
每组中所有单选按钮name属性一致
8、列表
<select name="select" id="select">
<option>line1</option>
<option>line2</option>
<option>line3</option>
</select>
下拉菜单
<select multiple name="select" id="select">
<option>line1</option>
<option>line2</option>
<option>line3</option>
</select>
9、文件域
<input type="file" name="fileField">
10、按钮
<input type="button" name="button" id="button" value="按钮">
按钮的type类型有三种
submit：表示单击该按钮将提交表单数据内容至表单域action属性中指定的页面或脚本
reset：表示单击时该按钮将清除表单中的所有内容
button：表示指定单击该按钮时要执行的操作
HTML表格
<table></table> 表格标签，用于定义表格
<tr></tr> 表格行标签
<td> </td> 单元格标签
<th> </th> 表格头标签
<caption></caption> 表格标题标签
创建表格
<table width=" " height=" " align="对齐方式" border="边框宽度" bordercolor="边框颜色" bgcolor="背景颜色" background="背景图片" cellspacing="间距距离" cellpadding="内容与单元格边框距离值">
<caption></caption>
<thead>
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tbody>
<tr align="水平对齐方式">
<td valign="垂直对齐方式"></td>
<td></td>
<td></td>
</tr>
<tfoot>
</table>
<thead> <tbody> <tfoot> 分别对表头，表身，表尾进行制作
合并单元格
<td colspan="水平单元格数量" rowspan="垂直单元格数量">
插入Div
在网页制作中，使用div可以将网页中的任何元素布局到网页的任意位置
<div id="名称" style="样式设置"></div>
style 中可以设置的属性：
position，用于设置div的定位方式
width，设置div的宽度
height，设置div的高度
background-color，设置div的背景颜色
background-image，设置div的背景图像
HTML框架设置
框架技术可以将浏览器分割成多个窗口，并且在每个小窗口中，显示不同的网页`
<html>
<frameset>
<frame.../>
<frame.../>
</frameset>
</html>
框架标签不必放入< body >标签中
水平划分框架
<frameset rows="高度1，高度2，....">
<frame src="html文件位置" />
<frame src="html文件位置" />
</frameset>
垂直划分框架
<frameset cols="宽度1，宽度2，....">
<frame src="html文件位置" />
<frame src="html文件位置" />
</frameset>
<frameset frameborder="是否显示边框" framespacing="设置边框宽度" bordercolor="边框颜色">
、
、
、
、
调整框窗口尺寸
每一个框架都有其固定的宽度和高度，可以通过拖动边框进行调整。
可以使用noresize禁止浏览器在访问框架时随意改变尺寸
<frame src="URL" noresize/>
/
/
/
/
改变框架与页面的水平和垂直边距
<frame src="URL" marginwidth="距离值" marginheight="距离值" />
设置框架滚动条显示
<frame scrolling="yes或no或auto" />
若浏览器版本太老，不能显示框架内容
使用noframe
<noframes>
不支持框架时显示的内容
</noframes>
iframe框架
iframe框架是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口
<iframe src="URL" width="宽度" height="高度" align="对齐方式" scrolling="是否设置滚动条" frameborder="是否显示框架边框"></iframe>
/
/
/
/
/
/
/
/
/
/
CSS样式基本语法
<style type="text/css">
<!--
css选择器{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；}
-->
</style>
通配选择器：
对所有的HTML标签起作用
*{
属性：属性值；
}
类选择器：
.类选择器名称{
属性：属性值；
}
ID选择器：
#ID选择器名称{
属性：属性值；
}
ID选择器定义的是HTML页面中某一个特定的元素，即一个网页中，只能有一个元素使用某一个ID属性值
当ID选择器与类选择器发生冲突时，将会优先使用ID选择器
超链接伪类选择器
作用于< a >上
:link——未访问链接
:visited——已访问链接
:hover——激活链接
:active——鼠标停留在连接上
使用示例：
a:link{
color:#FFF;
text-decoration:none;
}
/
/
/
/
/
对一组选择器进行相同的css样式设置
h1,h2,h3,p,span{
font-size:12px;
font-family:"宋体";
}
/
/
/
/
/
/
派生选择器
派生选择器是指将多种选择器进行搭配，如将标签选择器和类选择器组合或标签选择器和ID选择器组合可以构成一种复合选择器
派生选择器指选择器组合中前一个对象包含后一个对象
如：
h1 span{
font-weight:bold;
}
仅对h1标签下属的span标签起作用
、
、
、
、
行内css样式
<p style="font-family:宋体; font-size:12px; color:#CCCCCC;">内联样式</p>
/
/
/
/
/
导入外部css样式表文件
<style type="text/css">
@import utl("外部css样式表文件");
</style>
链接外部css样式表文件
<head>
<link rel="stylesheet" type="text/css" href="外部CSS样式表文件" />
</head>
rel：该属性指定链接到css样式，其值为stylesheet
type：该属性指定链接的文件类型为css样式表
设置文字样式
设置字体——font-family
设置字体大小——font-size
设置字体颜色——color
设置字体粗细——font-weight
font-weight的属性值有：
1、normal：正常
2、bold：粗体
3、bolder:特粗体
4、lighter：细体
5、inherit：继承
字体样式——font-style
属性值有：
1、normal：默认值
2、italic：斜体
3、oblique：倾斜的字体样式
英文字体大小写text-transform
属性值有：
text-transform:capitalize——定义单词首字母大写
text-transform:uppercase——定义单词全部字母大写
text-transform:lowercase——定义单词全部字母小写
文字修饰text-decoration
属性值：
1、underline：下划线
2、overline：顶划线
3、line-through：删除线
4、blink：定义闪烁的文本
设置段落样式
字间距：letter-spacing
行间距：line-height
段落首字下沉方法，给第一个字添加以下css样式： font-size：2em；float：left；
段落首行缩进：text-indent
段落水平对齐：text-align
设置列表样式
ul无序列表样式
list-style-type：参数；
属性值如下：
disc——实心圆
circle——空心圆
square——实心方块
none——不用任何项目符号
ol有序列表样式
list-style-type：参数；
属性值如下：
decimal——十进制的数字标记
decimal-leading-zero——有前导零的十进制数字标记
lower-roman——小写罗马数字
upper-roman——大写罗马数字
lower-alpha——小写英文字母
upper-alpha——大写英文字母
none——不使用任何项目符号
inherit——继承
使用图片作为列表样式
基本语法：
list-style-image:url();
list-style-position:inside|outside;
定义列表
<dl>
<dt>definition term</dt>
<dd>definition description</dd>
</dl>
定义页面背景颜色
background-color：color | transparent ;
定义页面背景图像
background-image：url() | none ;
定义背景图像的重复方式
background-repeat：repeat-x | repeat-y | repeat | no-repeat ;
no-repeat：设置背景图像不重复平铺，背景图像只显示一次
repeat-y：设置背景图像垂直方向重复平铺
repeat-x：设置背景图像水平方向重复平铺
repeat： 设置背景图像水平和垂直方向都重复平铺
定义背景图像的位置
background-position : length | percentage | top | center | bottom | left | right ;
固定背景图像
background-attachment： scrolling | fixed;
scroll： 默认设置样式，当页面滚动式，背景图像随页面一起滚动
fixed： 背景图像始终固定在页面的可见区域
定义图片边框
基本语法：
border：border-style | border-color | border-width
border-style的属性：
border-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ；
none：定义无边框
hidden： 与none形同
dotted： 定义点状边框
dashed：定义虚线边框
soild：定义实线边框
double：定义双线边框
groove：定义3D凹槽边框
ridge：定义脊线式边框
inset：定义内嵌式边框
outset：定义凸起效果边框
可以单独对某一条边框样式进行设置
border-top-style
border-right-style
border-bottom-style
border-left-style
设置边框颜色
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
设置边框宽度
border-width : medium | thin | thick | length ;
border-top-width
border-right-width
border-bottom-width
border-left-width
设置图像大小
width
height
使用相对值（百分比）来控制浏览器的缩放可以实现图片随浏览器的变化而变化，
而绝对值（px）不会
设置图片垂直对齐
vertical-align : baseline | sub | super | top | text-top | midder | bottom | text-bottom | length ;
baseline ：设置图片基线对齐
sub：设置垂直对齐文本的下标
super：设置垂直对齐文本的上标
top：设置图片顶部对齐
text-top：设置对齐文本顶部
middle：设置图片居中对齐
bottom：设置图片底部对齐
text-bottom：设置对齐文本底部
length：设置具体的长度值或百分比
使用css定义鼠标效果
基本语法：
cursor：鼠标样式；
属性值有：
1、default：默认光标
2、auto：浏览器设置的光标
3、crosshair：光标呈现为十字线
4、pointer：光标呈现为指示链接的指针（一只手）
5、move：此光标指示某对象可被移动
6、e-resize：此光标指示矩形框的边缘可被向右移动
7、text：此光标指示文本
8、wait：此光标指示程序正忙（通常是一只表或沙漏）
9、help：此光标指示可用的帮助（通常是一个问号或一个气球）
css滤镜
filter:filter name(parameters);
alpha滤镜
filter:alpha(Opacity=？, FinshOpacity=? , Style=? , StartX=? , StartY=? , FinishX=? , FinishY=?);
//以下为IE专有属性
opacity：设置透明度值
finishOpacity：可选参数，当设置渐变的透明效果时，用来指定结束时的透明度
style：设置透明区域的样式
startx：设置透明渐变效果开始的水平坐标
starty：设置透明渐变效果开始的水平坐标
finishx：设置透明渐变效果结束的水平坐标
finishy：设置透明渐变效果结束的水平坐标
bleandtrans滤镜
blendtrans滤镜 可以实现HTML元素的渐隐渐现效果
基本语法：
.blendtrans{
filter:blendtrans(duration=?);
}
duration属性用于设置整个转换过程所需时间，单位为秒
blur滤镜
.blur{
filter:blur(add=? , direction=? , sreength=?);
}
add：布尔参数，用来指定图片是否设置为模糊效果
direction：用来设置图片的模糊方向
sreength：指定模糊半径大小
此外还有
chroma滤镜
可以设置HTML对象中指定的颜色为透明色
dropshadow与shadow滤镜
可以为网页中图片或文字添加阴影效果
FlipH与FlipV滤镜
FlipH可以实现对象的水平翻转效果，即将元素对象按水平方向进行180度翻转
FlipV与fliph相似，但它是垂直翻转
Glow滤镜
为图像或文字添加发光效果
Gray滤镜
将对象中的颜色去除，从而变成黑白效果
Invert滤镜
可以把HTML对象中的可视化属性全部翻转，包括图片的颜色，饱和度和亮度值，可以产生底片或负片效果
Light滤镜
与JavaScript相结合，可以产生类似聚光灯效果，并且可以调节亮度和颜色
Mask滤镜
可以为网页中的元素添加一个矩形遮罩。
遮罩就是用一个颜色块将包含文字或图像等对象的区域遮盖，但是文字或图像部分却以背景色显示出来
RevealTrans滤镜
可以实现网页中图像之间的切换效果
Wave滤镜
可以为对象添加垂直向上的波浪效果
Xray滤镜
可以使对象呈现它的轮廓，并且把这些轮廓的颜色加亮，整体上给人一种X光照射的感觉
css布局
在css中，网页的所有元素都包含在一个矩形的盒模型中，盒模型描述了元素及属性在页面布局中所占据的空间大小，因此盒模型可以影响到其他元素位置及大小，可以通过整个盒子的边框和距离等参数来调整盒子的位置。
盒模型有margin（边界）、border（边框）、padding（填充）、content（内容）四部分组成。
——————————————————————————————
在css样式中，width和height属性分别定义的是div内容区域的宽度和高度，并不包括margin、border和padding。
如果给div加上内边距padding，为了保证div的整体宽度和高度不变，要在div原有的高宽值上减去所增加的内边距值。
使用div分块
<div id="container">
<div id="banner"></div>
<div id="content"></div>
<div id="links"></div>
<div id="footer"></div>
</div>
body{
margin:10px;
text-align:center;
}
#container{
overflow:hidden;
height:auto;
border:1px solid #000;
width:800px;
padding:10px;
}
#banner{
border:2px solid #000;
height:20px;
margin-bottom:10px;
padding:10px;
}
#content{
border:2px solid #039;
height:300px;
width:570px;
float:left;
padding:10px;
margin-bottom:5px;
}
#links{
border:2px solid #F00;
height:300px;
width:200px;
float:right;
padding:10px;
}
#footer{
border:2px solid #0F0;
clear:both;
padding:10px;
margin-top:5px;
}
浮动与定位
float属性能运用于整个div板块，还可以对板块内的一些标签进行浮动定位。
float属性值有none（元素不浮动），left（元素左浮动），right（元素右浮动）
css样式允许任何元素浮动，运用float属性，不论是图像，段落或列表。无论先前是什么状态，浮动后一律为块级元素，浮动元素的宽度默认为auto。
浮动元素的外边缘不会超过其父元素的内边缘。
浮动元素不会互相重叠。
浮动元素不会上下浮动。
定位position
- static
- 默认定位，不能通过z-index属性进行层次分级。
- relative
- 相对定位，对象不可以重叠，可以通过top，right，bottom，left等属性在页面偏移位置，可以通过z-index属性进行层次分级。
- absolute
- 绝对定位，相对于其父级元素进行定位，元素的位置可以通过top，right，bottom和left等属性进行设置。
- fixed
- 固定定位，相对于浏览器窗口进行定位，元素的位置可以通过top，right，bottom和left等属性进行设置。
相对定位：
相对定位是一个元素相对于它的起点进行垂直或水平位置上的移动，相对定位时，无论其是否进行移动，元素仍然占据原来的空间。这会导致它在移动是覆盖其他元素。
绝对定位：
绝对定位是参照浏览器左上角，配合top，right，bottom，left进行定位的，如果没有设置上述4个值，则默认以父级元素的坐标原点为原始点。绝对定位可以通过top，right，bottom，left的坐标原点为起始位置。
绝对定位与相对定位的区别在于，绝对定位的坐标原点为上级元素的原点，与上级元素有关。
相对定位的坐标原点是本身偏移前的点，与上级元素无关。
固定定位：
固定定位的元素容器不会随滚动条的拖动而变化位置。固定定位可以把一些效果固定在浏览器的视线位置。
空间位置z-index:
z-index属性是设置对象的层叠顺序的样式。该样式只对一些拥有position属性为relative或absolute的对象有效
基本语法：
z-index:auto | 数字 ;
auto是遵从其父对象的值，数字是无单位的整数值，既可以是正数也可以是负数。
z-index值较大的对象将叠加在z-index较小的对象上。
页面内容居中布局
要使div在屏幕上水平居中，只需定义div的宽度，然后江水平空白边设置为auto
#box{
width:800px;
height:400px;
background-color:#09F;
border:2px solid #06F;
margin:0 auto;
使用定位和负值空白边居中
将容器的左边缘定位在页面的中间：
#box{
width:720px;
position:relative;
left:50%;
}
将容器的中间居中：
#box{
width :720px;
position:relative;
left:50%;
margin-left:-360px;
}
自适应宽度布局
div在浏览器中始终显示为窗口宽度大小
#box{
width:100%;
height:400px;
background-color:#09F;
border:2px solid #06F;
}
两列右列宽度自适应
#left{
width:40px;
height:400px;
float :left;
}
#right{
height:400px;
}
三列浮动中间宽度自适应
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
#left{
width:200px;
height:400px;
position:absolute;
left:0px;
}
#right{
width:200px;
height:400px;
position:absolute;
right:0px;
}
#mid{
height:400px;
margin:0px 204px 0px 204px;
}
自适应高度的解决方法：
html,body{
margin:0px;
height:100%;
}
#left{
width:400px;
height:100%;
float:left;
}
对#left设置height的同时，也设置了HTML与body的height，一个对象的高度是否可以使用百分比显示没取决于对象的父级对象
div标签与span标签
<div>div容器1</div>
<div>div容器2</div>
<span>span容器1</span>
<span>span容器2</span>
效果如下：
div对象出现换行,而span对象则是同行左右关系。
JavaScript基础
在HTML中输入JavaScript时，需要使用< script >标签
<html>
<script type="text/javascript1.5">
<!--
javascript语句
-->
</script>
</html>
JavaScript脚本代码也可以位于head标签或body标签中
调用外部JavaScript文件语法：
<script type="text/javascript" src="URL">
</script>
文件的后缀为 “.js”
基础语法
1、声明变量
<script>
var a=1;
var b="hello";
</script>
2、注释
<script>
//单行注释
/*
多
行
注
释
*/
</script>
3、字符串输出
英文单双引号皆可用
var a="hello";
var b='hello';
<script type="text/javascript">
<!--
document.write("welcome<br/>");
document.write("<strong>hello</strong>,welcome");
-->
</script>
JavaScript交互基本方法
信息对话框
信息对话框运用了windows对象的alert（）方法。
alert（）方法在浏览器中独立生成一个小窗口。程序将暂停运行，知道浏览者单击“确定”按钮。
基本语法：
alert（信息内容）;
信息内容中可以使用换行符“\n”和制表符“\t”
选择对话框
选择对话框比信息对话框多了一个“取消”按钮
confirm（对话框提示文字内容）;
confirm()的返回值为true或false
显示提示对话框
提示对话框显示一段提示文本，其下面是一个用于用户输入的文本输入框，并提供“确定”和“取消”按钮。
prompt（提示文本内容，文本输入框为默认文本）;
prompt 的第二个参数不是必须的
prompt（）方法只返回一个值。当浏览用户单击“确定”按钮时，返回值为null
变量的声明和使用
声明方法：
var 变量名称；
var 变量名称=变量值；
查看数据类型
typeof（变量名称）；
在使用数字类型时，JavaScript并不区分整数和浮点数。
空类型是JavaScript的一种对象类型，只能取值为null，用于初始化变量或清除变量的内容，以释放相应的内存空间。
未定义型取值为undefined，这时变量参与运算将导致程序出错。
加法运算符（+）和加赋值运算符（+=）两边的操作数中至少有1个字符串数据时，加法运算符将进行字符串拼接运算。
- 全等于符号（===）
- 如果左边操作数全等于右边操作数，返回true，否则返回false
‘10’==10为true
‘10’===10为false
for in 循环语句
var array=new Array（1,2,3,4,5）；
var i;
for(i in array)
{
if(array[i]<=4)
document.write(“true”);
else
document.write(“false”);
}
var timedate = new Date("January 1,2021");
var now = new Date();
var date = timedate.getTime()-now.getTime();
var time = Math.floor(date/(1000*60*60*24));
if(time>=0)
document.write("今天离2021年元旦还有"+"<font color=red><b>"+time+"</b></font>");
JavaScript中的事件响应
只有触发事件才执行的程序被称为事件处理程序，一般调用自定义函数实现。事件处理程序称为程序和HTML之间的接口。
设置事件基本语法：
<HTML标签 事件属性=“事件处理函数”>
常用JavaScript事件方法：
click()——模拟单击事件
blur()——对象将自动失去键盘输入焦点
focus()——对象将自动得到键盘输入焦点
reset()——复位表单数据
submit()——提交表单，并不触发onsubmit事件
select()——选中表单控件
click事件
click单击事件在一个对象上按下然后释放一个鼠标按钮时发生，它也会发生在一个控件的值改变时。
基本语法：
onClick=处理函数或是处理语句
change事件
改变事件通常在文本框或下拉列表中激发。
基本语法：
onChange=处理函数或是处理语句
select事件
select事件是指当文本框中的内容被选中时所发生的事件
基本语法：
onSelect=函数或是处理语句
focus事件
得到焦点是指将焦点放在网页的对象上
基本语法：
onfocus=函数或是处理语句
load事件
加载事件（load）与卸载事件（unload）是两个相反的事件。
卸载事件是指当前文档从浏览器窗口中卸载时所激发的事件，即关闭浏览器窗口或从当前页面跳转到其他网页时所激发的事件。
基本语法：
onload=处理函数或是处理语句
onblur事件
失去焦点事件正好与获得焦点事件相对，失去焦点是指将焦点从当前对象中移开。
基本语法：
onblur=处理函数或是处理语句
当text对象，textarea对象或select对象不再拥有焦点而退到后台时，引发该事件。
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
