HTML、CSS、JavaScript学习总结

最新推荐文章于 2024-04-18 17:52:13 发布

冯东昆

最新推荐文章于 2024-04-18 17:52:13 发布

阅读量3.2w

点赞数 11

文章标签： javascript html css 浏览器文档 date

本文链接：https://blog.csdn.net/fengdongkun/article/details/7429678

版权

学习总结

HTML

网站开发的主要原则是：

– 用标签元素HTML描述网页的内容结构；

– 用CSS描述网页的排版布局；

– 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序

HTML（Hyper Text Mark-up Language 超文本标记语言）的缩写，是最基础的网页语言。

Html是通过标签来定义的语言，代码都是由标签所组成。Html代码不用区分大小写。

Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

标签：是由一对尖括号<>和标签名称组成。
标签分为“起始标签”和“结束标签”两种，二者的标签名称是相同的，只是结束标签多了一个斜杠“/”

在元素的起始标签中，可以包含“属性”来表示元素的其他特性

<标签名属性名='属性值'> 数据内容 </标签名>

<标签名属性名='属性值' />

多个属性时：<hr size=“3” align=“left” width=”75%”>用空格分开

Html 的命名：文件的扩展名要以.html或.html结束。

Ø 文件名中只可由英文字母、数字或下划线组成。

Ø 文件名中不要包含特殊符号，比如空格、$等

所有标记都要用尖括号（<>）括起来，这样，浏览器就可以知道，尖括号内的标记是HTML命令。

任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别是、<br>。因此，不同的标记间用回车键换行再编写是个不错的习惯。

@ title元素：文件标题声明

@ link元素和style元素常用于CSS

@ script元素用于脚本

@ meta元素元信息

@ <base> 超链接网址基准参考点

name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

http-equiv 属性：模拟HTTP协议的响应消息头。

@ body元素是html文件的主体元素，它包含所有要在网页上显示的各种元素。

设置页面背景:bgcolor

设置背景图片:background

设计正文颜色:text

设置页面边距:topmargin、leftmargin、

rightmargin、bottomnargin

设置显示内容与浏览器的距离

添加空格——

<b> … </b> 粗.<i> … </i>斜 <s> … </s> 删<u> … </u> 下划<sub> … </sub> 下标 <sup> … </sup> 上标

.<address> … </address> 地址自动倾斜

.<big> … </big> 大字

<strong> … </strong> 加强语气 ( 加粗

<em>...</em> 加强语气 ( 倾斜

段落缩进<blockquote>

设置水平线<hr>

向中对齐 <center>

格式： <center> … </center>

插入定义列表<dl>

<dl>

…

</dl>

插入无序列表<ul>

<ul>

<li>项目名称</li>…

…

<ul>

<ul>：符号标签（○●■）

type属性：disc ● ( 默认) circle ○ square ■

插入有序列表<ol>

<ol>

<li>项目名称</li>…

…

</ol>

超链接概述

链接在网页制作中是一个必不可少的部分，在浏览网页时，单击一张图片或者一段文字就可以弹出一个新的网页，这些功能都是通过超链接来实现的，在HTML文件中，超链接的建立是很简单的，但是掌握超链接的原理对网页的制作是至关重要的。在学习超链接之前，需要先了解一下“URL”，所谓URL（Uniform Resource Locator）指统一资源定位符，通常包括三个部分：协议代码、主机地址、具体的文件名

超链接标签的使用

创建超链接的标签为<a>和</a>，使用格式如下：
<a href=“资源地址” target=“是否在新窗口显示” title=“指向链接时显示的文字”>
链接名称
</a>

_parent	在上一级窗口中打开，一般使用分桢的框架页会经常使用
_blank	在新窗口打开
_self	在同一个框架或窗口中打开，该项一般不用设置
_top	在浏览器的整个窗口中打开，忽略任何框架

链接路径

– 绝对路径：包含了标识Internet上的文件所需要的所有信息，包括完整的协议名称、主机名称、文件夹名称和文件名称。格式为：

通信协议://服务器地址:端口号/文件位置…/文件名

http://ww.sina.com.cn/web/index.html

相对路径：是以当前文件所在路径为起点，进行相对文件的查找。

链接到同一文档的某个部分

• 锚记标签用于使用户“跳”到文档的某个部分

• HTML 的 NAME 属性用于创建锚标记

为达到这种跳转效果，请在 HREF 参数中使用该标记

B 发送E-mail：在html页面中，可以建立e-mail链接，当浏览者单击链接后，系统会启动默认的本地邮件服务系统发送邮件，格式为：

<a href=“mailto:e-mail 地址 ?subject=邮件主题”>
描述文字

</a>

联系我

</a>

LINK 颜色的设置

• 基本格式：<body link=”颜色” alink=”颜色” vlink=”颜色”>

• link 超链接尚被选中的文字

• alink 超链接点选但未被放开的颜色

• vlink 超链接已被点选过的颜色

插入并格式化图像

B <img>标签：用于在网页中插入图像内容。

– src属性：用于设置图像文件的相对或绝对URL地址。

– 共三种类型：GIF：是图形和图片的最佳格式，适用于透明或动画图形。

– JPG或JPEG：更适合存放照片

– PNG：拥有许多JPEG与GIF的共同优点，所以最近越来越流行。

通过设置width属性和height属性可以控制图像的显示宽度和高度，他们的长度单位可是百分比，也可是像素。

注意点:边框的问题.

可通过border=“0”去掉边框

属性名称属性值说明

Align left 图像靠左文字靠右

Right 图像靠右文字靠左

Top 文字往上靠

middle 文字靠中

bottom 文字靠下

空隙设置

Vspace 垂直上下两端和物件距离

Hspace 水平左右两端和物件距离

设置图像映射

图像地图：<map>

map标签要和img标签联合使用。

</map>

语法说明

<img>标记表示插入图像文件，src表示插入图像的路径；

Ø <map>标记表示插入图像映射；

Ø <area>标记表示图像映射区域；

Ø rhape属性表示映射区域形状：

— “rect”表示矩形区域；

— “circle”表示椭圆形区域；

— “poly”表示多边形区域；

Ø cords表示感应区域的坐标

创建表格

<BODY>

<TR>

</TR>

<TR>

<TH>分数</TH> <TH>表示行或列标题，粗体显示

</TR>

.......

</TABLE>

<TH align="center">性别</TH>居中

COLSPAN=“n” 属性表示跨多少列

ROWSPAN=“n” 属性表示跨多少行

表格的颜色设置：

　　表格的背景色 <TABLE bgcolor=颜色值>

　　行的背景色　<TR bgcolor=颜色值>

列的背景色 <TD bgcolor=颜色值>

表格的尺寸设置：

• frame常见属性

规定表格周围的哪一侧的边框是可见的。

• rules常见属性

规定水平或垂直的分界线。

注释：必须与 "border" 属性配合使用！

定义表格列的分组。通过此元素，您可以对列进行组合以便进行格式化。

Span:表格的直列数，而不是第几列。

定义某个表格中针对一个或多个列的属性值。您只能在表格或 colgroup 中使用此属性。

<table>

<col></col> 代表第1列

<col span=“2” bgcolor=“red”></col> 代表第2，3 两列

单元格间距，边距

表格嵌套

在HTML文件中，第一个<table>标记表示插入第一表格，第二个<table>标记插入在标记<td></td>之间，表示在单元格中插入表格，也就是嵌套表格。

框架标签
框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的URL网页。

所有的框架标签要放在一个HTML文档中，HTML页面的文档体标签<body>被框架集标签<frameset>所取代，然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口的页面属性。

B <frameset>标签

</frameset>

<html>

<head>

<title>框架的基本结构<title>

</head>

<frame>

…

</frameset>

</html>

</frameset>

还可设置的属性包括：

frameborder：是否显示框架结构的边框线，取值为0、1或yes、no。取值为1或yes边框将会显示，取值为0或no边框将会隐藏。

framespacing：默认边框线的宽度为1，该属性可调整边框线的宽度。（以像素为单位）

bordercolor：可设置边框线颜色。

scrolling：设置框架是否显示滚动条。取值为yes、no或auto。yes表示滚动条一直显示；no表示无论什么情况都不显示滚动条；auto是系统的默认值，它是根据内容来调整的，当页面长度超过浏览器窗口的范围时就会自动显示滚动条。

B <noframes>标签

如果遇到不支持框架结构的浏览器，此时就需要用到该标签来设置替换的内容，并告诉浏览者其浏览器无法打开框架页面。

使用iframe进行页面内的页面嵌套

可以定义嵌套页面的大小、位置等

用法：

可以通过name属性将链接的显示目标定位到

iframe框架内。

• <bgsound> 是用以插入背景音乐，但只适用於 IE，其参数设定不多。
如下 <bgsound src="your.mid" autostart=true loop=infinite>

• src="your.mid"
设定 midi 档案及路径，可以是相对或绝对

• autostart=true
是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。

• loop=infinite
是否自动反覆播放。LOOP=2 表示重复两次，Infinite 表示重复多次。

• <EMBED> 是用以插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及新版的 IE 都支援。其参数设定多。如下

• <EMBED src="your.mid" autostart="true" loop="true" hidden="true">

• src="your.mid"
设定 midi 档案及路径，可以是相对或绝对

• autostart=true
是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。

• loop="true"
是否自动反覆播放。LOOP=2 表示重复两次，true 是， false 否。

• HIDDEN="true"
是否完全隐藏控制画面，true 为是，no 为否 (内定)。

• STARTTIME="分:秒"
设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。

• VOLUME="0-100"
设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。

• WIDTH="整数" 和 HIGH="整数"
设定控制画面的宽度和高度。(若 HIDDEN="no")

ALIGN="center"
设定控制画面和旁边文字的对　方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。

controls="smallconsole"
设定控制画面的外貌。预设值是 console。
console 一般正常的面板　　
smallconsole 较小的面板　　
playbutton 只显示播放按钮　　
pausecutton 只显示暂停按钮　　
stopbutton 只显示停止按钮　　
volumelever 只显示音量调整钮

<Marquee>滚动的文字</Marquee>

• Direction=”滚动方向”left[左]right[右]up[上]down[下]

• Behavior=”滚动方式” scroll[一圈一圈绕着走] slide[只走一次] alternate[来回的走]

• Loop=”滚动的循环次数” 若未指定则循环不止(loop=”infinite”)

• Bgcolor=”背底颜色”Width=“宽度”Height=“高度”

• onMouseOver=”this.stop()”onMouserOut=”this.start()”

• Scrollamount=”速度” 数值越大速度越快

• Scrolldelay=“延时”（走一步，停一停）

表单Form

• <form action=处理表单信息的服务器端应用程序 method=处理表单数据的方法(POST/GET) name=表单名称 target=打开窗口的方式>

• 表单元素

• </form

文本框

• <input name=“文本框名称” type=“text” value=“初始值” size=“显示字符数” maxlength=“最多容纳字符数”>

– 密码框

• <input name=“文本框名称” type=“password” value=“初始值” size=“显示字符数” maxlength=“最多容纳字符数”>

– 多行文本框

• <textarea name=“多行文本框名称” cols=“每行中的字符数” rows=“显示的行数”>

• 初始内容

• </textarea>

单选框、复选框

– 单选框

• <input name=“单选框名称” type=“radio” value=“选择名称” checked(初始状态，如果为默认，则写checked；否则不写)>

– 复选框

• <input name=“复选框名称” type=“checkbox” value=“选择名称” checked(初始状态，如果为选中，则写checked；否则不写)>

列表框

(A)、菜单式

• <select name=“列表框名称”>

• <option selected(哪个为初始选择，就添加selected语句[只有一个]) value=“提交值”>列表1</option>

• <option value=“提交值”>列表2</option>

• <option value=“提交值”>列表3</option>

• ...

• </select>

• (B)、列表式

• <select name=“列表框名称” size=“显示的行数” multiple(如果允许多选，则有该命令；否则没有此命令)>

• <option selected(哪个为初始选择，就添加selected语句[可有多个，但没有意义]) value=“提交值”>列表1</option>

• <option value=“提交值”>列表2</option>

• <option value=“提交值”>列表3</option>

• ...

• </select>

下拉菜单

<B>谁是 2002 年世界杯冠军？</B>

</SELECT>

按钮

• <input type=“按钮类型(reset、submit、button)” name=“按钮名称” value=“按钮显示文本”>

– 隐藏域

• <input name=“名称” type=“hidden” value=“提交值”>

– 浏览框

• <input name=“名称” type=“file” size=“显示字符长度” maxlength=“最大长度”>

BUTTON（按钮）

Type 属性：
submit：	提交按钮
reset：	重置按钮
button：	普通按钮

文本框、按钮、单选按钮、复选框等都是输入元素。

<INPUT type=“?” name=“?” size=”?”

value=“?” maxlength=“?” checked=“?”>

Type 此属性指定元素的类型。元素类型可以有多种选择：TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN 和 BUTTON。默认选择为 TEXT。

Name 此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称 TEXT1、TEXT2 或选择的任何名称来标识它们。Name 属性的作用域是在 FORM 元素内。

Value 此属性是可选属性，它指定控件的初始值。但是，如果 TYPE 为 RADIO，则必须指定一个值。

Size 此属性指定控件的初始宽度。如果 TYPE 为 TEXT 或 PASSWORD，则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。

Maxlength 此属性用于指定可在 TEXT 或 PASSWORD 元素中输入的最大字符数。

Checked 此属性是 Boolean 属性，指定按钮是否是打开的。当输入类型为 RADIO 或 CHECKBOX 时，使用此属性。

CSS

F CSS的基本概念

• 掌握样式表的语法规则

• 样式表的分类：

– 行内样式表

– 内嵌样式表

– 外部样式表

• 掌握常用的样式

指定显示样式

F CSS基础

@ CSS是Cascading Style Sheet的缩写，翻译为“层叠样式表”，简称“样式表”。

@ 样式表的首要目的是为网页上的元素精确定位。其次，把网页上的内容结构和格式控制相分离。即html的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示。

@ 优点：简化网页的格式代码，加快网页下载显示的速度，也减少了需要上传的代码数量，大大减轻了重复劳动的工作量。

属性	CSS名称	说明
颜色	color
文本属性	font-size	字体大小
	font-family	字体
	text-align	文本对齐
边框属性 (用于表单元素)	border-style	边框样式
	border-width	边框宽度
	border-color	边框颜色
定位属性(position)	top	顶部边距（上边距）
	left	左边距
	width	宽度
	height	高度
	z-index	z 轴索引号，用于层

F 使用CSS

@ CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属性。

@ 一系列的样式组成了“样式表”。

@ CSS的语法结构：

选择符{样式属性:取值;样式属性:取值;样式属性:取值;…}

CSS的基本语法

样式和样式表

1．样式

样式是由成对的属性名和属性值以冒号“：”相间组成。

2．样式表

一系列的“样式”以分号“；”相间组成为“样式表”。

根据样式代码的位置，分为三类：

q 行内样式

q 内嵌样式

q 外部样式

q 行内样式：HTML标签直接使用style属性，称为行内样式（Inline Style）。它适用于只需要简单地将一些样式应用于某个独立的元素的情况。

例如：<table style="color:red;margin-left:200px">

…

</table>

注意：在使用行内样式的过程中，建议同学们在<head>标签中添加<meta>标签，添加的<meta>标签如下：

<head>

</head>
内联的样式比其他方法更加灵活。要使用内联样式，必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉.

@ 内嵌样式表：是在<head>标签内添加<style></style>标签对，在标签对内定义需要的样式。

例如，<head>

td{font-size:9pt;color:red}

.font105{font-size:10.5pt;color:blue}

</style>

</head>

注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示

内嵌样式-2 选择器

选择器分为：

• HTML 选择器

• CLASS 类选择器

• ID 选择器

• 样式选择器

• HTML标签选择器：在HTML页面中使用的标签，如果在CSS中被定义，那么此网页的所有该标签都将按照CSS中定义的样式显示。

• 类选择器：使用HTML标签的class属性引入CSS中定义的样式规则的名字，称为类选择器，class属性指定的样式名字必须是以“.”开头。

• ID选择器：ID属性是用来定义某一特定的HTML元素，与class属性刚好相反，class属性是用来定义一组功能或格式相同的HTML元素。ID选择器定义的CSS名称必须以“#”开头，

• 通用选择器：是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有可用元素。

• 伪类选择器：是指对同一HTML元素的各种状态和其所包括的部分内容的一种定义方式。

Id的优先级高于class

外部样式

@ 外联样式表:是将<style>标签内的样式语句定义在扩展名为.css的文件中。通过使用<link>标签引入样式文件。

例如，<head>
<link href="mystyle.css" rel="stylesheet" type=“text/css”>
</head>

优点：一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

使用LINK（链接）标签，语法：

<HEAD>

</HEAD>

可以连接多个html应用到html里面

行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常

需要混合使用：

• 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css

• 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式

• 某张网页内，部分内容”与众不同“，采用行内样式

对于某个HTML标签：

1）如果有多种样式，如果规定的样式没有冲突，则叠加；

2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；

CSS中的注释

样式规则的注释
样式规则是使用/*需要注释的内容*/进行注释的。即在需要注释的内容前使用“/*”标记开始注释，在内容的结尾使用“*/”结束。注释可以多行内容注释。其注释范围在“/*”与“*/”之间

常用的样式属性

• 1．文字

• 2．背景

• 3．边框线

• 4．高度和宽度

• 5．间距和边距

• 6．列表

• 7．位置和布局

指定“对象”来定义样式表的语法规则如下：

对象1, 对象2 …… { 样式表 }

下级对象

用于某一种元素中的下级元素，定义时两元素名之间用空格相间。

P em{color:blue;}

所以元素对象

*｛color：blue;

CSS文字与文本

设置字体——font-family

设置字号——font-size

设置字体样式——font-style

设置字体加粗——font-weight

设置字体变体——font-variant

组合设置字体属性——font

文本的精细排版

调整字符间距——letter-spacing

调整单词间距——word-spacing

添加文字修饰——text-decoration

设置文本排列方式——text-align

设置段落缩进——text-indent

调整行高——line-height

转换英文大小写——text-transform

颜色和背景

设置颜色——color

设置背景颜色——background-color

插入背景图片——background-image

插入背景附件——background-attachment

设置重复背景图片——background-repeat

设置背景图片位置——background-position

设置文本排列方式——text-align

• 语法说明

该语法中的4个属性值可以任意选择其中一个。其中，left代表左对齐方式；right代表右对齐方式；center代表居中对齐方式；justify代表两端对齐方式。

转换英文大小写——text-transform

插入背景图片——background-image

基本语法

background-image:url|none

URL指定要插入的背景图片路径或名称，路径可以为绝对路径也可以为相对路径。第6章有绝对路径和相对路径的详细内容讲解。图片的格式一般以GIF、JPG和PNG格式为主。

Ø none是一个默认值，表示没有背景图片

插入背景附件——background-attachment

基本语法

background-attachment:scroll|fixed

Ø scroll表示背景图片是随着滚动条的移动而移动。是浏览器的默认值。

Ø fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。

设置重复背景图片——background-repeat

基本语法

background-repeat:repeat|repeat-x|repeat-y|no-repeat

设置背景图片位置——background-position

• 基本语法

background-position：百分比|长度|关键字

利用百分比和长度设置图片位置时，都要指定两个值，并且这两个值要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是页面的上边。

Ø 关键字在水平方向的主要有left、center、right，表示居左、居中和居右。关键字在垂直方向的主要有top、center、bottom，表示顶端、居中和底端。其中水平方向和垂直方向的关键字可相互搭配使用。

Ø使用百分比和关键字对比说明background-position属性的属性值。

边框和边距

设计边框样式——border-style

调整边框宽度——border-width

设置边框颜色——border-color

设置边框属性——border

边距——margin-top /margin-bottom /margin-left/ margin-right/margin

填充——padding-top／padding- bottom /padding-left / padding- right /padding

设计边框样式——border-style

基本语法

border-style:样式取值

border-top-style:样式取值

border-bottom-style:样式取值

border-left-style:样式取值

border-right-style:样式取值

边框样式属性中border-style是一个复合属性，其他4个都是单个边框的样式属性，只能取一个值，而复合属性border-style可以同时取一到4个值。下面分别说明border-style属性的4个取值方法：

— 取一个值：四条边框均使用这一个值。e:s

— 取两个值：上下边框使用第一个值，左右边框使用第二个值，两个值一定要用空格隔开。

— 取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值，取值之间要用空格隔开。

— 取4个值：四条边框按照上、右、下、左的顺序来调用取值。取值之间也要用空格隔开。

调整边框宽度——border-width

基本语法

border-width:关键字|长度

border-top-width:关键字|长度

border-bottom-width:关键字|长度

border-right-width:关键字|长度

border-left-width:关键字|长度

边框宽度属性基本语法中的关键字说明

Ø 长度包括长度值和长度单位，不可以使用负数。长度单位可以使用绝对单位也可使用相对单位，如px、pt、cm等。

Ø 基本语法中边框宽度属性border-width是一个复合属性，可以同时设置四条边框的宽度。具体使用方法和边框样式的复合属性border-style是一样的，可以参照上一节关于border-style的讲解

设置边框颜色——border-color

基本语法

border-color:颜色关键字|RGB值

border-top-color:颜色关键字|RGB值

border-bottom-color:颜色关键字|RGB值

border-left-color:颜色关键字|RGB值

border-right-color: 颜色关键字|RGB值

颜色关键字可使用常用的16个关键字

Ø RGB值使用十六进制的RGB值和RGB函数值都行。

Ø 在使用边框颜色复合属性border-color时，如果只设置1种颜色，则四条边框的颜色一样；设置2种颜色，则边框的上下为一个颜色，左右为另一个颜色；设置3种颜色，边框的颜色顺序为上、左右、下；设置4中颜色，边框的颜色顺序为上、右、下、左。

设置边框属性——border

基本语法

border:<边框宽度>||<边框样式>||<边框颜色>

border-top: <上边框宽度>||<上边框样式>||<上边框颜色>

border-right: <右边框宽度>||<右边框样式>||<右边框颜色>

border-bottom: <下边框宽度>||<下边框样式>||<下边框颜色>

border-left: <左边框宽度>||<左边框样式>||<左边框颜色>

基本语法中每一个属性都是一个复合属性，都可以同时设置边框的宽度、样式和颜色属性。但是在用该语法定义边框属性时，每个属性间必须用空格隔开。

Ø 这五个属性语法中，只有border可以同时设置四条边框的属性。其他的只能设置单边框的属性。

边距——margin-top /margin-bottom /margin-left/ margin-right/margin

• 基本语法

margin-top:长度|百分比|auto

margin-bottom: 长度|百分比|auto

margin-left: 长度|百分比|auto

margin: 长度|百分比|auto

长度包括长度值和长度单位，长度单位可以使用前面多次提到的绝对单位或相对单位。

Ø 百分比是相对于上级元素宽度的百分比，允许使用负数。

Ø auto为自动提取边距值，是默认值。

Ø margin复合属性和其他复合属性的设置方法是一样的，也可以取1到4个值来同时设置边框周围的四个边距。

填充——padding-top／padding- bottom /padding-left / padding- right /padding

基本语法

padding-top:长度|百分比

padding-bottom: 长度|百分比

padding-left: 长度|百分比

padding-right: 长度|百分比

padding: 长度|百分比

长度包括长度值和长度单位。

Ø 百分比是相对于上级元素宽度的百分比，不允许使用负数。

Ø 填充复合属性padding的取值方法，可以参照边框样式border-style的取值方法。

列表

设计列表样式——list-style-type

添加列表图像——list-style-image

调整列表位置——list-style-position

设计列表样式——list-style-type

基本语法

list-style-type:<属性值>

添加列表图像——list-style-image

基本语法

list-style-image:none|URL

none表示不使用图像符号。

Ø URL指定图像的名称或者路径。

调整列表位置——list-style-position

基本语法

list-style-position:outside|inside

outside表示列表符号不向内缩进，是列表的默认属性值。

Ø inside表示列表符号向内缩进

定位

定位方式——position

设置位置——top、bottom、right、left

浮动——float

清除——clear

定位方式——position

基本语法

position:static|absolute|relative

static表示为静态定位，是默认设置。

Ø absolute表示绝对定位，与下一节的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。

Ø relative表示相对定位，对象不可层叠，但也要依据top、bottom、right、left等属性来设置元素的具体偏移位置

设置位置——top、bottom、right、left

• 基本语法

top:auto|长度值|百分比

bottom: auto|长度值|百分比

left: auto|长度值|百分比

right: auto|长度值|百分比

浮动——float

基本语法

float:left|right|none

Ø left表示浮动元素在左边，是居左对齐的。

Ø right表示浮动元素在右边，是居右对齐的。

Ø none表示不浮动，是默认值

清除——clear

基本语法

clear:left|right|both|none

清除——clear

语法说明

Ø left表示不允许在某元素的左边有浮动元素。

Ø right表示不允许在某元素的右边有浮动元素。

Ø both表示在某元素左右两边都不允许有浮动元素。

Ø none表示在某元素左右两边都允许有浮动元素

层的应用

图层的创建——<div>

创建嵌套图层

层的属性设置

图层的创建——<div>

基本语法

<body>

</body>

在进行层的定义时，需要将层的样式同时定义，否则在网页中不会显示出来。

创建嵌套图层

基本语法

<body>

</body>

图层的嵌套只要插入多个成对的<div></div>，设置好的层的样式属性就可以完成层的嵌套。

层的属性设置

•

• 图层定义常见属性

层的属性设置

基本语法

<body>

</body>

position属性将对象从文档流中拖出，进行绝对定位；

Ø left、top属性进行左边距和顶端间距的设置；

Ø width、height属性进行宽度和高度设置；

Ø 层叠通过z-index属性定义。

CSS层

设置层空间——z-index

设置层裁切——clip

设置层大小—度来—width、height

设置层溢出——overflow

设置层可见——visibility

设置层空间——z-index

基本语法

z-index:auto|数字

auto表示子层会按照父层的属性显示。

Ø 数字必须是无单位的整数或负数，但一般情况下都取正整数，所以z-index属性值为1的层位于最下层。

设置层裁切——clip

基本语法

clip:rect{<上>|<右>|<下>|<左>} |auto

auto表示不裁切。

Ø Ø rect的4个坐标值表示所裁切矩形的4个顶点位置，其中以网页左上角为坐标（0，0），而上、右、下、左这4个坐标值则是以左上角为参照点计算的。而且任意一个坐标值都可由auto来代替，表示该边不裁切。

设置层大小—width、height

• 基本语法

• width:auto|长度

• height:auto|长度

• width表示的是宽度，而height表示的是高度。

• Ø auto表示自动设置长度。

• Ø 长度包括长度值和单位。

• Ø 长度也可使用相对值中的百分比。

• 对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。

设置层溢出——overflow

基本语法

overflow: visible/hidden/scroll/auto

visible：扩大层的容纳范围，将所有内容都显示出来。

Ø hidden：隐藏超出范围的内容（超出范围的内容将被裁切掉）。

Ø scroll：表示一直显示滚动条。

Ø auto：当层内容超出了层的容纳范围时，则显示滚动条。

设置层可见——visibility

基本语法

• visibility:visible|hidden|inherit

visible表示该层是可见的。

Ø Ø hidden表示该层被隐藏，是不可见的。

Ø inherit表示子层或子元素会继承父层或父元素的可见性，父级元素可见则子级元素也可见。

鼠标指针——cursor

基本语法

cursor:auto|关键字|URL（图像地址）

auto表示根据对象元素的内容自动选择鼠标指针形状。

Ø URL（图像地址）表示选取自定义的图像作为鼠标指针的形状。

Ø 关键字共有16种，是系统预先定义好的鼠标指针形状，具体说明和形状见表20-2

属性	CSS名称	说明
边界属性	margin-top	设设置对象的上边距
	m margin -right	设设置对象的右边距
	m margin -bottom	设设置对象的下边距
	m margin -left	设设置对象的左边距
边框属性	bbborder-style	设设置边框的样式
	boborder-width	设设置边框的宽度
	boborder-color	设设置边框的颜色
填充属性	papadding-top	设设置内容与上边框之间的距离
	papadding-right	设设置内容与右边框之间的距离
	papadding-bottom	设设置内容与下边框之间的距离
	papadding-left	设设置内容与左边框之间的距离

伪类

• 伪类是一种特殊的类选择符，用来指定链接或者与其相关的选择符的状态；能被支持CSS的浏览器自动所识别的特殊选择符，

• 伪类与选择符间用冒号相连，在CSS中，伪类对文本或图像处于链接状态的修饰，故选择符大部分下是a标记，本章主要对a标记做实例讲解，其中伪类有四种常用形式是本章要讲解的，内容如下：

• “:link”用在为访问的链接上

• “:hover”用于鼠标光标置于其上的链接

• “:active”用于获得焦点（如“被单击”）的链接上

• “:visited”用在已经访问过的链接上

• 盒子在标准流中的定位原则

• 实验1——行内元素之间的水平margin

span.left{

margin-right:30px;

background-color:#a9d6ff;

}

span.right{

margin-left:40px;

background-color:#eeb0b0;

}

• 盒子在标准流中的定位原则

– 实验2——块级元素之间的竖直margin

<body>

</body>

CSS+Div 应用实例布局

• 流体浮动布局

• 固定浮动布局

• 固定定位布局

JavaScript

• Javascript是一种由Netscape的LiveScript发展而来的；是写在HTML文件中的一种基于对象和事件驱动并具有安全性能的脚本语言；区分大小写的客户端脚本语言。

• 当用户在客户端的浏览器中显示该网页时，浏览器就会执行JavaScript程序，让用户通过交互式的操作变换网页显示的内容，以实现HTML语言所不能实现的一些功能。

• 提供了数据验证的基本功能。

• JS是基于对象，Java是面向对象。

• JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。

• JS是弱类型，Java是强类型。

• JavaScript 是写在HTML文档中的一种基于对象（Object）和事件驱动（EventDriven)、并具有安全性能的脚本语言。

• JavaScript的特点

• 解释性：由浏览器直接解释执行

• 用于客户端

• 安全性:不允许直接访问本地硬盘

• 简单易用：脚本式语言最大的优点是易学易用，是一种轻量级的程序语言

• 动态性:他可以直接对用户或客户输入作出响应，无须经过web服务程序，他对用户的反映响应，是采用以事件驱动的方式进行的。

• 跨平台性:只要是可以解释Js的浏览器都可以执行，和操作系统无关

JavaScript的局限性：浏览器有很多种，每种对JavaScript的支持程度是不一样的，效果会有一定的差距。

• JavaScript的作用

– 校验用户输入的内容：用户输入内容的校验常分为两种

• 格式性校验：JavaScript

• 功能性校验

– 有效地组织网页内容

– 动态地显示网页内容：时钟显示等

– 动画显示

• 编写JavaScript脚本：可以使用任何一种文字编辑器来编写,我们使用Dreamweaver、EditPlus、UE等。

• 执行：与HTML文档配合，将其插入到HTML文档中，然后通过浏览器执行HTML文档即可。浏览器可以是IE、firefox等。

– 使用 <script> 标签将语句嵌入文档
<html>
<head>
<script type=”text/javascript” >
function showAlert()
{ alert(“web“)；}
</script>
</head>
<body > … …</body>
</html>

当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）

注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。

– 将 JavaScript 源文件链接到 HTML 文档中
<html>
<head>
<script type=”text/javascript” src=“common.js“></script>
</head>
<body >web程序设计</body>
</html>
common.js文件内容
function showAlert（）{
alert（“web程序设计“）；
}

– 事件跟随式
<html>
<head>
</head>
<body οnlοad=”window.alert(‘hello web’);”>
<a href="javascript:alert(new Date());">abc</a>

</body>
</html>

• 需注意：

– JavaScript程序内容必须置于<script> </script>标签中，type=“text/javascript”用于区别其他脚本程序语言。

– 对于不支持javascript程序的浏览器，标记之间的内容就会被隐藏起来，否则就会被当做html的内容显示出来，而对于支持javascript程序的浏览器，这对标签不起任何作用。

– Javascript程序对大小写字母是敏感的，即在同一个程序语句中如果使用大写或小写字母将代表不同的意义。

– 使用注释/*多行注释*/ //单行注释

– Javascript程序在html文件中的位置没有严格的规定，但根据Javascript程序的功能和作用，一般将其置于3种位置：

• 在html<body>标记中的任何位置。如果所编写的Javascript程序用于输出网页内容的，应该将Javascript程序置于html文件中需要显示该内容的位置。

• 在html<head>标记。如果所编写的Javascript程序需要在某一个html文件中多次使用，那就应该编写Javascript函数，并将函数置于html文件的<head>标记中。

• 在一个单独的js文件中。如果编写的Javascript程序需要在多个html文件中使用，或Javascript程序内容很长时。

数据类型

• JavaScript主要包括3种数据类型：简单数据类型、特殊数据类型、复合数据类型。

• 简单数据类型：数值型、字符型、布尔型

• 复合数据类型：对象、数组、函数

• 特殊数据类型：null、undefined

转义字符

字符	说明	示例
\b	退格符	alert(“这是第一句 \b 这是第二句”)
\f	换页符	alert(“这是第一句\f 这是第二句”)
\n	换行符	alert(“这是第一句\n 这是第二句”)
\r	回车符	alert(“这是第一句\r 这是第二句”)
\t	制表符	alert(“这是第一句\t 这是第二句”)

• 常量：不能改变的数据。可以为整型、逻辑型、字符串型等。

• 变量：在计算机内存中暂时保存数据的地方。用关键字var声明或用赋值的形式。var i；i=10；var count=10；var i，j；

• 变量命名规则

– 第一个字符必须是字母（大小写均可）、下划线（_）或美元符（$）;

– 后续字符可以是字母、数字、下划线或美元符；

– 变量名称不能是保留字；

– 字符大小写敏感；

• 变量可以不声明直接使用 k=100；（k没定义就直接用）

• 变量弱类型检查，且可随时改变数据类型

• 变量的数据类型及其转换
JavaScript声明变量时无需定义数据类型，因此，其变量又称为“无类型”变量，也就是说，声明后的变量名可以随时被赋值为任意类型的数据， JavaScript将会自动给予转换。
var count=1;
…
count=“the count of var is ”+count;

• 用typeof()运算符返回表达式的数据类型var a=18;
typeof(a) ---number

“+”连接字符串

运算符和表达式

• 运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值

• 根据所执行的运算，运算符可分为以下类别：

– 算术运算符

– 比较运算符

– 逻辑运算符

– 赋值运算符=、+=、-=、*=、/=、%=

– 位运算符（很少用）

– 算术运算符

	说明	示例
+	加	a = 5 + 8
-	减	a = 8 - 5
/	除	a = 20 / 5
*	乘	a = 5*19
%	取模－两个数相除的余数	10 % 3 = 1
++	一元自加。该运算符带一个操作数，将操作数的值加 1。返回的值取决于 ++ 运算符位于操作数的前面或是后面		++x将返回 x 自加运算后的值。 x++ 将返回 x 自加运算前的值
- -	一元自减。该运算符只带一个操作数。返回的值取决于 -- 运算符位于操作数的前面或是后面	--x 将返回 x 自减运算后的值。 x-- 将返回 x 自减运算前的值

比较运算符

运算符	说明	示例
= =	等于。如果两个操作数相等，则返回真。	a = = b
!=	不等于。如果两个操作数不相等，则返回真。	Var2 != 5
>	大于。如果左边的操作数大于右边的操作数，则返回真。	Var1 > var2
<	小于。如果左边的操作数小于右边的操作数，则返回真。	Var2 < var1
<=	小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。	Var2 <= 4 Var2 <= var1
>=	大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。	Var1 >= 5 Var1 >= var2

逻辑运算符

运算符	值	说明
与 ( &&)	expr1 && expr2	只有当 expr1 和 expr2 同为真时，才返回真。否则，返回假。
或 ( \|\| )	expr1 \|\| expr2	如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。
非 (!)	!expr	如果表达式为真，则返回假。如果为假，则返回真。

流程控制

• 所谓结构化程序设计思想，就是要使所设计的程序给人一种一目了然的感觉，条理清晰，模块化，书写层次分明，要求：

– 顺序结构：一条接一条，自上而下

– 选择结构：判断给定条件，根据不同情况做不同处理

– 循环结构：多次重复执行同一系列命令

if 语句

语法：

if(条件)

{

JavaScript代码;

}

switch 语句

语法

switch (表达式)

{

case 常量1 :

JavaScript语句;

break;

case 常量2 :

JavaScript语句;

break;

...

default :

JavaScript语句;

}

• 网页中嵌入脚本有两种方式：使用<Script>标签或外部 *. js文件

• JavaScript 中声明变量：var 变量名

• “+”可以用于两个数相加，还可以用于连接字符串

• parseInt() 和 parseFloat() 函数将字符串分别转换为整型和小数

• 运算符号分为算术运算符、比较运算符、逻辑运算符

• 条件语句分为if语句，if-else语句、if的嵌套

• 多分支语句switch根据表达式的值，进入不同的分支执行

循环

• for循环

• do-while

• while

for循环

var i;

for (i=0; i<10; i++)

{

// 语句;

}

while和do－while循环

q while循环

while(循环条件)

{

//语句；

}

q do－while循环

{

//语句；

}while(循环条件);

• 函数实际上就是一段有名字的程序，这样，在整个程序的任何位置，只要使用该名字，就会执行由这段名字命名的程序。

内置函数

• eval 函数：用于计算字符串表达式的值

该函数可以对以字符串形式表示的任意有效的 JavaScript代码求值。eval() 函数有一个参数，该参数就是想要求值的代码。

var anExpression = "6 * 9 % 7";

var total = eval(anExpression); // 将变量 total 赋值为 5

isNaN 函数：用于验证参数是否为 NaN（非数字）

isNaN(numValue)

返回一个 Boolean 值，指明提供的值是否是保留值 NaN （不是数字）。

如果值是 NaN，那么 isNaN 函数返回 true ，否则返回 false

自定义函数

• 定义函数：

function 函数名([参数1,参数2，…]){

语句;

}

• 调用函数：
函数调用一般和表单元素的事件一起使用，调用格式为：事件名＝“函数名” ;

参数是由函数的使用方传递到函数体中的变量，用于为函数中的操作提供相应的信息和数据。

• 参数的传递

– 按值传递：传递的只是原变量的一份拷贝，因此，如果在函数中改变了这个参数的值，原变量不会跟着改变，它将保留原有的值。

– 按地址传递：这时传递的是原变量的内存地址，即函数中的参数和原变量是同一个变量。因此在函数中改变了参数值，原变量也会随之改变。

• 参数的个数
当函数包含多个参数时，使用arguments.length可以得到使用该函数时输入的参数个数，而arguments包括了各参数内容。

• 注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。

• 说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。

其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一个数组中。

例：

function demo()//定义函数。

{

alert(arguments.length);

}

demo(“hello”,123,true);//调用函数。

那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。

为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。

函数在调用时的其他写法：

var show = demo();//show变量接收demo函数的返回值。

var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。

//那么该函数也可以通过show()的方式运行

变量的作用域

• JavaScript的变量分为全局变量和局部变量。全局变量是作用在全程序范围内的变量，它声明在函数体外；局部变量是定义在函数体内的变量，它仅仅在函数体内起作用。

例如， var errorMessage=“”;

function checkRequired(v,label){

… …

var msg=“请输入”+label;

errorMessage=errorMessage+msg;

}

JavaScript 对象简介

• 内置对象

• 浏览器对象

• 自定义对象

• 注意：一个对象在被引用之前，必须存在。另外在JavaScript中对于对象属性和方法的引用，有两种情况：

– 该对象为静态对象，表示在引用该对象的属性或方法时不需要为它创建实例；

– 在引用该对象属性和方法时必须为它创建一个实例，叫做动态对象。

创建字符串有两种不同方法：

• 使用 var 语句 var newstr = “这是我的字符串"

• 创建 String 对象

var newstr = new String (“这是我的字符串")

• 字符串相加：+或+= （字符串的连接）

• 在字符串中使用特殊字符
“sdfg’ × “她说：’今天不出门’” √ 或使用转义字符 “她说：\”今天不出门\”” “\n”

• 比较字符串是否相等 == != user==null || user==“”

• 数字字符串和数值的相互转换

String相关函数

• 属性：length

• 方法：

– charAt(index): 返回指定索引位置处的字符。

– indexOf(subString[, startIndex]): 返回 String 对象内第一次出现子字符串的字符位置。

– substr(start [, length ]):返回一个从指定位置开始的指定长度的子字符串。

– substring(start, end):返回位于 String 对象中指定位置的子字符串。

– toLowerCase:返回一个字符串，该字符串中的字母被转换为小写字母。

Math 对象

	名称	说明
属性	PI	∏ 的值，约等于 3.1415
	LN10	10 的自然对数的值，约等于 2.302
	E	Euler 的常量的值，约等于 2.718。Euler 的常量用作自然对数的底数
	abs(y)	返回 y 的绝对值
	sin (y)	返回 y 的正弦，返回值以弧度为单位。
	cos (y)	返回 y 的余弦，返回值以弧度为单位
	tan (y)	返回 y 的正切，返回值以弧度为单位
	min (x, y)	返回 x 和 y 两个数中较小的数
	max (x, y)	返回 x 和 y 两个数中较大的数
	random	返回0-1的随机数
方法	round (y)	四舍五入取整
方法	sqrt (y)	返回 y 的平方根

数学运算 Math对象

• Math.ceil(x)返回>=x的最小整数

• Math.floor(x) 返回<=x的最大整数

• Math.pow(x,y)返回x的y次方

• Math.random()返回0-1之间的随机小数

• Math.round(x)返回x的四舍五入的整数，特定精度的四舍五入见[1.1.htm]

Date 对象

Data 方法的分组

方法分组	说明
setxxx	这些方法用于设置时间和日期值
getxxx	这些方法用于获取时间和日期值
Toxxx	这些方法用于从 Date 对象返回字符串值
parsexxx & UTCxx	这些方法用于解析字符串

用作 Date 方法的参数的整数

值	整数
Seconds 和 minutes	0 至 59
Hours	0 至 23
Day	0 至 6（星期几）
Date	1 至 31（月份中的天数）
Months	0 至 11（一月至十二月）

Set 方法

方法	说明
setDate	设置 Date 对象中月份中的天数，其值介于 1 至 31 之间。
setHours	设置 Date 对象中的小时数，其值介于 0 至 23 之间。
setMinutes	设置 Date 对象中的分钟数，其值介于 0 至 59 之间。
setSeconds	设置 Date 对象中的秒数，其值介于 0 至 59 之间。
setTime	设置 Date 对象中的时间值。
setMonth	设置 Date 对象中的月份，其值介于 1 至 12 之间。

Get 方法：

方法	说明
getDate	返回 Date 对象中月份中的天数，其值介于 1 至 31 之间
getDay	返回 Date 对象中的星期几，其值介于 0 至 6 之间
getHours	返回 Date 对象中的小时数，其值介于 0 至 23 之间
getMinutes	返回 Date 对象中的分钟数，其值介于 0 至 59 之间
getSeconds	返回 Date 对象中的秒数，其值介于 0 至 59 之间
getMonth	返回 Date 对象中的月份，其值介于 0 至11 之间
getFullYear	返回 Date 对象中的年份，其值为四位数
getTime	返回自某一时刻（1970 年 1 月 1 日）以来的毫秒数

To 方法：

方法	说明
ToGMTString	使用格林尼治标准时间 (GMT) 数据格式将 Date 对象转换成字符串表示
ToLocaleString	使用当地时间格式将 Date 对象转换成字符串表示

Parse 方法和 UTC 方法

方法	说明
Date.parse (date string )	用日期字符串表示自 1970 年 1 月 1 日以来的毫秒数
Date.UTC (year, month, day, hours, min., secs. )	Date 对象中自 1970 年 1 月 1 日以来的毫秒数

数组

• 声明数组

var 数组名 = new Array(数组大小);

例： var emp = new Array(3)

• 添加元素

emp[0] = “AA";

emp[1] = “BB";

emp[2] = “CC";

也可以声明数组并赋初值：

例： var emp=new Array(“AA”，“BB”，“CC”)；

• 方案1 ：

– var objArr = new Array();//创建一个空数组

– var objArr = new Array(10);//创建含10个元素的数组

– var objArr = new Array(“a”,”b”,”c”);//创建数组并初始化

• 方案2：

– var objArr = [];//通方案1

– var objArr = [10];//包含一个数字10的元素，注意：和方案1不一样

– var objArr = [“a”,”b”,”c”];//通方案1

• 组合数组的创建

– var objArr = [[new Date()],”abc”,1234];//该数组包含三种数据类型，分别是对象类型,字符串类型和数字类型

• 如何引用元素：objArr[index]的形式来使用数组中的一个元素，index是元素在数组的索引，从0开始计算

• 数组的length属性：表示数组的长度

• 多维数组：js本身是没有多维数组概念，要通过组合数组来创建

– 二维数组举例1：创建2*6的二维数组
var arr = new Array(4);
for(var i=0;i<4;i++)
arr[i]= new Array(6);

– 二维数组举例2：3*3
var arr = [[1,2,3],[4,5,6],[7,8,9]];

常用属性

length ：返回数组中元素的个数

常用方法

方法	说明
join	将数组中的元素组合成字符串
reverse	颠倒数组元素的顺序，使第一个元素成为最后一个，而最后一个元素成为第一个
sort	对数组元素进行排序

数组的方法

• objArr.toString():转换成字符串，并用,连接：

– [1,2,3].toString() -> “1,2,3”

– [“a”,”b”,”c”,[1,2,3,4]].toString() -> “a,b,c,1,2,3,4”

• objArr.join(separator):将separator作为分隔符，将数组转换成字符串，当separator为逗号时等同于toString()

• objArr.pop()返回数组最后一个元素值，注意：这里同时会将该元素从数据中清除，即objArr.length 减1

• objArr.push(v1,v2,…):将参数添加到数组结尾：

– [1,2,3,4].push(“a”,”b”) -> [1,2,3,4,”a”,”b”]

• objArr.shift():移出数组第一个元素，并返回该值

• Array对象常用的属性是length，排序方法：sort

• 循环语句分为：for 循环、while循环、do-while循环

• Eval( )函数可以计算某个计算表达式的值，

isNaN( )函数可用于判断是否是一个数字

• String对象的indexOf( )方法用于查找子字符串

• Math对象的random( )方法可以产生0－1的随机数

• Date对象有setxxx( )方法用于设置日期和时间，getxxx( )方法用于获得日期和时间

Window 对象

• 窗口对象window是浏览器网页的文档对象模型结构中的最高级的对象，只要网页的html标记中包含有<body>或<frameset>标记，该网页就会包含一个窗口对象。

• window对象的常用属性和方法

属性

名称	说明
document	表示给定浏览器窗口中的 HTML 文档。
history	包含有关客户访问过的URL的信息。
location	包含有关当前 URL 的信息。
name	设置或检索窗口或框架的名称。
status	设置或检索窗口底部的状态栏中的消息。
screen	包含有关客户端的屏幕和显示性能的信息。

方法

名称	说明
alert (“m提示信息")	显示包含消息的对话框。
confirm（“提示信息”）	显示一个确认对话框，包含一个确定取消按钮
prompt（”提示信息“）	弹出提示信息框
open ("url","name")	打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档
close ( )	关闭当前窗口
setTimeout(”函数”,毫秒数)	设置定时器：经过指定毫秒值后执行某个函数
clearTimeout(定时器对象)	取消setTimeout设置

open（”打开窗口的url”，”窗口名”，”窗口特征”）

窗口的特征如下，可以任意组合：

height：窗口高度；

width：窗口宽度；

top：窗口距离屏幕上方的象素值；

left：窗口距离屏幕左侧的象素值；

toolbar：是否显示工具栏，yes为显示；

menubar，scrollbars 表示菜单栏和滚动栏。

resizable：是否允许改变窗口大小，yes或1为允许

location：是否显示地址栏，yes或1为允许

status：是否显示状态栏内的信息，yes或1为允许；

screen.width---显示器屏幕的宽度

screen.height---显示屏幕的高度

定时器函数setTimeout ()的用法：

setTimeout（“调用的函数名”，间隔的毫秒数）

表示过多少毫秒，就调用某个函数来执行

清除某个定时器：clearTimeout()方法。

例如：var myclock＝setTimeout（”move( )”,500）;

if (…)

clearTimeout（myclock）;；

定时器的使用：实现延期执行或重复执行

• window对象提供了两种方法来实现定时器：

– window. setTimeout(表达式[expression],延时时间[n])

– window. setInterval(表达式[expression],延时时间[n])

注意：expression可以是用引号括起来的代码，也可以是一个函数名（不能带任何参数的函数）

• 如何取消定时器：

– 取消setTimeout：window.clearTimeout(id);

– 取消setInterval:window.clearInterval(id);

屏幕（screen）对象

• 屏幕对象是JavaScript运行时自动产生的对象

• 屏幕对象常用属性

– height：返回显示屏幕的高度。

– width ：返回显示器屏幕的宽度。

– availHeight ：返回显示屏幕的高度 (除 Windows 任务栏之外)。

– availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)。

– colorDepth：返回目标设备或缓冲器上的调色板的比特深度（每像素中用于颜色的位数，其值为1,4,8,15,16,24,32）。

• 网页可见区域宽：document.body.clientWidth

• 网页可见区域高：document.body.clientHeight

• 网页可见区域宽：document.body.offsetWidth (包括边线的宽)

• 网页可见区域高：document.body.offsetHeight (包括边线的宽)

• 网页正文全文宽：document.body.scrollWidth

• 网页正文全文高：document.body.scrollHeight

• 网页被卷去的高：document.body.scrollTop

• 网页被卷去的左：document.body.scrollLeft

• 网页正文部分上：window.screenTop

• 网页正文部分左：window.screenLeft

• 屏幕分辨率的高：window.screen.height

• 屏幕分辨率的宽：window.screen.width

• 屏幕可用工作区高度：window.screen.availHeight

• 屏幕可用工作区宽度：window.screen.availWidth

Location对象

• 处理地址栏信息：location对象

– Location对象是wodow对象的子对象，包含了窗口对象的网页地址内容，即URL。例如：

• window.location=“http://www.sohu.com”;//跳转到页面

• window.loaction.href=“http://www.sohu.com”;//同上

• window.location.reload();//刷新页面

• Window.location.replace(url);//用url刷新当前网页

方法1：<a href=“javascript:window.open(‘http://www.yahoo.com’,’_self’)”>
window.open()
</a>

方法2：<a href=“javascript:location.href=‘http://www.yahoo.com’”>
location.href
</a>

方法3：<a href=“javascript:location. replace(‘http://www.yahoo.com’)”>
location.replace()
</a>

Location 对象属性

名称	说明
host	设置或检索位置或 URL 的主机名和端口号
hostname	设置或检索位置或 URL 的主机名部分
href	设置或检索完整的 URL 字符串

方法

名称	说明
assign("url")	加载 URL 指定的新的 HTML 文档。
reload()	重新加载当前页
replace("url")	通过加载 URL 指定的文档来替换当前文档

历史记录（history）对象

• 历史记录对象是窗口对象下的一个子对象。它实际上是一个对象数组，包含了一系列的用户访问过的url地址，用于浏览器工具栏中的“前进”和“后退”按钮。

• 常用属性和方法

– history.length：历史对象的个数

– history.back();显示浏览器历史列表中后退一个网址的网页

– history.go(n)或者history.go(网址)：显示浏览器的历史列表中第n个网址的网页，n>0 前进 n<0 后退

– history.forward()；//显示浏览器历史列表中前进一个网址的网页

Document对象

• document文档对象是window对象的一个主要部分，它包含了网页显示的各个元素对象。

– document.write(str);//输出一行

– document.writeln(str);//输出一行，并回车

常用属性

名称	说明
alinkColor	设置或检索文档中所有活动链接的颜色
bgColor	设置或检索 Document 对象的背景色
body	指定文档正文的开始和结束
linkColor	设置或检索文档链接的颜色
location	包含关于当前 URL 的信息
title	包含文档的标题
url	设置或检索当前文档的 URL
vlinkColor	设置或检索用户访问过的链接的颜色

常用方法

名称	说明
clear ( )	清除当前文档
close ( )	关闭输出流并强制显示发送的数据
write ("text")	将文本写入文档

• JavaScript 程序是事件驱动程序

• onFocus获得焦点事件，表示获得鼠标光标， onBlur失去焦点事件，刚好与之相反

• 浏览器对象是一个分层次的结构，window是顶层根对象

• 打开窗口使用window对象的open( )方法

• 设置定时器，使用window对象的setTimeout( )方法

• location对象的back( )和forward( )方法等同于前进、后退按钮

Form对象及其元素对象

• Form对象：是文档对象的一个主要元素。Form对象中包含有许多用于收集用户输入内容的元素对象，例如，文本框、按钮等，通过这些元素对象，form将用户输入的数据传递到服务器端进行处理。

• 引用form对象

– 使用form标记中的name属性值
document.form1 document.form2

– 使用forms数组对象
document.forms[0] document.forms[1]
document.forms[“form1”]

• Form对象的常用属性、方法和事件

表单的onsubmit事件。事件响应调用函数doSubmit()进行验证，根据函数的返回值决定是否提交

• Form中的元素对象
form中的元素对象一般都可以与html的标记一一对应。

• 引用form中的元素对象

– 通过元素的名称
document.form1.username

– 通过form的元素数组对象的方法
document.form1.elements[0]
document.form1.elements[“username”]

JavaScript 事件处理程序

事件处理程序的基本语法是：事件名=" JavaScript 代码函数"

表示鼠标按下时，将调用执行函数check( ) 。

JavaScript 事件

事件名	说明
onClick	鼠标单击
onChange	文本内容或下拉菜单中的选项发生改变
onFocus	获得焦点，表示文本框等获得鼠标光标。
onBlur	失去焦点，表示文本框等失去鼠标光标。
onMouseOver	鼠标悬停，即鼠标停留在图片等的上方
onMouseOut	鼠标移出，即离开图片等所在的区域
onMouseMove	鼠标移动，表示在<DIV>层等上方移动
onLoad	网页文档加载事件
onSubmit	表单提交事件
onMouseDown	鼠标按下
onMouseUp	鼠标弹起

onFocus和onBlur 事件

文本框获得鼠标焦点时（onFocus）调用的函数：

清空卡号文本框

文本框失去鼠标焦点时（onBlur）调用的函数：

判断格式是否正确

focus( )方法

再次获得焦点，即鼠标

光标回到卡号文本框

onMouseOver="src='dog2.jpg'"

表示本图片的图片名称替换为dog2.jpg。

请注意：

由于外面两端已有双引号，为区别起见，dog2.jpg改用为单引号括起来。

文本框对象

• 文本框元素用于在表单中输入字、词或一系列数字

• 可以通过将 HTML 的 INPUT 标签中的 type 设置为“text”，以创建文本框元素

文本框对象 – 事件处理程序

文本框	事件	onBlur	文本框失去焦点
		onChange	文本框的值被修改
		onFocus	光标进入文本框中
	方法	focus( )	获得焦点，即获得鼠标光标
	方法	select( )	选中文本内容，突出显示输入区域
	属性	readOnly	只读，文本框中的内容不能修改

onFocus事件调用的函数clearText（）清空帐号文本框中的内容

onBlur事件调用的函数check（）检查输入的帐号是否是“10”打头，并且是数字

onChange事件调用的函数compute( )用来计算总价

命令按钮对象

命令按钮对象是网页中最常用的元素之一

按钮 - 事件处理程序

表单元素	事件处理程序	说明
命令按钮	onSubmit	表单提交事件，单击“提交”按钮时产生，此事件属于<FORM>元素，不属于提交按钮
命令按钮	onClick	按钮单击事件

onSubmit事件处理代码：

如果函数返回true，则向远程服务器提交表单；

如果函数返回false，则取消提交。

复选框对象

• 当用户需要在选项列表中选择多项时，可以使用复选框对象

• 要创建复选框对象，请使用 <INPUT> 标签

复选框 - 事件处理程序

复选框	事件	onBlur	复选框失去焦点
		onFocus	复选框获得焦点
		onClick	复选框被选定或取消选定
	属性	checked	复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中
	属性	value	设置或获取复选框的值

<PRE>是为了原样显示字符串中的换行”\n”格式

修改每个复选框的名称都为mybox，使这4个复选框构成一个数组mybox

使用数组和for循环大大简化代码

单选按钮对象

• 当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象

• 要创建单选按钮对象，请使用 <INPUT> 标签

单选按钮 - 事件和属性

单选按钮	事件	onBlur	单选按钮失去焦点
		onFocus	单选按钮获得焦点
		onClick	单选按钮被选定或取消选定
	属性	checked	单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中
	属性	value	设置或获取单选按钮的值

下拉列表框

<OPTION>--请选择开户帐号的城市--</OPTION>

</SELECT>

下拉列表框-事件和属性

下拉列表框	事件	onBlur	下拉列表框失去焦点
		onChange	当选项发生改变时产生
		onFocus	下拉列表框获得焦点
	属性	value	下拉列表框中，被选选项的值
		options	所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options[0]，第二个即为options[1]，其他以此类推
		selectedIndex	返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推

表单验证

• JavaScript 最常见的用法之一就是验证表单

• 对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript 是一种十分便捷的方法

• <SCRIPT LANGUAGE="JavaScript">

• function validate( )

• {

• var f=document.reg_form;

• if(f.uname.value=="")

• {

• alert("请输入姓名");

• f.uname.focus(); 检查姓名

• return false;

• }

• if (f.gender[0].checked==false && f.gender[1].checked==false)

• {

• alert("请指定性别");

• f.gender[0].focus();

• return false; 检查性别

•

• }

• if ((f.password.value.length < 6) || (f.password.value == ""))

• {

• alert("请输入至少 6 个字符的密码！");

• f.password.focus();

• return false; 检查密码

• }

• q=f.email.value.indexOf("@");

• if (q==-1)

• {

• alert("请输入有效的电子邮件地址");

• f.email.focus();

• return false; 检查邮件地址

• }

• <FORM name="reg_form" onSubmit="return validate()" action="submit.htm">

•

• if (f.age.value<1 || f.age.value> 99 || isNaN(f.age.value))

• {

• alert("请输入有效的年龄！");

• f.age.focus();

• return false; 检查年龄

• }

• </SCRIPT>

•

• OnBlur、onChange 和 OnFocus 是一些与表单对象相关的事件处理程序

• 在浏览器窗口中，如果文本框获得焦点，则会调用 onFocus 事件处理程序

• 当对象失去焦点或光标退出对象时，将执行 onBlur 事件处理程序

• 当修改文本框内容或改写下拉列表框的选项时，则会调用 onChange 事件处理程序

• JavaScript的主要功能之一是用于表单验证

冯东昆

关注

11
点赞
踩
81

收藏

觉得还不错? 一键收藏
3
评论
HTML、CSS、JavaScript学习总结

学习总结HTML网站开发的主要原则是：– 用标签元素HTML描述网页的内容结构；– 用CSS描述网页的排版布局；– 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序HTML（Hyper Text Mark-up Language 超文本标记语言）的缩写，是最基础的网页语言。 Html是通过标签来定义的语言，代码都是由标签所组成。Htm
复制链接

扫一扫