第2章HTML语言的基本结构

ASP网络编程讲稿第1页共12页第2章、HTML语言的基本结构2．1认识HTML语法HTML(HyperTextMarkLanguage,超文本标识语言)是用于WorldWideWeb的语言。它的语法是由标记（tags）和属性（attributes）所组成，浏览器只要看到html文件的标记和属性，就可以将它解释成网页。1．标记（tags--不同资料翻译不同：如标记、标签、标识符等）：HTML标记通常分为两种。第一种用来识别网页上的组件或描述组件的样式，如网页标题（TITLE）、网页的主体（BODY）、段落（P）、分项符号清单（UL）、编号清单（OL）等等；第二种是用来指向其他资源，如IMG可用来插入图片、APPLET可用来插入javaapplet、A可用来识别网页内的位置或超级链接等等。HTML标记是以“”、“”两个符号括起来，而且多数情况是成对出现；当然有些不是，如BR。I高高兴兴学HTML基本结构/I2．属性（attributes）：除了HTML标记本身所能描述的特性外，大部分的标记还会搭配属性，以提供更多的相关信息。例如：H1COLOR=”#FF00000”ALIGN=”CENTER”快快乐乐学习HTML/H13．值（Value）：属性值必须在事先定义范围内选区。4．嵌套标记(NestingTag)：必须注意顺序。5．空格符：HTML浏览器会忽略标记间多余的空格符或[Enter]。6．特殊字符：HTML文件中有一些特殊字符，例如要显示,,”&等字符，不能直接用键盘输入。2．2编辑HTML的工具我们编辑html的工具主要有：记事本、Dreamweaver、Frontpage等，我们选择Dreamweaver为工具软件，以记事本为辅助工具。2．3HTML文件的整体结构HTML文件的整体结构可分为3个部分：HTML版本声明、标题声明、文件主体（Body），例如：!DOCTYPEHTMLPUBLIC”_//W3C//DTDHTML4.01//EN”“”HTMLHEADTITLE西安**学校/TITLE/HEADBODY你好！西安**。/BODY/HTML2．4事件处理程序所谓“事件处理程序”（EventHandler）指的是将浏览者的操作和Script程序链接，换起始标记结束标记内容版本声明标题声明标题声明文件主体标题声明ASP网络编程讲稿第2页共12页句话说，当浏览者进行某些操作时，便去执行指定的Script程序。许多HTML标记都含有事件处理属性，以指定事件处理程序，其中OnSubmit和onReset只能用在form标记，onClick只能用在input和textarea标记，onchange只能用在input、select和textarea标记。备注：许多HTML标记含有LANG和DIR两个属性，其意义如下：LANG=”language-code”：此属性是用来指定组件属性值的语种或网页内容的语种，language-code代表语种，如，我们可以声明html文件将采用德文HTMLLANG=”DE”网页内容/HTMLDIR=”{LTR,RTL}”：此属性是用来指定文字的方向。2．5网页数据编辑与格式化1．设置标题格式：HTML提供了6种层次的标题格式：H1你好！/H1-----H6你好！/H6。H1你好！/H1（标题1）字体最大。最重要的属性ALIGN=”{LEFT,CENTER,RIGHT}”2．设置段落格式（P…/P标记）：网页的内容通常是由数个段落所组成，而输入段落最简单的方法就是使用段落标记。此外，还有ADDRESS../ADDRESS地址段落标记、BR强制换行但不换段标记、BLOCKQUOTE../BLOCKQUOTE左右缩排标记、PRE../PRE预先格式华段落标记。3．预先格式华段落（PRE../PRE标记）：4．注释（!----标记）!----标记可以在网页内插入注释，而且注释不会显示在浏览器。5．HTML提供的文本格式BSUBSTRONG等等。6．字体、文字颜色与大小FONT…/FONT标记：FONT…/FONT标记的FACE、COLOR、SIZE属性，来改变文字的字体、颜色、大小。7．水平线HR标记:其重要属性有align=”{left,center,right}”、color=”#rrggbb”(水平颜色)、size=”n”(水平线高度)、width=”n”(水平线宽度)。举例：HRCOLOR=”Green”ALIGN=”LEFT”WIDTH=”50%”SIZE=”5”8．项目符号与编号清单------UL、OL、LIUL加上项目符号；OL加上项目编号；LI指定个别项目数据。例1：例2：htmlbodyultype=squareli中华/lili日本/lili韩国/li/ul/body/htmlhtmlbodyoltype=Ali中华/lili日本/lili韩国/li/ol/body/html备注：UL标记的TYPE=”{SQUARE,CIRCLE,DISC}”ASP网络编程讲稿第3页共12页OL标记的TYPE=”{1,A,a,i}”用start属性来指定初始值马上练习：!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//ENhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312title无标题文档/title/headbodyoltype=Astart=2li东亚/liulli中国/lili日本/lili韩国/li/ulli南亚/liultype=discli印度/lili巴基斯坦/lili斯里兰卡/li/ulli中亚/liultype=squareli哈萨克斯坦/lili阿富汗/lili土库曼/li/ul/ol/body/html2．6超级链接的建立与使用没有链接，将失去存在的意义！之所以受欢迎，乃在于她除了有精美的图文之外，更有方便且多样化的链接，让使用者可以很快的找到其所需的资料，也让网络能提供更多的服务！【链接标志基本概念】1.链接基本概念：一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当光标移到那些字上时，会变成手指形状，按下去，则会连到别的页面或网站。说到链接，最基本来看有『内部链接』及『外部链接』，所谓『内部链接』就是自己网站间网页的链接，至于外部链接我们稍后再来讨论。要了解内部链接，首先必须先了解一下这两种东西，一个是『相对路径』，一个是『绝对路径』。ASP网络编程讲稿第4页共12页现在假设一个情形：我们在自己的计算机里设计网页，所有网页相关的档案我们通通放在c:\里面，现在假设c:\、text1.htm、p1.gif、p2.gif这四个档案。ok！现在我们想在index.htm里面设一个链接，能够按一下就连到text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在index.htm里面加上下面任一叙述：【网页内部的链接】1.使用方法：（1）.先在欲链接处作记号：aname=here1这里是你想链接的锚点/a（2）.设定链接：ahref=#here1链接/a2.标志解说：有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。其原理不过是：在欲链接处做个记号（在dreamweaver中叫做锚点！），然后，链接时就寻这记号，就可以快速找到资料。很简单吧！【网页外部的链接】1.标志解说：链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了五彩缤纷的世界。由于网络上的服务五花八门，所以不同的服务有不同的链接方法，将之整理在下表。2.使用范例：网站链接网易ahref=网易/a电子邮件链接写信给朋友ahref=mailto:[e-mail]写信给朋友/aftp链接下载文档ahref=下载档案/anews链接Seednetnews服务ahref=news:news.163.comseednetnews服务/agopher链接Seednetgopher服务ahref=gopher://gopher.163.com/seednetgopher服务/abbs链接Seednetgopher服务ahref=telnet://bbs.163.com/seednetbbs服务/a【链接标志的参数】1.使用方法：在链接后面加入target=_参数2.标志解说：链接的参数并不多，常见的大概就属target这参数了，target的意思是『目标』，也就是网页链接的指向目标，这参数在框窗（frame）里尤为重要！3.使用范例：otarget=框窗名称：这在『框架标志』中也有提到，而且也只有在框架（框窗orframe）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标志，来指定链接的内容显示到哪一个框窗中。otarget=_blank：将链接的画面内容，开在新的浏览窗口中。otarget=_parent：将链接的画面内容，当成文件的上一个画面。otarget=_self：将链接的画面内容，显示在目前的窗口中。otarget=_top：这个参数可以解决新链接的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。2．7图片的设置与应用图像（图片）也就是images，在html语法中用img标记来表示，其基本的语法是：imgsrc=##是图象的URL，关于url就是指的是图像在网上的地址。ASP网络编程讲稿第5页共12页imgalt=##是在浏览器尚未完全读入图象时，在图象位置显示的文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。例子：imgsrc=images/banner.jpg图象在页面中的对齐/布局：语法：imgalign=##=left,center,right，使用图像标记的align属性，其实这一属性布置在这里用到，以后我们在学习表格的时候也会遇到align，它的值left,center,right就是他的中文意思，left居左，center居中，right居右。例子：imgsrc==left陕西东辉网站欢迎您的光临！图象和文字的对齐：语法：imgalign=##=top,middle,bottom，这里的align和上边的实现的效果不一样，大家从它的值可以看出，它所显示出来的是文字在图片的靠上边、中间、底端。大家可以对比这看看各自的效果！图像的边框：imgborder=##value数字，指的是这个图像的边的宽度！示例：imgsrc==1大家可以在自己的机子上按照我给你的语法，写下来，看看效果就行了。2．8表格的制作和应用表格，一般是用于对网页的内容进行排版，比如文字放在页面的某个位置，你就可以做个