基于WEB的程序设计--2 HTML

第二部分HTML2.1HTML文档基本结构标记2.1.1开始与结束标记HTML文档的开始标记是html，它告诉浏览器下面的内容是HTML文档，结束标记为/html标记，它告诉浏览器HTML文档结束了。语法格式:htmlHTML文档的所有内容/html2.1.2头部标记HTML文档的头部标记是head，它表示浏览器下面的内容是HTML文档的头部，显示在文本之前，而/head标记告诉浏览器头部内容结束了。语法格式：headHTML文档的头部内容/head头部内容一般包括注释、META和标题。META标记1、name属性页面定时刷新与自动跳转-metahttp-equiv=refreshcontent=10;url=Default.aspx/Keywords(关键字)-说明：keywords用来告诉搜索引擎你网页的关键字是什么。-举例：＜metaname=“keywords”content=“science,education,culture,politics,ecnomics，relationships,entertaiment,human”＞description(网站内容描述)-说明：description用来告诉搜索引擎你的网站主要内容。-举例：＜metaname=“description”content=“Thispageisaboutthemeaningofscience,education,culture.”＞author(作者)-说明：标注网页的作者-举例：＜metaname=authorcontentroot,[e-mail]＞2、http-equiv属性Refresh(刷新)-说明：自动刷新并指向新页面。-用法：＜metahttp-equiv=“Refresh”content=“2；URL=”＞content-Type(显示字符集的设定)-说明：设定页面使用的字符集。-用法：＜metahttp-equiv=content-Typecontent=text/html;charset=gb2312＞2.1.3标题标记title和/title标记中间所包含的文字将成为这个Web页的标题，一般写在头部标记之中。标题文字会显示在Web浏览器最上面的title（标题）栏上。浏览器用户可以把标题加入收藏夹中，所以标题文字最好使用中文并且有明确的意义。语法格式：title网页的标题/title【例】first.html文件，头部标记和标题标记的使用。HTMLHEADTITLE网页基本结构示例/TITLE/HEADBODY这是我的第一个网页，非常简单，但却是我自己做的。以后我越做越好的。/BODY/HTML保存文件,在IE浏览器中显示。2.1.4主体标记body标记是HTML文档主体标记的开始，并对应结束符/body。HTML文档的主要内容都出现在body和/body标记之中。HTML文档中只能有一个body标记，并且它只能跟在head标记后面。语法格式：body主体内容/body2.1.5设置HTML文档背景body标记还具有一些属性，可以设置HTML文档的背景色，可使用图片/图像作为背景，确定链接的颜色，设置文字的颜色等。语法格式：body[bgcolor=#|text=#|link=#|alink=#|vlink=#|background=图像文件名]文档内容/body其中：bgcolor，用来指定HTML的背景颜色。text，用来指定HTML文件中的文字色彩属性。link，用来指定HTML文件中待连接的超链接对象的色彩属性。alink，用来指定HTML文件连接中的超链接对象的色彩属性。vlink，用来指定HTML文件中已连接的超链接对象的色彩属性。background，用来指定作为HTML背景的平铺图像。注：在颜色表中，可以采用对应的英文颜色名称表示，也可以采用16进制数表示。以后在其它地方的颜色表示与此一致。【例】color.html，改变文字的颜色和背景的颜色。htmlheadtitlecolorshow/title/headbodybgcolor=yellowtext=#000000这是使用HTML语言编写的Web页面文件/body/html2.2文本格式标记2.2.1标题字体标记标题字体标记用来显示不同的黑体字，是通过h和/h标记对实现的。h1和/h1标记对用来设置HTML文档的大号标题字体，依次可以标注出6个层级的标题字体。语法格式:hi标题文字/hi(i=1,…,6)【例】titleshow.html，不同的标题字体。htmlbodyh1这是h1标题字体！！/h1h3这是h3标题字体!!/h3h5这是h5标题字体!!/h5/body/html2.2.2字体的大小与颜色标记字体的大小与颜色标记font能够改变包含的字符、单词、短语、文本的字体大小和颜色。语法格式:fontsize=#color=#文字/font文本字体大小从1～7，默认为3号字体。【例】fontshow.html，字体的大小和颜色。htmlbodyfontsize=7color=#ff0000这是7号字体！！/fontfontsize=5color=#0000ff这是5号字体！！/fontfontsize=3这是3号字体！！/fontfontsize=1这是1号字体！！/font/body/html2.2.3段落标记与换行标记在HTML文档里输入文字会根据窗口的宽度自动换行。p是HTML语言中特有的段落标记，指出在这儿告一段落，下面的文字换行从头再开始。br标记用来标识一个换行动作。在HTML文件中可以用它来调整行间距。语法格式:p文本/p文本br【例】paragraph.html，学习如何使用段落和换行标记。htmlbody在HTML文档里不需要在意文章每行的宽度，不必担心文字是不是太长了而被截掉，它会根据窗口的宽度自动换行。（加段落标记）p它会根据窗口的宽度做自动转折（加换行标记）br到下一行的工作。/p/body/html2.2.4水平线标记水平线标记hr，可以在HTML文档中插入一条水平线，线的宽度和高度可以设置。这个标记对于美化页面很有帮助。语法格式:hr[size=#|align=#|width=#|noshade]size表示水平线宽度。align表示水平线位置。width表示水平线长度可以用满屏宽度的百分数表示，默认时为100%。【例】hr.html，插入水平线。htmlbody插入水平线hrhrsize=2align=leftwidth=75%hrsize=6align=centerwidth=50%hrsize=8align=rightwidth=50%noshade/body/html2.2.5字符格式化标记个别的字或句子可以使用不同的字型，斜体使用I标记强调，黑体使用b或下划线使用U标记。更多的格式标记还有：S：标记给文本加上删除线；sub：创建下标；sup：创建上标；【例】format.html文件，使用字符格式化标记。htmlbodyu下划线/uI斜体/Iem(斜体)/emb黑体/bstrong(黑体)/strongbrysub2/subzsup3/supbrs删除线/sbr/body/html2.3列表标记2.3.1无序列表unorderedlist无序列表由3个标记组成：ul说明是无序列表，li标记于各列表项之前，最后加上列表结束符/ul。语法格式：ulli列表项1/lili列表项2/lili列表项3/li/ul可以在UL中加入类型标识符，ULtype=’类型名’，类型名有：disc在浏览器中显示●；circle在浏览器显示为○；square在浏览器中显示为■。2.3.2有序列表方法与无序列表相似，先说明种类ol，再加上li标记于各项之前，最后加上列表结束符/ol。在每一行列表的前面显示的是数字符号。语法格式:olli列表项1li列表项2li列表项3/ol类型有：1显示阿拉伯数字1、2、3、……a显示小写英文字母a、b、c、……A显示大写英文字母A、B、C、……i显示小写罗马字母i、ii、iii、……I显示大写罗马字母I、II、III、……Start=显示起始的编号2.4超链接标记超链接是的重要基础，通过超链接，用户可以在万维网中自由地从一个网站到另一个网站，或者从一个网页到另一个网页。语法格式:ahref=URLtitle=”标题名称”target=”位置名称”提示文字或其它媒体/aURL超链接指向的地址，地址不同可以表示不同的链接。title鼠标指向超链接时显示的提示文字。target在窗口中打开，系统默认提供了四种，也可以自行指定窗口名称。2.4.1超链接的构成一．以文字作超链接二．用图像作超链接三．图像的不同部分作超链接四．Flash动画中的超链接2.4.2超链接的几种形式一．指向另一个网页的超链接ahref=“”海忆教育在线/a注：如果要新窗口打开链接，需要在a标记中加入target=_blank。二．指向一个文件的超链接ahref=“/soft/windows.iso”点击下载XP镜像/a三．指向电子邮件的超链接ahref=“mailto:[e-mail]”与我联系/a四．指向某网页某部分的超链接ahref=“/news/my.htm#2”第2章/a*需要事先加入锚标记，才能实现正确的跳转。五．指向空链接的超链接(javascript或#)ahref=”javascript:;”单击没有反应/a或ahref=”#”指向自身/a六．脚本链接(javascript)ahref=”javascript:alert:(“欢迎查看脚本超链接效果！”);”单击弹出对话框/a2.5图像标记2.5.1嵌入图像对象标记在HTML文档中嵌入一些漂亮的图像，可使页面图文并茂。嵌入图像要使用img标记。语法格式：imgsrc=图像的URL[align=＃alt=文字border=＃height=＃width=＃]参数src指出图像文件的URL地址，在设计中要事先将图片放到网页目录中，以防止绝对路径式的引用。imgsrc=fuwa.jpgborder=2height=50alt=福娃2.5.2以图像对象作超链接ahref=””imgsrc=haie.gif/a2.5.3以图像的局部区域作为超链接（热区）（本部分不要记忆代码，掌握操作即可）*网站头部的制作1.纯静态图片2.自行制作Flash动画3.静态图片为背景,上面遮罩透明Flash.-objectclassid=clsid:D27CDB6E-AE6D