web应用基础 - fudan university
TRANSCRIPT
![Page 1: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/1.jpg)
Web应用基础
![Page 2: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/2.jpg)
HTML经典结构
<html><head><title> </title>
</head><body></body>
</html>
![Page 3: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/3.jpg)
HTML元素(Element)属性(Attribute)属性值(Value)
![Page 4: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/4.jpg)
HTML元素(Element)属性(Attribute)属性值(Value)
<element attribute="value">…</element>
![Page 5: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/5.jpg)
HTML公有属性
专有属性
![Page 6: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/6.jpg)
HTML公有属性
核心属性i18n属性事件属性
专有属性
![Page 7: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/7.jpg)
核心属性
标题信息title
关联的样式信息style
以空格分隔的类列表class
文档范围内惟一的idid
说明属性
![Page 8: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/8.jpg)
i18n属性
文字方向dir ( ltr | rtl )
语言代码lang
说明属性
![Page 9: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/9.jpg)
事件属性
按下一个键onkeydown
释放一个键onkeyup
释放鼠标按钮onmouseup
鼠标在某范围内移动onmousemove鼠标被移动到其上onmouseover
鼠标从其上移出onmouseout按下并释放一个键onkeypress
按下鼠标按钮onmousedown双击鼠标按钮ondblclick
单击鼠标按钮onclick
说明属性
![Page 10: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/10.jpg)
文本
<html><head><title>Example</title>
</head><body><p>This is the first paragraph.</p><p>This is the second paragraph.</p><p>This is the third paragraph.</p>
</body></html>
![Page 11: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/11.jpg)
文本
<html><head><title>Example</title>
</head><body><p>This is the first paragraph.</p><p>This is the second paragraph.</p><p>This is the third paragraph.</p>
</body></html>
![Page 12: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/12.jpg)
标题
<html><head><title>Example_Heading</title>
</head><body><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
</body></html>
![Page 13: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/13.jpg)
标题
<html><head><title>Example_Heading</title>
</head><body><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
</body></html>
![Page 14: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/14.jpg)
换行
<html><head><title>Example_BR</title>
</head><body><p>This line will not reach all the way <br>
to the edge of the screen.</p><p>This line will not reach all the way</p><p>to the edge of the screen.</p>
</body></html>
![Page 15: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/15.jpg)
换行
<html><head><title>Example_BR</title>
</head><body><p>This line will not reach all the way <br>
to the edge of the screen.</p><p>This line will not reach all the way</p><p>to the edge of the screen.</p>
</body></html>
![Page 16: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/16.jpg)
水平线<html><head><title>Example_HR</title>
</head><body><hr align="left" width="50%" size="1"><hr align="left" width="50%" size="2"><hr align="left" width="50%" size="4"><hr align="left" width="50%" size="8"><hr align="left" width="50%" size="16"><hr align="left" width="50%" size="32"><hr aligh=“left” width="50%" size="8" noshade>
</body></html>
![Page 17: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/17.jpg)
水平线<html><head><title>Example_HR</title>
</head><body><hr align="left" width="50%" size="1"><hr align="left" width="50%" size="2"><hr align="left" width="50%" size="4"><hr align="left" width="50%" size="8"><hr align="left" width="50%" size="16"><hr align="left" width="50%" size="32"><hr aligh=“left” width="50%" size="8" noshade>
</body></html>
![Page 18: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/18.jpg)
空白<html><head><title>Example_PRE</title>
</head><body><p> This demonstrates how white space is handled.</p><p>This demonstrates how white space is handled.</p> <br><pre> This demonstrates how white space is handled.</pre>
</body></html>
![Page 19: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/19.jpg)
空白<html><head><title>Example_PRE</title>
</head><body><p> This demonstrates how white space is handled.</p><p>This demonstrates how white space is handled.</p> <br><pre> This demonstrates how white space is handled.</pre>
</body></html>
![Page 20: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/20.jpg)
网页创作工具
文本编辑器:记事本, UltraEdit, vi, SimpleTextHTML编辑器:Coffee Cup HTML Editor所见即所得程序:Macromedia Dreamweaver字处理器:Word
![Page 21: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/21.jpg)
其它工具
链接检查器代码验证器兼容性测试器
![Page 22: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/22.jpg)
网站设计
颜色文本风格导航内容运营
![Page 23: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/23.jpg)
链接
<A href = "http://www.yahoo.com">Visit Yahoo! </A>
![Page 24: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/24.jpg)
链接
<A href = "http://www.yahoo.com">Visit Yahoo! </A>
<A href = "index.html"> Visit the Yahoo! Home page</A>
![Page 25: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/25.jpg)
相对路径
如何在Jobs.html页面链接到Contact us页面?
---Site
|---aboutus
|---index.html
|---contactus.html
|---employment
|---index.html
|---jobs.html
|---services
|---index.html
|---photos.html
![Page 26: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/26.jpg)
相对路径
<A href = "../aboutus/contactus.html">Contact us</A>
---Site
|---aboutus
|---index.html
|---contactus.html
|---employment
|---index.html
|---jobs.html
|---services
|---index.html
|---photos.html
![Page 27: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/27.jpg)
内部链接
<html><body><A name="top"></A>…Rest of page content goes here…
<A href="#top">Back to Top</A></body></html>
![Page 28: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/28.jpg)
内部链接
<html><body><A name="top"></A>…Rest of page content goes here…
<A href="#top">Back to Top</A></body></html>
![Page 29: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/29.jpg)
其他链接类型
news:group.name
ftp://sitename.com/ filename.pdf
mailto:name@ emailaddress.com
href值
<A href="news:alt.html">Visit the HTML newsgrous</A>
<A href="news:12345.6789@news. com">View this news article</A>
新闻组
<A href="ftp://sitename.com/filename. pdf">Download from FTP site</A>
FTP下载文件
<A href="mailto:name@emailaddress. com" >Email Me!</A>
<A href="mailto:name@emailaddress. Com?Subject=Hello!&anothername@ emailaddress.com">Email Me!</A>
电子邮件
范例代码链接类型
![Page 30: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/30.jpg)
BASE元素
<html><head><title>My Web Page</title><base href="http://www.sitename.com">
</head><body><A href ="/aboutus/index.html">About us</A><A href ="/employment/jobs.html">Jobs</A><A href ="/Services/index.html">Services</A>
</body></html>
![Page 31: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/31.jpg)
http://www.networksolutions.com
域名注册
![Page 32: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/32.jpg)
http://www.networksolutions.com
域名注册
![Page 33: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/33.jpg)
Web服务器
Sun Solaris OS使用Netscape或ApacheLinux使用ApacheWindows NT使用Internet Information Server (IIS)
![Page 34: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/34.jpg)
http://www.netcraft.com
Web服务器配置类型查询
![Page 35: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/35.jpg)
选择Web空间提供商
非虚拟主机虚拟Web主机专用服务器托管服务器
![Page 36: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/36.jpg)
http://www.100best-free-web-space.com/
前100位免费Web空间服务列表
![Page 37: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/37.jpg)
Linux: tracerout yahoo.com
Dos: tracert yahoo.com
![Page 38: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/38.jpg)
文本格式<p>The word <I>italics</I> is italicized.</p>
<p>The word <B>italics</B> is italicized.</p>
<PRE>Preformatted text goes here.</PRE>
<p>We guarantee that CatMover <SUP>TM</SUP> will keep your doorway unblocked</p>
<p>It was nice to get some good old H<SUB>2</SUB>O after so long in the desert.</p>
![Page 39: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/39.jpg)
文本格式<p>The word <I>italics</I> is italicized.</p>
<p>The word <B>italics</B> is italicized.</p>
<PRE>Preformatted text goes here.</PRE>
<p>We guarantee that CatMover <SUP>TM</SUP> will keep your doorway unblocked</p>
<p>It was nice to get some good old H<SUB>2</SUB>O after so long in the desert.</p>
![Page 40: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/40.jpg)
字体尺寸
<font size="1">Font Size 1</font>
![Page 41: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/41.jpg)
字体尺寸
<font size="1">Font Size 1</font>
![Page 42: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/42.jpg)
字体尺寸
<head><basefont size="6">
</head>
<font size="+1">Text goes here.</font>
<font size="-2">Text goes here.</font>
![Page 43: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/43.jpg)
字体
<font face="Arial">Changed text goes here.</font>
<font face="Arial, Helvetica, sans-serif">Changed text goes here.</font>
<head><basefont face="Arial, Helvetica, sans-serif">
</head>
![Page 44: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/44.jpg)
字体颜色
<font color="red">Changed text goes here.</font>
<head><basefont color="red">
</head>
<font size="3" color="red" face="Arial">Changed text goes here.</font>
![Page 45: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/45.jpg)
字体颜色
<font color="red">Changed text goes here.</font>
<head><basefont color="red">
</head>
<font size="3" color="red" face="Arial">Changed text goes here.</font>
![Page 46: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/46.jpg)
文本对齐
<p align="right">Changed text goes here.</p>
<p align="left">Changed text goes here.</p>
<p align="center">Changed text goes here.</p>
<p align="justify">Changed text goes here.</p>
<blockquote>Changed text goes here.</blockquote>
![Page 47: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/47.jpg)
文本对齐
<p align="right">Changed text goes here.</p>
<p align="left">Changed text goes here.</p>
<p align="center">Changed text goes here.</p>
<p align="justify">Changed text goes here.</p>
<blockquote>Changed text goes here.</blockquote>
![Page 48: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/48.jpg)
特殊字符
♣
♣
♣
不间断空隔
&
&
![Page 49: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/49.jpg)
图像文件格式
GIF (Graphics Interchange Format)JPEG (Joint Photographic Experts Group)PNG (Portable Network Graphics)
![Page 50: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/50.jpg)
免费图像网站http://images.jsc.nasa.gov http://www.clipart.com
http://www.hemera.com
![Page 51: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/51.jpg)
图像
<img src="filename">
<img src="images/Squash.jpg">
![Page 52: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/52.jpg)
图像
<img src="filename">
<img src="images/Squash.jpg">
![Page 53: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/53.jpg)
图像
<img src="filename">
<img src="images/Squash.jpg">
<img src="http://www.sitename.com/filename.jpg">
![Page 54: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/54.jpg)
图像
<img src="filename" width ="200" height= "234">
![Page 55: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/55.jpg)
图像
<img src="filename" width ="200" height= "234">
![Page 56: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/56.jpg)
图像
<img src="filename" width ="200" height= "234">
<img src="filename" width ="200" height= "234" vspace="20" hspace="20">
![Page 57: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/57.jpg)
图像边框
<img src="Images/Berry.jpg" width="128" height="93" border="2">
![Page 58: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/58.jpg)
图像边框
<img src="Images/Berry.jpg" width="128" height="93" border="2">
![Page 59: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/59.jpg)
图像占位符
<img src="Images/Green.jpg" width="128" height="93" alt="picture of vegetables">
<img src="Images/huge_file.jpg" width="128" height="93" lowsrc="Images/small_version.jpg">
![Page 60: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/60.jpg)
图像链接
<A href="http://www.fudan.edu.cn"><img src= "Images/Fudan.jpg"></A>
<A href="Images/Picture_Large.jpg"><img src= "Images/Picture_Small.jpg"></A>
![Page 61: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/61.jpg)
图像链接
<A href="http://www.fudan.edu.cn"><img src= "Images/Fudan.jpg"></A>
<A href="Images/Picture_Large.jpg"><img src= "Images/Picture_Small.jpg"></A>
![Page 62: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/62.jpg)
图像对齐
<p><img src="Images/filename.jpg" align="top">
Your text goes here…</p>
<p><img src="Images/filename.jpg" align="left">
Your text goes here…</p>
![Page 63: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/63.jpg)
图像对齐
<p><img src="Images/filename.jpg" align="top">
Your text goes here…</p>
<p><img src="Images/filename.jpg" align="left">
Your text goes here…</p>
![Page 64: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/64.jpg)
图像对齐
顶端:同文本顶端top
底部:同基线bottom
中间:使文本的基线与图像的中心对齐middle
左:使图像脱离其原始位置并将其移动至左页边距left
右:使图像脱离其原始位置并将其移动至右页边距right
文本顶端:使图像的顶端与文本的顶端处于同一水平线texttop
基线:使文本的基线与图像的底部处于同一水平线baseline
绝对中间:使文本的中心和图像的中心对齐absmiddle
绝对底部:使文本中下行字母的底部与图像的底部对齐absbottom
说明aligh属性值
![Page 65: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/65.jpg)
背景图片
<body background="Images/Apple_small.jpg">Your content goes here...</body>
![Page 66: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/66.jpg)
背景图片
<body background="Images/Apple_small.jpg">Your content goes here...</body>
![Page 67: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/67.jpg)
颜色
RGB值 #号后跟6位十六进制数字
![Page 68: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/68.jpg)
#FFFF00Yellow(黄色)#FFFFFFWhite(白色)#008080Teal(水鸭色)#C0C0C0Silver(银色)#FF0000Red(红色)#800080Purple(紫色)#808000Olive(橄榄色)#000080Navy(海军蓝)#800000Maroon(栗色)#00FF00Lime(石灰)#008000Green(绿色)#808080Gray(灰色)#FF00FFFuchsia(紫红色)#0000FFBlue(蓝色)#000000Black(黑色)#00FFFFAqua(浅绿色)十六进制值颜色名称
![Page 69: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/69.jpg)
颜色
RGB值 #号后跟6位十六进制数字216种Web安全色
![Page 70: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/70.jpg)
颜色
RGB值 #号后跟6位十六进制数字216种Web安全色互补色、对比色和调配色
![Page 71: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/71.jpg)
颜色轮
![Page 72: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/72.jpg)
图像编辑工具
PhotoshopFireworksPainterPaint Shop Pro
![Page 73: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/73.jpg)
http://www.webpagesthatsuck.com/
Web拙劣设计大全
![Page 74: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/74.jpg)
音频
<A href="Music\Classic.mp3">Click here to listen to Music!<A>
<embed src="Music\Classic.mp3" width="240" height="80" autostart="false" hidden="false" loop="2" volume="100"><noembed>Sorry, your Web browser won't play this song.
</noembed></embed>
![Page 75: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/75.jpg)
音频
<A href="Music\Classic.mp3">Click here to listen to Music!<A>
<embed src="Music\Classic.mp3" width="240" height="80" autostart="false" hidden="false" loop="2" volume="100"><noembed>Sorry, your Web browser won't play this song.
</noembed></embed>
![Page 76: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/76.jpg)
视频
<embed src="Movie\Blood.wmv" width="384" height="288" autostart="flase" controller="false"><noembed>Sorry, your Web browser won't play this movie.
</noembed></embed>
![Page 77: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/77.jpg)
视频
<embed src="Movie\Blood.wmv" width="384" height="288" autostart="flase" controller="false"><noembed>Sorry, your Web browser won't play this movie.
</noembed></embed>
![Page 78: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/78.jpg)
表格<body>
<table border="1“><tr><td>First Cell</td><td>Second Cell</td>
</tr><tr><td>Third Cell</td><td>Fourth Cell</td>
</tr></table>
</body>
![Page 79: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/79.jpg)
表格<body>
<table border="1“><tr><td>First Cell</td><td>Second Cell</td>
</tr><tr><td>Third Cell</td><td>Fourth Cell</td>
</tr></table>
</body>
![Page 80: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/80.jpg)
表格<body>
<table border="1“><tr><td>First Cell</td><td>Second Cell</td>
</tr><tr><td>Third Cell</td><td>Fourth Cell</td>
</tr></table>
</body>
![Page 81: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/81.jpg)
表格的宽度和高度
<table width="100%" height= "100%">
<table width="400" height= "250">
<table width="400" height= "75%">
![Page 82: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/82.jpg)
表格单元格的宽度和高度<table border="1">
<tr><td width="33%">First Cell</td><td>Second Cell</td>
</tr><tr><td height="100">Third Cell</td><td>Fourth Cell</td>
</tr><tr><td>Fifth Cell</td><td>Sixth Cell</td>
</tr></table>
![Page 83: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/83.jpg)
表格单元格的宽度和高度<table border="1">
<tr><td width="33%">First Cell</td><td>Second Cell</td>
</tr><tr><td height="100">Third Cell</td><td>Fourth Cell</td>
</tr><tr><td>Fifth Cell</td><td>Sixth Cell</td>
</tr></table>
![Page 84: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/84.jpg)
表格的填充和间距
<table border="1" cellpadding="2">
![Page 85: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/85.jpg)
表格的填充和间距
<table border="1" cellpadding="2">
<table border="1" cellspacing="5">
![Page 86: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/86.jpg)
表格水平和垂直对齐
水平对齐aligh (left, center, right)垂直对齐valigh (top, middle, bottom, baseline)
![Page 87: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/87.jpg)
表格跨越行和列
<td rowspan="2">…</td>
<td colspan="3">…</td>
![Page 88: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/88.jpg)
表格跨越行和列<table border="1">
<tr><td rowspan="2">Pets</td><td colspan="2" align="center">Cats</td><td colspan="2" align="center">Dogs</td>
</tr><tr>
<td>Male</td> <td>Female</td> <td>Male</td> <td>Female</td></tr><tr>
<td rowspan="2"><P>Measured<BR>Weight</P></td><td>17</td> <td>12</td> <td>40</td> <td>35</td>
</tr><tr>
<td>15</td> <td>16</td> <td>34</td> <td>27</td></tr>
</table>
![Page 89: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/89.jpg)
表格跨越行和列<table border="1">
<tr><td rowspan="2">Pets</td><td colspan="2" align="center">Cats</td><td colspan="2" align="center">Dogs</td>
</tr><tr>
<td>Male</td> <td>Female</td> <td>Male</td> <td>Female</td></tr><tr>
<td rowspan="2"><P>Measured<BR>Weight</P></td><td>17</td> <td>12</td> <td>40</td> <td>35</td>
</tr><tr>
<td>15</td> <td>16</td> <td>34</td> <td>27</td></tr>
</table>
![Page 90: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/90.jpg)
电子杂志布局<html><head><title>Creating a Newspaper Design</title></head><body><table width="100%">
<tr align="center" valign="top"><td colspan="3">Logo Goes Here</td>
</tr><tr valign="top">
<td width="50%">First article goes here.</td> <td bgcolor="Black" width="1" height="100%"></td><td width="50%">Second article goes here.</td>
</tr><tr align="center" valign="middle">
<td colspan="3">Links go here.</td></tr>
</body></html>
![Page 91: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/91.jpg)
电子杂志布局<html><head><title>Creating a Newspaper Design</title></head><body><table width="100%">
<tr align="center" valign="top"><td colspan="3">Logo Goes Here</td>
</tr><tr valign="top">
<td width="50%">First article goes here.</td> <td bgcolor="Black" width="1" height="100%"></td><td width="50%">Second article goes here.</td>
</tr><tr align="center" valign="middle">
<td colspan="3">Links go here.</td></tr>
</body></html>
![Page 92: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/92.jpg)
表格用于表单<form>
<table><tr>
<td align="right">User Name:</td><td align="left"><input type="text" name="username"></td>
</tr><tr>
<td align="right">Passwork:</td><td aligh="left"><input type="password" name="pw"></td>
</tr><tr>
<td></td><td align="left"><input type="submit"></td>
</tr></table>
</form>
![Page 93: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/93.jpg)
表格用于表单<form>
<table><tr>
<td align="right">User Name:</td><td align="left"><input type="text" name="username"></td>
</tr><tr>
<td align="right">Passwork:</td><td aligh="left"><input type="password" name="pw"></td>
</tr><tr>
<td></td><td align="left"><input type="submit"></td>
</tr></table>
</form>
![Page 94: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/94.jpg)
框架
![Page 95: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/95.jpg)
框架基本结构
<html><head><title>Web Page Title</title>
</head><body><p>This is the first paragraph.</p><p>This is the second paragraph.</p>
</body></html>
![Page 96: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/96.jpg)
框架基本结构
<html><head><title>Web Page Title</title>
</head>
</html>
![Page 97: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/97.jpg)
框架基本结构
<html><head><title>Web Page Title</title>
</head><frameset rows="50%,50%"><frame name="top" src="test.html"><frame name="bottom" src="test.html">
</frameset></html>
![Page 98: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/98.jpg)
框架基本结构
<html><head><title>Web Page Title</title>
</head><frameset rows="50%,50%"><frame name="top" src="test.html"><frame name="bottom" src="test.html">
</frameset></html>
![Page 99: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/99.jpg)
框架基本结构
<html><head><title>Web Page Title</title>
</head><frameset cols="50%,50%"><frame name="left" src="test.html"><frame name="right" src="test.html">
</frameset></html>
![Page 100: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/100.jpg)
框架基本结构
<html><head><title>Web Page Title</title>
</head><frameset cols="50%,50%"><frame name="left" src="test.html"><frame name="right" src="test.html">
</frameset></html>
![Page 101: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/101.jpg)
框架结构设置
<frameset rows="30%, *">
<frameset rows="200, *">
<frameset rows="*, 2* ,*">
![Page 102: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/102.jpg)
框架结构设置
<frameset rows="200, 824">
<frameset rows="200, *">
<frame noresize>
![Page 103: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/103.jpg)
框架嵌套
<html><head><title>Frames</title>
</head><frameset rows="150,*"><frame name="logo" src="test.html"><frameset cols="125,*"><frame name="links" src="test.html"><frame name="main" src="test.html">
</frameset></frameset>
</html>
![Page 104: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/104.jpg)
框架嵌套
<html><head><title>Frames</title>
</head><frameset rows="150,*"><frame name="logo" src="test.html"><frameset cols="125,*"><frame name="links" src="test.html"><frame name="main" src="test.html">
</frameset></frameset>
</html>
![Page 105: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/105.jpg)
框架命名
在上一级的框架和窗口中打开链接的网页_parent
在浏览器的一个新实例中打开被链接的网页_blank
在完整的浏览器窗口中打开被链接的网页,消除所有的框架
_top
在存储这个链接的框架中打开被链接的网页,这与默认的链接行为一致。
_self
功能框架名
![Page 106: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/106.jpg)
目标框架
<A href="url" target="framename">Home</A>
![Page 107: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/107.jpg)
框架边框
<frameset rows="200, *" border="5">
<frameset rows="200, *" frameborder="no">
<frameset rows="200, *" bordercolor="blue">
![Page 108: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/108.jpg)
框架页边距和滚动条
<frame marginwidth="20" marginheight="20">
<frame scrolling="no">
![Page 109: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/109.jpg)
框架注意事项
考虑用户屏幕尺寸框架不能太多提供支持性导航
![Page 110: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/110.jpg)
表单元素
<form><input type="..." name="...">
</form>
Type vale: text, checkbox, file, password, radio, reset, submit, hidden.
![Page 111: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/111.jpg)
表单元素
<form><input type="..." name="...">
</form>
Type vale: text, checkbox, file, password, radio, reset, submit, hidden.
![Page 112: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/112.jpg)
文本框
<input type="text" size="20">
<input type="text" size="20" maxlength="30">
<input type="text" size="3" name="number" value="1">
![Page 113: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/113.jpg)
文本框
<input type="text" size="3" name="number" value="1" readonly>
<input type="text" size="3" name="number" value="1" disabled>
![Page 114: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/114.jpg)
文本框
<input type="text" size="3" name="number" value="1" readonly>
<input type="text" size="3" name="number" value="1" disabled>
![Page 115: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/115.jpg)
文本框
<input type="text" size="3" name="number" value="1" readonly>
<input type="text" size="3" name="number" value="1" disabled>
<input type="hidden" name="number" value="1">
![Page 116: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/116.jpg)
Textarea
<form><textarea cols="20" rows="20" wrap ="virtual" >Your default context go here…
</textarea></form>
文本会在当它到达文本区的边缘时自动换到下一行,并且当表单被提交时,文本会以其被显示的状态被发送。
physical
文本会在当它到达文本区的边缘时自动换到下一行,但当表单被提交时,文本是作为一个长行发送的。
virtual
文本会显示在一行中,直到用户按下Enter键.如果行比文本区的宽度大的话,文本会滚动
off
功能Wrap值
![Page 117: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/117.jpg)
Select
<form>Please select where are you going to be?<br><select name="region" size="3" multiple><option value="SoReg">South</option><option value="NoReg">North</option><option value="EaReg" selected>East</option><option value="WeReg">West/option>
</form>
![Page 118: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/118.jpg)
Select
<form>Please select where are you going to be?<br><select name="region" size="3" multiple><option value="SoReg">South</option><option value="NoReg">North</option><option value="EaReg" selected>East</option><option value="WeReg">West/option>
</form>
![Page 119: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/119.jpg)
Button<input type="button" name="dosomething" value="INPUT element" onclick="JavaScript">
<button type="button"><font face="Arial" >BUTTON element!<font>
</button>
<button type="submit"><font face="Arial">SEND IT RIGHT <I><font color="#FF0000" NOW!</font></I></button></font>
<button type="reset"><img src="Images\Harry.jpg" width="75" height="20">
</button>
![Page 120: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/120.jpg)
Button<input type="button" name="dosomething" value="INPUT element" onclick="JavaScript">
<button type="button"><font face="Arial" >BUTTON element!<font>
</button>
<button type="submit"><font face="Arial">SEND IT RIGHT <I><font color="#FF0000" NOW!</font></I></button></font>
<button type="reset"><img src="Images\Harry.jpg" width="75" height="20">
</button>
![Page 121: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/121.jpg)
导航条
![Page 122: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/122.jpg)
纯文本导航
![Page 123: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/123.jpg)
表格导航条
![Page 124: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/124.jpg)
列表导航条<UL>
<LI>…</LI><LI>…</LI><LI>…</LI>
</UL>
<OL><LI>…</LI><LI>…</LI><LI>…</LI>
</OL>
![Page 125: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/125.jpg)
列表导航条<UL>
<LI>…</LI><LI>…</LI><LI>…</LI>
</UL>
<OL><LI>…</LI><LI>…</LI><LI>…</LI>
</OL>
![Page 126: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/126.jpg)
图形导航条
![Page 127: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/127.jpg)
图形导航条
<A href="index.html"onMouseOver="document.homebutton.src='Home_Rollover.gif'"onMouseOut="document.homebutton.src='Home.gif'"><img src="Home.gif" width="108" height="25" border="0" name="homebutton">
</A>
![Page 128: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/128.jpg)
网站设计与维护
确定内容网站结构和导航设计风格和配色测试站点保持更新网站推广
![Page 129: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/129.jpg)
网站类型
个人主页信息类组织类政治类商业类
![Page 130: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/130.jpg)
调查上网人群的状况
调查客观信息调查站点的访问者
![Page 131: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/131.jpg)
确立目标
集中到网站的特色和目标之上有意地保持过时的技术建立预算
![Page 132: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/132.jpg)
推广网站
搜索引擎Lycos, WebCrawler, Google
![Page 133: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/133.jpg)
推广网站
搜索引擎Lycos, WebCrawler, Google
![Page 134: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/134.jpg)
搜索引擎的注册表单All the web: www.alltheweb.com/help/webmaster/submit_site
AltaVista: addrul.altavista.com/addurl/new
Ask Jeeves: ask.ineedhits.com/sitesubmit.asp
Excite & WebCrawler: https://secure.ah-ha.com/guaranteed_inclusion/teaser.aspx
Google:www.google.com/addurl.html
Lycos: insite.lycos.com
www.submitit.com
![Page 135: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/135.jpg)
搜索引擎主要关注标记
TITLEMETAALT
![Page 136: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/136.jpg)
TITLE<html>
<head>
<title> XYZ Company: where you will find the best handbag
</title>
</head>
…
</html>
![Page 137: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/137.jpg)
META<html>
<head>
<meta name="keywords" content="Massachusetts Institute of Technology,
MIT">
<meta name="description" content="MIT is devoted to the advancement of
knowledge and education of students in areas that contribute to or
prosper in an environment of science and technology.">
<title> MIT</title>
</head>
…
</html>
![Page 138: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/138.jpg)
<html>
<head>
<title> MIT</title>
<meta name="keywords"
content="Massachusetts Institute
of Technology, MIT">
<meta name="description"
content="MIT is devoted to the
advancement of knowledge and
education of students in areas that
contribute to or prosper in an
environment of science and
technology. ">
</head>
…
</html>
![Page 139: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/139.jpg)
<html>
<head>
<title> MIT</title>
<meta name="keywords"
content="Massachusetts Institute
of Technology, MIT">
<meta name="description"
content="MIT is devoted to the
advancement of knowledge and
education of students in areas that
contribute to or prosper in an
environment of science and
technology.">
</head>
…
</html>
![Page 140: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/140.jpg)
<html>
<head>
<title> MIT</title>
<meta name="keywords"
content="Massachusetts Institute
of Technology, MIT">
<meta name="description"
content="MIT is devoted to the
advancement of knowledge and
education of students in areas that
contribute to or prosper in an
environment of science and
technology.">
</head>
…
</html>
![Page 141: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/141.jpg)
ALT
<img src="picture.jpg" width="417" height="163"
alt="The Alt tag is similar to the Description Meta tag and Title tags">
![Page 142: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/142.jpg)
阻止搜索引擎
<html>
<head>
<title> This page will not be indexed by a Robot or Spider </title>
<meta name="ROBOTS" content="NOINDEX">
</head>
…
</html>
![Page 143: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/143.jpg)
阻止搜索引擎
User-agent: *
Disallow: /
在站点的最顶层目录中使用robots.txt文件
![Page 144: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/144.jpg)
阻止搜索引擎
User-agent: *
Disallow:
允许任何Spider搜索整个站点
![Page 145: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/145.jpg)
阻止搜索引擎
User-agent: *
Disallow: /cgi-bin/
Disallow: /tem/
Disallow: /private/
Disallow: /finance/results
标识出个别的目录不被搜索:
![Page 146: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/146.jpg)
阻止搜索引擎
User-agent: Lycos
Disallow: /
将个别搜索引擎排斥在外:
![Page 147: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/147.jpg)
阻止搜索引擎
User-agent: Lycos
Disallow:
User-agent: *Disallow: /
只允许个别搜索引擎:
![Page 148: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/148.jpg)
推广网站
搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All
![Page 149: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/149.jpg)
推广网站
搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿
![Page 150: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/150.jpg)
推广网站
搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿
![Page 151: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/151.jpg)
推广网站
搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿电子邮件
![Page 152: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/152.jpg)
推广网站
搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿电子邮件建立互惠链接
![Page 153: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/153.jpg)
推广网站
搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿电子邮件建立互惠链接广告条
![Page 154: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/154.jpg)
广告条资费
保证每月50万次的广告露脸量
搜索引擎:2万美元到5万美元关键字广告:4万美元到7万美元前100位网站: 2万5千美元到10万美元
![Page 155: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/155.jpg)
推广网站搜索引擎Lycos, WebCrawler, Google使用Web目录Yahoo, Free-For-All发布新闻稿电子邮件建立互惠链接广告条传统媒体
![Page 156: Web应用基础 - Fudan University](https://reader030.vdocuments.site/reader030/viewer/2022012802/61bd19b061276e740b0f5a40/html5/thumbnails/156.jpg)
Any Question?