版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
静态网页设计与语言第1页，共128页，2023年，2月20日，星期二3月14号复习HTTP协议是基于什么范式的？HTTP响应状态字4XX和5XX分别表示什么？网页按照内容来分通常分为哪三种？网页上通常包含哪些元素？表单和表格的主要功能分别是什么？请求/响应客户端/服务器端错误主页、内容页和索引页文本、声音、图像、动画和数字视频等用户交互/网页布局第2页，共128页，2023年，2月20日，星期二6.1静态网页设计与HTML语言6.1.1静态页面的体系结构静态网页的特征静态网页的内容固定不变;静态网页的制作比较方便；静态网页的体系结构Client(浏览器)WebServer硬盘HTML页面从硬盘获取文件文件返回页面请求第3页，共128页，2023年，2月20日，星期二6.1静态网页设计与HTML语言
6.1.2标记语言Web环境下，采用标记来管理文本内容的现实和格式，常用的标记语言有：
SGML:标准通用标记语言，元语言
HTML:超文本标记语言，Web显示语言
XML:扩展标记语言，定义数据结构，适合数据传输第4页，共128页，2023年，2月20日，星期二GML(1969)SGML(1985)XML(1998)XHTMLMathMLWMLSVGcXMLebXMLHTML(1993)6.1静态网页设计与HTML语言6.1.3标记语言家族第5页，共128页，2023年，2月20日，星期二6.1静态网页设计与HTML语言6.1.4超文本置标语言HTML特点平台兼容
文本文件Web服务器不处理标记，由客户端浏览器解释
丰富的多媒体显示、各种布局处理不足HTML过多的考虑布局，缺乏对结构化数据的表示能力；链路丢失后不能自动纠正、下载的内容太多、搜索不方便、时间长等缺点；HTML中有限的标记不能满足众多Web应用的需要，缺乏可扩展性第6页，共128页，2023年，2月20日，星期二HTML第一讲：基础第7页，共128页，2023年，2月20日，星期二6.1静态网页设计与HTML语言HTML文档的编写方法手工直接编写记事本等，存成.htm.html格式使用可视化HTML编辑器Frontpage、Dreamweaver等由Web服务器（或称HTTP服务器）一方实时动态地生成。第8页，共128页，2023年，2月20日，星期二6.1静态网页设计与HTML语言网页文件命名*.htm或*.html无空格无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字区分大小写首页文件名默认为：index.htm或index.html第9页，共128页，2023年，2月20日，星期二HTML文件结构<html>...</html><head>...</head><body>...</body>元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。6.1静态网页设计与HTML语言第10页，共128页，2023年，2月20日，星期二<HTML><HEAD><title></title><meta></HEAD><BODY>HTML文件的正文</BODY></HTML>头部主体HTML文件结构6.1静态网页设计与HTML语言第11页，共128页，2023年，2月20日，星期二第一张网页（01.htm）<html><head> <title>myfirstpage</title></head><body> Thisismyfirsthomepage!</body></html>
第12页，共128页，2023年，2月20日，星期二基本组成部分——HTML元素属性HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的<>内，并且和元素名之间有一个空格分隔；属性值用“”引起来。第13页，共128页，2023年，2月20日，星期二第二张网页（02.htm）<html><head><title>myfirstpage</title></head><body><palign="center">Thisismysecondhomepage!</p></body></html>
居中第14页，共128页，2023年，2月20日，星期二HTML元素及元素属性HEAD之元素——1
<head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。<title><title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。第15页，共128页，2023年，2月20日，星期二HTML元素及元素属性HEAD元素——2<meta>元素<meta>元素下面可以插入很多很有用的元素属性。下面介绍四种：<metaname="keywords"content="study,computer">用来标记搜索引擎在搜索你的页面时所取出的关键词。第16页，共128页，2023年，2月20日，星期二HTML元素及元素属性HEAD元素——3<meta>元素<metaname="author"content=“abc">用来标记文档的作者。第17页，共128页，2023年，2月20日，星期二HTML元素及元素属性HEAD元素——4<meta>元素<metahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”>用来标记你的页面的解码方式。第18页，共128页，2023年，2月20日，星期二HTML元素及元素属性HEAD元素——5<meta>元素<metahttp-equiv=“refresh”content=“5;URL=”>用来自动刷新网页第19页，共128页，2023年，2月20日，星期二练习（03.htm）编写一个网页，要求3秒钟后自动跳转到南京邮电大学的网站。<html><head><title>mythirdpage</title><metahttp-equiv=“refresh”content=“3;URL=”></head><body><palign=“center”>三秒钟后本网页将自动跳转到南京邮电大学首页</p></body></html>第20页，共128页，2023年，2月20日，星期二<body>元素及元素属性——1<body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。第21页，共128页，2023年，2月20日，星期二<body>元素及元素属性——2<body>元素中有下列元素属性：(1)bgcolorbgcolor属性标志HTML文档的背景颜色。如：<BODYbgcolor=“#ccffcc”>改变HTML文件的背景颜色</BODY>例：04.htm第22页，共128页，2023年，2月20日，星期二HTML对颜色的控制HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。16进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.第23页，共128页，2023年，2月20日，星期二颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”红色Red=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”常见颜色的代码第24页，共128页，2023年，2月20日，星期二<body>元素及元素属性——3<body>元素中有下列元素属性：(2)backgroundbackground属性标志HTML文档的背景图片。如：<bodybackground=“images/bg.gif“>。可以使用的图片格式为GIF，JPG例：05.htm、06.htm第25页，共128页，2023年，2月20日，星期二<body>元素及元素属性——4<body>元素中有下列元素属性：(3)bgproperties=fixedbgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。例：07.htm和08.htm对比第26页，共128页，2023年，2月20日，星期二<body>元素及元素属性——5<body>元素中有下列元素属性：(4)texttext属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。例：09.htm第27页，共128页，2023年，2月20日，星期二<body>元素及元素属性——6<body>元素中有下列元素属性：(5)超级链接颜色link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。<BODYlink="blue"vlink="red"alink="yellow"><ahref="">南京邮电大学</a><p>这是一个<ahref="">链接的例子</a>。点一下带下划线的文字!</p> <p>链接到<ahref="22.htm">22.htm</a></BODY>例：10.htm第28页，共128页，2023年，2月20日，星期二<body>元素及元素属性——7<body>元素中有下列元素属性：(6)leftmargin和topmargin设置网页主体内容距离网页顶端和左端的距离如：<BODYleftmargin=100topmargin=100>例：11.htm第29页，共128页，2023年，2月20日，星期二HTML第二讲：内容设置第30页，共128页，2023年，2月20日，星期二文字标签属性——1文字属性标记1.文字颜色指定颜色<fontcolor=#>...</font>#=RRGGBB16进制数码 <fontcolor=#0000ffsize=2>兰色字</font><br> <fontcolor=#ff0000size=2>红色字</font><br> <fontcolor=#00ff00size=2>绿色字</font>例：01.htmHTML2——内容设置第31页，共128页，2023年，2月20日，星期二文字标签属性——2文字属性标记2.文字字体<fontface=“#,#,...,#”>...</font>
#=客户端可获得的字体<fontface="黑体">黑体<br></font><fontface="楷体_gb2312">楷书<br></font><fontface="宋体">宋体</font>02.htm第32页，共128页，2023年，2月20日，星期二文字标签属性——3文字属性标记3.文字大小<fontsize=#>...</font>#=1,2,3,4,5,6,7or+#,-#<fontsize=7>专业铸造品质知识成就未来</font><p>例：03.htm第33页，共128页，2023年，2月20日，星期二文字标签属性——4文字属性标记4.文字标题<h#>...</h#>#=1,2,3,4,5,6<h1>老崔的一无所有</h1>例：04.htm第34页，共128页，2023年，2月20日，星期二文字布局行的控制段(Paragraph)(可以看作是空行)<p>空白占位符
很好
很好例：05.htm第35页，共128页，2023年，2月20日，星期二文字布局行的控制HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。例：
BR标记的应用<BRclear=left>
你好吗？<BR>
很好<br>
06.htm不换行<nobr><nobr>请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！</nobr>
07.htm第36页，共128页，2023年，2月20日，星期二HTML文字与段落格式控制<body>……<i>倾斜文本</i><b>粗体文本</b><u>下划线文本</u>
<s>删除线文本</s>……</body>例：08.htm、09.htm、10.htm、11.htm(综合练习)<BODY><fontsize=7face=隶书color="#0000FF">代数方程式</font><P><fontsize=5>9<fontcolor=#ff0000>X</font><sup>2</sup>+2<fontcolor=#ff0000>X</font>+3=17<br>3<fontcolor=#ff0000>X</font><sub>1</sub>+2<fontcolor=#ff0000>X</font><sub>2</sub>=10</font></BODY>第37页，共128页，2023年，2月20日，星期二基本组成部分—HTML注释HTML文档可以插入注释。注释内容不会在浏览器窗口显示HTML注释的格式为：
<!--注释内容-->
<!--多行注释内容--><BODY><!--标题--><h1>代数方程式</h1>例：12.htm第38页，共128页，2023年，2月20日，星期二文字的对齐<hnalign=#>...</hn>(n=1,2,3,4,5,6)<palign=#>...</p>(#=left,center,right)<h3align=center>align标志的居中对齐</h3> <palign=right>p标志中利用align标志实现右对齐</p> <center>center标志的居中对齐</center>例：13.htm第39页，共128页，2023年，2月20日，星期二文字的分区显示<div
align=#>...</div>(#=left,center,right)P标记自动空行，div不空行
<divalign=right>作为一名顶级吉他大师，盖米·摩尔是在用他的心在划弦，而绝不是用手指.</div>
<Palign=left>作为一名顶级吉他大师，<div
align=center>盖米·摩尔</div>是在用他的心在划弦，而绝不是用手指.</p>例：14.htm第40页，共128页，2023年，2月20日，星期二3.HTML段落与分行控制居中
<center>元素<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似
例如：<center>居中段落</center>15.htm第41页，共128页，2023年，2月20日，星期二3.HTML段落与分行控制水平线 <hrsize=#>：设定线宽
<hrwidth=#>：设定线长
<hralign=#>：设定对齐方式#=left,right
<hrcolor=#>：设定线的颜色<hrsize=10width=80%color=#ff0000>例：16.htm第42页，共128页，2023年，2月20日，星期二3.HTML的段落与分行控制无序列表元素—1
列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。第43页，共128页，2023年，2月20日，星期二3.HTML的段落与分行控制无序列表元素—2无序列表是由<ul>和<li>元素定义的:无序列表
<ul> <li>列表项1</li> <li>列表项2</li> </ul><hr> 有序列表
<ol> <li>列表项1</li> <li>列表项2</li> </ol><hr>例：17.htm第44页，共128页，2023年，2月20日，星期二3.HTML的段落与分行控制无序列表元素—3无序列表的默认符号是圆点。
<ul>元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：
disc(圆)、circle（圆圈）、square（方块）<ul> <litype=disc>disc <litype=circle>circle <litype=square>square </ul>例：18.htm第45页，共128页，2023年，2月20日，星期二3.HTML的段落与分行控制有序列表元素—1有序列表由<ol>和<li>定义:<ol>
<li>sports</li>
<li>drink</li>
<li>friends</li></ol>例：17.htm第46页，共128页，2023年，2月20日，星期二3.HTML的段落与分行控制有序列表元素—2
<ol>元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C……作为列表的编号,<litype=I>ONE-ONE
例：19.htm<ol>元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义<ol>元素的start属性 <olstart=5> <litype=A>ONE-ONE例：20.htm第47页，共128页，2023年，2月20日，星期二4.超级链接—普通超级链接1超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。第48页，共128页，2023年，2月20日，星期二4.超级链接—普通超级链接2超级链接是用锚元素<a>定义的在<a>元素下，有元素属性href,href的属性值为一个URL地址如：<ahref=“”>指向学院的超级链接</a>如：<ahref=“08.htm">普通超级链接</a>例：21.htm第49页，共128页，2023年，2月20日，星期二4.超级链接—E-mail超级链接超级链接可以指向E-mail地址如：<ahref=“mailto:shenc@">指向E-mail地址的超级链接</a>例：22.htm第50页，共128页，2023年，2月20日，星期二4.超级链接—新开链接窗口开一个新的(浏览器)窗口(TargetWindow)<ahref="URL"target=“_blank">...</a>例：26.htm第51页，共128页，2023年，2月20日，星期二4.超级链接—去除下划线去掉超级连接的下划线：style=“text-decoration:none”
<ahref=""style="text-decoration:none">链接下面没有下划线</a>例：25.htm第52页，共128页，2023年，2月20日，星期二4.超级链接——其他超级链接WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接;指向其他Internet应用的超级链接不是我们掌握的重点。第53页，共128页，2023年，2月20日，星期二4.超级链接——锚点(书签)1<aname="aa"><ahref="#aa">指向本页面锚点aa的超级链接</a>例：23.htm<ahref=“23.htm#top”>指向23页面的锚点top的超级链接</a>例：24.htm第54页，共128页，2023年，2月20日，星期二练习：手写代码实现链接（新开窗口与Email）、背景、文字颜色、字体、换行、页面标题。练习：27.htm<P><Ahref="">南京邮电大学</A></P><P><Ahref=""target="_blank">新开窗口到南京邮电大学</A></P><P><Ahref="mailto:shenc@">给我来信</A></P><fontcolor="#ff00ff">改变文字颜色</font><br><FONTface="黑体">改变字体</FONT><hrcolor="red"width=500height=5noshadealign="left">第55页，共128页，2023年，2月20日，星期二HTML对图片的控制--1基本语法:<imgsrc=“图片名称”>引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址<imgsrc=“aa.jpg"alt="情系何方"><imgsrc=“dd.jpg"alt="情系何方">例：28.htm第56页，共128页，2023年，2月20日，星期二HTML对图片的控制--2所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。定义图片替代文本的方法是：<imgsrc=“图片名称”
alt=“这是一张图片”>例：28.htm第57页，共128页，2023年，2月20日，星期二HTML对图片的控制--3图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是：<imgsrc="sample.jpg"width=100height=100>width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。<imgsrc="dd.jpg"width=120height=120>例：29.htm第58页，共128页，2023年，2月20日，星期二HTML对图片的控制--4图片的边框我们可以为一幅图片加一个边框以突出显示：
<imgsrc="sample.jpg"border="2">border的属性值为象素数例：30.htm第59页，共128页，2023年，2月20日，星期二HTML对图片的控制--5图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：<imgsrc=“sample.jpg”align=“left”><imgrc=“sample.jpg”align=“right”>例：31.htm第60页，共128页，2023年，2月20日，星期二HTML对图片的控制--6图片的对齐方式定义图片的垂直对齐方式：<imgsrc="sample.jpg"align="top"><imgsrc="sample.jpg"align="middle"><imgsrc="sample.jpg"align="bottom">对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。例：32.htm第61页，共128页，2023年，2月20日，星期二HTML对图片的控制--7定义图片与左、右的文本之间的间距图片在显示时，与左右的文本之间可以有一定的间距
<imgsrc="sample.jpg"hspace=5vspace=5>Hspace(horizontal)定义水平间距；Vspace(vertical)定义垂直间距。单位都是象素数.例：33.htm第62页，共128页，2023年，2月20日，星期二HTML对图片的控制--8图象的超级链接图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：<ahref=“”><imgsrc=“aa.jpg"></a>所以，所谓超级链接实际上就是用<a>元素标志一个图象的引用;例：34.htm第63页，共128页，2023年，2月20日，星期二HTML对图片的控制--9图象映射 所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。第64页，共128页，2023年，2月20日，星期二HTML对图片的控制--10图象映射（只要求理解标记含义）图象映射由<map>定义。<map>有一个基本属性是name。Name给图象映射命名，这个命名将会被<img>元素用usemap属性引用。所以，图象上的图象映射实际上是对<map>定义的映射的一个引用。<map>在定义图象映射时，可以定义三种形状的映射：circle(圆形)、rect(矩形rectangle)、poly(多边形)第65页，共128页，2023年，2月20日，星期二HTML对图片的控制--11图象映射实例（35.htm）<imgsrc="bear.jpg"usemap="#Map"><mapname=“Map"><areashape="rect"coords="46,29,253,164"href="#"><areashape="circle"coords="76,510,59"href="#"><areashape="poly"coords="219,482,253,448,310,462,297,527,220,523"href="#"></map>第66页，共128页，2023年，2月20日，星期二HTML第三讲：表格第67页，共128页，2023年，2月20日，星期二一月二月三月120010001500单元格（用<TD>来表示，每个单元格可以有背景颜色和背景图片）表格（用<Table>来表示，表格可以有背景颜色、背景图片）表格边框每一行可以用<TR>来表示，单元格放在行中，每行可以有很多的单元格。表头（用<TH>来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）HTML对表格的控制第68页，共128页，2023年，2月20日，星期二表格(TABLE)标记--1<table>元素：定义一个表格。每一个表格只有一对<table>和</table>，一张页面中可以有多个表格。<tr>元素：定义表格的行，一个表格可以有多行，所以<tr>对于一个表格来说不是唯一的。<td>元素：定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。第69页，共128页，2023年，2月20日，星期二表格(TABLE)标记--2表格的基本结构<table>定义表格<tr> <th>定义表头</th></tr><tr>定义表行<td>…</td>定义单元格</tr></table>例：02.htm第70页，共128页，2023年，2月20日，星期二表格(TABLE)标记--3表格的属性–1width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细<tableborder=2>例03.htm、04.htm、05.htm第71页，共128页，2023年，2月20日，星期二表格(TABLE)标记--2表格的属性–14、bgcolor属性：指定表格或某一个单元格的背景颜色。5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。<thbgcolor="#ffaa00">Food</th><thbgcolor="Green">Drink</th><throwspan="2"background="dd.jpg">Sweet</th>例：07.htm第72页，共128页，2023年，2月20日，星期二表格(TABLE)标记--3表格的属性–26、bordercolor属性：指定表格或某一个单元格的边框颜色。<tableborder="5"bordercolor="#FFCC00"bgcolor="#FFFFCC">例：08.htm7、Bordercolorlight属性：亮边框的颜色8、Bordercolordark属性：暗边框的颜色<tableborder="5"cellspacing="2“bordercolorlight="#ff0000"bordercolordark="#0000ff">例：09.htm第73页，共128页，2023年，2月20日，星期二表格(TABLE)标记--3表格的属性–29、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。<tdalign=left>A</td><tdalign=center>B</td><tdalign=right>C</td>例：10.htm第74页，共128页，2023年，2月20日，星期二表格(TABLE)标记--3表格的属性–210、cellspacing属性：单元格间距。<tableborder=1cellspacing=10cellpadding=50>例：11.htm11、cellpadding属性：单元格边距。例：12.htm第75页，共128页，2023年，2月20日，星期二表格(TABLE)标记--4单元格属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：top：顶端对齐；middle：居中对齐；bottom：底端对齐;Baseline：相对于基线对齐;<tdvalign=Baseline>D</td>例：13.htm第76页，共128页，2023年，2月20日，星期二表格(TABLE)标记--5单元格属性2、Colspan：属性值表示当前单元格跨越几列<thcolspan="3">MorningMenu</th>例：14.htm3、Rowspan：属性值表示当前单元格跨越几行例：16.htm第77页，共128页，2023年，2月20日，星期二表格(TABLE)标记--6行属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包top：顶端对齐；
middle：居中对齐；
bottom：底端对齐。
Baseline：相对于基线对齐。第78页，共128页，2023年，2月20日，星期二表格(TABLE)标记--7行属性2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素第79页，共128页，2023年，2月20日，星期二表格进阶表格的嵌套在<td></td>之间插入表格，实现表格嵌套例：17.htm表格的作用一般只是控制文本和图像的显示，而不显示表格的边框例：18.htm第80页，共128页，2023年，2月20日，星期二综合案例表格的综合使用例：19.htm<TABLEalign=centerbgColor=#ccccccborder=1borderColor=#666666cellPadding=1cellSpacing=1width="75%">
<TR><TD>1</TD><TDrowspan="2">2</TD><TD>3</TD><TD>4</TD><TD>5</TD></TR>第81页，共128页，2023年，2月20日，星期二表单(FORM)标记HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。第82页，共128页，2023年，2月20日，星期二表单(FORM)标记表单是网页上的一个特定区域。这个区域是由一对<form>元素定义的。<form>元素action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。第83页，共128页，2023年，2月20日，星期二表单(FORM)标记表单的基本语法:<formaction="url"method=*type=text/plain>
...<inputtype=submit><inputtype=reset></form>=GET有数据量限制，POST无以上限制,以文件形式传输<formACTION="#"METHOD="POST">例：22.htm第84页，共128页，2023年，2月20日，星期二表单(FORM)标记文本框<inputname=?type=*value=**size=***maxlength=??>?文本框的名字*text,password**默认值***长度??最大输入字符数例20.htm您的姓名:<inputtype=textname=usernamevalue="username"size="15"maxlength="15"><br>密码：<inputtype=passwordname=passwordsvalue="password"size="15"maxlength="15"><br>留言：<textareaNAME="comments"ROWS="5"COLS="35"></textarea>第85页，共128页，2023年，2月20日，星期二表单(FORM)标记3.文本域<textareaname=*rows=**cols=**>...</textarea>例：20.htm第86页，共128页，2023年，2月20日，星期二表单(FORM)标记按钮包括普通按钮、重置按钮和提交按钮<inputtype="submit"value="提交"name=“B1"><inputtype="reset"value="全部重写"name=“B2">例：21.htm第87页，共128页，2023年，2月20日，星期二表单(FORM)标记5.复选框(Checkbox)在一个表单里的所有多选框可以有一个或多个被选中。<inputtype=checkbox><inputtype=checkboxchecked><inputtype=checkboxvalue=**>例25.htm第88页，共128页，2023年，2月20日，星期二表单(FORM)标记6.单选框(RadioButton)一个表单里的所有变量名相同的单选框只能够有一个被选中。<inputtype=radioname=sexvalue=**><inputtype=radioname=sexvalue=**checked>各个选项的name必须一样才能达到预期效果例：26.htm注意262.htm的写法是错误的<inputtype=radioname=音乐1>摇滚<p><inputtype=radioname=音乐2checked>爵士<p>第89页，共128页，2023年，2月20日，星期二表单(FORM)标记7.下拉列表基本语法<selectname=*>
<optionselected>说明</option> <optionvalue=**>说明2</option></select>例：28.htm第90页，共128页，2023年，2月20日，星期二表单(FORM)标记7.下拉列表（2）列表框的长度<selectsize=**>（3）允许多选<selectsize=**
multiple>例：29.htm、30.htm第91页，共128页，2023年，2月20日，星期二表单(FORM)标记8.图象域<inputtype=imagesrc=url>例：image.htm第92页，共128页，2023年，2月20日，星期二表单(FORM)标记综合练习（*）实现留言簿要求：背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮，内容以mail形式提交。第93页，共128页，2023年，2月20日，星期二HTML第四讲：框架第94页，共128页，2023年，2月20日，星期二网页中的框架制作框架页面的步骤：1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接，在子框架中设定链接
注意：框架页面是不含<body>标签的第95页，共128页，2023年，2月20日，星期二网页中的框架基本语法<frameset><framesrc="url"><noframes><body>您的浏览器不支持框架，请考虑升级您的浏览器！</body></noframes></frameset>第96页，共128页，2023年，2月20日，星期二网页中的框架定义框架的基本语法框架由一对<frameset>定义<frameset>有两个属性：rows和colsRows定义上下分割的框架的大小；cols定义左右分割的框架的大小；在定义大小时，rows和cols可以使用相对大小或以百分比为单位。第97页，共128页，2023年，2月20日，星期二网页中的框架各窗口的尺寸设置<frameset
rows=#>横排多个窗口<framesetrows=30%,20%,*><framesrc="A.html"><framesrc="B.html"><framesrc="C.html"></frameset>排列方式：A B C例：02.htm第98页，共128页，2023年，2月20日，星期二网页中的框架各窗口的尺寸设置
<framesetcols=#>纵向排列多个窗口
<framesetcols=30%，20%,*> <framesrc="A.html"> <framesrc="B.html"> <framesrc="C.html"></frameset>排列方式：ABC例：01.htm第99页，共128页，2023年，2月20日，星期二网页中的框架COLS&ROWS：纵横排列多个窗口<framesetcols=137，*><framesrc="A.htm"><framesetrows=82,*><framesrc="B.htm"><framesrc="C.htm"></frameset></frameset>排列方式： B A C例：14.htm第100页，共128页，2023年，2月20日，星期二网页中的框架框架边框的颜色bordercolor="ff0000“例：03.htm各窗口边框的设置frameborder=##=yes,no/1,0例：04.htm框架边框的宽度framespacing="10"例：05.htm第101页，共128页，2023年，2月20日，星期二网页中的框架<frame>的属性name：定义该框架的名字。这个名字可以被一些网页元素引用，如被<a>元素引用。<ahref=urltarget=“framename”>例：06.htm、07.htmSrc：在本框架里显示网页的URL。Target：目标框架,引用的是目标框架的名字。第102页，共128页，2023年，2月20日，星期二网页中的框架在当前框架中打开超链接页面默认就是在当前框架页中打开,也可以采用Target=“_self”在指定框架中打开超级链接页面Target=“name”新开窗口打开链接页面Target=“_blank”跳出整个框架集Target=“_parent”第103页，共128页，2023年，2月20日，星期二网页中的框架<frame>的属性Scrolling：是否显示滚动条。yes,no,auto例：08.htmNoresize：框架在浏览器里不可以被调整大小。例：10.htm第104页，共128页，2023年，2月20日，星期二网页中的框架内含窗口<iframe
src=#name=##>...</iframe>#=初始页面的URL##=框架名称(FrameName)例：15.htm第105页，共128页，2023年，2月20日，星期二会移动的文字基本语法<marquee>...</marquee>例：16.htm文字移动属性(1)方向：direction=##=left,right,up,down例：17.htm第106页，共128页，2023年，2月20日，星期二会移动的文字2、文字移动属性(2)方式：behavior=##=scroll(循环),slide(只走一次),alternate(来回走)例：18.htm(3)循环:loop=##=次数；若未指定则循环不止(infinite)例：19.htm第107页，共128页，2023年，2月20日，星期二会移动的文字2、文字移动属性(4)速度:scrollamount=#例：20.htm(5)延时:
scrolldelay=#例：21.htm第108页，共128页，2023年，2月20日，星期二会移动的文字3、其他属性(1)底色:bgcolor=##=RRGGBB16进制颜色代码例：22.htm(2)面积:height=#width=#例：23.htm(3)空白:hspace=#vspace=#例：24.htm第109页，共128页，2023年，2月20日，星期二多媒体页面用<EMBED>嵌入多媒体对象基本语法<embedsrc=#>#=URL注：使用<embed>标记之前，需要安装插件才可以；对于不同的plugin，其embed属性也不同。例：25.htm(Flash动画)例：26.htm(rmi音乐文件)例：27.htm(avi动画)例：28.htm(mpeg影像文件)第110页，共128页，2023年，2月20日，星期二多媒体页面（*）嵌入背景音乐<bgsoundsrc=#>#=WAV文件的URL<bgsoundloop=#>#=循环数例29.htm(WAV背景音乐)<bgsoundsrc="football.wav"loop=3>可以使用bgsound标记来添加页面背景音乐。第111页，共128页，2023年，2月20日，星期二多媒体页面（*）特殊标记元素Object<OBJECT>元素用来包含图像、动态图像、Java小程序。<OBJECT>元素用以替换具体的<IMG>和<APPLET>元素，以及<EMBED>和<BGSOUND>元素。例30.htm<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase=""width="840"height="480"><paramname=movievalue="pig.swf"><paramname=qualityvalue=high></object>第112页，共128页，2023年，2月20日，星期二HTML分析实例——百度第113页，共128页，2023年，2月20日，星期二第114页，共128页，2023年，2月20日，星期二附：HTML标记一览<HTML>文件宣告让浏览器知道这是HTML文件<HEAD>开头提供文件整体信息<TITLE>标题定义文件标题将显示于浏览器顶端<BODY>主体设计文件格式及内容所在排版标记<!--注解-->说明标记为文件加上说明但不被显示<P>段落标记为字、图、表格等之间留下一空白行<BR>换行标记令字、图、表格显示于下一行<HR>水平线插入一水平线<CENTER>居中令字、图、表格等显示于中间<PRE>预设格式令文件按原代码的排列方式显示<DIV>定位标记设定字、图、表格等的摆放位置<NOBR>不换行令文字不因太长而换行<WBR>建议换行预设换行部位第115页，共128页，2023年，2月20日，星期二附：HTML标记一览字体标记<STRONG>加重语气产生字体加粗Bold的效果<B>粗体标记产生字体加粗的效果<EM>强调标记字体出现斜体效果<I>斜体标记字体出现斜体效果<TT>等宽字体Courier字体，字母宽度相同<U>加下划线加下划线<H1>一级标题标记将字体变大，级数越高越小<H2>二级标题标记将字体变大<H3>三级标题标记将字体变大<H4>四级标题标记将字体变大<H5>五级标题标记将字体变大<H6>六级标题标记将字体变大<FONT>字体标记设定字体、大小、颜色<BASEFONT>基准字体标记设定所有字体、大小、颜色<BIG>字体加大令字体稍微变大<SMALL>字体缩小令字体稍微缩小<STRIKE>加删除线为文字加删除线<CODE>程式码字体稍微加宽<KBD>键盘字字体稍微加宽，单一空白<SAMP>范例字體稍為加寬<VAR>变量斜体效果<CITE>斜体标记斜体效果<BLOCKQUOTE>向右缩排文字向右缩排<DFN>述语定义斜体效果<ADDRESS>地址标记斜体效果<SUB>下标字文字下标<SUP>上标字文字上标第116页，共128页，2023年，2月20日，星期二附：HTML标记一览清单标记<OL>顺序清单清单项目将以数字、字母顺序排列<UL>无序清单清单项目将以实心圆点作为符号排列<LI>清单项目清单中的项目，一个标记一行<MENU>选项清单可用type参数指定项目符号<DIR>目录清单与<menu>相同<DL>定义清单清单分两层出现<DT>定义条目清单项标题<DD>定义内容清单项内容表格标记<TABLE>表格标记设定该表格的各项参数<CAPTION>表格标头位于表格之上或之下<TR>表格行设定该表格的行<TD>表格单元格设定该表格的单元格<TH>表格标题相等于<TD>，但其内文字字体会变粗第117页，共128页，2023年，2月20日，星期二附：HTML标记一览表单标记<FORM>表单标记决定该表单的运作模式<TEXTAREA>文字框提供文字输入栏<INPUT>输入标记决定输入形式<SELECT>选择标记建立弹出卷动清单<OPTION>选项每一个清单选项图形标记<IMG>图形标记用来插入图形及设定图形属性链接标记<A>链接标记加入链接<BASE>基准标记可将相对URL转绝对及指定链接框架标记<FRAMESET>框架设定设定框架<FRAME>窗口设定设定框架中的窗口<IFRAME>页内框架于网页中插入框架<NOFRAMES>不支持框架设定浏览器不支持框架时的提示第118页，共128页，2023年，2月20日，星期二附：HTML标记一览影像地图<MAP>影像地图名称设定影像地图名称<AREA>链接区域设定各链接区域多媒体<BGSOUND>背景声音令背景播放音乐或声音<EMBED>多媒体加入声音、音乐或影像其他标记<MARQUEE>走马灯令文字走动<BLINK>闪烁文字令文字闪烁<ISINDEX>页内寻找器可输入关键字寻找该页<META>开头说明提供关于此页的信息给浏览器<LINK>关系定义定义该文件与其他URL的关系StyleSheet<STYLE>式样表控制网页版面<span>自订标记独立使用或与样式表一起用第119页，共128页，2023年，2月20日，星期二HTML的缺陷HTML更多地关注WEB浏览器如何在页面上安排文本、图象和按纽等，过多的考虑外观使其缺乏对结构化数据的表示能力。HTML中有限的标记不能满足很多
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论