02 html相关技术基础知识

第2章HTML相关技术基础知识JavaWeb开发主要是应用于网络开发。在网络开发中，最终信息会以网页的形式呈现给用户。美，会令人赏心悦目，心情愉快。所以一个好的系统不仅要实用也要美观。而HTML语言和CSS样式的结合使用是网页美化的基础。本章重点：‰HTML的各种标签的使用‰CSS样式的使用2.1HTML基础知识网络这个词语可以说是风靡全球，家喻户晓。网页又是网络的基本组成元素，没有网页的存在，网络也犹如空气一般，看不见摸不着。所以，人们对网页熟悉犹如家常便饭。那些形形色色，多姿多彩的网页又是怎样产生的呢？其实网页是通过HTML语言将文本、表格、图片以及音乐组合在一起。HTML语言是一种简单的网络通用标记。用它制做出的网页无论在什么类型的电脑或浏览器上都可以浏览。下面，就具体学习HTML的相关基础知识。2.1.1HTML概述HTML是一种可以加入文本、表格、图片、声音、动画、影视等内容标记语言。自1990年以来HTML就一直被用作ＷＷＷ（万维网)的信息表示语言。用HTML语言编写的文本文件称为HTML文档，事实上每一个HTML文档都是一种静态的网页，这个网页里面包含了HTML指令标签，这些指令标签并不是像C++或Java那样的程序语言，它只是一种将网页中的资料进行排版并显示的标记结构语言。易学易懂，非常简单。而且它能独立运作在各种操作系统平台上，并需要通过浏览器将网页的效果显示出来。在网页上经常会通过单击鼠标从一个页面跳转到另一个页面，看似很复杂的操作，HTML的AHREF=文件路径/文件名/A标签就可以搞定，很简单，很神奇吧。从上面可以看出HTML在执行某项功能时，需要用到的一些标签。一个标签就是一条命令，它会告诉浏览器如何显示文本。HTML标签都是由和符号以及一个字符串组成。浏览器在执行命令时，就会这些标签进行解释，最后显示出文字、表格、图像、动画、声音等。2.1.2HTML基本结构一个HTML文档是由一系列的元素和标签组成，元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置。HTML文档主要是由4个标签对组成，它们分别是html/html、head/head、title和/title和body/body。下面是一个简单的HTML文件，包含了4个基本的标签对，具体代码如下：程序2-1html_01.html01html!--html开始标签--02head!--头部开始标签--03titleHTML示例/title!--标题标签--04/head!--头部结束标签--05body!--主体开始标签--06center07h108欢迎光临---Welcome09/H110br11hr12fontsize=7color=red这是我第一次用HTML做的主页/font13/center14/body!--主体结束标签--15/html!--html结束标签--‰html/html在文档的最外层，文档中的所有文本和其它的html标签都包含在其中，它表示该文档是以HTML语言编写的。‰head/head是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的，但是在此标签对中可以插入其它标记，例如：title/title。用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略此标记。‰title/title是嵌套在HEAD头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。‰body/body标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。2.1.3HTML文字标签HTML中有一类标签可以对网页中的文本元素进行修饰和布局。使网页变的绚丽多彩，吸引眼球，获得更多的浏览量。本节主要对这些标签做逐一的介绍。1．换行标签br换行标签是个单标签，不包含任和内容，其作用是换行。如果在文本中的任何位置只要使用了br标签，那么在浏览器中显示时，该标签之后的内容将显示下一行。下面是关于换行标签br的一个具体实例，具体代码如下：程序2-2html_02.html01html02head03title无换行示例/title04/head05body06无换行标记：送别下马饮君酒，问君何所之。君言不得意，归卧南山陲。但去莫复问，白云无尽时。07br08br09br10有换行标记：11br12送别13br14下马饮君酒，问君何所之。15br16君言不得意，归卧南山陲。17br18但去莫复问，白云无尽时。19/body20/html在本程序中的第6行中无换行标记，所以诗以一行的形式显示出来，而在第15、17行中加入换行标记后，则会进行换行显示。运行结果如图2.1所示：图2.1运行结果2．换段落标签p在p/p标签对中的文字，代表同一个段落的文字。它可以单独使用，也可以成对使用。单独使用时，下一个P的开始就意味着上一个P的结束。良好的习惯是成对使用。它的使用格式：p或palign=参数其中，align是p标签的属性，其作用是设置P标签内的文本的对齐方式。其中参数：left、center、right.分别设置段落文字的左、中、右位置的对齐方式。下面是关于换段落标签p的一个具体实例，具体代码如下：程序2-3html_03.html01html02head03title测试分段控制标签/title04/head05body06p07子规啼，不如归。道是春归人未归。几日添憔悴，虚飘飘柳絮飞。一春鱼雁无消息，则见双燕斗衔泥。08/p09palign=right10俏冤家，在天涯。偏那里绿杨堪系马。困坐南窗下，数对清风想念他。蛾眉淡了教谁画，瘦岩岩羞带石榴花。11/p12palign=center13风飘飘，雨潇潇，便做陈抟睡不着。懊恼伤怀抱，扑簌簌泪点抛。秋蝉儿噪罢寒蛩儿叫，淅零零细雨打芭蕉。14/p15palign=left16雪纷华，舞梨华。再不见烟村四五家，密洒堪图画。看疏林噪晚鸦，黄芦掩映清江下，斜缆着钓鱼艖。17/p18/body19/html第6-8行之间的文字以段落的形式显示，第9-11行的文字以右对齐的形式显示，第12-14行的文字以居中对齐的形式显示，第15-17行的文字以左对齐的形式显示。运行结果如图2.2所示：图2.2运行结果3．原样显示文字标签pre在网页制作的时候，有的时候希望网页中的文本可以按照自己写好的布局输出。这时，就可以通过pre标签来实现。该标签的作用是保留原始文字排版的格式。下面是关于原样显示文字标签pre的一个具体实例，具体代码如下：程序2-4html_04.html01html02head03title原样显示文字标签/title04/head05body06pre07咏柳0809碧玉妆成一树高，10万条垂下绿丝绦，11不知细叶谁裁出，12二月春风似剪刀。13/pre14/body15/html在第6行和第13行分别加入了pre和/pre标签，所以第7-12行之间的文字会以原样显示。运行结果如图2.3所示：图2.3运行结果4．居中对齐标签centercenter是标签是成对使用的，其作用是使在其标签对内的文本居中显示。使用方法是在需要居中显示的文本的前面加center，结尾处加/center。程序2-5html_05.html01html02head03title居中对齐标签/title04/head05body06center07《春晓》08p09春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。10/center11/body12/html在第6行和第10行分别加入了center和/center标签，所以第7-9行之间的文字会以居中的形式显示。运行结果如图2.4所示：图2.4运行结果5．水平分隔线标签hrhr标签具有可以画出一条水平线的作用，它经常被用于段落与段落之间的分隔。其目的是使文本结构层次清晰。hr标签是一个可以单独使用的标签，也就是说它没有/。表2.1是hr标签的属性，通过设置hr标签的属性值，可以控制水平分隔线的样式。表2.1hr标签的属性属性参数功能单位默认值size设置水平分隔线的粗细pixel(像素）2width设置水平分隔线的宽度pixel(像素）、%100%alignleftenterright设置水平分隔线的对齐方式centercolor设置水平分隔线的颜色blacknoshade取消水平分隔线的3d阴影下面的代码是一个展示水平分隔线标签hr用法的实例，具体代码如下的所示：程序2-6html_06.html01html02head03title测试水平分隔线标签/title04/head05body06center07出塞08HR09秦时明月汉时关，10hrsize=611万里长征人未还。12hrwidth=40%color=blue13但使龙城飞将在，14hrwidth=100align=left15不教胡马度阴山16hrsize=6width=30%align=centernoshadecolor=red17/center18/body19/html在第8、10、12、14、16行处分别加入了带有不同属性的hr标签，运行结果如图2.5所示：图2.5运行结果6．特殊字符在HTML中，有些特殊的字符在浏览器在解析的时候会发生错误或者浏览器不会识别，而不会解析出自己需要的效果。这些特殊的字符和Java程序的关键字类似。例如，在HTML中每个标签都有是以开头的，所以当文本中出现符号时，浏览器就会把它当作标签来进行解析，最后结果肯定会出错的。所以为了防止代码混淆，必须用一些代码来表示它们。表2.2列出了HTML几种常见特殊字符及其代码表。表2.2HTML几种常见特殊字符及其代码表特殊或专用字符字符代码特殊或专用字符字符代码<©©>××&&®®"空格 下面的程序是一个展示特殊字符用法的实例，具体代码如下的所示：程序2-7html_07.html01html02head03title特殊字符/title04/head05body06center07<芙蓉楼送辛渐>08hrwidth=49%size=5align=CENTERnoshade09pre10寒雨连江夜入吴，平明送客楚山孤。1112洛阳亲友如相问，一片冰心在玉壶。13/pre14/body15/html在第7行处加入了两个特殊字符<和>，运行结果如图2.6所示：图2.6运行结果7．注释标签在HTML中是支持使用注释标签的。其作用是为了便于查找有关的文件内容和标识。而被加了注释的内容是不会在浏览器中显示出来的。这和Java程序中的“//”注释相似。注释标签的格式为：!--注释的内容--，下面的程序是一个展示注释标签用法的实例，具体代码如下的所示：程序2-8html_08.html01html02head03title注释标签/title04/head05body06!--body标签是主体内容--07center08<七步诗>09!--hr标签是主体内容--10hrwidth=49%size=5align=centernoshade11pre12!--pre代表原样显示排版格式--13煮