第四讲HTML语言

第4讲HTML语言4.1HTML文档的基本结构4.2插入文字4.3插入图片4.4建立超级链接4.5插入表格4.6表单的应用4.7框架窗口4.8网页中多媒体的应用4.1HTML文档的基本结构（1）1、双标记语法：标记内容/标记4.1.1HTML语法头标记尾标记双标记例子HEAD和/HEADEMtexttoemphasize/EM效果texttoemphasize4.1HTML文档的基本结构（2）2、单标记语法：标记最常用的单标记是BR4.1.1HTML语法4.1HTML文档的基本结构（3）3、标记属性语法标记属性1属性2属性3…例子HRSize=3Align=leftWidth=75%4.1.1HTML语法4.1HTML文档的基本结构（4）4、注释语句格式!-注释文字--例子!--由这处开始是产品订购表格--!--本文版权为1998，CreationofWebpage所拥有，未经允许，请勿抄摘--4.1.1HTML语法头部信息用来标明当前文档的有关信息例子TITLE紫星工作室/TITLE版本信息位于第一行以!DoctypeHTMLPublic开头如!DoctypeHTMLPublic//W3C??DTDHTML4.0//中文HTML文件标记网页文件都是以HTML标记开始的，在文件的结尾处又以/HTML结束主体标记BODY……/BODY”标记对作用的范围4.1HTML文档的基本结构（5）4.1.2HTML文档的基本结构!HTML网页版本信息说明HTMLHEAD!标题标记、属性及其内容/HEADBODY!主体标记、属性及其内容/BODY/HTML4.1HTML文档的基本结构（6）4.1.2HTML文档的基本结构BODYBackground=URLBgclolr=ColorBgpropeties=FixedLeftmargin=nLink=ColorAlink=ColorText=ColorTopmargin=nVlink=Colorhtmlbodybgcolor=#d0d0d0pThisisaparagraph.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph./ppThisisanotherparagraph.Thisisanotherparagraph.Thisisanotherparagraph.Thisisanotherparagraph./p/body/html4.2插入文字（1）格式Palign=*段落内容/P4.2.1划分段落对齐属性Center，Right，LeftHTMLBODYH3PAlign=left床前明月光，/PPAlign=center疑是地上霜。/PPAlign=right举头望明月，/PPAlign=left低头思故乡。/P/H3/BODY/HTML4.2插入文字（2）格式H?Alight=标题属性标题内容/H?4.2.2插入标题文字HTMLBODYH1一级标题/H1H2二级标题/H2H3三级标题/H3H4四级标题/H4H5五级标题/H5H6六级标题/H6/BODY/HTML“？”表示标题的级别，可以选择1至6之间的任意整数4.2插入文字（3）设置基准字号：BASEFONTSize=数值4.2.3字号属性用于确定基准字号的大小，它的取值范围在0到5之间网页内的其他文字，采用下面的格式来定义FONTSize=数值....../FONTSize的有效范围是1（最大）到7（最小）。如果在Size的值前面带上“+”号或“-”号，则表示相对于基础字体增大或减小若干字号。颜色RGB值颜色RGB值black#000000maroon#800000green#008000navy#000080silver#C0C0C0red#FF0000lime#00FF00blue#0000FFgray#808080purple#800080olive#808000teal#008080white#FFFFFFfuchsia#FF00FFyellow#FFFF00aqua#00FFFF4.2插入文字（4）两种方式BODYtext=#RRGGBBFONTColor=#RRGGBB字符串/FONT4.2.4颜色属性RR、GG、BB分别以16进制的形式表示红、绿蓝三原色的数值，范围在“OO”和“FF”之间常用的16种颜色可以直接使用英文单词表示4.2插入文字（5）FONTFace=“宋体,隶书,Time”/FONT4.2.5字体属性4.2插入文字（6）B....../B，文字以粗体显示。I....../I，文字显示为斜体。U....../U，显示下划线。STRIKE....../STRIKE，中心线贯穿文字。EM....../EM，强调文字，通常用斜体。STRONG....../STRONG，特别强调的文字，通常用黑体。TT....../TT，以等宽体显示西文字符。BIG....../BIG，使文字大小相对于前面的文字增大一级。SMALL....../SMALL，使文字大小相对于前面的文字减小一级。SUP....../SUP，使文字成为前一个字符的上标。SUB....../SUB，使文字成为前一个字符的下标。BLANK....../BLANK，使文字显示为闪烁效果。4.2.6文本修饰4.2插入文字（7）HEADTITLE文本效果示例/TITLE/HEADBODYB这一行是粗体/BPI这一行是斜体/IPU这一行有下划线/UPTT打字效果的文字/TTPBI粗体并且斜体/I/BPIU斜体并且有下划线/U/I/BODY/HTML4.2.6文本修饰4.2插入文字（8）使用预格式化标记PRE不再忽略在此之间的空格、制表符与回车符等元素4.2.7预格式化文本BODYPREH3床前明月光，疑是地上霜。举头望明月，低头思故乡。/H3/PRE/BODY4.2插入文字（9）使用预格式化标记PRE不再忽略在此之间的空格、制表符与回车符等元素4.2.7预格式化文本BODYPREH3床前明月光，疑是地上霜。举头望明月，低头思故乡。/H3/PRE/BODY4.2插入文字（10）一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格4.2.8转义字符与特殊字符转义符显示结果描述<小于号或显示标记>大于号或显示标记&&可用于显示其它特殊字符"引号®®己注册©©版权™™商标 半方大的空白 全方大的空白 不断行的空白4.2插入文字（11）文本强制换行BR不换行NOBR4.2.9文本强制换行和不换行4.2插入文字（12）使用HR标记属性：Width，Size，Align，Noshade，color4.2.10插入水平线设置水平线宽度。Width=x，Width=x%。设置水平线厚度默认为的厚度为1设置水平线对齐方式Align=leftAlign=ringtAlign=center，显示实心水平线，消除立体感觉设置水平线的颜色在有序列表的开始和结束处，分别是UL和/UL标记4.2插入文字（13）4.2.11使用列表设置列表符号的形状Type=discType=circleType=square每一项列表条目之前必须加上LI标记1、无序列表ULType=*LI=*列表条目1LI列表条目2....../UL在有序列表的开始和结束处，分别是OL和/OL标记4.2插入文字（14）4.2.11使用列表设置标号的形式，“1”1，2，3“a”a，b，c“A”A，B，C，“i”i，ii，iii“I”I，II，III设置编号的开始值，缺省为1value设定该条目的编号，其后的条目将以此作为起始数目而递增2、有序列表OLType=*Start=nLIValue=n列表条目1LI列表条目2....../OL4.2插入文字（15）4.2.11使用列表3、定义列表DLDT列表条目1DD条目1的说明DT列表条目2DD条目2的说明……/DL4.3插入图片（1）基本格式IMGSRC=url4.3.1在网页中插入图片图片标记包含图片文件保存的位置和文件名4.3插入图片（2）4.3.2图片的属性设定图片大小，此宽度、高度一般采用像素作单位。如果不使用图片的真实大小，就可以在显示窗口中得到放大或缩小的图片。设定图片边沿空白，防止文字或其它图片过于贴近本图片Hspace是设定图片左右的空间Vspace设定图片上下的空间图片边框厚度。从0至99的数字调整图片旁边文字的位置可选值：top，middle，bottom，left，right设定替换文字当把鼠标移动到图片上时，无论图片是否显示，替换文字都可以显示出来设定先显示的低解像图片文件名IMGSRC=logo.gif“Width=100Height=100Hspace=5Vspace=5Border=2Align=top“Alt=“花园”LowSRC=prelogo.gif4.4建立超级链接（1）1、建立超级链接AHREF=url字符串/A4.4.1指向一个目标超级链接标记链接目标使用绝对路径AHREF=下一页/A使用相对路径AHREF=page-5.htm下一页/A把超级链接指向上两级目录下的文件AHREF=../../topic.htm返回目录/A4.4建立超级链接（2）2、为图片建立超级链接AHREF=URLIMGSRC=URLBorder=0/A2.4.1指向一个目标4.4建立超级链接（3）3、链接到邮件和多媒体文件链接到邮件AHREF=mailto:[e-mail]请与我联系/A4.4.1指向一个目标4.4建立超级链接（4）使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。建立锚点：AName=name锚点文字/a使超级链接指向已定义的锚点。AHREF=url#name文字/aAHREF=#name文字/a4.4.2使用锚点4.4建立超级链接（5）1、打开新窗口AHREF=urlTarget=window-name开一个新窗口/a4.4.3新窗口和基准链接窗口的名字，这个名字可以用脚本语言操纵。不想给新窗口起名字时，可将target属性设为“_blank。4.4建立超级链接（6）2、基准链接在HEAD与/HEAD之间设定BASEHREF==_top4.4.3新窗口和基准链接三种形状坐标定义的方法为shape=rectcoords=A，A'，B，B'shape=circlecoords=A，A'，R'shape=polycoords=A，A'，B，B'，C，C'...定义Shape所选择的形状的具体坐标图片左上角的坐标为(0，0)指定包含超级链接的区域的形状有三种选择：rect、poly、circle在MAP.../MAP中定义包含超级链接的图片上的区域图像地图的名字显示在网页上的图片文件4.4建立超级链接（7