大家好,又见面了,我是你们的朋友全栈君。
学习总结
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> 超链接网址基准参考点
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
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>
<dt>名称</dt>
<dd>说明</dd>
<dd>说明</dd>
<dd>说明</dd>
<dt>名称</dt>
<dd>说明</dd>
<dd>说明</dd>
<dd>说明</dd>
…
</dl>
插入无序列表<ul>
<ul>
<li>项目名称</li>…
<li>项目名称</li>…
<li>项目名称</li>…
…
<ul>
<ul>:符号标签(○●■)
type属性:disc ● ( 默认) circle ○ square ■
<ul type=”circle”>
插入有序列表<ol>
<ol>
<li>项目名称</li>…
<li>项目名称</li>…
<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 属性用于创建锚标记
<A NAME = “marker”>主题名称</A>
<A HREF= “#marker”>主题名称</A>
为达到这种跳转效果,请在 HREF 参数中使用该标记
B 发送E-mail:在html页面中,可以建立e-mail链接,当浏览者单击链接后,系统会启动默认的本地邮件服务系统发送邮件,格式为:
<a href=“mailto:e-mail地址?subject=邮件主题”>
描述文字
</a>
<a href=“mailto:zhangsan@126.com?subject=一个消息”>
联系我
</a>
LINK 颜色的设置
• 基本格式:<body link=”颜色” alink=”颜色” vlink=”颜色”>
• link 超链接尚被选中的文字
• alink 超链接点选但未被放开的颜色
• vlink 超链接已被点选过的颜色
插入并格式化图像
B <img>标签:用于在网页中插入图像内容。
– src属性:用于设置图像文件的相对或绝对URL地址。
– 共三种类型:GIF:是图形和图片的最佳格式,适用于透明或动画图形。
– JPG或JPEG:更适合存放照片
– PNG:拥有许多JPEG与GIF的共同优点,所以最近越来越流行。
通过设置width属性和height属性可以控制图像的显示宽度和高度,他们的长度单位可是百分比,也可是像素。
<a href=”URL”><img src=”URL”></a>
注意点:边框的问题.
可通过border=“0”去掉边框
属性名称 属性值 说明
Align left 图像靠左文字靠右
Right 图像靠右文字靠左
Top 文字往上靠
middle 文字靠中
bottom 文字靠下
空隙设置
Vspace 垂直上下两端和物件距离
Hspace 水平左右两端和物件距离
设置图像映射
图像地图:<map>
map标签要和img标签联合使用。
<img src=”URL” usemap=””></img>
<map name=””>
<area shape=”” cords=” , , , ” href=”URL”>
</map>
语法说明
<img>标记表示插入图像文件,src表示插入图像的路径;
Ø <map>标记表示插入图像映射;
Ø <area>标记表示图像映射区域;
Ø rhape属性表示映射区域形状:
— “rect”表示矩形区域;
— “circle”表示椭圆形区域;
— “poly”表示多边形区域;
Ø cords表示感应区域的坐标
创建表格
<BODY>
<TABLE BORDER = 2 >
<TR>
<TD>姓名</TD>
<TD>性别</TD>
<TD>分数</TD>
</TR>
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>分数</TH> <TH>表示行或列标题,粗体显示
</TR>
…….
</TABLE>
<TH align=”center”>性别</TH>居中
COLSPAN=“n” 属性表示跨多少列
ROWSPAN=“n” 属性表示跨多少行
表格的颜色设置:
表格的背景色 <TABLE bgcolor=颜色值>
行的背景色 <TR bgcolor=颜色值>
列的背景色 <TD bgcolor=颜色值>
表格的尺寸设置:
<TABLE width=n1 height=n2>
• frame常见属性
规定表格周围的哪一侧的边框是可见的。
• rules常见属性
规定水平或垂直的分界线。
注释:必须与 “border” 属性配合使用!
定义表格列的分组。通过此元素,您可以对列进行组合以便进行格式化。
<colgroup span=”3″ bgcolor=“red”></colgroup>
Span:表格的直列数,而不是第几列。
定义某个表格中针对一个或多个列的属性值。您只能在表格或 colgroup 中使用此属性。
<table>
<col></col> 代表第1列
<col span=“2” bgcolor=“red”></col> 代表第2,3 两列
<tr>….</tr>
单元格间距,边距
<table cellspacing=”” cellpadding=“”>
表格嵌套
在HTML文件中,第一个<table>标记表示插入第一表格,第二个<table>标记插入在标记<td></td>之间,表示在单元格中插入表格,也就是嵌套表格。
框架标签
框架就是把一个浏览器窗口划分为若干个小窗口,每个窗口可以显示不同的URL网页。
所有的框架标签要放在一个HTML文档中,HTML页面的文档体标签<body>被框架集标签<frameset>所取代,然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口的页面属性。
B <frameset>标签
<frameset rows=“框架窗口高度,框架窗口高度,…”>
</frameset>
<html>
<head>
<title>框架的基本结构<title>
</head>
<frameset>
<frame>
<frame>
…
</frameset>
</html>
<frameset cols=“框架窗口宽度,框架窗口宽度,…”>
</frameset>
还可设置的属性包括:
frameborder:是否显示框架结构的边框线,取值为0、1或yes、no。取值为1或yes边框将会显示,取值为0或no边框将会隐藏。
framespacing:默认边框线的宽度为1,该属性可调整边框线的宽度。(以像素为单位)
bordercolor:可设置边框线颜色。
scrolling:设置框架是否显示滚动条。取值为yes、no或auto。yes表示滚动条一直显示;no表示无论什么情况都不显示滚动条;auto是系统的默认值,它是根据内容来调整的,当页面长度超过浏览器窗口的范围时就会自动显示滚动条。
B <noframes>标签
如果遇到不支持框架结构的浏览器,此时就需要用到该标签来设置替换的内容,并告诉浏览者其浏览器无法打开框架页面。
<a href=“right1.html” target=“mainFrame”>新闻中心</a>
使用iframe进行页面内的页面嵌套
可以定义嵌套页面的大小、位置等
用法:
<iframe name=“ifra1” scr=“abc.htm” border=“1”/>
可以通过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 NAME =“myselect”>
<OPTION SELECTED>西班牙</OPTION>
<OPTION>法国</OPTION>
<OPTION>巴西</OPTION>
<OPTION>德国</OPTION>
</SELECT>
按钮
• <input type=“按钮类型(reset、submit、button)” name=“按钮名称” value=“按钮显示文本”>
– 隐藏域
• <input name=“名称” type=“hidden” value=“提交值”>
– 浏览框
• <input name=“名称” type=“file” size=“显示字符长度” maxlength=“最大长度”>
BUTTON(按钮)
<INPUT name=”button1″ type=”submit” value=”提交“>
<INPUT name=”button2″ type=”reset” value=”重置“>
<INPUT name=”button3″ type=”button” value=”普通按钮“>
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的基本概念
• 掌握样式表的语法规则
• 样式表的分类:
– 行内样式表
– 内嵌样式表
– 外部样式表
• 掌握常用的样式
指定显示样式
<P style = “color:red;font-size:30px;font-family:隶书;”>
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>
<meta http-equiv=”Content-Style-Type” content=”text/css”>
</head>
内联的样式比其他方法更加灵活。要使用内联样式,必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉.
@ 内嵌样式表:是在<head>标签内添加<style></style>标签对,在标签对内定义需要的样式。
例如,<head>
<style type=“text/css”>
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>
<LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” >
</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-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>
<div id=”Layer1″ style=”position:absolute; left:29px; top:12px; width:165px; height:104px;”></div>
</body>
在进行层的定义时,需要将层的样式同时定义,否则在网页中不会显示出来。
创建嵌套图层
基本语法
<body>
<div id=”Layer1″ style=”position:absolute; z-index:1; left:29px; top:12px; width:165px; height:104px;”></div>
<div id=”Layer1″ style=”position:absolute; z-index:1; left:29px; top:12px; width:165px; height:104px;”></div>
</body>
图层的嵌套只要插入多个成对的<div></div>,设置好的层的样式属性就可以完成层的嵌套。
层的属性设置
•
•
• 图层定义常见属性
层的属性设置
基本语法
<body>
<div id=”Layer1″ style=”position:absolute; left:29px; z-index:1; top:12px; width:165px; height:104px;”></div>
</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>
<div style=”margin-bottom:50px;”>块元素1</div>
<div style=”margin-top:30px;”>块元素2</div>
</body>
CSS+Div 应用实例 布局
• 流体浮动布局
• 固定浮动布局
• 固定定位布局
JavaScript
• Javascript是一种由Netscape的LiveScript发展而来的;是写在HTML文件中的一种基于对象和事件驱动并具有安全性能的脚本语言;区分大小写的客户端脚本语言。
• 当用户在客户端的浏览器中显示该网页时,浏览器就会执行JavaScript程序,让用户通过交互式的操作变换网页显示的内容,以实现HTML语言所不能实现的一些功能。
• 提供了数据验证的基本功能。
• JS是基于对象,Java是面向对象。
• JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。
• JS是弱类型,Java是强类型。
• JavaScript 是写在HTML文档中的一种基于对象(Object)和事件驱动(EventDriven)、并具有安全性能的脚本语言。
• 当用户在客户端的浏览器中显示该网页时,浏览器就会执行JavaScript程序,让用户通过交互式的操作变换网页显示的内容,以实现HTML语言所不能实现的一些功能。
• 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>
<input type=button value=test οnclick=”alert(new Date());”>
</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循环
do
{
//语句;
}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 代码函数”
<INPUT type=”BUTTON” … onClick=“alert(“单击我!”);”>
<INPUT type=”BUTTON” … onMouseDown=“check( )”>
表示鼠标按下时,将调用执行函数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( )用来计算总价
命令按钮对象
命令按钮对象是网页中最常用的元素之一
<INPUT type=”submit” name=”button1″ value=”提交“>
<INPUT type=”reset” name=”button2″ value=”重置“>
<INPUT type=”button” name=”button3″ value=”计算“>
按钮 – 事件处理程序
表单元素 | 事件处理程序 | 说明 |
命令按钮 | onSubmit | 表单提交事件,单击“提交”按钮时产生,此事件属于<FORM>元素,不属于提交按钮 |
onClick | 按钮单击事件 |
onSubmit事件处理代码:
<FORM onSubmit=”return 调用函数名”>…</FORM>
如果函数返回true,则向远程服务器提交表单;
如果函数返回false,则取消提交。
复选框对象
• 当用户需要在选项列表中选择多项时,可以使用复选框对象
• 要创建复选框对象,请使用 <INPUT> 标签
复选框 – 事件处理程序
复选框 | 事件 | onBlur | 复选框失去焦点 |
onFocus | 复选框获得焦点 | ||
onClick | 复选框被选定或取消选定 | ||
属性 | checked | 复选框是否被选中,选中为true,未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中 | |
value | 设置或获取复选框的值 |
<PRE>是为了原样显示字符串中的换行”\n”格式
修改每个复选框的名称都为mybox,使这4个复选框构成一个数组mybox
使用数组和for循环大大简化代码
单选按钮对象
• 当用户只需要从选项列表中选择一个选项时,可以使用单选按钮对象
• 要创建单选按钮对象,请使用 <INPUT> 标签
单选按钮 – 事件和属性
单选按钮 | 事件 | onBlur | 单选按钮失去焦点 |
onFocus | 单选按钮获得焦点 | ||
onClick | 单选按钮被选定或取消选定 | ||
属性 | checked | 单选按钮是否被选中,选中为true,未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中 | |
value | 设置或获取单选按钮的值 |
下拉列表框
<SELECT name=”myselect” >
<OPTION>–请选择开户帐号的城市–</OPTION>
<OPTION value=”北京市“>北京市</OPTION>
<OPTION value=”上海市“>上海市</OPTION>
<OPTION value=”重庆市“>重庆市</OPTION>
<OPTION value=”天津市“>天津市</OPTION>
<OPTION value=”四川省“>四川省</OPTION>
<OPTION value=”山东省“>山东省</OPTION>
<OPTION value=”湖北省“>湖北省</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的主要功能之一是用于表单验证
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145944.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...