第二HTML基础.ppt
60页
- 中国城市
- 北京
- 上海
- 广州
- 美国城市
- 华盛顿
- 芝加哥
- 纽约
- 北京
- 上海
- 广州
- 华盛顿
- 芝加哥
- 纽约
第二章 HTML基础彭煜玮武汉大学计算机学院2009.9ü1涨帆匈男菩痛哑桔仟腹朗丧剔曼骗睡壁啸渺炽嗅奇讶庚药考睛拖苇堪翟杖第二HTML基础第二HTML基础 教材和参考书目ß网页设计教程武汉大学出版社作者：吴黎兵，罗云芳主编ß网页与Web程序设计机械工业出版社作者：吴黎兵，熊建强主编ü2凶抖羌惦靶骆阴附镣赐纹淆揖涣厉乒彤怨糊恐兆获恰润冤锑撂噬喜竞办咯第二HTML基础第二HTML基础 内容回顾WWW具有三个统一：1.统一的资源命名方式：URL（统一资源定位符，即网址）2.统一的资源访问方式：HTTP（超文本传输协议）3.统一的信息组织方式：HTML（超文本标记语言）WWW是成千上万个网站连結而成的页面式网络信息系统WWW采用“客户机/服务器”结构ü3执揍柞彼秤虐带狂饲揽隔谢孪搂色飘覆耘棒狱焙泅招捡闲勤喀缨裤合慢腰第二HTML基础第二HTML基础 HTTP （超文本传输协议）Protocol，一组在网络上发送信息的规则和约定这些规则控制在网络设备间交换消息的内容、格式、定时、顺序和错误控制通俗的说就是不同的网络程序的交流语言，我们常见的OICQ使用UDP协议、ICQ使用TCP协议、E-mail程序使用POP3和SMTP协议，正像我们国人使用汉语一样......ü4酌著薄鸯氖基祸军粉含霹萎硷捉善摩邻杂拍央书躇矽瓮交捡题沥身炔耙东第二HTML基础第二HTML基础 HTTP （超文本传输协议）ß超文本传输协议(HyperTextTransferProtocol,简称HTTP)是WWW浏览器和WWW服务器之间的应用层通讯协议。
HTTP协议是用于分布式协作超文本信息系统的、通用的、面向对象的协议ßHTTP会话过程包括四个步骤: (1) 连接(Connection); (2) 请求(Request); (3) 应答(Response); (4) 关闭(Close)ßHTTP协议是基于TCP/IP之上的协议,它不仅保证正确传输超文本文档,还确定传输文档中的哪一部分,以及哪部分内容首先显示(如文本先于图形)等等ü5斩冕组岭贤妈杨柯惭致侈芥遏凿诬檄三霸哩靡蜒卜贯缝凉聪祈盎予莫凿悲第二HTML基础第二HTML基础 HTTP （超文本传输协议）HTTP是一种请求/响应式的协议一个客户机与服务器建立连接后，发送一个请求给服务器，请求的格式是：统一资源标识符（URL）、协议版本号，后面是类似MIME的信息，包括请求修饰符、客户机信息和可能的内容服务器接到请求后，给予相应的响应信息，其格式是：一个状态行包括信息的协议版本号、一个成功或错误的代码，后面也是类似MIME的信息，包括服务器信息、实体信息和可能的内容ü6丝恶酗轧笔淖谦奈霜幌募请咒殊婆痊闽碰爬鬃粳卢皇碎亥理劣膳温营兜凛第二HTML基础第二HTML基础 HTTP （超文本传输协议）ß协议结构HTTP报文由从客户机到服务器的请求和从服务器到客户机的响应构成。
请求报文格式如下：ß请求行以方法字段开始，后面分别是URL字段和HTTP协议版本字段，并以CRLF结尾SP是分隔符除了在最后的CRLF序列中CF和LF是必需的之外，其他都可以不要请求行请求行通用信息头通用信息头请求头请求头实体头实体头报文主体报文主体ü7信瘁曝樟催灯阉醚滨列朱所函恫留镰暑祸健高厂剃糠萍夷埠嚣耍贪狼凌缘第二HTML基础第二HTML基础 HTTP （超文本传输协议）ß状态码元由3位数字组成，表示请求是否被理解或被满足原因分析是对原文的状态码作简短的描述，状态码用来支持自动操作，而原因分析用来供用户使用客户机无需用来检查或显示语法ü8耿廷敦罚碎吏初牛邱涧驯惧岛繁请估段颇脑倒筏啤抨枕扰兄溜喀漱音俊瘤第二HTML基础第二HTML基础 HTML基础一、HTML的概念Þ1.什么是HTML？超文本标记语言（HTML——HyperTextMarkupLanguage）是用于设计网页源文件（网页文档）的语言每一个页面的代码保存为一个网页源文件(.htm文件)八十年代初，HTML由万维网联盟（W3C：WorldWideWebConsortium）制订。
HTML包括一些定义页面内容和格式的符号，称为标记它能够将文本、图像、声音和动画结合在一个网页文档中这些文档可以通过Web浏览器显示，还可以通过超链接以访问其它的信息资源后来，进一步推出了XML（扩展标记语言），该语言可以由程序员自己定义标记ü9脓腾景磨抬译橇嘎九瞥洲岳诚萄矢页沁绿簿滤诣衙仲驴涎拧粮蒸杜鸟痢客第二HTML基础第二HTML基础 HTML基础2.网页的组成网页由元素构成，每个元素用HTML代码和标记定义标记是网页文档中的一些有特定意义的符号这些符号指明如何显示文档中的内容标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）结束标记和开始标记所用的字符相同，只是前面加一个斜杠例如：…用于标记一个自然段标记可以具有相应属性即各种参数，如size、color、text、width和noshade等例如：ü10粪给渔护摘即杏肯逼贪舔瘟妥秽腺膀磕痘恳力赶擦藻耻埃啸坏慰镇附鳞箍第二HTML基础第二HTML基础 HTML基础标记通常可以分成两种：•第一种用来指定网页上的元素或元素的样式。
例如，指定一个自然段及其字体和颜色：自然段内容•第二种用来指向其它的资源例如，指定一个链接地址：武汉大学指定一个图片文件：ü11乘猩惊承诌斩锨俐棉书销潜绅居疆蓉虹固赞祸站驰阂叛链须胀女逸醒驼讽第二HTML基础第二HTML基础 HTML基础3.什么是超文本、超媒体和超链接？超文本是网页上具有链接功能的文字例如，娱乐新闻电影超媒体是网页上具有链接功能的多媒体超链接是网页上连接其它网页或网页上指定位置的超文本和超媒体超链接分为文字和图像（包括动画）两种，网页中的一段文字、一副图像或图像的某一个部分等都可以定义为超链接ü12猜芝耳筹块淹饮元硷倡巾申釜呛诣赌祷砌莆鞠迭辣骚祸外扶搂酶滩薛眷鬃第二HTML基础第二HTML基础 HTML基础二、如何编写和浏览HTML网页文档启动IE，然后使用“查看”菜单中的“源文件”菜单项，进入记事本，就可以输入网页源文件了。
在输入完之后，另存为.htm文件或者直接进入记事本，输入网页源文件在输入完之后，另存为.htm文件（选择保存类型为“所有文件”）在浏览器中输入该文件名（全路径）或者双击该文件，就能浏览HTML源文件的网页效果ü13人街俐棚秘琢刻淡嗅暖乒驭芯纺杉悼阻撇啼逆堵荔倡曳便灌侯绷呕惟邪凡第二HTML基础第二HTML基础 HTML基础例如：
（2）头部标记：
…整个HTML文档分头部和主体部分头部使用…标记标识，凡是在此标记之内的内容，例如标题等，均属于头部信息头部信息不显示在Web页中头部信息一般是放置一些指示浏览器如何显示该HTML文档的信息ü16辆沾中峨蛊厦乙忽离仍挖匿旭舟零踪士肪喉材童杖伦岳又嚣训奉卸阔朴疽第二HTML基础第二HTML基础 HTML基础（3）头部标题标记：在段落标记中还可以使用align属性，用来说明对齐方式：
，align可以取值left：左对齐center：居中right：右对齐例如：
表示由这个标记包括的文本采用居中对齐的方式ü19聚蜕焙炭逮凯铺嚣娥怜鸽悉寇敲拦传翅泅掸橱低圃启宙搜供荒林砚鼻肆玉第二HTML基础第二HTML基础 HTML基础（2）
（换行标记）
是一个很简单的标记，它没有结束标记，用来创建一个换行
在中产生的行距比在外面产生的行距小（3）
…（两边缩进标记）在
…标记之间的文本将按照两边缩进的方式显示ü20一斌因歇窝辨狗孪曙琐埃秀海呈班戈柒思雪禹汰介踞劫乖务数扬铝瑞厦畅第二HTML基础第二HTML基础 HTML基础（4）
[例2-2]创建一个普通列表：ü21环对票收煮隔衰街送柑悦底绎严茫袄卜矛年饱硬雨销等驻犊囤而醋虽桨厨第二HTML基础第二HTML基础 HTML基础 该网页的HTML源文件test2-2.htm如下：
若
放在- 中国城市
- 美国城市
②align属 性 ， 它 用 来 说 明 对 齐 方 式 ， 语 法 是 ：
③align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个例如：
表示标记中的文本居中显示ü26娱焉慎朱松霉坠耍相盔萎玛诲筹诣挝仆妈钻蛙难郭尤酝标润浙足鸡钓勋睁第二HTML基础第二HTML基础 HTML基础3.文本标记（1）(预处理标记)表示标记之间的文本原有格式PRE元素内的文字是已经格式化的空格和回车都是保留的2）……（六级标题标记）是最大的标题，则是最小的标题如果要在HTML文档中输出标题，那麽可以使用六对标题标记的任何一对ü27省诵哮丙甄婪匝郁奄溪遏篷缅流祟吓蔷霍唐诗娃粘绘鸯陡撤硷伍蔑哀铆韩第二HTML基础第二HTML基础 HTML基础（3）（字体标记）①之间的文本以黑体字的形式输出；②之间的文本以斜体字的形式输出；③之间的文本以下加一划线的形式输出。4）（强调加重标记）①用来输出需要强调的文本(通常是斜体加黑体)；②则用来输出加重文本(通常也是斜体加黑体)ü28郑寿埂渡蔗拘掷氰愚退驼茬菩吏抠少宽垢扯票齿架赂挟焊奉快酒嘱卞呛崩第二HTML基础第二HTML基础 HTML基础（5）（字体的大小颜色标记）①可以指定输出文本的字体大小、颜色，它主要两个属性size和color②size属性用来指定字体的大小，可以取值：-1、1和+1；③color属性用来指定文本的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色名称例如，"#ff0000"，引号内的rrggbb是用六位十六进制数字表示的RGB(即红、绿、蓝三色的组合)颜色，#ff0000对应的是红色ü29遍串晨诉匙惊菏豢斯森漓缸吗话葛庆赛氢颠兵蒲挽凉狄摄崩肾苑庞烁毖赂第二HTML基础第二HTML基础 HTML基础④Html语言所给定的颜色名称有：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal。
例如：size取值“+1”、color取值“red”时的文本表示标记之间的文本按大小为+1，颜色为红色显示ü30子募炎罚糕砌踩挡涕盼蟹垛擦敦阻驭蚕序勿圣宁殆健翻啃殴贮凌理剐邻睬第二HTML基础第二HTML基础 HTML基础[例2-4] 文本标记的综合示例ü31闲抑群榴诚猪吹溅叮吠狠敞播蛮缺撒浙叼第默侧段摆刹卤狡雷动狸弥形锅第二HTML基础第二HTML基础 HTML基础该网页的HTML源文件test2-4.htm如下：
最大的标题
使用h3的标题
最大的标题
黑体字文本斜体字文本下加一划线文本强调的文本加重的文本size取值“+1”、color取值“red”时的文本ü32咬胰残哉抹雷泌乘阑檬训妹掐撩代钾炼萨偷代洪永分熟胎狄绊尺蒲舀秤抡第二HTML基础第二HTML基础 HTML基础4.链接标记（1）…（超链接标记）①在标记对之间可指定作为超链接的文本或图像，使用例如，指定超链接及其文本“武汉大学网站”：武汉大学网站或者，指定超链接及其图像“d:\pic1.gif”：
在上例中，href的值是武汉大学的网址（href——缩写：httpreference含义为http引用ü33雾倒爱檀兑锭集伏桔失嘘芹爹径饯渔祭泼疗姓践就散饺剪退遗牺寡处舷椰第二HTML基础第二HTML基础 HTML基础②href的值也可以是mailto:形式，即发送E-Mail形式语法为：这就创建了一个自动发送电子邮件的链接，mailto:后边紧跟想要自动发送的电子邮件的地址(即E-Mail地址)例如，链接到我的电子信箱abc@：这是我的电子信箱(E-Mail信箱)ü34噬锡穷砒蝎婉阔赚腮蕴蝗银亲钓绘巷撤训好研巾设甚乾琵嘛瞧讯祈傀溯扫第二HTML基础第二HTML基础 HTML基础③还具有target属性，此属性用来指明显示的目标窗口。
如果不使用target属性，当浏览者点击了链接之后将在原来的浏览器窗口中显示HTML文档，若target的值等于“_blank”，点击链接后将会打开一个新的浏览器窗口显示HTML文档例如，进入，并且在新窗口中显示网页：（标签标记）①标 签 标 记 需 要 结 合 标记使用name属性不可缺少②标记用来在同一网页中创建一个标签(即做一个记号),即在同一网页中创建链接，以便转到同一网页中有标签的地方并显示例如，在页顶创建一个标签此处创建了一个标签③要找到标签所在地，就必须使用标记例如：点击此处将转到标签“Top”的地方显示HTML基础注意：注意：href属性的值若是标签属性的值若是标签名，必须在标签名前头加一个名，必须在标签名前头加一个“#”号 ü36侨几手谱敦法弗困冻愿熏溜违饱拾枢胀闰辈销肚尼典盾枢啮模捞姿蜜男浴第二HTML基础第二HTML基础 HTML基础[例2-5]链接标记的综合示例
它alt="网页制作网页制作"属性表示在网页中可以属性表示在网页中可以用文字用文字"网页制作网页制作"代替该图像先行显示代替该图像先行显示出来ü41缺七灌蔚蒙吭靠瞳衡焚啸梗烛沽待肿该褒吗完质管淋海辙某所照钟嗣寥葱第二HTML基础第二HTML基础 HTML基础（2）多媒体标记A.A.设置音乐播放的链接设置音乐播放的链接在Windows中，可播放的音乐文件格式常有au、mid及wav三种若要提供音乐文件让浏览者播放，则可建立指向音乐文件的超链接例如：甜美音乐B.B.设置影像播放的链接设置影像播放的链接常见的影像文件有mov、mpg和avi可建立超链接到影像文件当浏览者单击超链接时，将会调用WindowsMediaPlayer，进行影像文件播放例如：本市交通 ü42秒舰艰扇杖膳胸抢鹊浪妈雍了兵的接煎遁还滩蔼购颊吐彰蔚斑便鸳邱弯褐第二HTML基础第二HTML基础 HTML基础C.C.直接将音乐或影像嵌入网页直接将音乐或影像嵌入网页可以用 若设为FALSE（默认值），则只播放一次D.D.播放网页背景音乐播放网页背景音乐可运用 设置一个格子跨占的行数 ü45各吕糖睁请绒挫稽碗刁罚摇掇吏稿弗固努徊翟令扼春侯债靠耳刹菜伐驻笋第二HTML基础第二HTML基础 HTML基础 ü49佳术舷钻愿晰彼滋冉厂喷障封蛀煌内敲隔盈如埃叉孰献沿没敞首钳酞蘑攀第二HTML基础第二HTML基础 HTML基础
创建标签处
欢迎想要学习网页制作的同学访问网站
武汉大学网站
ü37砸垫劣饼利成如耍尤魁设饿碑釉吮凛醚乌侨翻捎谜正曳咸酮跌井径思饰环第二HTML基础第二HTML基础 
本网站的主要内容
假如图形文件放在网页文档所在目录的一个子目录(images)下，则代码应为：
此外，标记还有alt（文字代替）、align（对齐）、border（边框）、width（宽度）和height（高度）属性 ü39媳印菩把郡腐淋嘱吞穿铀怜骂培姻喻普城倔告上舍虞渭馈饶踪晾湾沛掷释第二HTML基础第二HTML基础 HTML基础假如图形文件放在网页文档所在目录的上层目录(如home)下，则相对路径就必须是准网址，即用“../“表示网站，后边紧跟文件在网站中的路径例如，home是网站下的一个目录，则代码应为：
例如，home是网站下的目录king下边的一个子目录，则代码应为：
ü40痘若耪膨鼓缕需喉掣吼恍征甸兽轿渭询馁瘪勿络第叮凝骆输岔忿锯伍郁盆第二HTML基础第二HTML基础 [例2-6]图像标记举例
HTML基础若事先在网站根目录中存放一幅图像若事先在网站根目录中存放一幅图像logo468_60.gif ，则可以在网页中显示，则可以在网页中显示它。（创建一个表格）（2）
和 （创建表格中的每一行和每一格）（3） （创建表格头）[例2-7]用表格标记创建下列表格 ü44伟起黎卡牺链厘沥核碟唐趴毯嫂锅弦通挨戳伊涧绘辩酿置顽叔悦榷诞醇杨第二HTML基础第二HTML基础
ü48粒供霞贸痞林锌瞄废接素着斑炭材网憎毗下迁襄朴烙踩过引灼惋鳖搏瓢挡第二HTML基础第二HTML基础 HTML基础7.表单标记（用于制作对话框）（1）（表单开始和结束标记）（2）（输入区标记）（3）意大利 英格兰 西班牙 AC米兰 佛罗伦萨 曼联 纽卡斯尔 巴塞罗那 皇家社会 尤文图斯 桑普多利亚 利物浦 阿申纳 皇家马德里 …… 拉齐奥 国际米兰 切尔西 米德尔斯堡 马德里竞技 ……
例如：ü51畅哎噶株鼻贴社脑往阔缉耻短以剁垣八琐叼饵救惩狄郁救荫脉瑶茁隅萌杉第二HTML基础第二HTML基础 （3）标记用来创建一个下拉列表框或可以复选的列表框此标记对用于
标记之间