Web应用开发-网页设计基础课件

上传人：l*** IP属地：贵州上传时间：2022-12-19 格式：PPT 页数：272 大小：4.77MB 积分：30 举报 版权申诉

已阅读5页，还剩267页未读，继续免费阅读

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

文档简介

Web应用开发——网页设计基础Web应用开发——网页设计基础1第2章网页设计基础2.1HTML与XML2.2利用CSS布局网页2.3JavaScript客户端编程

第2章网页设计基础2.1HTML与XML22.1HTML与XML超文本标记语言（HyperTextMarkupLanguage，简称HTML）是Web页面的标记性语言，通过一定的格式标记文本及图像等元素，使之在浏览器中显示出不同内容和风格的网页。2.1HTML与XML超文本标记语言（Hyper32.1.1HTML文档的基本结构HTML文档拥有一种“嵌套”结构4html标签定义一个网页head标签定义网页的头部body标签定义网页的主体p标签启动一个段落title标签定义网页的标题2.1.1HTML文档的基本结构HTML文档拥有一种“嵌4HTML文档的基本结构5HTML文档的基本结构55页面标记文字和段落标记超链接标记列表标记表格标记表单标记2.1.2HTML文档的主要标记页面标记2.1.2HTML文档的主要标记6（1）页面标记<HTML><HEAD>

<title>...</title><link>...</link> <meta>...</meta> <script>...</script></HEAD><BODYbackground=#bgcolor=#text=#link=#alink=#vlink=#>......</BODY></HTML> （1）页面标记<HTML>7背景色彩和文字色彩<bodybgcolor=#text=#link=#alink=#vlink=#>bgcolor---背景色彩text---非可链接文字的色彩link---可链接文字的色彩alink---正被点击的可链接文字的色彩vlink---已经点击(访问)过的可链接文字的色彩#=rrggbb色彩是用16进制的红－绿－蓝(red-green-blue,RGB)值来表示。

16进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.背景色彩和文字色彩8（2）文字和段落标记标题字体

＜h#＞...＜/h#＞

HTMLheadingsaredefinedwiththe<h1>to<h6>tags.#=1~6；h1为最大字，h6为最小字字体标记

＜font＞...＜/font＞

(1)字体大小＜fontsize=#＞...＜/font＞

(2)文字颜色＜fontcolor=#rrggbb＞...＜/font＞

(3)粗体字＜b＞...＜/b＞(4)斜体字＜i＞...＜/i＞

（2）文字和段落标记标题字体＜h#＞...＜/h#＞9颜色名称和对应的十六进制数码Black="#000000"Green="#008000"Silver="#C0C0C0"Lime="#00FF00"Gray="#808080"Olive="#808000"White="#FFFFFF"Yellow="#FFFF00"Maroon="#800000"Navy="#000080"Red="#FF0000"Blue="#0000FF"Purple="#800080"Teal="#008080"Fuchsia="#FF00FF"Aqua="#00FFFF"颜色名称和对应的十六进制数码Green="#0010给文本设置一些特殊格式，如粗体、斜体、下划线、上下标等。

（3）字体样式标记物理样式标记

属性说明属性说明<B>…</B>黑体字<SUP>…</SUP>上标<I>…</I>斜体字<SUB>…</SUB>下标<U>…</U>加下划线<SMALL>…</SMALL>小字体<S>…</S>加删除线<BIG>…</BIG>大字体出逻辑样式标记

属性说明<EM>…</EM>输出需要强调的文本（通常是斜体加黑体）<STRONG>…</STRONG>输出加重文本（通常也是斜体加黑体）<CITF>…</CITF>输出引用方式的字体，通常是斜体<DEL>…</DEL>为文本加上删除线给文本设置一些特殊格式，如粗体、斜体、下划线、上下标等。（11（4）文字布局分段和换行标记

<p>

段落(可以看作是空行)

<br>换行例如：你好吗？<p>很好。你好吗？<br>很好。文字的对齐(Alignment)

<palign=#>...</p>

<center>...</center>#=left,center,right

（4）文字布局分段和换行标记12DIV标记

DIV标记用于为文档分节，以便为文档的不同部分应用不同的段落格式，其标记为<DIV>和</DIV>。单独的DIV标记不能完成任何工作，必须与align属性联合使用。位于DIV标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。<DIValign=left|center|right>文本或图像</DIV>

水平线标记

水平线标记<hr>在网页中添加一条水平线，将不同的信息分开。<hralign=对齐方式color=颜色size=粗细width=长度noshade>DIV标记DIV标记用于为文档分节，以便为文档13内部链接

<ahref=”1.htm”>请单击查看1.htm中的内容</a>

外部链接

<ahref="/">链接到主页</a><ahref="telnet://">远程登录</a>

书签链接

（1）在同一页面中，要使用书签名：<ahref="#书签名">超链接标题名称</a>（2）在不同页面之间，要使用链接的URL地址：<ahref="URL地址#书签名">超链接标题名称</a>(5)超链接标记(Link)(5)超链接标记(Link)14（6）列表标记（ListTags）无序列表无序列表使用的一对标签是<ul></ul>，每一个列表项前使用<li>。其结构如下：<ultype=符号类型>

<li>第一项

<li>第二项

<li>第三项

</ul><ul>

<li>Today

<li>Tommorow</ul>TodayTommorow

（6）列表标记（ListTags）无序列表无序列表使用的一15有序列表有序列表使用的一对标签是<ol></ol>，每一个列表项前使用<li>。其结构如下所示：

<oltype=符号类型start=起始编号>

<li>第一项

<li>第二项

<li>第三项

</ol>有序列表的type属性取值取值说

明type=1列表项用数字编号（1,2,3...），默认值type=A列表项用大写字母编号（A,B,C...）type=a列表项用小写字母编号（a,b,c...）type=I列表项用大写罗马数字编号（Ⅰ,Ⅱ,Ⅲ...）type=i列表项用小写罗马数字编号（i,ii,iii...）有序列表有序列表使用的一对标签是<ol></ol>，每一个列16定义列表(Definitionlists)定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。列表项使用<DT>标明，说明性文字使用<DD>表示。

<DL>

<DT>第一项<DD>叙述第一项的定义

<DT>第二项<DD>叙述第二项的定义

<DT>第三项<DD>叙述第三项的定义

</DL>定义列表(Definitionlists)定义性列表可以17例2-1列表标记的使用示例

<html><head><title>列表标记示例</title></head><body><oltype=1><li><u>无序列表</u><ultype=circle> <li>Photoshop <li>Illustrator <li>CorelDraw</ul><li><u>有序列表</u><oltype=a> <li>Photoshop <li>Illustrator <li>CorelDraw</ol><li><u>定义列表</u><dl><dt>Photoshop<dd>Adobe公司的图像处理软件

<dt>Illustrator<dd>Adobe公司的矢量绘图软件

<dt>CorelDraw<dd>Corel公司的图形图像软件

</dl></ol><body></html>例2-1列表标记的使用示例<html>18（7）表格标记（TableTags）

表格的基本语法

定义表格<table>...</table>

定义表格的标题<caption>…</caption>

定义表格行<tr>...</tr>定义表头<th>...</th>定义表的单元格<td>...</td>

设定表格的属性【1】设定边框的宽度＜tableborder=#＞

【2】设定边框的颜色＜tablebordercolor=#rrggbb＞【3】调整表格宽度，高度＜tablewidth=#height=#＞

【4】设定表格的背景色＜tablebgcolor=#rrggbb＞（7）表格标记（TableTags）表格的基本语法19一个最简单的带边框的表格<tableborder><tr><th>Food</th><th>Drink</th><th>Sweet</th></tr><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>X</td><td>Y</td><td>Z</td></tr></table>

FoodDrinkSweetABCXYZ一个最简单的带边框的表格FoodDrinkSweetABC20表格---跨多行、多列的表元(TableSpan)（1）跨多列的表元

<thcolspan=#> <tableborder> <tr><thcolspan=3>MorningMenu</th> <tr><th>Food</th><th>Drink</th><th>Sweet</th> <tr><td>A</td><td>B</td><td>C</td> </table>表格---跨多行、多列的表元(TableSpan)21（2）跨多行的表元

<throwspan=#>

<tableborder> <tr><throwspan=3>MorningMenu</th><th>Food</th> <td>A</td></tr><tr><th>Drink</th><td>B</td></tr> <tr><th>Sweet</th><td>C</td></tr> </table>（2）跨多行的表元<throwspan=#>22（9）表单标记（FormTags）表单是用户和Web应用程序、Web数据库进行交互的界面。#=text,password,checkbox,radio,submit,reset<FORMaction=脚本URL

Method=Get/Post><inputtype=#

name=##

value=…>……</FORM>action属性指明处理数据的程序的URL地址method属性指明数据提交的方法（9）表单标记（FormTags）表单是用户和Web应用程23表单信息传递给服务器的两种方式：GET/POSTGET方法:将信息封装在一个URL中提交给Server(数据长度受限)。/mypath/myscript.pl?username=v1&password=v2

POST方法:将信息封装在一个MessageBody中提交给服务器(表单大小不受限)。表单信息传递给服务器的两种方式：GET/POSTGET方24复选框<inputtype=checkboxname=名称

value=值

checked>

单选框<inputtype=radio

name=名称

value=值

checked>

文本域单行文字输入

<input

type=textname=名称value=初值>密码输入

<input

type=password

name=名称value=初值>多行文本域

<textareaname=名称

rows=文本域行数cols=文本域列宽><textarea>选择域复选框单选框文本域单行文字输入25<selectname=菜单名称size=选项个数multiple><optionvalue=选项值1selected>显示内容1</option><optionvalue=选项值2>显示内容2</option>……<optionvalue=选项值n>显示内容n</option></select>按钮域（1）提交按钮：单击提交按钮，可以实现表单内容的提交。<inputtype=submitname=名称value="提交”>（2）重置按钮：单击重置按钮，可以清除表单中已经输入的内容。<inputtype=resetname=名称value=”重置”>（3）普通按钮：使用普通按钮可以通过调用函数完成其他操作。<inputtype=buttonname=名称value=文本>

菜单和列表域<selectname=菜单名称size=选项个数mu26例：表单的综合应用

<html><head><TITLE>表单的综合应用</TITLE></head><body><formaction=""method="post">您的姓名：<inputname=″name″size=10type=text><br>您的个人主页地址：<inputname=”URL”size=50type=textvalue="http://"> <textareaname="JianYi"clos="20"rows="5">您的建议</textarea><br>

您的密码：<inputtype=passwordname=″password1″size=8><br>确认密码：<inputtype=passwordname=″password2″size=8><br>所在城市：<select><optionselectedvalue="01">北京</option><optionvalue="02">上海</option></select><p>个人爱好：<inputtype="checkbox"name="c1">看书

<inputtype="checkbox"name="c2">打球

<inputtype="checkbox"name="c3">音乐<br>性别：<inputtype="radio"name="r1"checked>男

<inputtype="radio"name="r1">女<p><inputtype="submit"name="s1"value="确定"><inputtype="reset"name="s2"value="重写"> </form></body></html>例：表单的综合应用<html>272.1.3XML基本概念XML（eXtensibleMarkupLanguage，扩展性标识语言）是由万维网联盟W3C定义的，它提供了一种描述结构数据的格式。XML可以定义语义标记，是元标记语言。XML不像HTML那样只能使用规定的标记，用户可以自己定义需要的标记。XML文档是纯文本，可用文本编辑器创建。2.1.3XML基本概念XML（eXtensibleM28一个典型的XML文档

<?xmlversion="1.0"encoding="ISO-8859-1"?><bookstore><bookcategory="COOKING"><titlelang="en">EverydayItalian</title><author>GiadaDeLaurentiis</author><year>2005</year><price>30.00</price></book><bookcategory="CHILDREN"><titlelang="en">HarryPotter</title><author>JK.Rowling</author><year>2005</year><price>29.99</price></book><bookcategory="WEB"><titlelang="en">LearningXML</title><author>ErikT.Ray</author><year>2003</year><price>39.95</price></book></bookstore>XML文档树例：一个XML文档bookstore.xml一个典型的XML文档

XML文档树例：一个XML文档boo29XML实现内容与形式的分离。XML扩展性比HTML强。XML的语法比HTML严格。XML具有良好的自描述性。

XML与HTML的不同

XML实现内容与形式的分离。XML与HTML的不同302.1.4XML文档的语法规则结构良好的（Well-formed）XML文档

如果某个文档符合XML语法规范，那么我们就说这个文档是“结构良好”的文档。有效的（Validate）XML文档

指通过了DTD验证的，具有良好结构的XML文档。2.1.4XML文档的语法规则结构良好的（Well-fo31XML语法元素：<标签>文本内容</标签>声明：<?xmlversion="1.0"encoding="gb2312"?>

XML声明是告诉浏览器将要处理的文档是XML文件。 version属性指明文档遵循哪个版本的XML规范。 encoding属性指示文档中字符使用的编码标准。注释：属性：<salarycurrency="US$">25000</salary>32XML语法元素：<标签>文本内容</标签>3232结构良好的XML文档需满足：下面是一个合理的HTML文档，但却完全不符合XML格式要求：<HTML><BODY><h2>西安欢迎你<br><fontcolor="red"size=4>西安欢迎你</FONT><hr><bsize=6><i>西安欢迎你</b></i></body>有且仅有一个根元素；所有的XML标记必须成对出现，将数据包围在中间；所有的XML标记必须正确嵌套；XML标记对大小写敏感；所有元素的属性值必须加引号。结构良好的XML文档需满足：下面是一个合理的HTML文档，但332.1.5验证XML的有效性DTD（DocumentTypeDefinition，文档类型定义）是对XML文档所做的规范和约定，它指定了一系列XML文档必须遵守的规则。DTD由许多约定和声明语句构成，这些语句可以包含在XML文档内部，称为内部DTD，也可以独立保存为一个文件，称为外部DTD。2.1.5验证XML的有效性DTD（DocumentT341）内部DTD

下面就是一个带有DTD的XML文档：<?xmlversion="1.0"?><!DOCTYPEperson[<!ELEMENTperson(name,sex,age)><!ELEMENTname(#PCDATA)><!ELEMENTsex(#PCDATA)><!ELEMENTage(#PCDATA)>]><person><name>George</name><sex>Man</sex><age>28</age></person>当DTD被包含在

一个XML文档中，那么它包装在一个

DOCTYPE声明里：<!DOCTYPE根元素

[元素声明]>1）内部DTD下面就是一个带有DTD的XML文档：352）外部DTD假设有一个XML文档，它引用了一个外部DTD文档person.dtd<?xmlversion="1.0"?><!DOCTYPEpersonSYSTEM"person.dtd"><person><name>George</name><sex>Man</sex><age>28</age></person>假如DTD位于XML文档的外部，那么它应被封装在一个DOCTYPE定义中：<!DOCTYPE根元素SYSTEM"文件名">2）外部DTD假设有一个XML文档，它引用了一个外部DTD36XMLSchemaXMLSchema是W3C开发的一种新的约束XML文档的模式，是一种特殊的XML文件，遵循XML的语法规则。与DTD相比，XMLSchema具有如下优点：（1）可以更容易地描述文档结构；（2）可以方便地定义数据类型；（3）可重用性。XMLSchemaXMLSchema是W3C开发的一种37W3C规定，一个XMLSchema文档的根标记必须是“schema”，名称空间必须是“/2001/XMLSchema”，下面是它的基本形式：<?xmlversion=”1.0”?><xs:schemaxmlns:xs=/2001/XMLSchema>

<xs:elementname=”标记名称”type=”数据类型”></xs:element>

</xs:schema>XMLSchemaW3C规定，一个XMLSchema文档的根标记必须是“sc382.1.6XML文档的显示单独用XML不能显示页面，须使用格式化技术。显示XML文件常见的有：CSS（CascadingStyleSheets）样式表XSL（eXtensibleStylesheetLanguage）样式语言2.1.6XML文档的显示单独用XML不能显示页面，须使39CSS样式表案例名称：CSS样式表程序名称：greeting.css

GREETING{font-size:48pt;font-weight:bold;}案例名称：调用CSS的XML文件程序名称：greeting.xml

<?xmlversion="1.0"encoding="utf-8"?><?xml-stylesheettype="text/css"href="greeting.css"?><GREETING> Hello！</GREETING>CSS样式表案例名称：CSS样式表案例名称：调用CSS的40XSL样式语言XSL是一种可以将XML文档转化成浏览器能够识别的HTML文档的语言。

XSL由两部分组成：一是转化XML文档；二是格式化XML文档。通常，XSL是通过将每一个XML元素“翻译”为HTML元素，来实现这种转换的。XSL样式表自身也是一个XML文档。XSL样式语言XSL是一种可以将XML文档转化成浏览器能41XSL样式表的例子程序名称：persons.xml（调用XSL的XML文件）

<?xmlversion="1.0"encoding="gb2312"?><?xml-stylesheettype="text/xsl"href="8-08.xsl"?><persons><person><name>小张</name><age>25</age><tel>66666666</tel></person><person><name>小王</name><age>26</age><tel>66666667</tel></person></persons>XSL样式表的例子程序名称：persons.xml（调用42程序名称：persons.xsl

（XSL文件）<?xmlversion="1.0"encoding="GB2312"?><xsl:stylesheetxmlns:xsl="/TR/WD-xsl"><xsl:templatematch="/"><HTML><BODY><CENTER><TABLEBORDER="1"><TR><TD>姓名</TD><TD>年龄</TD><TD>电话</TD></TR>

<xsl:for-eachselect="persons/person"><TR><TD><xsl:value-ofselect="name"/></TD><TD><xsl:value-ofselect="age"/></TD><TD><xsl:value-ofselect="tel"/></TD></TR>

</xsl:for-each></TABLE></CENTER></BODY></HTML></xsl:template></xsl:stylesheet>XSL文件以一个XML声明开始。xsl:stylesheet元素声明这是一个样式表文件。<xsl:templatematch="/">语句表示XML的源文档在当前目录下。程序名称：persons.xsl

（XSL文件）XSL文件43XHTML＝XML+HTMLXHTML(eXtensibleHyperTextMarkupLanguage)是“遵循XML规范”的HTML，比HTML要严格。使用DOCTYPE元素指定所遵循的标准：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">44XHTML＝XML+HTMLXHTML(eXtensible44遵循XHTML的基本规范标签必须严格嵌套。标签名和属性名必须小写。标签必须严格配对，即使是空元素也要封闭。每个属性都必须赋值，属性值用双引号括起来。45遵循XHTML的基本规范标签必须严格嵌套。4545DHTML=

HTML/XHTML+CSS+JavaScriptDHTML（DynamicHTML）HTML/XHTML用于定义文档结构CSS确定信息的外在表现形式JavaScript则用于编程以便动态操控CSS和HTML46DHTML=

HTML/XHTML+CSS+Ja462.2

利用CSS布局网页CSS的基本概念：CSS是一种标记性语言，它用于控制网页样式，并允许将网页内容与显示样式分离，为网页里的元素创建在浏览器中的表现样式。CSS以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等。2.2利用CSS布局网页CSS的基本概念：47例

一个简单的HTML网页（welcome.htm）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/></head><body><h1>欢迎你到西安来！</h1><h3>欢迎你常到西安来！！</h3></body></html>2.2

利用CSS布局网页例一个简单的HTML网页（welcome.htm）2.248在上例的HTML文件中加入CSS代码（welcome_css.htm）

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css"><!–h1{font-style:italic;color:red;display:inline;}--></style></head><body><h1>欢迎你到西安来！</h1><h3style="color:black;font-weight:200">欢迎你常到西安来！！</h3></body></html>说明：注释标签是避免不支持CSS的浏览器将CSS内容作为网页的正文显示出来在上例的HTML文件中加入CSS代码（welcome_css49CSS的主要特点（1）体现了“内容结构和格式控制相分离”的原则。（2）更容易控制页面的布局。使用外部CSS文件可以方便地修改网页的显示效果而不必修改网页本身；可以同时定义多个网页的显示风格。（3）可以制作出更小、下载更快的网页。（4）可以更快更容易地维护及更新大量的网页。（5）良好的浏览器兼容性。CSS的主要特点（1）体现了“内容结构和格式控制相分离”的原50在HTML中使用CSS样式表，主要分为三种方式：内嵌样式（InlineStyle）内部样式表（InternalStyleSheet）外部样式表（ExternalStyleSheet）2.2.1在HTML中使用CSS

在HTML中使用CSS样式表，主要分为三种方式：2.2.51在<body>内部使用<style>定义CSS代码

<标签style=“CSS代码”></标签>例如：<html><body><h3style=“color:black;font-weight:200”>西安欢迎你</h3><Pstyle=”font-size:20pt;color:red”>西安欢迎你</p></body></html>521.内嵌样式2.内部样式表在<head></head>中编写CSS代码

<styletype=“text/css”>CSS规则</style>在<body>内部使用<style>定义CSS代码521.52使用<link>链接外部CSS文件（如mycss.css）

<linktype="text/css"rel="stylesheet"href="mycss.css"/>3.外部样式表使用@import指令引入外部CSS文件<styletype="text/css">

@import"mycss.css";</style>4.使用@import指令引入外部CSS文件使用<link>链接外部CSS文件（如mycss.css）535.样式表的优先级顺序

当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，它们的优先顺序如下：（1）浏览器缺省---优先级最低（2）外部样式表（3）内部样式表（位于<head>标签内部）（4）内嵌样式（在HTML元素内部）---优先级最高5.样式表的优先级顺序当同一个HTML元素被不止一个542.2.2CSS基本语法<styletype="text/css">

/*这里是注释*/

HTML标签

{属性:属性值;属性:属性值……}</style>说明：

CSS内部的注释以“/*”开始，以“*/”结束；属性的定义用“{}”包含；定义多个属性时，各个属性间用“；”分隔。例如：<style>h1{color:red;font-size:15pt;text-align:center}p{color:black;font-size:10pt;text-indent:1px}</style>2.2.2CSS基本语法<styletype="te55CSS文档由一条或多条CSS规则组成通常CSS规则由三部分组成，分别是：

选择器、属性和属性值。562.2.2CSS样式规则的基本结构CSS文档由一条或多条CSS规则组成562.2.2CSS56HTML页面中的标记都是通过不同的CSS选择器去控制的。常用的CSS选择器主要包括以下几种：HTML标签选择器（HTMLselector）类选择器（Classselector）id选择器（idselector）伪类选择器（Pseudo-classesselector）派生选择器（ContextualSelector）2.2.2CSS选择器HTML页面中的标记都是通过不同的CSS选择器去控制的。常用57用于设定HTML文档中指定标签的显示样式58p

{ color:Red; font-size:25px;

}1.HTML标签选择器用于设定HTML文档中指定标签的显示样式58p1.HTML58

定义类：指定标签.类名{属性:属性值;属性:属性值;......}或

.类名{属性：属性值；属性：属性值；......}引用类：<指定标签class="类名">59 .red_large_text

{ color:Red; font-size:25px;

} <pclass="red_large_text">thisisaparagraph.</p> <aclass=“red_large_text”href=“">北京大学</a>定义一个类别选择器在不同元素中应用类别选择器在一个HTML文档中，为同一HTML标签指定不同的样式，或同一样式类被不同的HTML标签元素所应用，可以使用类选择器。2.类选择器（Classselector）

定义类：指定标签.类名{属性:属性值;属性:属性值;593.ID选择器定义ID#ID名

{属性：属性值；属性：属性值}引用ID<标志id＝"ID名"><styleType="text/css">#a{color:red}#b{color:blue}</style><pid="a">段落1文字</p><pid="b">段落2文字</p>3.ID选择器定义ID<styleType="text/60有一些特殊的HTML元素可以拥有不同的状态。例如，用于定义超链接的<a>标签就可以处于“未被访问”、“已被访问过”、“鼠标悬浮其上”等几种状态。对于这种元素，CSS使用伪类选择器来给其不同的状态定义样式。4.伪类选择器HTML元素:伪类名

{属性:属性值;属性:属性值;……}

例如，<styletype="text/css">a:link{color:#FF0000}/*未被访问的链接红色*/a:visited{color:#00FF00}/*已被访问过的链接绿色*/a:hover{color:#FFCC00}/*鼠标悬浮在上的链接橙色*/a:active{color:#0000FF}/*鼠标点中激活链接蓝色*/</style>有一些特殊的HTML元素可以拥有不同的状态。例如，用于定义超615.派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。父元素子元素{属性:属性值;属性:属性值;……}

例如，<html><head><styleTYPE="text/css">pem{color:red}</style></head><body><p>段落中用em强调的字是<em>红色</em>

的</p><h3>标题中用em强调的字<em>不是红色</em>

的</h3></body></html>5.派生选择器派生选择器允许你根据文档的上下文关系来确定622.2.3样式规则的继承

样式规则的继承是指嵌套的HTML子元素会继承外层的父元素所设置的样式规则。例如，有这样的CSS规则：

<styleTYPE="text/css">body{font-family:Verdana,sans-serif;}p{font-family:Times,"TimesNewRoman",serif;}</style>2.2.3样式规则的继承样式规则的继承是指嵌套的HTML632.2.4常见的样式属性字体属性文本属性背景属性边框属性边距属性列表样式属性定位属性(显示、隐藏和移动)2.2.4常见的样式属性字体属性641.字体属性2.文本属性1.字体属性2.文本属性653.背景属性4.边框属性

3.背景属性4.边框属性665.边距属性

例：设置元素的上下左右边距（宽度相同）<HTML><HEAD><TITLE>CSS边距属性margin</TITLE><STYLEtype="text/css">.D1{border:1pxsolid#FF0000;}.D2{border:1pxsolidgray;}.D3{margin:1cm;border:1pxsolidgray;}</STYLE></HEAD><BODY><DIVCLASS="D1"><DIVCLASS="D2">没有margin</DIV></DIV><P>上面的div没有设置边距属性，仅设置了边框属性(border)</P><HR><P>下面的div设置了边距属性，边距1厘米，表示上下左右边距都为1厘米</P><DIVCLASS="D1"><DIVCLASS="D3">margin设为1cm</DIV></DIV></BODY></HTML>5.边距属性例：设置元素的上下左右边距（宽度相同）676.列表样式属性

7.间隙属性6.列表样式属性7.间隙属性688.定位属性8.定位属性692.2.5CSS盒子模式大部分网页都采用一种“块”状结构，块之间可以相互嵌套，通过“块”的排列与定位实现网页的总体布局。这种块状布局通常采用DIV来进行编排，即CSS盒子模式(Boxmodel)。假设我们在一个平面上，把不同大小和颜色的盒子，以一定的顺序和间隙摆放好，看到的就是如图3-4所示的一个盒子（Box）。盒子由里向外依次是：content、padding、border、margin。2.2.5CSS盒子模式大部分网页都采用一种“块”状结构，70CSS盒子模型

CSS将所有的HTML块元素看成是一个盒子，每个盒子都由以下部分组成：内容(content)：所有HTML元素的内容，如文本和图片。内容区域的宽和高用width和height属性来表示。间隙(padding)：设置元素内容到元素边框的距离,即围绕content提供的空白。边框(border)：设定一个元素的边线。边距(margin)：设置一个元素所占空间的边缘到相邻元素之间的距离。CSS盒子模型CSS将所有的HTML块元素看成是一个盒子，712.3JavaScript客户端编程2.3JavaScript客户端编程72JavaScript是一种基于对象的脚本语言，主要用于开发Web应用程序的客户端部分。JavaScript代码由浏览器解释执行，实现一些数据验证、页面动态显示等效果。JavaScript由Netscape公司开发，在1995年配合其浏览器推出，与Java并无本质联系，但其语法与Java非常相近。2.3.1JavaScript概述2.3.1JavaScript概述73脚本的执行原理应用服务器IEIE解析HTML标签和JavaScript脚本从服务器端下载含JavaScript的页面返回响应客户端请求含JS的页面发送请求1用户输入23脚本的执行原理应用IEIE解析HTML标签和JavaScri74JavaScript可以做什么控制文档的外观和内容：通过Document对象的write方法可以在浏览器解析文档时将HTML写入文档中。验证表单输入内容：在客户端验证表单中的输入，避免向服务器提交非法数据，节约服务器资源。客户端计算和处理：从表单中读取输入数据并进行计算。设置和检索cookie：将用户名、账号等信息持久地保存于Cookie中，在用户下一次访问网站时自动地读取这些信息。捕捉用户事件并相应地调整页面：根据键盘或鼠标的动作，使页面的某一部分变得可编辑。与服务器端应用程序进行交互：这是AJAX技术的基础，可在后台获取服务器端数据，并更新局部页面。JavaScript可以做什么控制文档的外观和内容：通过Do75在网页中嵌入JavaScript脚本

<html><head><title>脚本的基本结构</title><scripttype="text/javascript">varcount=0;document.write("淘宝网欢迎您！");for(i=0;i<5;i++)document.write("<h2>淘宝网欢迎您！</h2>");</script></head><body><h1>BODY部分的内容</h1></body></html>如何使用JavaScript实现此部分内容？示例：在网页中嵌入JavaScript脚本<html>如何使用J76引入JavaScript脚本的方式有3种：使用<script>标记在HTML文档中直接嵌入脚本在HTML文档中链接JavaScript源文件在HTML标记内添加JavaScript代码引入JavaScript脚本的方式有3种：使用<script77方式1：在HTML文档中直接嵌入脚本<html>

<head>

<scripttype="text/javascript">

…………

</script>

</head>

</html>方式1：在HTML文档中直接嵌入脚本<html>

<head78方式2：在HTML文档中链接JavaScript源文件<html>

<head>

<scriptsrc="test01.js"type="text/javascript"></script>

</head>

<body>

</body></html>document.write("Hello,world!");alert("Hello,world!");

示例：test01.html示例：test01.js<scripttype="text/javascript"src="文件名.js"></script>方式2：在HTML文档中链接JavaScript源文件<ht79<html><head><title>在标记内添加脚本测试</title></head><body> <buttononClick="alert('这是标记内的脚本！')">

在标记内添加脚本测试</button></body></html>方式3：在HTML标记中嵌入JavaScript脚本示例：test02.html<html>方式3：在HTML标记中嵌入JavaScript80在JavaScript中，常用的字符串输入输出方法有document对象的write()方法、window对象的alert()方法、文本框及消息输入框等。消息框包括确认框、提示框等。使用JavaScript输入与输出信息document.write(“待输出的字符串”);//向页面输出文本window.alert(“待输出的字符串”);//弹出带“确定”按钮的对话框confirm(“待输出的字符串”);//确认框prompt("提示文本","默认值")//提示输入框在JavaScript中，常用的字符串输入输出方法有docu81<html><head><title>确认框示例</title><scriptlanguage="javascript">functiontest(){varvalue=confirm("确定要执行该操作吗？");alert("你的选择是："+value);}</script></head><body>

确认框示例<buttononClick="test()">测试</button></body></html>示例：test04.html<html>示例：test04.html82<html><head><title>提示输入框示例</title><scriptlanguage="javascript">functiontest(){varvalue=prompt("请输入你的名字","佚名")alert("您的名字是："+value);}</script></head><body>

提示输入框示例<buttononClick="test()">测试</button></body></html>示例：test05.html<html>示例：test05.html832.3.2JavaScript基本语法2.3.2JavaScript基本语法84函数异常处理控制语句运算符变量基本语法

1.基本语法示意函数异常处理控制语句运算符变量基本语法1.基本语法示意852.变量

varcount;count=5;定义变量赋值varx,y,z=10;varcount=10;同时声明和赋值变量声明多个变量变量名通常以字母，也可以以下划线或者$符号开头变量名大小写敏感，即"x"和"X"为不同的变量2.变量varcount;count=5;86数据类型

string（字符串）类型：是用单引号或双引号括起来的一个或几个字符。number（数值）类型：可以是整数和浮点数。boolean（布尔）类型：值为true或者false。object（对象）类型：用于定义对象。数据类型string（字符串）类型：是用单引号或双引号括起87运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别字符串运算符：+算术运算符：+、-、*、/、%、++、--、-(求反)比较运算符：==、!=、>、>=、<、<=逻辑运算符：&&、||、！位运算符：&、|、～、∧、<<、>>、>>>赋值运算符：=、+=、-=、*=、/=、%=等3.运算符3.运算符884.流程控制if条件语句switch多分支语句if(条件){//JavaScript代码;}else{//JavaScript代码;}switch(表达式){case常量1: JavaScript语句1; break; case常量2: JavaScript语句2; break; ... default:JavaScript语句3;}4.流程控制if条件语句if(条件)switch(表达式)89<html><head><title>switch语句示例</title><scripttype="text/javascript">varnow=newDate();vardate=now.getDay();switch(date){case1:alert("今天是星期一");break;case2:alert("今天是星期二");break;case3:alert("今天是星期三");break;case4:alert("今天是星期四");break;case5:alert("今天是星期五");break;case6:alert("今天是星期六");break;default:alert("今天是星期日");}</script></head><body></body></html>示例：test06.html<html>示例：test06.html90for、while循环语句for(初始化;条件;增量){

语句集;

}while(条件){

语句集;}for、while循环语句for(初始化;条件;增量91<html><head><title>for循环语句打印乘法口诀</title><scripttype="text/javascript">for(vari=1;i<=9;i++){for(varj=1;j<=9;j++){if(j<=i){//只打印下三角

document.write("\t"+j+"*"+I+"="+(i*j));}}document.write("<br/>");//换行

}</script></head><body></body></html>示例：test07.html<html>示例：test07.html92Break语句出现在循环语句或switch语句内，用于强行跳出循环或switch语句。在嵌套循环中，break语句只跳出当前循环体，并不跳出整个嵌套循环。Continue语句用在循环结构中，作用是跳过循环体内剩余的语句而提前进入下一次循环。Break语句93sum=0；i=0；while（true）｛

i++；

if（i>100）break；

if（i%2==0）continue；

sum=sum+i；}示例：sum=0；示例：945.异常处理语句抛出异常：throw捕获异常：try处理异常：catch清理现场：finally<scripttype=“text/javascript”></script>5.异常处理语句抛出异常：throw<scripttyp956.函数函数是已命名的代码块，其中的语句作为一个整体被调用执行，且只有在调用时才会执行。函数定义通常放在HTML文档的<head>块中，也可以放在其他位置，但要确保先定义后使用。函数可以由事件触发调用，也可以由脚本中的代码调用6.函数函数是已命名的代码块，其中的语句作为一个整体被调用执96创建函数function

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

语句体;}调用函数函数调用一般和表单元素的事件一起使用，格式为：

事件名＝“函数名”;functionshowHello(){varcount=document.myForm.txtCount.value;for(i=0;i<count;i++)document.write("<H2>HelloWorld</H2>");}<INPUTtype="submit"name="Submit"value="显示HelloWorld"onClick="showHello()">表示单击此按钮时，调用函数showHello()执行示例：按用户输入的次数显示问候语创建函数functionshowHello()表示单击此97说明：函数名是调用函数时所引用的名称，在同一个脚本文件里函数名必须唯一。形式参数表用以接收传入数据，在调用函数时，其实参的个数和类型必须与形参相一致。大括号中是函数的执行语句，如果要返回一个值，则应该在最后一行使用return语句。说明：函数名是调用函数时所引用的名称，在同一个脚本文件里函数98函数调用方式语句调用事件调用<scripttype="text/javascript">functionadd(a,b){return(a+b);}varresult=add(2,3);alert("a与b两数之和为"+result);</script><html><head><title>javascript函数的事件调用</title><scripttype="text/javascript">functionshowmessage(){alert("这是JavaScript事件调用函数");}</script></head><body><inputtype="button"value="鼠标单击事件调用函数"onClick="showmessa

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

Web应用开发-网页设计基础课件

文档简介

温馨提示

最新文档

评论

Web应用开发-网页设计基础课件

文档简介

温馨提示

最新文档

评论

相关文档