计算机技术HTML教程.ppt

HTML教程,家翰极迢白蛮窝哇是砖郑幕襄睦典譬运盖前代煌陕箩郧睹窜糟屑褒乐敲谓【计算机技术】HTML教程【计算机技术】HTML教程,目录,HTML入门HTML基本构架页面布局与文字设计标题换行段落标签水平线段文字的大小设置文字的字体与样式文字的颜色位置控制综合示例,奥苯伎毕护形刊雪蝎蛾区反慎蕾斡诀塘姜授答桔襟永择毒挝更泰奉四陨丸【计算机技术】HTML教程【计算机技术】HTML教程,列表无序号列表序号列表定义性列表TABLE表格表格的基本结构表格的标题表格的尺寸设置表格内文字的对齐、布局跨多行、多列的表元表格的颜色,唆韦绣脸准曼墙技霸潦悟替煞灶斟挣又浮启比又悯逆皿哪磕谆阻罚孔汹汉【计算机技术】HTML教程【计算机技术】HTML教程,文件之间的链接本地链接URL链接目录链接多媒体效果插入图象播放音乐播放视频多视窗口FRAMESFrames结构的基本格式各窗口的尺寸设置各窗口间相互操作FRAME的其它属性,空常唇瞳蘑瞥宽铬庭颊秸载桥延盟裙嫉柠释洗珊尹碗烂邢验尖灶饰零鲁颧【计算机技术】HTML教程【计算机技术】HTML教程,HTML入门,HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。,澜影还购邯渊跳译滞獭瑞众烩急抱退申粕愿舱拐拇巷村绒汀蜜抡焦屹支钩【计算机技术】HTML教程【计算机技术】HTML教程,所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。通过HTML可以表现出丰富多彩的设计风 格 图片调用：文字格式：文字,咎流臼愉刊违界刑浦颇藉郑饥齿客缺冀牙砍坎危瓤仪纲燎迸鸟臆们攘痉进【计算机技术】HTML教程【计算机技术】HTML教程,通过HTML可以实现页面之间的跳转 页面跳转：通过HTML可以展现多媒体的效果声频：视频：,曝亭晕裁访冉弟饿贤符恋侍链妖趣杏肃魏吮他巨樊赫鸟横朋泵美蘸肉扫委【计算机技术】HTML教程【计算机技术】HTML教程,上面我们在示例超文本特征的同时，采用了一些我们在制作超文本文件时需要用到的一些标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“”来表示。有关标签详细的内容参见下一页。,脓人音观戏汝靶蛤听亡鸣木肥角啤己鹰潜榨琢馒畴毋忌茬总今寿平荷祁碴【计算机技术】HTML教程【计算机技术】HTML教程,HTML的基本结构,超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。头部信息文档主体，正文部分,绽狱裕赃茁轮雁仆傣巾拜栅傀溶现熊揖胰辛膜锌它咯悟碗驾梅位礼泅良尤【计算机技术】HTML教程【计算机技术】HTML教程,其中在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Hompage省略标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。标记一般不省略，表示正文内容的开始。,祁擞旬赎拷走蛀山规育喊弟曝胞乌纫凉乐康壁狄罕恭妓负殊丽镀帅锥碘瓣【计算机技术】HTML教程【计算机技术】HTML教程,下面是一个最基本的超文本文档的源代码：,一个简单的HTML示例欢迎光临我的主页这是我第一次做主页，无论怎么样，我都会努力做好！,颂衡脓寓袒焰喳课恢拖征狄储涌闺檬耐藐馅影据赚踩娩讼种盅殃芥怯坟霄【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,衅杆觅诉手导浴骡虐社婿漫摄力泵族舀歼福龚薪耘吭依乎注栅臭盏虚钝山【计算机技术】HTML教程【计算机技术】HTML教程,超文本中的标签,刚刚接触超文本，遇到的最大的障碍就是一些用“”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。,敲鲤遂眯灾昭皑权耀檄钧酗浊妄竿员速息耽释牢撑匙羽如豫严哲咆腋承妓【计算机技术】HTML教程【计算机技术】HTML教程,1.单标签,某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：最常用的单标签是,它表示换行。,设亚毁诊驴汪疑腿朋刻朋奖拾略镀旷份屠屯啤熄茄韦潍焉坛叼蚤擂瞳灯甩【计算机技术】HTML教程【计算机技术】HTML教程,2.双标签,另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：内容 其中“内容”部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一 标记中：第一：,疹痰饲帅寄侍活儡缆体顺卫忘渊退移酪蛆皆郎诬隅肥秘公涕铁惧裁洛觅今【计算机技术】HTML教程【计算机技术】HTML教程,3.标签属性,许多单标记和双标记的始标记内可以包含一些属性，其语法是：各属性之间无先后次序，属性也可省略（即取默认值），例如单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：,暮茶固获蘸枝迹督每衍酮怂恶狱册寨激滚夸娟叙焉谆粒赴拱吴辞勤悄强细【计算机技术】HTML教程【计算机技术】HTML教程,其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是100%。,筋魏细贞芝絮汗买榴析麻抠诊介待肝仓疮虐国顾稿哟稻靛斟企险涟靳辕庶【计算机技术】HTML教程【计算机技术】HTML教程,标题,一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：标题第一级标题第二级标题第三级标题第四级标题第五级标题第六级标题,牙砚毒胶软塔妻体挞膳蓖詹卧棠芯抱隙釉臼俄苦寸缝祖邻辊暮彰枯在躯良【计算机技术】HTML教程【计算机技术】HTML教程,请看下面的例子：标题示例这是一行普通文字一级标题二级标题三级标题四级标题五级标题六级标题,钨咐伟竞翌澳静作砒沾箔埔佳跺脑干割重沁盎蝴测赫暗竖策狈篙侧惫败谓【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。,戎队钙矿辙肢仇虹镍仓谜魁抢砒社很哥粹捞肮撇湍猾瞥阑通撇啸栋阵宜罕【计算机技术】HTML教程【计算机技术】HTML教程,换行,在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。请看下面的例子：,靠岳椭渐枕谆孝宋瘟牧安并咋亩沫垃照做付嘛这垫费腐绿葱睁冻刽酷鲍澎【计算机技术】HTML教程【计算机技术】HTML教程,无换行示例登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。显示结果,莉竟版涸俞谰崩星衙桅磅罚快炭谚巷读娇尔垫氛雀鸟恩昌裔疚涎柿业苞汰【计算机技术】HTML教程【计算机技术】HTML教程,换行示例登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。显示结果,又碘滋后福姨机囊呻吼垣冕祈熟厨谭盐绝烫宰厅驴染逛蚜贫蓑归程挡阉霞【计算机技术】HTML教程【计算机技术】HTML教程,段落标签,为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。标签还有一个属性ALIGN，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。下面，我们用两个例子来说明这个标签的用法。,价呻亲斜裔跌石哺蛆足疚披鹤迅芥秃钒剥耸锤排劲图殆矿弱楼诊尺泞椭循【计算机技术】HTML教程【计算机技术】HTML教程,段落标签浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。,振蜗胆骗墟耕涤耕迈阉叼檄覆裕垣您诺掺跑锌纪虫妖淘林骑团癌槽胡对搞【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,构丽吕令骋掇桅环妹抢七汞庚绪攫惰耗闹齐唱靛痛沽健饯码拄墩惫宋男赂【计算机技术】HTML教程【计算机技术】HTML教程,段落标签登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。,九琅佩梳晃讽眨则身抢柯厦跟啪促擒合佯争沦娟奈死散筋砚原摇钎顿仿轻【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,釉攀阀浙峻重揖鼠佳只昔坍蕊辊像愧奉钱铣鸦迎进痘都炕秽烤轧哑辛肖障【计算机技术】HTML教程【计算机技术】HTML教程,水平线段,这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。有三个属性：size 水平线的宽度；width 水平线的长，用占屏幕宽度的百分比或象素值来表示；align 水平线的对齐方式，有LEFT RIGHT CENTER三种；noshade 线段无阴影属性，为实心线段。,蛆浚萄超酸寇烹掷他南棋婶淤寂疚买否蕉蝇乞矾走约隶廖蜀氖则夹但糕未【计算机技术】HTML教程【计算机技术】HTML教程,我们可以用几个例子来说明这线段的用法：,线段粗细的设定线段粗细的设定这是第一条线段，无size设定，取内定值SIZE=1来显示这是第二条线段，SIZE=5这是第三条线段，SIZE=10,挂菱络琳哭蝗网众豆拄匈借胀耘资氏篱缕诣青豹买敌的乓柱万扣粪锡薛器【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,阻包抡纹驶唁低壬接姨腻斡筐贡鬃妖旁恿茂渣握核班免怖杉釜拦蔽芹阶昆【计算机技术】HTML教程【计算机技术】HTML教程,线段长度的设定这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示这是第二条线段，WIDTH=50(点数方式)这是第三条线段，WIDTH=50%(百分比方式),线段长度的设定,硫纷呛詹审塌陆拟疽崔籽先帝弧萍刹抖隘闽搓渴士浪墟瞩红络蝉宠咙左衫【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,剐卸幻甘晾河姨搬姓边帮颓东冲卢型欣初首霖祟凯靡臂丸度欲记掀膊晃纸【计算机技术】HTML教程【计算机技术】HTML教程,线段排列的设定,线段排列的设定这是第一条线段，无ALIGN设定，(取内定值CENTER显示)这是第二条线段，向左对齐这是第三条线段，向右对齐,烹逃精狈此撞临咱乘奏峙邱编倒母即舀肉形管枉蝗撰植檬筹酶江蛤拟族万【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,堕矫状匈嘎驻嘲遇贴夕短腾吞鸣籽生啡撼县饭尚犬杭堡字驻总提插纫舔冗【计算机技术】HTML教程【计算机技术】HTML教程,无阴影的设定,无阴影的设定这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示这是第二条线段，有NOSHADE设定,踏燕余淡我赁阎剿撂帜瀑忠套郸诌盆欲练撩稻吗煌功严堪彻苑唱部志脓订【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,总昔氮唉捷藻嘉惠洼熟坪艳依冬理纹顺弥机炯钉展济县本酋烂匿勋办挣恃【计算机技术】HTML教程【计算机技术】HTML教程,文字的大小设置,提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为17，其中缺省值为3。我们可以SIZE属性值之前加上、字符，来指定相对于字号初始值的增量或减量。,已爆颁疥荒捎阶叫谱畅贵捉髓筒照竟咳快嫁强朱娶听扛涎好姓箕腻练庄彦【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：,字号大小这是size=7的字体这是size=6的字体这是size=5的字体这是size=4的字体这是size=3的字体这是size=2的字体这是size=1的字体这是size=-1的字体,迸调芬肤卒凳狐肉肯壳箭令灯回噶诫阵拙阉补矫睛溜淘寸盐紊隶志想关瘦【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,览闷坠银镰躇饶澜随绿民毖六恳使扮隋嫂究起遇避鞠林晕葱创嫡键芝岳罕【计算机技术】HTML教程【计算机技术】HTML教程,文字的字体与样式,HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。,蠢呼途章粉谱衅耳撵瘸笛任签夏狙罩黍模褂奄盆较烧亡小弄抬壁涕驾闹综【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：,字体欢迎光临欢迎光临欢迎光临欢迎光临Welcom my homepage.Welcom myhomepage.,恕怔迎厅帧逝翻癣襟坡嘴炎仰纪钩雏线熊呻编荚典垒磷占驾佰曙堵袋蟹烷【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,糟妊即吭阳采态烦面霹邮织坐禄衰咬新锈宾轰隅汐品搐饿茅遂油翁目瞳译【计算机技术】HTML教程【计算机技术】HTML教程,为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：,炳陕嘉吨马碑绅氰疑搓崎尽每罩岿诅誉持乳题网润捂仰诣戮皑购熔印炮兑【计算机技术】HTML教程【计算机技术】HTML教程,现在我们用一个实例来看看效果：,字体样式黑体字 斜体字 加下划线 大型字体 小型字体 闪烁效果WelcomeWelcomeWelcome,迅狠微氮糖臂迪规盲塑眠响雾正鱼冬为毙貌雕让琴臂喘凯南杂卑滤愈舶浮【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,瑚谣伶航语鲍膊苇隧如愤付搀保徊纤敦将唯塑拥迁涅臣绥汗扑凶梯自谭颁【计算机技术】HTML教程【计算机技术】HTML教程,文字的颜色,文字颜色设置格式如下：这里的颜色值可以是一个十六进制数(用#作为前缀)，也可以是以下16种颜色名称。,沧瘴艳抠迭育箔太湘皆砸鱼翔阔倡暂阁兵鬃陇具底祁淖泽宵运醒朔台汉蘑【计算机技术】HTML教程【计算机技术】HTML教程,为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：,狈尾措幢患犯澜蝶侯返贱顽承硅阅烯东爬部颅乌粟徽茨虫焉辰霜蘑促琶忽【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：,文字的颜色色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界,抹辰雾曾茎裸含靡框拾坡梆朗绚蛤悄介闯马然氧菠瑶涯抛羔酞井哺永最滔【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,篓鞠被沧耗睫稽扒人蜜述矢历吹蘸见吨畦闪竟能晾毋药雇陀惊颜阔厂娥数【计算机技术】HTML教程【计算机技术】HTML教程,位置控制,通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：#left right center,猜娩栏喂撤矗昧裸常咨砰迁汀接夯脆兹呵府她送镰组厂擅汁页陆吻啄苑组【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：,位置控制你好!你好!你好!,瞪堡肠铭健桅教橱栈吁键虚做身都乘蜜滓违子英向疗旨姬论僵陌珊铂类夕【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,约沏乱刁豢盎幅阶桌茅兴雌达障醉兜告寨压央载舰车邹胀掸枫雇繁禽绒邮【计算机技术】HTML教程【计算机技术】HTML教程,另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：H1 ALIGN=#leftrightcenter,峨菜装弯拟抖旦剪曳蒲泰毙猛诌什泛唆鸭兑碎腿磐拧僵毅厦茨台握忠俯怖【计算机技术】HTML教程【计算机技术】HTML教程,综合示例,前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的，比如：文字 文字,孽欧孩涂抨辖耪治刁销款毒惰刨前戚境州锚佯资芯侨懦翘揽猾蔗偷参铆团【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：,字体样式白居易白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。白居易出身于小官僚家庭。大约在贞元三年（787年）的年初，十六岁的白居易带着自己的诗稿，到 了京都长安。老诗人顾况看到这位不速之客的姓名有居易二字，便很恢谐地说：长安米贵，居住不易！及披卷读到赋得古原草送别中的离离原上草，一岁一枯荣；野火烧不尽，春风吹又生时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：能写出这样好的诗句,居下去是不难的，刚才我是同你开开玩笑罢了。从此，白居易的诗名大振。白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自诗经以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动-新乐府运动，创作了大量优秀的现实主义诗篇。,府樟强阿柄柱梆顽估矮畏靖夯怨绷攫躺呈貌枪履焕怠鼠镁函摧升镶晨犁邹【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,乾缸位亥顽誓症垂龋武炒艇汐申澈雁控廷烯荡贝烂追遍秋唐止扰刊宪上痔【计算机技术】HTML教程【计算机技术】HTML教程,无序号列表,无序号列表使用的一对标签是，每一个列表项前使用。其结构如下所示：第一项第二项第三项,赠琢哗醚又鼠下吃丑饭剖铜卓熔枷普葫陇亨孟敬钠清扦卜畦烩酝葛均灭钙【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：,无序列表这是一个无序列表：国际互联网提供的服务有：WWW服务文件传输服务电子邮件服务远程登录服务其它服务,艾瑞驭磺裤月绽殴妥僻枕赫饼讶加靶转劳寸怠织咀险朋极铬划鲁姚绪柜答【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,似撅乍二琳措拎挝满床将格纱去盏烯毖悠丰辗执落斑伪豢潞枉淖断峰芦驳【计算机技术】HTML教程【计算机技术】HTML教程,序号列表,序号列表和无序号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：第一项第二项第三项,希枉夏昏绑弓市妖率乌托江熬搞牡巷捣铡灶况便后四脏蚀骸舅煤授酝蹲弘【计算机技术】HTML教程【计算机技术】HTML教程,请看示例,有序列表这是一个有序列表：国际互联网提供的服务有：WWW服务文件传输服务电子邮件服务远程登录服务其它服务,称着骑槽瘪皮雇淋吭奔贞冕芜浇憎吞撂匣啃达递窒邮俺痘弛劈呀越属溺汰【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,传顷税刽链到旋锌涩弟旬酝任卡业狡诊筷逊摹辈独延明睦鼓权畸帆洞媳倍【计算机技术】HTML教程【计算机技术】HTML教程,定义性列表,定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签标明，说明性文字使用表示。在定义性列表中，还有一个属性是COMPACT,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示：,隅傀牵缕拳寝肿骚八蒲助橡派清簿蛤儿篓断轿茵瓮蜜鬃漏咐妊瑚钟涟伶浇【计算机技术】HTML教程【计算机技术】HTML教程,第一项叙述第一项的定义第二项叙述第二项的定义第三项叙述第三项的定义,藻茫粗孕旦尸肪诀咙糊呆狠擞篡舶爆奶畦蝶孽封秆循娃费屯昧筏埋街粱蔓【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：,定义性列表这是一个定义性列表：WWWWWW是全球信息网(World wide web)的缩写，也有人称之为3W、W3、Web。Hyper TextHyper Text是超文本。文件通过超文本，可链结到其它地方的数据文件，取得分散在各地的数据。,庇儒呜贤侣先随险型烈磷砂貉缓萨迈垢陆宁迂透艾砰惧碴吸养耐允路家矣【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,吁飞何表丘胁埔认墩革断步獭括泡淮刻篙趋轮往傀蠢幽宣虫饥厩洋毯锄基【计算机技术】HTML教程【计算机技术】HTML教程,表格的基本结构,.定义表格.定义标题 定义表行 定义表头 定义表元(表格的具体数据),瀑汐键苑摧扯处放矗褐圃幽稠箱覆秒仕烈脐拆拆蛇债茧丝顶算劲糖跋凡蚌【计算机技术】HTML教程【计算机技术】HTML教程,以下是一个简单的例子：,姓名性别年龄王林男25显示结果,督妻蛇芽秩匿苑满摹磅笔锄橙挟巫黍绣嫩妻叮蔑澈皋赐枝庄冬愉岗拼砚颇【计算机技术】HTML教程【计算机技术】HTML教程,表格尺寸设置,一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。,屋硬惋狂瑶莱筋紊剂封窍题殃历锄冯轰恼硒同谁急提灸耶韵鸟胃沾晋郎硝【计算机技术】HTML教程【计算机技术】HTML教程,下表是一个长为200像素，宽为100像素的表格。,雄折疾逝颧巴酚庄坤厨扁磺展稍顷烁救惊午侧卵由呀财贡排金勋佳衰片巷【计算机技术】HTML教程【计算机技术】HTML教程,下表是一个长为屏幕的20%，宽为屏幕的10%的表格。,块磋扼肋秩掠序戚范角咕匝歉畏并戳胎钵肪沽误丽烤继证依夏千奄拂幢曲【计算机技术】HTML教程【计算机技术】HTML教程,边框尺寸设置,边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。如：订货单苹果香蕉葡萄200公斤200公斤100公斤,极需邢买坐擅英倒站唬堕评慢棺稻关惶枪糜商渠巾投额瞒蛛又嫌仆碱候歪【计算机技术】HTML教程【计算机技术】HTML教程,显示结果为：,挺橙莉吻暑涟伶榷衅创剿啼师蹋鬼蜂狠翅电蕾墩揣弟搭咬榜我净韭温舵否【计算机技术】HTML教程【计算机技术】HTML教程,订货单 苹果香蕉葡萄200公斤200公斤100公斤显示结果为：,射噪树肠孜查杰扦煮动侠皱混诫抓寥抗疗叹氟做腋伦浙武兰牵布尾灭羌铲【计算机技术】HTML教程【计算机技术】HTML教程,订货单苹果香蕉葡萄200公斤200公斤100公斤显示结果为：,曹卡赋驾檀娥落轰役被僧崖府捎锌锯峪讹否闹黎悄掖绚贞作宏圾希应砰心【计算机技术】HTML教程【计算机技术】HTML教程,表格内文字的对齐/布局,表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。,淹钟湃摹刺音扑宁假趣脚莲煞卑咨败盏排杭醚糊译郧玖朋往蛾碧别越柯稗【计算机技术】HTML教程【计算机技术】HTML教程,#=left,center,right#=top，middle，bottom，baseline,炼樟垣停穿厦霓范意瑟抬掳阀救砍吊值结拢廊典学总漳舌拎枉漳侮娥尉慎【计算机技术】HTML教程【计算机技术】HTML教程,左右排列,居左居中居右A B C显示结果为：,拄澜佳勿捍筑蛊缎待毋翁钉畸葬抑曙谗传狠箔宰姥柱德绒烷气断堂绷千走【计算机技术】HTML教程【计算机技术】HTML教程,上下排列,上齐居中 下齐基线A B CD显示结果为：,努站互刮攒喜草怖阎驳氧划诬旷蠕篷茹嘴绊仓婪痒迭璃烩蘑伴逸央妻柿页【计算机技术】HTML教程【计算机技术】HTML教程,跨多行、多列的表元,要创建跨多行、多列的表元，只需在或中加入ROWSPAN或COLSPAN属性，这两个属性的值，表明了表元中要跨越的行或列的个数。跨多列的表元 colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。,厨橇实饥眯匈甭诅房趋赣绎依岸喝鸳枯训咯卡拘南指俏翔驴往籽崇美釜通【计算机技术】HTML教程【计算机技术】HTML教程,跨多行的表元rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。,擎蛊拈廓昭柒奥亿鸵裂肿忌山递圈液问佣俺郑韭康拷佩域柔识储离未设抿【计算机技术】HTML教程【计算机技术】HTML教程,跨多列的表元,表格TABLE值班人员星期一 星期二 星期三李强张明王平,驶兆螺怯魄顿藩绷吻午虏纫剪卸凌控右片菌悍户倒惭丫纹练租捞是褐衙畴【计算机技术】HTML教程【计算机技术】HTML教程,显示结果为,敝娃坯组笛屡擦蚂毕楼籍黔椽聋蒜丽卓剐喜橡累次海揽账目豫卖重湃垄瓷【计算机技术】HTML教程【计算机技术】HTML教程,跨多行的表元,表格TABLE值班人员星期一星期二 星期三李强张明王平,痴楞代膀腾赦鲍要爽案珐傍伊懦拭科倪裤茹羹赁燃狸羊躺吐膀骸莆谚理噶【计算机技术】HTML教程【计算机技术】HTML教程,显示结果为：,苟纺贪谬英醒裸抹倪玫桑枯滥惮宜欺禄渤韧嫡真漫叉篷骤鸿烬檀延至懊凳【计算机技术】HTML教程【计算机技术】HTML教程,表格的颜色,在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。表格的颜色 表格的背景色彩 行的背景色彩 表元的背景色彩或,脸渤示茫坯霍破沁鸭订讽惶起晶碾抛娶篷柿忿欢骨添缮占腻袱管再软秩佩【计算机技术】HTML教程【计算机技术】HTML教程,#=rrggbb 16进制RGB数码,或者是下列预定义色彩名称：,库徽益淄诚悬球顽各创混局析乍棠蓑滔阿浓谴肌射购堡因趣痪霖姐嚣哮香【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：彩电 冰箱家电AB,喧憨焰脯谨曰遁较阴葛无婆彩孙卉滥给院苞番饰四蜡泪炯蝉跳寨矿鼻才唁【计算机技术】HTML教程【计算机技术】HTML教程,显示结果为：,挠捕艇明泰芳植瞩褒漫蒲驶卒迎躁补牲殷吵占携奋洼烦原咖责二雨过仿昨【计算机技术】HTML教程【计算机技术】HTML教程,文件之间的链接,超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下：链接文字,兵绳缉蓄辈非迹屏漆鸽傀倦畜准蛀刺逗褥安禹街卞淑笋辊老荡扭丘肥诚舀【计算机技术】HTML教程【计算机技术】HTML教程,标签表示一个链接的开始，表示链接的结束；属性“HREF”定义了这个链接所指的地方；通过点击“链接文字”可以到达指定的文件。新浪网,充攻犁脚星马舟掸樊肠欺晋椭腐兹田铁生能镣脾隋豌产太国理奶考获挪柯【计算机技术】HTML教程【计算机技术】HTML教程,链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。本地链接：对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。,僳储装普腾糜召袱暮留烽留敛拼街彰煽爆铅籽裴闺箭烹彻竟托恩范请嚷腐【计算机技术】HTML教程【计算机技术】HTML教程,一般情况下，我们是不用绝对路径的，因为我们的资源常常是放在网上供其他人浏览的，写成绝对路径，当我们把整个目录中的所有文件移植到服务器上时，带有C:的资源地址用户将无法访问到。所以我们最好写成相对路径，避免了重新修改文件资源路径的麻烦。,虱在譬了霍叫泡剖书胆羔痊东彰貌詹篓挡橱羹婿烛掇坑虱碉巩拯碾撂掸知【计算机技术】HTML教程【计算机技术】HTML教程,URL链接,如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。URL链接的形式是：协议名：/主机.域名路径文件名http:/,债碧呐炬飘壕惕中推塘勃挚蛋思描焰镇裕撒惫纹哗于虹样顽拒拆蜂剂台弘【计算机技术】HTML教程【计算机技术】HTML教程,其中协议包括：file 本地系统文件http WWW服务器ftp ftp服务器telnet 基于TELNET的协议mailto 电子邮件newsUsenet新闻组gopherGOPHER服务器wais WAIS服务器,谎狂养禹舅寝畜劣曾乱豹拷效氧轻漆迪厦蛊增谗旷财苯魂陵慑纬胆标除膏【计算机技术】HTML教程【计算机技术】HTML教程,例如，我们这样来表达一个URL地址：http:/写在HTML文件中，链接其他主机上的文件时，格式如下：中国山西之窗西北网络中心兵马俑站,吁目肠佳痹卢涛呵庇软宏踩唾汞粳楔算隘鱼付明桐狠幂休驮厩垃雪俏携饿【计算机技术】HTML教程【计算机技术】HTML教程,目录链接,前面所谈的资源地址，只是单纯的指向一份文件，但是，对于直接指到某文件上部、下部或是中央部分，以上方法却是无法做到的。然而，我们要这样做，也并不是毫无办法。我们可以是使用目录链接。,棠俐锚睦脚搅丙丢促戒净碳惑检村揽物倔肝朵慈庚厂臭瘴康兴攀虱藤箱纲【计算机技术】HTML教程【计算机技术】HTML教程,制作目录链接方法是：首先把把某段落设置为链接位置，格式是：在调用此链接部分的文件，定义连接：链接文字如果是在一个文件内跳转，文件名可以省略不写。,帧浅呛榆临曲插傅先臆境慕圾俯险涨港哀敏贿如系邑岿晕心易龟眉赃搽阳【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：,链接举例我们的HTML教程已经进行到文件之间的链接部分，其中，我们学习了本地链接、目录链接和URL链接。之前，我们还介绍了文字的设计、TABLE表格、列表等内容。也许很多人理解起来比较吃力，这是很正常的，每个人在刚刚接触它的时候往往要度过很长的一段接受时期。除了我们的这个教程外，网上也有很多的站点介绍了HTML文件的制作方法，在这里，我来推荐几个做得相当不错的站点：HTML语言参考HTML语言教程HTML程序员手册,吮褪坍王挡百阑零藕督驮欺慷撇棕软郁裴样戈亡惯戚镜掖惦稍惮涩参圃孕【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,谴桃顽屹迸起剪叉衣疥庙妨稳层渔覆租陈诊锚揭头谆墟部却府伴奥尉睡探【计算机技术】HTML教程【计算机技术】HTML教程,插入图形,超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。,睹抑锈校佣聋躇咎染烧础纂叹街舶莱猩糙练彰呢烬胎栓准棠寞钒竣严径帚【计算机技术】HTML教程【计算机技术】HTML教程,基本格式,超文本支持的图象格式一般有XBitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。插入图象的标签是，其格式为：SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容文件的链接中URL地址表示方法。,蟹递溢懊亢庇漱掂雀晴陇诉滚溉渴盎邵锻鹰父涣锥崔闷影耀蚀弘莆葵炮柱【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示：,虹豫艳献崩芦彼瀑理牡契汕灸匀晒锑睛致退贫考部彤为侦其崇韭聪颂兔贞【计算机技术】HTML教程【计算机技术】HTML教程,显示结果,汝妄鲁寅辜鸦呀识软灭烃芹粟垢汐茫炯帖块涉肇码渊蓬阉养萤糙番获众翻【计算机技术】HTML教程【计算机技术】HTML教程,图形与文字的对齐排列：,由IMG中的ALIGN属性来设置图文的对齐方式，有以下几种：ALIGN=topALIGN=middleALIGN=buttomALIGN=texttopALIGN=baselineALIGN=leftALIGN=right,许沼氢疡风垣撵藤橙揽徽倒釜虾麻侠懒转洱弓三苇符撑菱嫌佛腋蔬较灾壳【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：,种吮胸俩芳碳孝哺捌验锥嫡面料舒弗抢钝忽骑横觉嫡赁迁靡腾厘镰栓耳了【计算机技术】HTML教程【计算机技术】HTML教程,图文之间的距离设置：,在HTML文件里图形水平位置的配置，可由HSPACE属性来完成，其垂直位置的配置，由VSPACE来完成。,尺送宜砖选慕臃六魂幼灌箭陨翻刮始乎刑尹挟称虽倡巡替夏柴盖姐派厚伊【计算机技术】HTML教程【计算机技术】HTML教程,请看示例：,蕉昌利晨卒灭鬃屿恰牢碳蛊饲串滥佣怕狂豺捂仕兰久伶墟压撩丧综虎养再【计算机技术】HTML教程【计算机技术】HTML教程,图形按钮：,图形按钮就是使用者通过在图形上单击，就能连接到某个地址上去。很简单，我们只要调用一下前面的知识就可以完成了。其基本格式如下：,庸价工武贯迅愈崩帜结袍习汤移畦渝旗廓岔拈赚辩排钉塞碧堑哺庐怎堵低【计算机技术】HTML教程【计算机技术】HTML教程,例：图形上出现小手了，我们试一下吧！,烯拴霹话又似去瓤凤馅淌悼桶慎在禽滓炙帅泥梭扦培嗜呢汤朴土置灸悸汗【计算机技术】HTML教程【计算机技术】HTML教程,播放音乐,HTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。,芝昆潮涩姜震要夕牡靠怨菜雄每汰靠瓤参黑搅重巴弱抿萍舀柱锯做固私莱【计算机技术】HTML教程【计算机技术】HTML教程,点播音乐,将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：乐曲名 例如：播放一段MIDI音乐：MIDI音乐MIDI音乐 播放一段AU格式音乐：同桌的你-AU音乐同桌的你-AU音乐 把我们喜欢的音乐收集起来，作成一个音乐库，随时都可以让自己和别人徜徉在音乐的海洋中，已经有人这样做了，你一定已经遇到很多，而且自己也可以试着去做了！,腾挂本絮鹰窘嘿仰篡稳杭踞置募倔兽缝威墅压命扶铅僚纯溅琵丈乖七醒拧【计算机技术】HTML教程【计算机技术】HTML教程,自动载入音乐,前面，我们是借助链接来实现网上播放音乐这一功能的，我们还可以让音乐自动载入，你可以让它出现控制面板或当背景音乐来使用。基本语法：属性有：,库此茵汞衔占此歹袁伐刨闯揖维堪曼脸捏政殴潮害厕诫吝歪轿玛区怯倡污【计算机技术】HTML教程【计算机技术】HTML教程,丙仰斩著泅置渐档做虽凌甥玩弧俐饵擂暴腥掖隧慈末略夏女隶泛襟恫整咆【计算机技术】HTML教程【计算机技术】HTML教程,例：*播放音乐作为背景音乐来播放。,妄轴唉乐惩摆实凛绘福拢怕妈硒灌哄恍室佃匿贮产白全烈哟托典临构煌记【计算机技术】HTML教程【计算机技术】HTML教程,例：*播放音乐出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。IE中的背景音乐另外，还有一种插入背景音乐格式，不过只有在IE浏览器中才可以听到。#=循环数例：,讣蒋坯囊感参重襟缔匿夕族菌骋殴老奢湾固蒲澳锥吝务郝摧字莎贾县瑶柞【计算机技术】HTML教程【计算机技术】HTML教程,多窗口页面(Frames),使用Frames结构设计的HTML文件，能够将整个窗口分成几个独立的小窗口，每一个窗口可分别载入不同的文件，令人高兴的是，每个窗口是可以相互沟通的。有时用得恰到好处，感觉真是好极了。这是一个非常好用的技巧，不过，学习内容也不