、HTML语言的基本结构.doc

ASP网络编程讲稿第2章、HTML语言的基本结构21 认识HTML语法HTML(HyperText Mark Language,超文本标识语言)是用于World Wide Web的语言。它的语法是由标记（tags）和属性（attributes）所组成，浏览器只要看到html文件的标记和属性，就可以将它解释成网页。1标记（tags-不同资料翻译不同：如标记、标签、标识符等）： HTML标记通常分为两种。第一种用来识别网页上的组件或描述组件的样式，如网页标题（）、网页的主体（）、段落（）、分项符号清单（）、编号清单（）等等；第二种是用来指向其他资源，如可用来插入图片、可用来插入java applet、可用来识别网页内的位置或超级链接等等。HTML标记是以“”两个符号括起来，而且多数情况是成对出现；当然有些不是，如BR。内容起始标记结束标记高高兴兴学HTML基本结构2属性（attributes）：除了HTML标记本身所能描述的特性外，大部分的标记还会搭配属性，以提供更多的相关信息。例如：快快乐乐学习HTML3值（Value）：属性值必须在事先定义范围内选区。4嵌套标记(Nesting Tag)：必须注意顺序。5空格符：HTML浏览器会忽略标记间多余的空格符或Enter。6特殊字符：HTML文件中有一些特殊字符，例如要显示,”&等字符，不能直接用键盘输入。22 编辑HTML的工具我们编辑html的工具主要有：记事本、Dreamweaver 、Frontpage等，我们选择Dreamweaver为工具软件，以记事本为辅助工具。23 HTML文件的整体结构HTML文件的整体结构可分为3个部分：HTML版本声明、标题声明、文件主体（Body），例如：版本声明 标题声明标题声明 西安*学校 文件主体标题声明 你好！西安*。 24 事件处理程序所谓“事件处理程序”（Event Handler）指的是将浏览者的操作和Script程序链接，换句话说，当浏览者进行某些操作时，便去执行指定的Script程序。许多HTML标记都含有事件处理属性，以指定事件处理程序，其中On Submit和onReset只能用在标记，onClick只能用在和标记，onchange只能用在、和标记。备注：许多HTML标记含有LANG和DIR两个属性，其意义如下：LANG=”language-code”：此属性是用来指定组件属性值的语种或网页内容的语种，language-code代表语种，如，我们可以声明html文件将采用德文网页内容DIR=”LTR,RTL”：此属性是用来指定文字的方向。25网页数据编辑与格式化1设置标题格式：HTML提供了6种层次的标题格式：你好！-你好！。你好！（标题1）字体最大。最重要的属性ALIGN=”LEFT,CENTER,RIGHT”2设置段落格式（标记）：网页的内容通常是由数个段落所组成，而输入段落最简单的方法就是使用段落标记。此外，还有.地址段落标记、强制换行但不换段标记、.左右缩排标记、.预先格式华段落标记。3预先格式华段落（.标记）：4注释（标记）标记可以在网页内插入注释，而且注释不会显示在浏览器。5HTML提供的文本格式等等。6字体、文字颜色与大小标记： 标记的FACE、COLOR、SIZE属性，来改变文字的字体、颜色、大小。7水平线标记:其重要属性有align=”left,center,right”、color=”#rrggbb”(水平颜色)、size=”n”(水平线高度)、width=”n”(水平线宽度)。举例：”8项目符号与编号清单-、 加上项目符号；加上项目编号；指定个别项目数据。 例1：例2： 中华 日本 韩国 中华 日本 韩国 备注：标记的TYPE=”SQUARE,CIRCLE,DISC”标记的TYPE=”1,A,a,i”用start属性来指定初始值马上练习：无标题文档 东亚 中国 日本 韩国 南亚 印度 巴基斯坦 斯里兰卡 中亚 哈萨克斯坦 阿富汗 土库曼 26超级链接的建立与使用没有链接，WWW将失去存在的意义！WWW之所以受欢迎，乃在于她除了有精美的图文之外，更有方便且多样化的链接，让使用者可以很快的找到其所需的资料，也让网络能提供更多的服务！ 【WWW链接标志基本概念】1. 链接基本概念：一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当光标移到那些字上时，会变成手指形状，按下去，则会连到别的页面或网站。说到链接，最基本来看有内部链接及外部链接，所谓内部链接就是自己网站间网页的链接，至于外部链接我们稍后再来讨论。要了解内部链接，首先必须先了解一下这两种东西，一个是相对路径，一个是绝对路径。现在假设一个情形：我们在自己的计算机里设计网页，所有网页相关的档案我们通通放在 c:www 里面，现在假设 c:www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！现在我们想在 index.htm 里面设一个链接，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述：【网页内部的链接】1. 使用方法：（1）. 先在欲链接处作记号：这里是你想链接的锚点（2）. 设定链接：链接2. 标志解说：有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。其原理不过是：在欲链接处做个记号（在dreamweaver中叫做锚点！），然后，链接时就寻这记号，就可以快速找到资料。很简单吧！【网页外部的链接】1. 标志解说：链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网络上的服务五花八门，所以不同的服务有不同的链接方法，将之整理在下表。2. 使用范例：网站链接网易网易电子邮件链接写信给朋友写信给朋友ftp链接下载文档下载档案news链接Seednet news服务seednet news服务gopher链接Seednet gopher服务seednet gopher服务bbs链接Seednet gopher服务seednet bbs服务【链接标志的参数】1. 使用方法：在链接后面加入 target=_参数2. 标志解说：链接的参数并不多，常见的大概就属 target 这参数了，target 的意思是目标，也就是网页链接的指向目标，这参数在框窗（frame）里尤为重要！3. 使用范例：o target=框窗名称：这在框架标志中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标志，来指定链接的内容显示到哪一个框窗中。o target=_blank：将链接的画面内容，开在新的浏览窗口中。o target=_parent：将链接的画面内容，当成文件的上一个画面。o target=_self：将链接的画面内容，显示在目前的窗口中。o target=_top：这个参数可以解决新链接的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。27 图片的设置与应用图像（图片）也就是images，在html语法中用img标记来表示，其基本的语法是： #是图象的 URL，关于url就是指的是图像在网上的地址。 #是在浏览器尚未完全读入图象时，在图象位置显示的文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。 例子：图象在页面中的对齐/布局： 语法： #=left, center, right，使用图像标记的align属性，其实这一属性布置在这里用到，以后我们在学习表格的时候也会遇到align，它的值left, center, right就是他的中文意思，left居左，center居中，right居右。 例子： 陕西东辉网站欢迎您的光临！ 图象和文字的对齐： 语法： #=top, middle, bottom，这里的align和上边的实现的效果不一样，大家从它的值可以看出，它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果！ 图像的边框： #value数字，指的是这个图像的边的宽度！ 示例： 大家可以在自己的机子上按照我给你的语法，写下来，看看效果就行了。28 表格的制作和应用 表格，一般是用于对网页的内容进行排版，比如文字放在页面的某个位置，你就可以做个表格，然后设置一下表格的属性，它文字放在表格的某个单元个里，就行了；其实用过word的朋友应该非常明白的。除了页面的排版外，表格还可以制作出非常好看的效果，比如按钮、变色、边线等等。大家要会灵活的运用。 看看表格的基本语法：. - 定义表格 .- 定义表行 .- 定义表头 .- 定义表元（即表的单元格） 下面看看它的示例： FoodDrinkSweet ABC 跨多列的表元 跨多行的表元 缺省情况下，表格在浏览器屏幕上左对齐，你可以使用的ALIGN属性来指定表格的对齐方式。ALIGN属性可以取值“left”、“center”和“right”。例如，让一个表格在屏幕中央显示可以使用： 注意：如果你要让表格显示在屏幕中央，使用标记属性值对align=center来设置。你可以使用的ALIGN属性来设置表格中每行元素的水平对齐方式，这个属性也可以取值“left”、“center”和“right”。要设置某一行中所有元素的竖直对齐方式，可以使用的VALIGN属性，它可以取值“top”、“middle”和“botton”（缺省情况下取值“middle”）。要更好地控制表格中某个表头或元素的排列方式，可以使用和标识符的ALIGN和VALIGN属性，这两个属性的取值范围与相同，然而、标记ALIGN和VALIGN属性将会覆盖任何为整个一行指定的排列方式。控制表格单元格的空间当浏览器显示一个表格时，它将每一列的宽度设置为这一列中最长单元格的宽度。浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。你可以使用的CELLPADDING（单元格填充）和CELLSPACING（单元格间距）属性来改变这一缺省值。通过使用CELLPADDING（单元格填充）属性，你可以为表格中的每一单元格安排一个更大的空间，使用CELLSPACING（单元格间距）属性，你可以为单元格之间留出一定的空间。这两个属性的值都以象素来指定。控制表格和表项的大小某些时候你可能想让表格显示出来大一些，你可以用的WIDTH属性来控制表格的宽度，你可以为WIDTH属性提供宽度的绝对值或相对值。当为WIDTH属性提供宽度的绝对值时，你用象素来表示。例如，要建立一个宽为100个象素的表格，可以用。当然，并不能保证表格显示出来恰好是你指定的宽度，表项（单元格）中的内容可能会迫使表格显示出来比WIDTH属性指定的值要宽。另外，你也可以用相对值来指定表格的宽度，例如，如果你想让表格占有整个浏览器屏幕那么宽，你可以用，同样地，如果你在WIDTH属性中指定的百分数太小的话，浏览器显示出来的表格就不是那个宽度。属性可以用来指定表格的整体高度，同样这个属性可取绝对值和相对值。但使用这个属性时要小心，即使Microsoft和Netscape的浏览器都能正确解释它，但它并不是HTML 3.2规范中的一部分。你也可以用和标识符的WIDTH和HEIGHT属性来控制表格中某一表项的大小，你必须用绝对象素值来指定这些属性的值。你要知道当你设置这些值时，只不过是在为浏览器提供建议，浏览器尽量按你的意愿去做，但也有可能不能完全按你指定的方式来显示一个表格。在表格中加入颜色和图象根据HTML 3.2规范，表格不具有任何颜色属性。然而，值得庆幸的是Netscape和Microsoft都扩展了HTML来让表格具有自己的背景色，两种浏览器都能识别标识符的BGCOLOR属性。你可以使用颜色名或RGB值来设定BGCOLOR的值。表格作为子页标识符最初被引入HTML是用来格式化地显示信息。然而，随着时间的推移，这个标识符的属性被大大地扩充了，现在可以将看成是用来在网页中建立一个子页的标识符。这个标识符被扩展出了那么多的属性，以致于现在它很象标识符了。 在Netscape 和Microsoft的浏览器上，具有许多和相同的属性，你可以为表格指定它自己的背景色和图象。另外标识符还能包含所有能在中包含的HTML标识符。然而，具有一个比更大的优势，每一个HTML文件必须有且只有一个标识符，但对于来说，则没有这种限制，你可以在HTML文件中包含任意数目的。当你设计网页时，不要让这个名字愚弄了你。不仅仅用于建立表格，还可以在你的网页上建立子页，当你想把单个网页分成多个部分时，就用标识符。29框架页面的建立与应用框架（Frame）也就是所谓的分割窗口、分割画面、框窗效果、分帧（还真是五花八门），一句话，使用框架，可以在一个浏览器窗口中显示不止一个页面。【垂直分栏】【水平分栏】【混合框架】【导航框架】【内联框架】Some older browsers dont support iframes.If they dont, the iframe will not be visible.这个例子说明了如何创建一个内联框架（包含在HTML页面里的框架）。只有IE浏览器支持【其它卷标参数说明】1. COLS=120,*就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS=30,*,50 （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！2. ROWS=120,*就是横向切割画面，也就是将画面上下分开，切法同上。3. frameborder=0设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。4. framespacing=5表示框架与框架间的保留空白的距离，以免看起来太挤。1. SRC=a.htm设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚）2. NAME=1设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。3. frameborder=0设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。4. scrolling=no设定是否要显示滚动条，YES是要显示滚动条，NO是无论如何都不要显示，AUTO是视情况显示。5. noresize设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。6. marginhight=2表示框架高度部份边缘所保留的空间。7. marginwidth=2表示框架宽度部份边缘所保留的空间。【相关用法】 1. 使用方法：请换有支持Frame功能的浏览器2. 卷标解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此标记，让这些网友知道，该换换浏览器了。或者，你也可以在这标记中，摆上没有Frame语法的网页标记，那么，没有支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。您的浏览器不支持框架结构! target=框窗名称1. 使用方法：显示内容2. 卷标解说：常常有一个情况是，我想在框窗 1 的地方按下连结，但是希望他的内容出现在框窗 3 中（请参照上面那个图），那应该如何写呢？就像上面加个 target=框窗名称 就行啦！ target=_top1. 使用方法：网人俱乐部2. 卷标解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入 target=_top这个参数，那么，这个新连到的网站，就会重新占据整个屏幕啦！210 页内帧-标记 纵观时下网站，几乎每页都要放什么Banner(横幅广告)，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟这些东西延长了网页的下载时间，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？除了我们上面说到的frameset(框架结构)外，还可以应用Iframe标记！ 【Iframe标记的使用】提起Iframe，你应该还记得 Frame标记。Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。 Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。 现在我们谈一下Iframe标记的使用。 Iframe标记的使用格式是: src：文件的路径，既可是HTML文件，也可以是文本、ASP等； width、height：画中画区域的宽与高； scrolling:当SRC的指定的HTML文件在指定的区域显示不完时的滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示; FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。 比如: 【父窗体与浮动帧之间的相互控制】在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。（1）父窗体中访问并控制子窗体中的对象 在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。 现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。 比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象