HTML语言从零到精通

第3页HTML入门•HTML英语意思是：HypertextMarkedLanguage，即超文本标记语言•通过HTML可以实现页面之间的跳转•通过HTML可以展现多媒体的效果•标签“标签名字属性‖•HTML与XMLHTML控制显示XML存储和交换数据第4页HTML的基本结构•文档头、文档体•HTMLHEAD头部信息/HEADBODY文档主体，正文部分/BODY/HTML第5页HTML的基本结构(cont.)•下面是一个最基本的超文本文档的源码：•HTMLHEADTITLE一个简单的HTML示例/TITLE/HEADBODYCENTERH3欢迎光临我的主页/H3BRHRFONTSIZE=2这是我第一次做主页，无论怎么样，我都会努力做好！/FONT/CENTER/BODY/HTML第6页超文本中的标签•单标签标签名称BR•双标签标签内容/标签EM强调/EM•标签属性标签名字属性1属性2属性3…HRSIZE=3ALIGN=LEFTWIDTH=75%第7页页面布局及文字设计•标题•换行BR•段落标签P•水平线段HR•文字的大小设置•文字的字体与样式•文字的颜色•位置控制•综合示例第8页标题•HTML中提供了相应的标题标签Hn,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大•H1…/H1H2…/H2H3…/H3H4…/H4H5…/H5H6…/H6第一级标题第二级标题第三级标题第四级标题第五级标题第六级标题第9页换行BR•在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上BR标签第10页段落标签P•文件段落的开始由P来标记，段落的结束由/P来标记，/P是可以省略的，因为下一个P的开始就意味着上一个P的结束•P标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种第11页水平线段HR•这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。•HR有四个属性：size水平线的宽度width水平线的长，用占屏幕宽度的百分比或象素值来表示align水平线的对齐方式，有LEFTRIGHTCENTER三种noshade线段无阴影属性，为实心线段第12页文字的大小设置•提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。第13页文字的字体与样式•HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。•fontface=―字体”第14页文字的字体与样式(cont.)•为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：•B/B粗体HTML语言•I/I斜体HTML语言•U/U加下划线HTML语言•TTTT打字机字体HTML语言•BIG/BIG大型字体HTML语言•SMALL/SMALL小型字体HTML语言•BLINK/BLINK闪烁效果HTML语言•EM/EM表示强调，一般为斜体HTML语言•STRONG/STRONG表示特别强调，一般为粗体HTML语言•CITE/CITE用于引证、举例，一般为斜体HTML语言第15页文字的颜色•文字颜色设置格式如下：fontcolor=color_value…/font这里的颜色值可以是一个十六进制数(用“#‖作为前缀)，也可以是以下16种颜色名称如：Black=#000000―Green=#008000Red=#FF0000―Blue=#0000FF―第16页位置控制•通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：DIVALIGN=##＝left／right／center•另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：PALIGN=#HRALIGN=##＝left／right／centerH1ALIGN=#〉第17页综合示例•前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的，比如：FONTCOLOR=#SIZE=#文字/FONT第18页列表•无序号列表•序号列表•定义性列表第19页无序号列表•无序号列表使用的一对标签是ul/ul，每一个列表项前使用LI。其结构如下所示：ULLI第一项LI第二项LI第三项/UL第20页序号列表•序号列表和无序号列表的使用方法基本相同，它使用标签OL/OL，每一个列表项前使用LI。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：•OLLI第一项LI第二项LI第三项/OL第21页定义性列表•定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签DT标明，说明性文字使用DD表示。在定义性列表中，还有一个属性是COMPACT,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示：•DLDT第一项DD叙述第一项的定义DT第二项DD叙述第二项的定义DT第三项DD叙述第三项的定义/DL第22页TABLE表格•表格的基本结构•表格的标题•表格的尺寸设置•表格内文字的对齐、布局•跨多行、多列的表元•表格的颜色第23页表格的基本结构•table.../table定义表格caption.../caption定义标题tr定义表行th定义表头td定义表元(表格的具体数据)第24页表格的标题•表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。设置标题位于表格上方：captionalign=top.../caption设置标题位于表格下方：captionalign=bottom.../caption第25页表格尺寸设置•表格的大小一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：tablewidth=n1height=n2width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示第26页表格尺寸设置（cont.）•边框尺寸设置边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。如：tableborder=10width=250caption定货单/captiontrth苹果/thth香蕉/thth葡萄/thtrtd200公斤/tdtd200公斤/tdtd100公斤/td/table第27页表格尺寸设置（cont.）•格间线宽度格与格之间的线为格间线，它的宽度可以使用TABLE中的CELLSPACING属性加以调节。格式是：TABLECELLSPACING=##表示要取用的像素值例：tableborder=3cellspacing=5caption定货单/captiontrth苹果/thth香蕉/thth葡萄/thtrtd200公斤/tdtd200公斤/tdtd100公斤/td/table第28页表格尺寸设置（cont.）•内容与格线之间的宽度我们还可以在TABLE中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为：TABLECELLPADDING=##表示要取用的像素值•例：tableborder=3cellpadding=5caption定货单/captiontrth苹果/thth香蕉/thth葡萄/thtrtd200公斤/tdtd200公斤/tdtd100公斤/td/table第29页表格内文字的对齐/布局•表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。•tralign=#thalign=##=left,center,righttdalign=#•trvalign=#thvalign=##=top，middle，bottom，baselinetdvalign=#第30页表格内文字的对齐/布局(cont.)•左右排列•tableborder=1width=200trth居左/thth居中/thth居右/thtrtdalign=leftA/tdtdalign=centerB/tdtdalign=rightC/td/table第31页表格内文字的对齐/布局(cont.)•上下排列•tableborder=1width=250height=100trth上齐/thth居中/thth下齐/thth基线/thtrtdvalign=topA/tdtdvalign=middleB/tdtdvalign=bottomC/tdtdvalign=baselineD/td/table第32页跨多行、多列的表元•要创建跨多行、多列的表元，只需在TH或TD中加入ROWSPAN或COLSPAN属性，这两个属性的值，表明了表元中要跨越的行或列的个数。•跨多列的表元thcolspan=#tdcolspan=#colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。•跨多行的表元throwspan=#tdrowspan=#rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。•跨多列的表元•跨多行的表元第33页表格的颜色•在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。表格的背景色彩tablebgcolor=#行的背景色彩trbgcolor=#表元的背景色彩thbgcolor=#或tdbgcolor=##=rrggbb16进制RGB数码,或者是下列预定义色彩名称：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua第34页文件之间的链接•超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如：AHREF=资源地址链接文字/A•·标签A表示一个链接的开始，/A表示链接的结束；·属性“HREF‖定义了这个链接所指的地方；·通过点击“