31计算机网络与应用.ppt

《31计算机网络与应用.ppt》由会员分享，可在线阅读，更多相关《31计算机网络与应用.ppt（37页珍藏版）》请在三一办公上搜索。

1、计算机网络与应用,中国医科大学信息管理与信息系统系 田大军,窥宣鸯魄玻氨庶萄帧怒崇孽早匈就尧萌垫煞蚌测躯浚烬计政方惠流豹胞弊31-计算机网络与应用31-计算机网络与应用,HTML语言基础,洱烁腰渝棕称队聂李畸朋驯敌讳拂元省星建独拇霸隔悯蜡吮施不笛纯拾脓31-计算机网络与应用31-计算机网络与应用,初期的网站都是由静态网页组成的，网页中只有文字、图形、图像等，用户只能被动地接受这些信息。那时的Web页面的核心是HTML(一种标记语言)，它编写很方便，不要求有特定的语言环境，可以用任何一种编辑器写好，便可以放到浏览器观看结果。现在HTML已经有许多专门的编辑软件，如FrontPage、Hotdog

2、、Dreamweaver等。最初的Web是完全的静态，仅仅提供大量的信息服务，没有服务器端客户端的概念。“静态”指的就是网站的网页内容“固定不变”。当用户浏览器通过互联网的HTTP(Hyper text Transfer Protocol)协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。其页面的内容使用的是标准HTML代码，再加上GIF格式的动态图片。,听童桐评墅辆壹址逼讥瑰琳盅喉诸事所讯悼犊橇你涉鲤启己椅玄挪返戌筐31-计算机网络与应用31-计算机网络与应用,静态网页制作：1、网页素材搜集与制作（图像处理与动画制作）2、网页版式设计3、文本编

3、写自己的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。4、处理网页之间的关联这主要是建立合理、高效的网页导航系统。5、网页发布主要是将建设好的网页上传到服务器中供用户浏览。,哗慎洛斥裹迈稿缘慈酣牌贸达塌碟娘诌涝聪款腺斌傍雾狐雌媒减仁雄碑坪31-计算机网络与应用31-计算机网络与应用,静态网页的制作工具1、图像处理与动画制作工具：Photoshop、Flash等。2、网页编辑工具：1）纯文本编辑工具，如Notepad等；2）转换工具，如word等；3）专用工具，如FrontPage、Dreamweaver等。3

4、、网页上传工具：1)FTP工具，如WS-FTP，CuteFTP等；2)专用网页编辑软件的文件传输功能。4、网页优化工具：网页减肥茶、网页优化大师等。,蜜赵济蹿比击节凡豺睡血竭狙者髓陷标榔状悯倚晶芭毗黑票虑聊缓缝浪院31-计算机网络与应用31-计算机网络与应用,HTML简介HTML是Hypertext Markup Language(超文本标志语言)的缩写，它是构成Web页面(Page)的主要工具，是用来表示网上信息的符号标志语言。在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的母语。WWW(World Wide Web)所使用的

5、出版语言就是HTML语言。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML翻译成可以识别的信息，就是现在所见到的网页。,奢又搁佛倦焕秃甥助困纲粉荆村搬们签聊凝衔楞羞穿伞确烟拆菠梁副侍厌31-计算机网络与应用31-计算机网络与应用,HTML的功能1)出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。2)通过超链接检索在线的信息。3)为获取远程服务而设计表单，可用于提交数据、检索信息、定购产品等。4)在文档中直接包含表格数据、视频剪辑、声音剪辑以及其他的一些应用。,剪诬押漫恩尚弦墓揩搓尧炬逼辗乌邀蝇径健堵橡画分滚晰显茎鸭泞仁降乖31

6、-计算机网络与应用31-计算机网络与应用,HTML文件的实质是以.htm或.html为扩展名的纯文本文件。,是供浏览器解释的格式。可以使用记事本、写字板等编辑工具来编写HTML文件。HTML语言使用标志(标签)的方法来编写文件。它通常使用来表示标志的开始和结束(例如标志)。,翅揉泛阅甄住痰盘盯蚂鸦蕊鸡炭夸爸如毖罩拖鼻融表凭庐豢腿挽酬精瀑状31-计算机网络与应用31-计算机网络与应用,HTML文件的组成头部和主体标签和普通文本,html文件的格式查看网页源文件，可见html文件的格式如下：网页的标题其中省略号部份是网页的内容,其实每个标记都是一一对应的。每个网页文件都是以开始和以结束。与之间的内

7、容是网页的标题。会显示在浏览器的标题栏上。与之间放的是网页内容。,蜕奎罚呢稽吻塔衔门腋菱殉胺怜粉帐僚盂蕾凳肉遍示川罪缺湾悉瘸争锹哭31-计算机网络与应用31-计算机网络与应用,标志（tag）的结构特点 1、用包围。2、多数成对出现。3、结束标记用/。4、标签是嵌入式的。5、标签可有多种属性和属性值。6、标签用半角字符，对大小写不敏感。,崩谆窗掺喝涉师陪戳督拌算丘暗食压慌途巾诸墟钥偿吭史懈珐驶苫袒娥恭31-计算机网络与应用31-计算机网络与应用,文档标题文档标题为。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的主题。要将网页的主题显示到浏览器的顶部其

8、实很简单，只要在标志对之间加入要显示的文本即可。,例：中国医科大学,泼凉级拷坷霉夷仍绿迫抠泊退衰瘁数娘五全干倚因绕凉睡嗅豁他级朋爬枫31-计算机网络与应用31-计算机网络与应用,颜色表示方法HTML用#RRGGBB字符串代表色彩，成为RGB值。RGB值中的RR、GG和BB分别代表红绿蓝三原色的两位十六进制整数值。每种原色的取值范围在00和FF（即十进制的0和255）之间，即一个字节存储一种原色。每种原色都有256种由浅至深的色彩变化，网页中呈现的色彩都是由这三种原色调配出来的。rgb值可以表示出（256*256*256）种颜色。,市汀润樟弓企统抢叭钧引蒜峨僚橇友集釜扇伸竿怜喉釜沙椰侄燕啸翌劣昔

9、31-计算机网络与应用31-计算机网络与应用,页面格式标签在网页设置中，会用到HTML页面设置、列表设置等格式标签。段落标签预处理文本换行标签,工曝跋速险团旁晾评闻描譬家回祈距淘缘很抄酶角盟倒纫韩厦客锰何藩丙31-计算机网络与应用31-计算机网络与应用,标题格式标签HTML语言提供了一系列对文本中的标题进行操作的标志对：，即一共有6对标题的标志对。是最大的标题，而则是最小的标题，也即是标志中h后面的数字越大标题文本就越小。如果HTML文档中需要输出标题文本，就可以使用这6对标题标志对中的任何一对。,一号标题六号标题,阀数啥厨观痈喇闰郡驻鸥恿妒碗聚掌概盖席饶量影庐怖仪朝础历犊殉没勤31-计算机网

10、络与应用31-计算机网络与应用,文本标志用来使文本以黑体字的形式输出。用来使文本以斜体字的形式输出。用来使文本以下加一划线的形式输出。下标上标用来输出打字机风格字体的文本。用来输出引用方式的字体，通常是斜体。用来输出需要强调的文本(通常是斜体加黑体)。则用来输出加重文本(通常也是斜体加黑体)。,讼堡粘撤蕾堑炬英颗怔碾怀止顾既影喂命矗哭捡脱莱粕另歇桔臭葛侧周浴31-计算机网络与应用31-计算机网络与应用,设定文本的字体大小、颜色、字体名等，通过属性size、color、face的控制来实现。size属性：改变字体的大小，它可以取值：-N、N和+N；color属性：改变文本的颜色；face属性：字

11、体名。值为系统中现有的字体，如“楷体_GB2312”。为保证在客户端浏览器中显示正确字体的网页，不要使用非系统自带的特殊字体，如“华文彩云繁”等。,例：宋体红色2号字,倘芦忽月缀蛇茶详隧跋汝循顿喂咒酸斟稀吞酚运触浊兴不桩热岿抢辙掇阑31-计算机网络与应用31-计算机网络与应用,特殊字符,曲汤珠捕赏钱赎电辖粪淘惨金琅囊抗差陇涛眉归漠迅喉烦羽洛匹硬艾具酞31-计算机网络与应用31-计算机网络与应用,网页图像格式：JPEG、GIF、PNG格式。,可交换图像文件格式(GIF)由于几乎所有的 Web 浏览器都支持 GIF 格式（文件扩展名为.gif），因而该格式是万维网上最常用的两个图像文件格式之一。由

12、于此格式最多仅可以显示 256 种颜色，因而最适于黑白线条图形、彩色剪辑图片和具有大块实心颜色的图片。GIF89a 格式也同时支持透明和动画。GIF 文件用于：包含透明区域的图像。有限的彩色，例如 256 色或更少。离散区域中的彩色。黑白图像。小尺寸图像，例如站点上的按钮。清晰度和边缘清晰度很重要的图形，例如线条图形或卡通。包含文本的图像。动画。,忱仇姜奔婿龙蚌台秦房视锌黄堆寐灾踩蚕渡锚敦痹毁秉明砰履猎砰气昭刑31-计算机网络与应用31-计算机网络与应用,联合摄影专家组(JPEG)JPEG 格式（文件扩展名为.jpg 或.jpeg）是 Web 上的另一个最常用的图像文件格式。它不局限于 256

13、 色，因此您可以使用它来显示高质量的照片或包含上百万种颜色的图片。由于它被设计为图像存储格式，因而可以有效地将高质量的大照片压缩为非常紧密的文件，这在您用电子邮件发送大图像时很有用。然而，您将图像文件的大小压缩的越多（或修改并重新保存图像），图像信息的丢失也越多并且质量也会下降。此外，该格式不支持透明和动画。JPEG 文件用于：照片。自然视觉效果图像。大数量的颜色，例如上百万。需要大量细节的图像。大尺寸的图像。,最淤掖寨穿鼎墓编静敝挟翅孜峙艺盾险魄躺椿酌逝概焙挑畦梅署洗攘乖辉31-计算机网络与应用31-计算机网络与应用,可移植网络图形(PNG)PNG 格式（文件扩展名为.png）可以显示上百万

14、种颜色。然而，由于它是一种新的格式，当前只有很少的浏览器可以支持（尽管它正快速获得支持）。以这种格式保存的图像，即便将文件压缩，其质量也不会降低。它支持透明，但不支持动画（因为它不能包含多个图像）。,杂机僳柱茬侨裸仑裸庶着翟凿上虚笔喘锣穿篇咱绥史晶停矣涌叛垮饼姿导31-计算机网络与应用31-计算机网络与应用,图像标志标志来处理图像的输出。标志并非真正地将图像融入到HTML文档中，而是标明图像文件的存放位置。src属性必须赋值，其值是图形文件的存放位置和文件名。align是图像的对齐方式。border属性是图像的边框，可以取大于或者等于的整数，默认单位是像素。width和height属性是图像的

15、宽和高，默认单位也是像素。alt属性是当鼠标移动到图像上时显示的文本。,图像实例,坍剂闺门抵材唐舆街侮匝脐曲慌必词闷毖预样畔烤喊玄雅扇吐坎怯渭莫皆31-计算机网络与应用31-计算机网络与应用,水平线标志标志是在HTML文档中加入一条水平线，具有size、color、width和noshade属性：size是设置水平线的厚度。width是设定水平线的宽度，默认单位是像素。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性，水平线将有阴影)。,论泳灸途晚骨捶娜导妻蔗汰榜张辉潦雕肄幌墒煽琐待忱绷荡裴情早幌谅辈31-计算机网络与应用31-计算机网络与应

16、用,表格【重点】表格标志对于制作网页是很重要的，现在很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意地进行背景和前景颜色的设置。可见表格在网页排版中的作用。,？想想表格在网页中有哪些作用。,快汗狂递诗佰阻埃腺绝康犹邯鸵樊缀恍啪填职感粕庶潍秃甜砖席造盎蹿裂31-计算机网络与应用31-计算机网络与应用,属性用途bgcolor设置表格的背景色border设置边框的宽度，若不设置此属性，则边框宽度默认为0bordercolor设置边框的颜色bordercolorlight设置边框明亮部分的颜色(当border的值大于等于1时才有用)bordercolordark设置

17、边框昏暗部分的颜色(当border的值大于等于1时才有用)cellspacing设置表格的单元格之间的空间大小cellpadding设置表格的单元格边框与其内部内容之间的空间大小width设置表格的宽度，单位用绝对像素值或总宽度的百分比align表格在网页中的位置,标志对用来创建一个表格,村较恒贱什王侍虾杰哮蜡怀棠厉羞藏播践屎眩骤缝觉檬板治幸锄镰萧寂谍31-计算机网络与应用31-计算机网络与应用,表格的定义顺序是先定义行，再定义该行中的单元格。标志对用来创建表格中的每一行。此标志对只能放在标志对之间使用，而在此标志对之间加入文本将是无用的，因为在之间只能紧跟标志对才是有效的语法。标志对用来创建

18、单元格，此标志对只有放在标志对之间才是有效的，输入的文本也只有放在标志对中才有效(即才能够显示出来)。具有width、colspan、rowspan和nowrap属性：width是单元格的宽度，单位用绝对像素值或总宽度的百分比。colspan设置一个表格单元格跨占的列数(缺省值为1)。rowspan设置一个表格单元格跨占的行数(缺省值为1)。,诞眼雕去祥洲治鸯欲冤讨我置靡铭讨却实豺籍傣甩粕做箭傲忙褐烤赎惊起31-计算机网络与应用31-计算机网络与应用,表格实例：1单元格跨越多行23 45 67单元格跨越多列,逼辫汹停书阻鱼忠居赶漳持摘宴芬稀斤隘糠夺过算程肃疆理缨余继秀牺熏31-计算机网络与应用

19、31-计算机网络与应用,相对路径：相对于当前文档./的用法 站内绝对路径：相对于网站根/的用法绝对路径：资源在网上完整的存放地址，网址。,超链接重点,豫您骗琼棍脯粹棉筑影茸木爸疑忱育溅帜菩舆企叔申他脏硕舰炭懦正划条31-计算机网络与应用31-计算机网络与应用,网页内部链接 点击链接热点，网页跳转到资源片段：定义链接热点到资源片段 定义资源片段资源片段,作楼隧诞坑蝴伺猛怜昆袋倒绽养朗苑吨瞳棕紫肮亮续左掷悔情啊汛绰殖贴31-计算机网络与应用31-计算机网络与应用,网页间链接链接文字例：中文主页 网站间链接网站间的链接，必须使用目标资源的绝对路径，从协议开始。例：新浪网,娶鞋逝渺扼瘪烹立诀吱督赡其弘

20、能祈畔挽打贺彝零彤楼为抓馆尉臼迄瘁挥31-计算机网络与应用31-计算机网络与应用,链接到电子邮件地址给我写信，打开客户浏览器设定的默认电子邮件程序，收件人为mailto后的地址。将图像作为超级链接的锚点语法：,蕉讥厕游拭糕淫汕沟比裳砌糖拎伎卤扶啃讶转秆框困律袭条黍皂是睫傅防31-计算机网络与应用31-计算机网络与应用,网页内嵌窗口 说明：src属性为窗口载入的初始网页；name属性指明窗口的名称，它和标签的target属性相对应。,狈惜酮呈创孺躁实音娜蛇煽捷衣启咳剁饲棕鬼歉船傈梨腻磁杉耗翘桐烘佣31-计算机网络与应用31-计算机网络与应用,网页表单重点,表单是网页上的一组特殊对象标签，是接受用

21、户输入数据的窗口，是用户与服务器之间信息数据交互的桥梁。可以接受用户输入的信息数据，并提交给服务器端预定的程序等来接收并处理数据。,表单技术的应用，使得基于网页的编程得以实现。含有表单的网页称作表单网页，表单对象中包含有若干表单域，每一个表单域也称表单控件，是表单的基本元素，用户可以在表单域中输入信息或作出选择。,胁前彻父殊雅埔悦公扬巍向每杏赢骑倔级扛使尿贴馏效坡耶预骂冷书玲揭31-计算机网络与应用31-计算机网络与应用,表单标签：设定表单的起止位置，并指定处理表单数据程序的url地址。基本语法结构：表单元素,action：用于设定处理表单数据程序url的地址。method：指定数据传送到服务

22、器的方式。有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器。name：用于设定表单的名称。onreset和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。,怠班羔铸伦仅伙磊苗籽簧绽牢燕囚许某惺爷羊矿丝淘耪沪衡天光侧规壹雷31-计算机网络与应用31-计算机网络与应用,表单输入域（控件）此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：,多行文本输入标签参数：name：文本

23、框名称；clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft：自动软回车换行，换行标记不会传送到服务器中去。,我卡包土垣肚挖沈展垦痊翠脂境元癌陋票端趴槛县深账蹦县贼州肋歹仍领31-计算机网络与应用31-计算机网络与应用,下拉菜单标记需与标记联用，下拉菜单中的每个选项要用标记来定义。标记的语法如下：name：设定下拉式菜单的名称；size：设定菜单框的高度，也就是一次显示几个菜单项，默认值1；multiple：设定为可以进行多选。选项标记selected：表示当前项被默认选中；value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。,揣蛰菜涛苔封叫箔恩兑既纷调蜗睫完谬米咏镭示玉斯荐叁提亏冕用沫舜锭31-计算机网络与应用31-计算机网络与应用,姓名：性别：男 女 电子邮件地址：手机号：学历：高职本科硕士博士,饺噶拔跪恼隐趴芋锐恿预空渺搜虾蕴鹅幕丙蝇婉讹蚕抵密娘柬导边训襄撤31-计算机网络与应用31-计算机网络与应用,逝彦腺演株千以谩尸卑艇独识耗脆饥硒粪是昔象矣抚劳娥凄迢秘剐仓剿募31-计算机网络与应用31-计算机网络与应用,