77HTML基础教程

HTML语法§1HTML基础HTML建立与测试网页标记符Web页的结构设置页面属性添加注释显示特殊字符一、HTML（HyperTextMarkupLanguage）——超文本标记（标签）语言，是表示网页的一种规范——一组影响网页内容显示的标记符的集合使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX，WINDOWS等），访问它只需要一个浏览器，我们所看到的网页，是浏览器对HTML文件进行解释的结果。二、测试和创建Web页1.网页编辑工具纯文档编辑工具——记事本所见即所得工具——FrontPage、Dreamweave2.网页创建步骤(使用“记事本”创建网页)①打开“程序/附件/记事本”②在“记事本”的窗口中输入HTML代码③选择“文件”菜单的“另存为”命令④在“文件名”框中输入网页的名称，文件名必须以.html或.htm为后缀名⑤单击保存3.网页测试IE工具即现三、标记符1.标记符的定义：——HTML语言通知浏览器如何显示网页内容的方式2.标记符的形式：所有标记符都用尖括号括起来绝大多数标记符是成对出现的，即包括开始标记符和结束标记符，个别是单一标记符。例如：TITLE/TITLEP、BR、HR开始标记符和结束标记符定义了标记符所影响的范围，它们的区别是结束标记符多了一个斜线/，例如：FONTcolor=“red”好好学习/FONT天天向上不区分大小写，但为了可读性和维护性，使用大写HTMLH1这是H1格式的字体/H1BR这是默认格式的字体/HTML3.标记符的属性作用——位置——形式——FONTsize=1color=red红色一号的文字/FONT学习和掌握HTML的关键：HTML标记符及其属性对标记符作用的内容进行更详细的控制开始标记符的尖括号里，与标记符之间用空格隔开，属性值跟在相应的属性之后，用等号连接，不用属性之间用空格隔开小写四、Web页的结构HTML必须包含的基本结构标记符：HTML标记：HTML/HTML头标记：HEAD/HEAD标题标记：TITLE/TITLE正文标记：BODY/BODY三大结构：HTMLHEADTITLE/TITLE/HEADBODY/BODY/HTMLHTML标记HTML/HTMLWeb页的第一个和最后一个标记符Web页的其他所有内容都位于这对标记符之间HTML标记符告诉浏览器或其他阅读该页的程序，此文件为一个Web页不包含其它属性首部标记HEAD/HEAD位于Web页的开头，不包括Web页的任何实际内容，提供一些与Web页有关的特定信息通常包含一下标记符：标题标记符——TITLE/TITLEMETA标记符——METABGSOUND标记符——BGSOUND正文标记符BODY/BODY包含Web页的具体内容，包括文字、图形、超链接及其他各种HTML对象。正文标记符中的文字——如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示如果浏览器窗口显示不下，则自动换行空格、回车这些格式控制在显示时都不起作用标题标记符——TITLE/TITLE用于定义网页的标题,并在浏览器窗口的标题栏中显示网页标题可被浏览器用作书签和收藏清单HTMLHEADTITLE这是网页标题/TITLE/HEADBODY请看浏览器的标题栏。/BODY/HTML例子：HTMLHEADTITLE网页标题/TITLE/HEADBODY正文，正文，正文，正文，正文，正文，正文，正文，正文/BODY/HTMLMETA标记符——META用于描述不包含在标准HTML里的一些文档信息，例如开发工具，作者，网页关键字，网页描述等。这些定义的内容并不在网页页面中显示，但是一些搜索引擎可以检索这些信息，浏览者可以根据这些关键字或描述查找到该网页。常用功能是设置自动转址功能——使浏览器自动从一个地址跳转到另一个地址位置META标记符的常用属性包括：name、content和http-equivname属性给出特性名content属性给出特性值http-equiv属性指定HTTP响应名称，通常用于替换name属性，HTTP服务器使用该属性值为HTTP响应消息头收集信息例1METAhttp-equiv=Content-Script-Typecontent=text/javascript设置客户端行内程序的语言是JavaScript例2METAhttp-equiv=Content-Style-Typecontent=text/css设置行内样式的样式语言为CSS例3HTMLHEADTITLEMETA示例/TITLEMETAhttp-equiv=Refreshcontent=“10;URL=再过10秒钟，我就上学校的网站了！/BODY/HTMLhtmlheadtitle我的第一个网页/titleMETANAME=GeneratorCONTENT=editplusMETANAME=AuthorCONTENT=zhaomingMETANAME=KeywordsCONTENT=titleMETANAME=DescriptionCONTENT=sampleweb/headbody/body/html例4五、设置页面属性正文标记符包括一些常用属性，可以用于设置网页背景颜色和图案，以及设置文档中文字和超链接的颜色设置页面背景颜色——bgcolorBODYbgcolor=“颜色名称设置页面背景图像——backgroundBODYbackground=背景图案的地址使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。可以同时设置背景图案和背景色，以便在不能显示图像的浏览器上显示背景色页面基本属性——定义在body中background=背景图片文件名bgcolor=背景颜色text=文本默认颜色link=未被访问链接源文字的颜色alink=被激活链接源文字的颜色vlink=访问过链接源文字的颜色topmargin=信息内容的顶边距离leftmargin=“”信息内容的左边距离背景音乐标记符——BGSOUND用于指定网页的背景音乐属性src，用于指定背景音乐的源文件。loop，用于指定背景音乐重复的次数，如果不指定该属性，则背景音乐无限循环例子BGSOUNDsrc=canyon.midloop=1表1-116种标准颜色色彩名十六进制值色彩名十六进制值Aqua（水蓝色）#00FFFFNavy（藏青色）#000080Black（黑色）#000000Olive（茶青色）#808000Blue（蓝色）#0000FFPurple（紫色）#800080Fuchsia（樱桃色）#FF00FFRed（红色）#FF0000Gray（灰色）#808080Silver（银色）#C0C0C0Green（绿色）#008000Teal（茶色）#008080Lime（石灰色）#00FF00White（白色）#FFFFFFMaroon（褐红色）#800000Yellow（黄色）#FFFF00浏览器将采用默认的设置bgcolor——白色或灰色text——黑色Link——蓝色vlink——紫色alink——红色例子：BODYbgcolor=#000000text=#FFFFFFlink=#999999vlink=#CCCCCCalink=#666666HTMLHEADTITLE背景图案示例/TITLE/HEADBODYbackground=background.jpg背景图案示例/BODY/HTML注释的作用HTML注释的格式由开始标记符!--和结束标记符--构成!--标记符和--标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示例子：HTMLHEADTITLE网页标题/TITLE/HEADBODY正文，正文，正文/BODY!--本行内容并不在浏览器中显示--/HTML注释可插入在Web页的任何位置六、添加注释七、显示特殊字符特殊字符——参考字符（附录2）参考字符以“&”号开始，以“;”结束参考字符既可用数字代码表示，也可用代码名称表示与HTML标记符同，字符代码名称区分大小写例子：BODY<Tom&Jerry>isapopularVCDprogram./BODYTom&JerryisapopularVCDprogram特殊字符数字代码代码名称&&&<<>>空格  小结服务器构成，通过浏览器访问这些服务器上的网页，不同的网页通过超链接联系在一起，构成了的网状结构。HTML是表示网页的一种规范，它通过标记符定义了网页内容的显示。最基本的HTML标记符包括：HTML标记符HTML和/HTML首部标记HEAD和/HEAD正文标记BODY和/BODY。BODY标记符包括一些常用属性，用于控制网页的基本显示效果。发布网页的基本过程为：制作本地站点、申请网页空间、上传网页。§2文本控制字体控制标记符物理字符样式滚动文字效果文本分段文本对齐列表格式一、字体控制标记符——FONT/FONTsize属性——控制字符的大小size=字号从1~7,字号越大，默认值为3color属性——控制字符的颜色color=使用颜色名称或十六进制值指定颜色face属性——指定字体样式face=常用的英文字体有“TimesNewRoman”、“Arial”等常用的中文字体有“宋体”、“楷体”等例子：FONTsize=2face=宋体color=#0000ff例子一/FONTFONTcolor=green例子二/FONTFONTface=ArialBlack，楷体size=+1例子三/FONTFONTface=“隶书”color=“yellow”size=“7”例子四/FONT二、物理字符样式指标记符本身就说明了所修饰文字的效果的字符样式使用方法：将设置格式的字符括在标记符之间由于带有超链接的文本下通常包含下划线，因此下划线格式易让人产生误解，建议使用时慎重常见的物理字符样式标记功能标记功能B/B粗体STRIKE/STRIKE删除线BIG/BIG大字体SUB/SUB下标I/I斜体SUP/SUP上标S/S删除线TT/TT固定宽度字体SMALL/SMALL小字体U/U下划线HTMLHEADTITLE物理字符样式效果示例/TITLE/HEADBODYPB此处为粗体显示文本/BPBIG此处为大字体文本/BIGPSMALL此处为小字体文本/SMALLPI此处为斜体文本/IPTT此处为等宽字体文本/TTPU此处为下划线文本/UPS此处为使用<S>标记设置的删除线文本/SPSTRIKE此处为使用<STRIKE>标记设置的删除线文本/STRIKEP此处为上标示例：xSUP2/SUP+ySUP2/SUP