培训体系HTML及JS培训教材_第1页
培训体系HTML及JS培训教材_第2页
培训体系HTML及JS培训教材_第3页
培训体系HTML及JS培训教材_第4页
培训体系HTML及JS培训教材_第5页
已阅读5页，还剩73页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

培训体系HTML及JS培训教材应用开发二部深圳市茁壮网络技术某公司培训教材HTML及JS基础知识培训Html&&Jsknowledgebasedtraining谢谢阅读APPS2-类别-编号版权所有，限公司内部使用讲师：华道伟1002号京广中心写字楼91213楼邮518002感谢阅读http://.cn目录一.HTML入门5精品文档放心下载二．HTML的基本结构5谢谢阅读三.页面布局和文字设置8感谢阅读3．1标题8感谢阅读3．2换行9感谢阅读3．3段落标签<P>10精品文档放心下载3．4字体大小的设置11感谢阅读3．5文字的字体和样式12精品文档放心下载3．5文字的颜色14谢谢阅读3．6位置控制14谢谢阅读3．7HTML的CHARACTER的实体15感谢阅读四．TABLE表格15感谢阅读4.1表格的基本结构15精品文档放心下载4.2表格的标题16精品文档放心下载4.3表格的尺寸设置17感谢阅读4.4表格内文字的对齐/布局20谢谢阅读4.5跨多行、多列的表元21谢谢阅读跨多列的表元22谢谢阅读跨多行的表元22感谢阅读4.6表格的颜色23谢谢阅读五．HTML的FORMS和INPUT24精品文档放心下载HTML<FORM>标签24精品文档放心下载HTML<INPUT>标签24精品文档放心下载定义和用法24谢谢阅读1)文本区域24精品文档放心下载2)单选按钮24感谢阅读3)多选按钮24感谢阅读4)提交按钮25谢谢阅读六．文件之间的链接25谢谢阅读本地链接：25感谢阅读URL链接26精品文档放心下载七．插入图象27感谢阅读基本格式27谢谢阅读图形按钮：28精品文档放心下载八．多窗口页面（FRAMES）28精品文档放心下载IFRAME28精品文档放心下载九．MARQUEE属性说明28精品文档放心下载基本语法28谢谢阅读方向29精品文档放心下载方式29精品文档放心下载循环29感谢阅读速度29谢谢阅读延时30感谢阅读外观(LAYOUT)设置30精品文档放心下载对齐方式(Align)30感谢阅读底色30精品文档放心下载面积30精品文档放心下载一．什么是JAVASCRIPT33谢谢阅读JAVASCRIPT简述33精品文档放心下载JAVASCRIPT能够做什么？33精品文档放心下载二．怎么把JAVASCRIPT嵌入到HTML中34精品文档放心下载怎样放一个JAVASCRIPT到一个HTML页面？34精品文档放心下载把JAVASCRIPT嵌入到HTML的哪个位置35感谢阅读三．JAVASCRIPT的变量及语法37谢谢阅读JAVASCRIPT的变量37谢谢阅读JAVASCRIPT的IF…ELSE表达式37谢谢阅读JAVASCRIPT的SWITCH表达式38谢谢阅读JAVASCRIPT的运算符39感谢阅读运算符39感谢阅读分派符39感谢阅读比较操作符40精品文档放心下载逻辑操作符40感谢阅读JAVASCRIPT的弹出窗口41谢谢阅读提示框41感谢阅读确认框41感谢阅读输入框42感谢阅读JAVASCRIPT的FUNCTIONS（函数）43谢谢阅读怎样定义一个函数：44精品文档放心下载JAVASCRIPT的FOR和WHILE循环44精品文档放心下载for循环：45感谢阅读While循环：45do...while循环：45

JAVASCRIPT循环中的的BREAK和CONTINUE46

Break：46

continue：47

JAVASCRIPT的FOR…IN表达式48

JAVASCRIPT的EVENTS50

onload和onUnload50

onFocus,onBlur和onChange50

onSubmit51

onMouseOverandonMouseOut51感谢阅读四．JAVASCRIPT对象51谢谢阅读JAVASCRIPT几大内置对象51感谢阅读自定义JAVASCRIPT对象52感谢阅读一．什么是DHTML54谢谢阅读二．CSS在DHTML中的定位54谢谢阅读1)POSITION54感谢阅读position:relative54感谢阅读position:absolute55谢谢阅读2)VISIBILITY55感谢阅读visibility:visible55精品文档放心下载visibility:hidden56谢谢阅读3)Z-INDEX56感谢阅读4)FILTERS57精品文档放心下载三．DHTML中DOCUMENT对象的样式57感谢阅读怎样访问一个元素?57谢谢阅读DHTML的EVENTHANDLERS59感谢阅读HTML4.0EVENTHANDLERS60感谢阅读一.HTML入门HTML英语意思是：HypertextMarkedLanguage，即超文本标记语言,是一谢谢阅读HTML编写的超文本文档称为HTML文感谢阅读UNIXWINDOWS1990年以来HTML感谢阅读就一直被用作WorldWideWeb的信息表示语言，用于描述Homepage的格式设感谢阅读计和它和WWW上其它Homepage的连结信息。使用HTML语言描述的文件，需要感谢阅读通过WWW浏览器显示出效果。接下来，我们就结合几个实例来观见一下HTML的全貌，以便于我们首先对精品文档放心下载它有一个整体上的认识，且且体会一下超文本和标记究竟是什么意思。谢谢阅读通过HTML能够表现出丰富多彩的设计风格图片调用：<IMGSRC="文件名">文字格式：<FONTSIZE="+5"COLOR="00FFFF">文字</FONT>感谢阅读通过HTML能够实现页面之间的跳转页面跳转：〈AHREF="文件路径/文件名"></A>谢谢阅读感谢阅读谢谢阅读感谢阅读号来控制输出的效果，这些指令符号用“<标签名字属性>”来表示。谢谢阅读二．HTML的基本结构感谢阅读必要的定义，文档体中才是要显示的各种文档信息。<HTML><HEAD>头部信息</HEAD><BODY>文档主体，正文部分</BODY></HTML>其中<HTML>在最外层，表示这对标记间的内容是HTML文谢谢阅读到一些Hompage省略<HTML>标记，因为.html或.htm文件被Web浏览器默认为精品文档放心下载是HTML文档。<HEAD>感谢阅读信息则可省略此标记。<BODY>标记一般不省略，表示正文内容的开始。感谢阅读下面是一个最基本的超文本文档的源代码：<HTML><HEAD>━┓<TITLE>一个简单的HTML示例</TITLE>┃文件谢谢阅读</HEAD>头━┛<BODY>━┓<CENTER>┃<H3>欢迎光临我的主页</H3>┃<BR>┃<HR>┃文件<FONTSIZE=2>体这是我第一次做主页，无论怎么样，我都会努力做好！┃</FONT>┃</CENTER>┃</BODY>┃━┛</HTML>超文本中的标签“<”“>”括起来的句子，谢谢阅读感谢阅读式及五彩缤纷的画面。1.单标签“单标签精品文档放心下载标记的语法是：<标签名称>最常用的单标签是<BR>,它表示换行。2.双标签“双标签“始标签“尾标签精品文档放心下载须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，精品文档放心下载而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为精品文档放心下载尾标记。这类标记的语法是：<标签>内容</标签>其中“内容”部分就是要被这对标记施加作用的部分。例如你想突出对某谢谢阅读段文字的显示，就将此段文字放在一<EM></EM>标记中：感谢阅读<EM>第一：</EM>3.标签属性许多单标记和双标记的始标记内能够包含一些属性，其语法是：谢谢阅读<标签名字属性1属性2属性3…><HR>表精品文档放心下载示在文档当前位置画一条horizontalline谢谢阅读带一些属性：<HRSIZE=3ALIGN=LEFTWIDTH="75%">精品文档放心下载其中SIZE属性定义线的粗细，属性值取整数，缺为1ALIGN属性谢谢阅读表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH属性定义线的谢谢阅读长度，可取相对值，（由一对""精品文档放心下载值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是"100%"。感谢阅读4.注释在HTML中用<!—内容-->来做注释，注释里面的内容，浏览器不进行解析。精品文档放心下载如：<!--Thisisacomment-->感谢阅读三.页面布局和文字设置3．1标题一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签感谢阅读<Hn>,其中n为标题的等HTMLn感谢阅读大，以下列出所有等级的标题：〈H1>…</H1>第一级标题〈H2>…</H2>第二级标题〈H3>…</H3>第三级标题〈H4>…</H4>第四级标题〈H5>…</H5>第五级标题〈H6>…</H6>第六级标题请见下面的例子：<html><head><title>标题示例</title></head><body>这是一行普通文字<P><H1>一级标题</H1><H2>二级标题</H2><H3>三级标题</H3><H4>四级标题</H4><H5>五级标题</H5><H6>六级标题</H6></body></html>3．2换行在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会精品文档放心下载被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器精品文档放心下载谢谢阅读加上<br>标签。请见下面的例子：<html><head><title>无换行示例</title></head><body>登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。精品文档放心下载</body></html><html><head><title>换行示例</title></head><body>登鹳雀楼<br>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。谢谢阅读</body></html>3．3段落标签<P>为了排列的整齐、清晰，文字段落之间，我们常用<P></P>来做标记。文件谢谢阅读段落的开始由<P>来标记，段落的结束由</P>来标记，</P>是能够省略的，因为精品文档放心下载下一个<P>的开始就意味着上一个<P>的结束。<P>标签仍有一个属性ALING，它用来指名字符显示时的对齐方式，一般值谢谢阅读有CENTER、LEFT、RIGHT三种。下面，我们用俩个例子来说明这个标签的用法。<html><head><title>段落标签</title></head><body><PALIGN=CENTER>浣溪沙<P><P>无可奈何花感谢阅读落去，似曾相识燕归来。小园香径几徘徊。</P></body></html><html><head><title>段落标签</title></head><body>登鹳雀楼<P>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。感谢阅读</P></body></html>3．4字体大小的设置提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能精品文档放心下载SIZE属性的有效值范围为1－73SIZE精品文档放心下载属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。感谢阅读请见示例：<html><head><title>字号大小</title></head><body><fontsize=7>这是size=7的字体</font><P>感谢阅读<fontsize=6>这是size=6的字体</font><P>感谢阅读<fontsize=5>这是size=5的字体</font><P>谢谢阅读<fontsize=4>这是size=4的字体</font><P>感谢阅读<fontsize=3>这是size=3的字体</font><P>谢谢阅读<fontsize=2>这是size=2的字体</font><P>谢谢阅读<fontsize=1>这是size=1的字体</font><P>感谢阅读<fontsize=-1>这是size=-1的字体</font><P>感谢阅读</body></html>效果如下：3．5文字的字体和样式为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签精品文档放心下载产生这些效果，现将常用的标签列举如下：<B></B>粗体HTML语言<I></I>斜体HTML语言<U></U>加下划线HTML语言<TT><TT>打字机字体HTML语言<BIG></BIG>大型字体HTML语言<SMALL></SMALL>小型字体HTML语言精品文档放心下载<BLINK></BLINK>闪烁效果HTML语言谢谢阅读<EM></EM>表示强调，一般为斜体HTML语言感谢阅读<STRONG></STRONG>表示特别强调，一般为粗体HTML语言精品文档放心下载<CITE></CITE>用于引证、举例，一般为斜体HTML语言谢谢阅读当下我们用一个实例来见见效果：<html><head><title>字体样式</title></head><body><B>黑体字</B><P><I>斜体字</I><P><U>加下划线</U><P><BIG>大型字体</BIG><P><SMALL>小型字体</SMALL><P><BLINK>闪烁效果</BLINK><P><EM>Welcome</EM><P><STRONG>Welcome</STRONG>谢谢阅读<P><CITE>Welcom</CITE></P>感谢阅读</body></html>效果如下：3．5文字的颜色一个好的background能够让你web页面变的很棒.感谢阅读1)Bgcolor<bodybgcolor="rgb(0,0,0)">精品文档放心下载<bodybgcolor="black"><bodybgcolor="transparent">精品文档放心下载2)Background<bodybackground="clouds.gif">感谢阅读<bodybackground="test.gif">谢谢阅读3)Colors常用的一些颜色的值如下:3．6位置控制通过ALIGN属性能够选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表精品文档放心下载示向右对齐，CENTER表示居中。基本语法如下：<DIVALIGN=#>#＝left／right／center谢谢阅读例：<html><head><title>位置控制</title></head><body><divalign=left>你好!<br><divalign=right>你好!<br><divalign=center>你好!<br></body></html>3．7html的Character的实体有的标签，比如说“<”，在HTML中有特殊的含义,所以不能在网页上谢谢阅读直接书写出来，这样我们就要用到转义。下面是html中常用的一些符号的转义。ResultDescriptionEntityNameEntityNumber谢谢阅读non-breakingspace  谢谢阅读<lessthan<<>greaterthan>>&ersand&&"quotationmark""精品文档放心下载'apostrophe''四．TABLE表格4.1表格的基本结构<table>...</table>定义表格<caption>...</caption>定义标题感谢阅读<tr>定义表行<th>定义表头<td>定义表元(表格的具体数据)以下是一个简单的例子：<tableborder=1><tr><th>姓名</th><th>性别</th><th>年龄</th>精品文档放心下载<tr><td>王林</td><td>男</td><td>25</td>谢谢阅读</table>4.2表格的标题ALIGN精品文档放心下载下面为表格标题位置的设置格式。设置标题位于表格上方：<captionalign=top>...</caption>谢谢阅读设置标题位于表格下方：<captionalign=bottom>...</caption>精品文档放心下载<tableborder><captionalign=top>旅游日程</caption>感谢阅读<tr><th>日期</th><td>9-11</td><td>11-13</td><td>13-14</td>感谢阅读<tr><th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州</td>精品文档放心下载</table>显示结果：旅游日程日期9-1111-1313-14旅游地点青岛黄山杭州<tableborder><captionalign=bottom>旅游日程</caption>精品文档放心下载<tr><th>日期</th><td>9-11</td><td>11-13</td><td>13-14</td>感谢阅读<tr><th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州</td>谢谢阅读</table>日期9-1111-1313-14旅游地点青岛黄山杭州旅游日程4.3表格的尺寸设置表格的大小一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，感谢阅读如果我们要直接固定表格的大小，能够使用下列方式：<tablewidth=n1height=n2>精品文档放心下载width和height属性分别指定表格一个固定的宽度和长度，n1和n2能够用谢谢阅读像素来表示，也能够用百分比（和整个屏幕相比的大小比例）来表示。感谢阅读下表是一个长为200像素，宽为100像素的表格。<tablewidth="200"精品文档放心下载height="100">下表是一个长为屏幕的20%，宽为屏幕的10%的表格。<tablewidth=20%谢谢阅读height=10%>边框尺寸设置边框是用borderborder感谢阅读设成不同的值，有不同的效果。如：<tableborder=10width=250>感谢阅读<caption>定货单</caption><tr><th>苹果</th><th>香蕉</th><th>葡萄</th>感谢阅读<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>精品文档放心下载</table>显示结果为：定货单苹果香蕉葡萄200公斤200公斤100公斤<tableborder=1width="250">谢谢阅读<caption>定货单</caption><tr><th>苹果</th><th>香蕉</th><th>葡萄</th>谢谢阅读<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>精品文档放心下载</table>显示结果：定货单苹果香蕉葡萄200公斤200公斤100公斤<tableborder=0width="250">谢谢阅读<caption>定货单</caption><tr><th>苹果</th><th>香蕉</th><th>葡萄</th>精品文档放心下载<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>精品文档放心下载</table>显示结果：定货单苹果香蕉葡萄200公斤200公斤100公斤格间线宽度格和格之间的线为格间线，它的宽度能够使用<TABLE>中的CELLSPACING属感谢阅读性加以调节。格式是：<TABLECELLSPACING=#>#表示要取用的像素值谢谢阅读例：<tableborder=3cellspacing=5>感谢阅读<caption>定货单</caption><tr><th>苹果</th><th>香蕉</th><th>葡萄</th>精品文档放心下载<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>谢谢阅读</table>显示结果为：定货单苹果香蕉葡萄200公斤200公斤100公斤内容和格线之间的宽度我们仍能够在<TABLE>中设置CELLPADDING属性，用来规定内容和格线之间谢谢阅读的宽度。格式为：<TABLECELLPADDING=#>#表示要取用的像素值精品文档放心下载例：<tableborder=3cellpadding=5>精品文档放心下载<caption>定货单</caption><tr><th>苹果</th><th>香蕉</th><th>葡萄</th>谢谢阅读<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>谢谢阅读</table>显示结果为：定货单苹果香蕉葡萄200公斤200公斤100公斤4.4表格内文字的对齐/布局感谢阅读是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左谢谢阅读右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；精品文档放心下载而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下感谢阅读齐(bottom)和基线(baseline)。<tralign=#><thalign=#>#=left,center,right感谢阅读<tdalign=#><trvalign=#><thvalign=#>#=top，middle，bottom，baseline谢谢阅读<tdvalign=#>左右排列<tableborder=1width="200">感谢阅读<tr><th>居左</th><th>居中</th><th>居右</th>感谢阅读<tr><tdalign=left>A</td><tdalign=center>B</td><td感谢阅读align=right>C</td></table>显示结果：居左居中居右ABC上下排列<tableborder=1width="250"heith="100">精品文档放心下载<tr><th>上齐</th><th>居中</th><th>下齐</th><th>基线</th>谢谢阅读<tr><tdvalign=top>A</td><tdvalign=middle>B</td><td感谢阅读valign=bottom>C</td><tdvalign=baseline>D</td>谢谢阅读</table>显示结果：4.5跨多行、多列的表元<TH>或<TD>中加入ROWSPAN或COLSPAN精品文档放心下载属性，这俩个属性的值，表明了表元中要跨越的行或列的个数。谢谢阅读跨多列的表元<thcolspan=#><tdcolspan=#>谢谢阅读colspancolspan=2表示这一格的宽度为俩个列的宽精品文档放心下载度。跨多行的表元<throwspan=#><tdrowspan=#>感谢阅读rowspanrowspan=2就表示这一格跨谢谢阅读越表格俩个行的高度。跨多列的表元<html><head><title>表格TABLE</title></head></html><tableborder><tr><thcolspan=3>值班人员</th>谢谢阅读<tr><th>星期一</th><th>星期二</th><th>星期三</th>谢谢阅读<tr><td>李强</td><td>张明</td><td>王平</td>精品文档放心下载</table>跨多行的表元<html><head><title>表格TABLE</title></head></html><tableborder><tr><throwspan=2>值班人员</th>精品文档放心下载<th>星期一</th><th>星期二</th><th>星期三</th></tr>精品文档放心下载<tr><td>李强</td><td>张明</td><td>王平</td></tr>谢谢阅读</table>4.6表格的颜色感谢阅读背景色。表格的背景色彩<tablebgcolor=#>行的背景色彩<trbgcolor=#>表元的背景色彩<thbgcolor=#>或<tdbgcolor=#>感谢阅读#=rrggbb16进制RGB数码,或者是下列预定义色彩名称：感谢阅读Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,精品文档放心下载,Green,Purple,Silver,Yellow,Aqua感谢阅读例：<html><head><title><title></head><tableborder=2bgcolor=aqua>感谢阅读<tr><thbgcolor=ffaa00>彩电</th><thbgcolor=Red>冰箱</th><throwspan=2>感谢阅读家电</th><trbgcolor=yellow><td>A</td><td>B</td></table></body></html>五．html的Forms和InputHTML<form>标签定义和用法form元素可为用户输入创建表单。表单可包含文本域，复选框，单选按钮等谢谢阅读等。表单用于向指定的URL传递用户数据。HTML<input>标签定义和用法<input>精品文档放心下载表单控件，能够使用<input>标签来进行定义，其中包括文本字段、多选列感谢阅读表、可单击的图像和提交按钮等。1)文本区域<form>名字:<inputtype="text"name="firstname">谢谢阅读<br>密码:<inputtype="password"name="password”>感谢阅读</form>2)单选按钮<form><inputtype="radio"name="sex"value="male">Male谢谢阅读<br><inputtype="radio"name="sex"value="female">Female精品文档放心下载</form>3)多选按钮<form>Ihaveabike:<inputtype="checkbox"name="vehicle"value="Bike"/>感谢阅读<br/>Ihaveacar:<inputtype="checkbox"name="vehicle"value="Car"/>感谢阅读<br/>Ihaveanairplane:<inputtype="checkbox"name="vehicle"value="Airplane"/>谢谢阅读</form>4)提交按钮<formname="input"action="html_form_action.asp"method="get">精品文档放心下载Username:<inputtype="text"name="user">谢谢阅读<inputtype="submit"value="Submit">谢谢阅读</form>六．文件之间的链接精品文档放心下载其他的页面、图象或者服务器。一个链接的基本格式如下：感谢阅读<AHREF="资源地址">链接文字</A>·标签<A>表示一个链接的开始，</A>表示链接的结束；感谢阅读·属性“HREF”定义了这个链接所指的地方；·通过点击“链接文字”能够到达指定的文件。<AHREF=url>茁壮网络</A>链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，谢谢阅读感谢阅读url是#,那么就是链接本身。本地链接：**************对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS精品文档放心下载系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。精品文档放心下载例如：我们当下正在浏览的这一页的绝对路径是：c:\study\HTML教程谢谢阅读\link01.htm“HTML教程link01.htm感谢阅读如果是浏览HTML教程之外的一页，该文件路径要以俩个圆点(..)来精品文档放心下载表示上一层目录：../../internet/IP地址当下我们把这几种路径的表示方法写入链接中：以绝对路径表示：<AHREF="/c:\study\HTML教程\link01.htm">文件的链感谢阅读接</A>以相对路径表示：<AHREF="link01.htm">文件的链接</A>感谢阅读链接上一目录中的文件：<AHREF="../../Internet/IP地址">IP地址</A>感谢阅读感谢阅读精品文档放心下载带有C:\精品文档放心下载新修改文件资源路径的麻烦。URL链接************谢谢阅读哪一种URLURL谢谢阅读界沟通来存取信息。URL链接的形式是：协议名：//主机.域名／路径／文件名谢谢阅读其中协议包括：file本地系统文件httpWWW服务器ftpftp服务器telnet基于TELNET的协议mailto电子邮件newsUsenet新闻组gopherGOPHER服务器waisWAIS服务器例如，我们这样来表达一个URL地址：http:///telnet://写在HTML文件中，链接其他主机上的文件时，格式如下：精品文档放心下载<AHREF="http:///default.htm">中国山西之窗</A>感谢阅读<AHREF="telnet://">西北网络中心兵马俑站</A>精品文档放心下载七．插入图象精品文档放心下载谢谢阅读在一个页面中如何插入图象。基本格式超文本支持的图象格式一般有GIF、JPEG、XBitmap(XBM)等，所以我们对感谢阅读GIF精品文档放心下载够在浏览器中见到较好的表现效果。插入图象的标签是<IMG>，其格式为：<IMGSRC="图形文件地址">SRC谢谢阅读感谢阅读“文件的链接”中URL地址表示方法。例：<IMGSRC="images/ball.gif">感谢阅读IMG仍有俩个属性是HEIGHT和WIDTH感谢阅读属性，能够改变图形的大小，如果没有设置，图形按原大显示：精品文档放心下载例：<IMGSRC="flowers0.jpg"width="200"谢谢阅读<IMGSRC="flowers0.jpg">heigth="100">图形按钮：感谢阅读我们只要调用一下前面的知识就能够完成了。其基本格式如下：精品文档放心下载<AHREF="资源地址"><IMGSRC="图形文件地址"></A>感谢阅读例：<AHREF="index.htm"><IMASRC="html.gif"></A>感谢阅读八．多窗口页面（Frames）iframeiframe:放在body标签里<body><iframesrc="default.htm"></iframe>精品文档放心下载<p>Someolderbrowsersdon'tsupportiframes.</p>精品文档放心下载<p>Iftheydon't,theiframewillnotbevisible.</p>精品文档放心下载</body>九．marquee属性说明基本语法<marquee>...</marquee>移动属性的设置,这种移动不仅仅局限于文字，也能够应用于图片，表精品文档放心下载格等等方向<direction=#>#=left,right,up,down谢谢阅读<marqueedirection=left>从右向左移！</marquee>精品文档放心下载方式<bihavior=#>#=scroll,slide,alternate精品文档放心下载<marqueebehavior=scroll>一圈一圈绕着走！</marquee>感谢阅读<marqueebehavior=slide>只走一次就歇了！</marquee>精品文档放心下载<marqueebehavior=alternate>来回走</marquee>感谢阅读循环<loop=#>#=次数；若未指定则循环不止(infinite)<marqueeloop=3width=50%behavior=scroll>只走3谢谢阅读趟</marquee><P><marqueeloop=3width=50%behavior=slide>只走3趟</marquee>谢谢阅读<marqueeloop=3width=50%behavior=alternate>只走3趟！感谢阅读</marquee>速度<scrollamount=#><marqueescrollamount=20>啦啦啦，我走得好快谢谢阅读哟！</marquee>延时<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦精品文档放心下载啦啦，我走一步，停一停！</marquee>外观(Layout)设置对齐方式(Align)<align=#>#=top,middle,bottom<fontsize=6>感谢阅读<marqueealign=#width=400>啦啦啦，我会移动耶！</marquee>精品文档放心下载</font>底色<bgcolor=#>#=rrggbb16进制数码，或者是下列预定义色彩：精品文档放心下载Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,谢谢阅读Fuchsia,White,Green,Purple,Silver,Yellow,Aqua<marquee精品文档放心下载bgcolor=aaaaee>颜色！</marquee>谢谢阅读面积<height=#width=#><marqueeheight=40width=50%bgcolor=aaeea精品文档放心下载a>面积！</marquee>第二部分Javascript基础一．什么是javascriptJavaScript是一种基于WEB浏览器的脚本语言!精品文档放心下载JavaScipt是用来改善WEB页的设计,验证表单,检测浏览器,建立COOKIE,和谢谢阅读更多的一些功能。Javascript在互连网十分流行，且且能工作在大部分的浏览器上，如IE，谢谢阅读Mozzila，Firefox，Netscape，和Opera等。感谢阅读JavaScript简述1)JavaScript为HTML页面增加交互性的设计。精品文档放心下载2)JavaScript是一种脚本语言3)脚本语言是一种轻量级的设计语言4)JavaScript由可执行的电脑编码行组成。谢谢阅读5)Javascript通常是直接嵌入HTML页面的。感谢阅读6)Javascript是一种解释型的语言（不需要预编译的脚本）感谢阅读7)任何人都能够使用Javascript而不需要购买许可证。感谢阅读Javascript能够做什么？1)Javascript给HTML设计者一个设计工具，HTML感谢阅读是Javascript是一非常简单的脚本语言，大多数人都能写一些代码到感谢阅读他们的HTML页内。2)Javascript能将动态的文本放入到一个HTML页内，如：谢谢阅读document.write("<h1>"+name+"</h1>")能将name变量写入到谢谢阅读HTML页面。3)Javascript能被事件触发，Javascript能设置当一些事件发生时被触发，精品文档放心下载如当一个页面在完成加载时或当一个用户点击了一个页面的元素时。精品文档放心下载4)Javascript能读且能改变一个HTML元素的内容。感谢阅读5)Javascript能用来验证数据，Javascript能用来验证当表单在提交到服精品文档放心下载务器之前时的数据合法性。它节约了服务器的额外资源开支。感谢阅读6)Javascript能用来检测访问者的浏览器，且为访问者的浏览器加载另一精品文档放心下载个适合其浏览器的页面。7)Javascript能用来创建COOKIE，它能用来从访问者的电视上贮存或找回感谢阅读一些信息。二．怎么把javascript嵌入到html中精品文档放心下载HTML的<script>标签是用来插入Javascript到HTML页面的。谢谢阅读怎样放一个Javascript到一个HTML页面？精品文档放心下载<body><scripttype="text/javascript">谢谢阅读document.write("HelloWorld!")谢谢阅读</script></body></html>关键字document.write是一个标准的Javascript输出到页面的命令。精品文档放心下载把javascript嵌入到html的哪个位置感谢阅读Javascript几乎能够放在html中的任何位置,例如能够放入head中,也能够放在body谢谢阅读中.其执行的顺序一般是按页面的先后顺序来执行的.<html><head><scripttype="text/javascript">精品文档放心下载</script></head><body><scripttype="text/javascript">精品文档放心下载</script></body>通过下面的例子,会加深你对页面加载的先后顺序的了解.感谢阅读<html><head><title>NewDocument</title>谢谢阅读<scriptlanguage="JavaScript"type="text/javascript"精品文档放心下载defer="defer">alert('defer里的script内容')</script><scriptlanguage='javascript'type='text/javascript'>精品文档放心下载alert('普通的script');</script></head><bodyonload="alert('onload里的script')";>精品文档放心下载＃＃＃＃＃＃＃＃＃＃＃＃＃<br><scriptlanguage='javascript'type='text/javascript'>精品文档放心下载alert('页面的script');</script>◎◎◎◎◎◎◎◎◎◎◎◎◎</body></html>使用外部的Javascript。有时你可能希望运行一些相同的Javascript感谢阅读上相同的代码。如这个例子，你能够写一个Javascript的外部文件，保存它为“.js”的后缀精品文档放心下载<html><head><scriptsrc="xxx.js"></script>精品文档放心下载</head><body></body></html>三．javascript的变量及语法javascript的变量精品文档放心下载名称来查见或改变它的值。变量命名规则：变量名对大小写是敏感的。变量名必须以下划线或者英文字母开头。定义一个变量你能用“var”声明一个变量varstrname=值也能够不用var而直接来声明一个变量：strname=值javascript的if…else表达式精品文档放心下载的代码内来为你做这些事。在Javascript里我们能用如下的条件声明：if声明–如果你要执行的代码仅仅在条件为true时执行能够用它来精品文档放心下载声明。if...else声明–如果你要执行的代码的条件为true或其它值时能够感谢阅读用它来声明。if...elseifelse声明-如果你想要在许多代码块内选择一个被精品文档放心下载执行，能够使用这个声明switch声明–这种声明和上面的ifelseifelse相同，只是相对来感谢阅读说代码更易读。javascript的switch表达式如果你在许多代码块内需要选择一个被执行，你应该用switch声明，而不感谢阅读是if...elseif...else语法switch(n){case1:executecodeblock1breakcase2:executecodeblock2breakdefault:codetobeexecutedifnis精品文档放心下载differentfromallcase}javascript的运算符运算符符号说明例子返回值+Additionx=24y=2x+y-Subtractionx=53y=2x-y*Multiplicationx=520y=4x*y/Division15/535/22.5%Modulus(division5%21remainder)10%8210%20++Incrementx=5x=6x++--Decrementx=5x=4x--分派符符号例子等同和=x=yx=y+=x+=yx=x+y-=x-=yx=x-y*=x*=yx=x*y/=x/=yx=x/y%=x%=yx=x%y比较操作符符号说明例子==相等比较5==8返回假===比较操作（不强制转换值的类型）x=5y="5"x==y返回真x===y返回假!=不等于比较5!=8返回真>大于比较5>8返回假<小于比较5<8返回真>=大于等于比较5>=8返回假<=小于等于比较5<=8返回真逻辑操作符符号说明例子&&且且x=6y=3(x<10&&y>1)返回真||或者x=6y=3(x==5||y==5)返回假!取反x=6y=3!(x==y)返回真javascript的弹出窗口InJavaScriptwecancreatethreekindsofpopupboxes:Alert精品文档放心下载box,Confirmbox,andPromptbox.谢谢阅读在Javascript我们能创建三种类型的弹出框：提示框，确认框和输入框谢谢阅读提示框提示框通常用来给用户提示一些你想提示的信息当提示框弹出时，用户需要去点击OK按钮。语法:alert("sometext")确认框如果你想要给用户一个选择，那么能够用确认框来给用户一个确认。谢谢阅读精品文档放心下载认按钮，由该BOX返回真值，如果用户点击取消按钮，由BOX返回假值。精品文档放心下载语法:confirm("sometext")输入框输入框通常用来在当你希望用户输入一些值到页面之前使用。谢谢阅读谢谢阅读是否需要给Javascript接收。如果用户点击确认，则输入框返回输入的值感谢阅读给Javascript，否则如果用户点击取消按钮，则该输入框返回null值。感谢阅读语法:prompt("提示文字","框中的默认值")示例：<html><head><title>test</title><script>varage=prompt("请输入你的年龄","请在这里输入");谢谢阅读age=Number(age);document.write("你今年的岁数是<fontcolor='red'>"+age+"</font>,目前你正感谢阅读处于<fontcolor='red'>")if(age>=0&&age<14)document.write("儿童");感谢阅读elseif(age>=14&&age<24)document.write("青少年");谢谢阅读elseif(age>=24&&age<40)document.write("青年");谢谢阅读elseif(age>=40&&age<60)document.write("中年");感谢阅读elseif(age>60)document.write("老年");精品文档放心下载elsealert("年龄必须为整数");//elsedocument.write("NaN");感谢阅读document.write("</font>");精品文档放心下载</script></head><body></body></html>javascript的Functions（函数）感谢阅读保持浏览器从一加载完毕一个页面就执行一个脚本，你能够将你的脚本写作一个谢谢阅读function函数。你能够调用页面内任意地方的函数（或页面内嵌入包含的外部JS文件内的函数）谢谢阅读函数是定义在页面的开始处的，也就是<head>区域内精品文档放心下载<html><head><scripttype="text/javascript">谢谢阅读functiondisplaymessage(){alert("HelloWorld!")}</script></head><body><form><inputtype="button"value="Clickme!"onclick="displaymessage()">精品文档放心下载</form></body></html>怎样定义一个函数：创建一个函数的语法是：functionfunctionname(var1,var2,...,varX)精品文档放心下载{somecode}functionfunctionname(){somecode}javascript的for和while循环谢谢阅读循环在Javascript中用来执行同一个代码指定的次数或一直执行到条件为谢谢阅读真。谢谢阅读用循环Javascript内有俩种不同各类的循环：for–循环代码块指定的次数while–当条件为真时循环代码块for循环：for循环是当你知道需要具体的执行几次该代码块时使用的。谢谢阅读语法：for(var=startvalue;var<=endvalue;var=var+增量)谢谢阅读{codetobeexecuted}While循环：While循环：如果你希需循环执行代码块且且需要在指定条件是真时执行，谢谢阅读那么能够使用While循环。语法：while(var<=endvalue){codetobeexecuted}do...while循环：do...while循环是while循环的变体，它总会执行代码块一次，然后当条件是真时再感谢阅读重复循环，这个循环至少会有一次被执行，即使条件是错误的，因为代码在执行完一谢谢阅读次后再进行条件的测试。语法：do{codetobeexecuted}while(var<=endvalue)javascript循环中的的break和continue精品文档放心下载这里有俩种声明能够用在循环里面：break和continue感谢阅读Break：Break命令将跳出循环继续执行紧跟随循环的下面的其它代码。感谢阅读例子：<html><body><scripttype="text/javascript">感谢阅读vari=0for(i=0;i<=10;i++){if(i==3){break}document.write("Thenumberis"+i);谢谢阅读document.write("<br/>");}</script></body></html>结果：Thenumberis0Thenumberis1Thenumberis2continue：continue命令将跳过当前循环且继续下一个值的循环（不跳出循环体）精品文档放心下载例子：<html><body><scripttype="text/javascript">精品文档放心下载vari=0for(i=0;i<=10;i++){if(i==3){continue};document.write("Thenumberis"+i);谢谢阅读document.write("<br/>");}</script></body></html>结果：Thenumberis0Thenumberis1Thenumberis2Thenumberis4Thenumberis5Thenumberis6Thenumberis7Thenumberis8Thenumberis9Thenumberis10javascript的for…in表达式for...in谢谢阅读取出该对象或数组的所有元素语法：for(variableinobject){codetobeexecuted}示例：用for...in循环一个数组：<html><body><scripttype="text/javascript">精品文档放心下载varxvarmycars=newArray()mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"for(xinmycars){document.write(mycars[x]+"<br/>")谢谢阅读}</script></body></html>javascript的Events通过使用Javascript我们有能力去创建动态的WEB感谢阅读能够通知（触发）Javascript产生动作。每个元素在网页上都有可能触发Javascript作用的某些事件，例如，我们能够用谢谢阅读onClick事件为按钮元素增加一个当用户点击按钮时触发的事件，事件定义在HTML元谢谢阅读素的标签内。事件的例子:一个鼠标点击时一个网页或一个图片加载时鼠标在网页中移动到一个热点上时在页面中选择一个输入框时提交一个表单时击键盘按键时onload和onUnload当用户进入一个页面或离开一个页面时触发该事件。onFocus,onBlur和onChange谢谢阅读onFocus,onBlur和onChange事件通常用联合用于表单域内元素的事件触发。感谢阅读onSubmitonSubmittrue谢谢阅读不能提交。onMouseOverandonMouseOut谢谢阅读onMouseover和onMouseout通常用来创建动态的按钮（基于我们的浏览器）感谢阅读四．JavaScript对象1.JavaScript是基于对象的语言，它允许你定义自己的对象和创建自己的变谢谢阅读量类型。2.对象是一种特殊的数据，它有自己的属性和方法。3.对象的属性：下面的例子使用了String对象的length属性来返回字符串的长度：精品文档放心下载<scripttype="text/javascript">感谢阅读vartxt="HelloWorld!"document.write(txt.length)感谢阅读</script>之上将输出值：124.对象的方法能够为对象完成一个动作：下面的例子使用了String对象方法让字符串变为大写：：精品文档放心下载<scripttype="text/javascript">感谢阅读vartxt="HelloWorld!"document.write(txt.toUpperCase())感谢阅读</script>之上将输出值：HELLOWORLD!Javascript几大内置对象1.String--字符串对象2.Boolean--布尔对象3.Number--数字对象4.Array--数组对象5.Date--日期对象6.Math--数学对象7.RegExp--正则表达式对象8.用户自定义自定义Javascript对象1.定义一个对象–直接创建(变量型)对象且加入属性：•varobj=newObject或者varobj={}谢谢阅读•obj.firstName=“John”;•obj.lastName=“Doe”;•obj.age=50;•obj.eyeColor=“blue”;–向对象内增加方法：•obj.eat=eat;或者obj.eat=function(){}感谢阅读2.继承一个对象–函数型对象：functionobj(firstName,lastName,age,eyeColor)精品文档放心下载{this.firstName=firstName;谢谢阅读this.lastName=lastName;this.age=age;this.eyeColor=eyeColor;}totype.eat=function(){}感谢阅读varmy=ne

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论