最新HTML基础知识.doc

《最新HTML基础知识.doc》由会员分享，可在线阅读，更多相关《最新HTML基础知识.doc（91页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Four short words sum up what has lifted most successful individuals above the crowd: a little bit more.-author-dateHTML基础知识第6章 SWT概述1.4 HTML基础知识Internet风行世界，作为展现Internet风采的重要载体，Web页受到了愈来愈多人的重视。好的Web页可以吸引用户频频光顾站点，从而达到宣传网站的目的。Web页是由HTML（Hypertext Markup Language，超文本标记语言）组织起来的，由浏览器解释显示的一种文件。最初的HTML语言功能

2、极其有限，仅能够实现静态文本的显示，人们远远不满足于死板的类似于文本文件的Web页。后来增强的HTML语言扩展了对图片、声音、视频影像的支持。通过浏览器访问到的Web页面，通常是基于HTML的基础上所形成的。那么，什么是HTML呢？下面将介绍有关HTML的概念及其基本语法。1.4.1 HTML概念当畅游Internet时，通过浏览器所看到的网站是由HTML语言所构成的。HTML是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等连接显示出来。这种标记性语言是因特网上网页的主要语言。HTML网页文件可以使用记事本、写字板或Dreamweaver等编辑工具来编写，以.h

3、tm或.html为文件后缀名保存。将HTML网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。1.4.2 HTML基本语法HTML标记是由“”所括住的指令标记，用于向浏览器发送标记指令。主要分为：单标记指令、双标记指令（由“”内容“”构成）。HTML语言使用标志对的方法编写文件，既简单又方便。它通常使用“内容”来表示标志的开始和结束，因此在HTML文档中这样的标志对都必须是成对使用的。为了便于理解，将HTML标记语言大致分为基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。1.4.3 基本标记基本标记是用来定义页面属性的一些

4、标记语言。通常一份HTML网页文件包含3个部分：标头区、内容区和网页区。1标志用于HTML文档的最前边，用来标识HTML文档的开始。而标志恰恰相反，它放在HTML文档的最后边，用来标识HTML文档的结束，两个标志必须一块使用。2和构成HTML文档的开头部分，在此标志对之间可以使用、等标志对。这些标志对都是用来描述HTML文档相关信息的，和标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。3和是HTML文档的主体部分，在此标志对之间可包含、等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。标志主要属性如表1-1所示。表1-1 标志主要属性属 性用 途范 例设置

5、背景颜色 红色背景设置文本颜色蓝色文本设置链接颜色链接为蓝色设置已使用的链接的颜色链接为红色设置鼠标指向的链接的颜色黄色以上各个属性可以结合使用，如。引号内的rrggbb是用6个十六进制数表示的RGB（即红、绿、蓝3色的组合）颜色，如#ff0000对应的是红色。4使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的主题。要将网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加入需要显示的文本即可。下面是一个简单的网页实例。通过该实例，读者便可以了解以上各个标志对在一个HTML文档中的布局或所使用的位置。显示在浏览器窗口最顶端中的文本红色背景、蓝色文本

6、%注意：标志对只能放在标志对之间。1.4.4 格式标记这里所介绍的格式标记都是用于标志对之间的。1标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。标志还可以使用align属性，它用来说明对齐方式，语法如下所示。Align的参数可以是Left（左对齐）、Center（居中）和Right（右对齐）3个值中的任何一个。例如表示标志对中的文本使用居中的对齐方式。2是一个很简单的单标记指令，它没有结束标志，因为它用来创建一个回车换行，即标记文本换行。%注意：如果把加在标志对的外边，将创建一个大的回车换行，即前边和后边的文本的行与行之间的距离比较大。若放在的里边则前边和后

7、边的文本的行与行之间的距离将比较小。3在标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。4、用来创建一个普通的列表；用来创建列表中的上层项目；用来创建列表中最下层项目，和都必须放在标志对之间。通过下面的实例，读者可以更好地理解这几个相近的标记。一个普通列表中国城市北京 上海 广州 美国城市华盛顿 芝加哥 纽约 该实例在网页中的效果，如图1-29所示。5、标志对用来创建一个标有数字的列表。标志对用来创建一个标有圆点的列表。标志对只能在或标志对之间使用，此标志对用来创建一个列表项，若放在之间，则每个列表项加上一个数字；若放在之间，则每个列表项加上一个圆点。示例如下所示：图1-29 格式

8、标记执行效果图中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 以上在IE中的运行效果如图1-30所示。图1-30 格式标记执行效果图6标志对用来排版大块HTML段落，也用于格式化表，此标志对的用法与标志对非常相似，同样有align对齐方式属性。1.4.5 文本标记文本标记主要针对文本的属性设置进行标记说明，如斜体、黑体字、加下划线等。1标志对用来对文本进行预处理操作。2HTML语言提供了一系列对文本中的标题进行操作的标志对：、。是最大的标题，而则是最小的标题。如果在HTML文档中需要输出标题文本，可以使用这6对标题标志对中的任何一对。3、经常使用Word的人对这3个标志对一定很快就

9、能掌握。用来使文本以黑体字的形式输出；用来使文本以斜体字的形式输出；用来使文本以下加一划线的形式输出。4、这些标志对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。用来输出打字机风格字体的文本；用来输出引用方式的字体，通常是斜体；用来输出需要强调的文本（通常是斜体加黑体）；则用来输出加重文本（通常也是斜体加黑体）。5可以对输出文本的字体大小、颜色进行随意的改变。这些改变主要是通过对它的两个属性size和color的控制来实现的。size属性用来改变字体的大小，它可以取值为-1、1和+1；而color属性则用来改变文本的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常

10、量名。文本标记的具体用法如以下代码所示：文本标记的综合示例最大的标题使用h3的标题最小的标题黑体字文本 斜体字文本 下加一划线文本 打字机风格的文本引用方式的文本图1-31 文本标记执行效果图强调的文本加重的文本size取值“+1”、color取值“red”时的文本此例在浏览器中的显示如图1-31所示。1.4.6 图像标记再简单朴素的网页如果只有文字而没有图像将失去许多活力，图像在网页制作中是非常重要的一个方面，HTML语言也专门提供了标志来处理图像的输出。1标志并不是真正地把图像加入到HTML文档中，而是将标志对的src属性赋值。这个值是图像文件的文件名，其中包括路径，这个路径可以是相对路径

11、，也可以是网址。所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。假如网站的HTML文件与图像文件（文件名假设是logo.gif）在同一个目录下，则可以将代码写成。假如网站的图像文件放在当前的HTML文档所在目录的一个子目录（子目录名假设是images）下，则代码应为。%注意：通常图像文件都会放在网站中一个独立的目录里。必须注意一点，src属性在标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，标志还有alt、align、border、width和height属性。align是图像的对齐方式，在上边已经提到过。border属性是图像的边框，可以取大于

12、或者等于0的整数，默认单位是像素。width和height属性是图像的宽和高，默认单位也是像素。alt属性是当光标移动到图像上时显示的文本。2标志是在HTML文档中加入一条水平线。它可以直接使用，具有size、color、width和noshade属性。size用来设置水平线的厚度，而width用来设定水平线的宽度，默认单位是像素。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线，不加入此属性水平线将有阴影。图像标记的使用如以下代码所示，效果如图1-32所示。图像标记的综合示例图1-32 图像标记效果图1.4.7 表格标记表格标记对于制作网页是很重要的，现

13、在很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意地进行背景和前景颜色的设置。1标志对用来创建一个表格。它的属性较多，诸如bgcolor、bordercolor、cellpadding等。具体的属性参数将在使用Dreamweaver整合页面时作详细介绍。2、标志对用来创建表格中的每一行。此标志对只能放在标志对之间使用，而在此标志对之间加入文本将是无效的。标志对用来创建表格中一行中的每一个表格，此标志对只有放在标志对之间才是有效的。3标志对用来设置表格头，通常是黑体居中文字。表格标记使用如下代码，效果如图1-33所示。图1-33 表格标记效果图表格标记的综合示

14、例。表格标记的综合示例 意大利 英格兰 西班牙 AC米兰 佛罗伦萨 曼联 纽卡斯尔 巴塞罗那 皇家社会 尤文图斯 桑普多利亚 利物浦 阿森纳 皇家马德里 拉齐奥 国际米兰 切尔西 米德尔斯堡 马德里竞技 1.4.8 链接标记链接是HTML语言的一大特色，正因为有了链接，网站内容的浏览才能够具有灵活性和网络性。1该标志对的属性href是无论如何不可缺少的，标志对之间加入需要链接的文本或图像（链接图像即加入标志）。href的值可以是URL形式，即网址或相对路径，也可以是mailto:形式，即发送E-mail形式。当href为URL时，语法为，这样就构成一个超文本链接了。示例如下：a href=当h

15、ref为邮件地址时，语法为，这就创建了一个自动发送电子邮件的链接，mailto:后边紧跟想要自动发送的电子邮件的地址（即E-mail地址）。例如：这是我的电子信箱（E-mail信箱）此外，还具有target属性，此属性用来指明浏览的目标帧，这些内容将在讲帧标记时作详细的说明。2标志对要结合标志对使用才有效果。标志对用来在HTML文档中创建一个标签（即做一个记号），属性name是不可缺少的，它的值即是标签名。例如：此处创建了一个标签。创建标签是为了在HTML文档中创建一些链接，以便能够找到同一文档中有标签的地方。要找到标签所在地，就必须使用标志对。例如要找到“标签名”这个标签，就要编写如下代码：

16、单击此处将使浏览器跳到“标签名”处。%注意：href属性赋的值若是标签的名字，必须在标签名前边加一个“#”号。1.4.9 帧标记帧是由英文Frame翻译过来的，它可以用来向浏览器窗口中装载多个HTML文件。每个HTML文件占据一个帧，而多个帧可以同时显示在同一个浏览器窗口中，它们组成了一个最大的帧。帧通常的使用方法是在一个帧中放置目录（即可供选择的链接），然后将HTML文件显示在另一个帧中。1标志对用来定义主文档中有几个帧并且各个帧是如何排列的。此标志对放在帧的主文档的标志对的外边，也可以嵌在其他帧文档中，并且可以嵌套使用。它具有rows和cols属性，使用标志时这两个属性至少必须选择一个，否

17、则浏览器只显示第一个定义的帧，标志对也就没有起到任何作用了。rows用来规定主文档中各个帧的行定位，而cols用来规定主文档中各个帧的列定位。这两个属性的取值可以是百分数、绝对像素值或星号“*”，其中星号代表那些未被说明的空间，如果同一个属性中出现多个星号，则将剩下的未被说明的空间平均分配。2标志放在之间，用来定义某一个具体的帧。标志具有src和name属性，这两个属性都是必须赋值的。src是此帧的源HTML文件名（包括网络路径，即相对路径或网址），浏览器将会在此帧中显示src指定的HTML文件。name是此帧的名字，这个名字是用来供超文本链接标志中的target属性指定链接的HTML文件将显

18、示在哪一个帧中。例如定义了一个帧，名字是main，在帧中显示的HTML文件名是jc.htm，则代码是。当单击这个链接后，文件new.htm将要显示在名为main的帧中，则代码为需要链接的文本。此外，标志还有scrolling和noresize属性，scrolling用来指定是否显示滚动轴，取值可以是“yes”（显示）、“no”（不显示）或“auto”（若需要则会自动显示，不需要则自动不显示）。noresize属性直接加入标志中即可使用，不需赋值，它用来禁止用户调整一个帧的大小。3标志对也是放在标志对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。在此标志对之间先紧跟标志对，然后才可以使用

19、前面所讲过的任何标志。1.4.10 表单标记表单在Web网页中用来给访问者填写信息，从而获得用户信息，使网页具有交互的功能。1标志对用来创建一个表单，即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。标志具有action、method和target属性。action的值是处理程序的程序名（包括网络路径：网址或相对路径）。例如：form action=http:/xld. method属性用来定义处理程序从表单中获得信息的方法，可取值为GET和POST。GET方法是从服务器上请求数据，POST方法是发送数据到服务器。两者的区别在于GET方法所有参数会出现在URL地址中，而POST方

20、法的参数不会出现在URL中。通常GET方法限制字符的大小，POST则允许传输大量数据。事实上POST方法可以没有时间限制地传递数据到服务器，用户在浏览器端是看不到这一过程的，所以POST方法比较适合用于发送一个保密的（比如信用卡号）或者比较大量的数据到服务器。而GET方法会将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比POST方法好。target属性用来指定目标窗口或目标帧。2标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在标志对之间。标志中共提供了8种类型的输入区域，具体是哪一种类型由type属性来决定。3、标志对用来创建一个

21、下拉列表框或可以复选的列表框。此标志对用于标志对之间。具有multiple、name和size属性。multiple属性不用赋值，直接加入标志中即可使用，加入了此属性后列表框就成为可多选的了；name是此列表框的名字，它与上边讲的name属性作用是一样的；size属性用来设置列表框的高度，默认时值为1，若没有设置multiple属性，显示的将是一个弹出式的列表框。标志用来指定列表框中的一个选项，它放在标志对之间。此标志具有selected和value属性：selected用来指定默认的选项；value属性用来给指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的va

22、lue属性来获得该区域选中的数据项的。4用来创建一个可以输入多行的文本框，此标志对用于标志对之间。具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。1.5 网页设计的流程网页设计是一个互动的过程，不仅是设计师构思设计就可以完成的。从客户提出需求到最终发布，期间需要客户与设计人员共同参与协商才能实现这一完整流程。其流程主要有以下几个方面：1.5.1 客户提出需求在设计网站页面之前，设计师需要知道客户的需求，从而确定客户建立网站的目的。常见的目的包括宣传产品、电子商务、行业宣传、市场开拓等。客户提出网站需求是非常重要的一个环节

23、。没有详细的需求，设计人员无法凭空进行设计制作。在这一流程中，双方的沟通与交流是非常重要的。1.5.2 注册域名和申请空间注册域名和申请空间如同给网站在因特网中命名和安家。域名用以给访问者提供访问地址，而空间则用来存放站点以供访问。1注册域名域名是网站的名称。由于在网络上，所有的计算机都以一长串的数字构成的IP地址进行标识，不便于人们使用，因此人们使用域名来标识网站。域名通常包括国际域名和国家二级域名两种。国际域名可以被任何访问者访问。它具有全球性的特点，所以适合集团公司等企业用户使用。国际域名的申请由InterNIC及其他由Internet 国际特别委员会（IAHC）授权的机构进行。国家二级

24、域名以国家后缀结尾，在我国以cn结尾。它具有地域性特点，所以适合所有国内用户使用。国家二级域名的申请由中国互联网络信息中心（CNNIC）负责进行。现在，网络中流行使用中文域名。中文域名是为了方便中国的网络用户而产生的。它由中文构成。中文域名的申请由中国互联网络信息中心（CNNIC）负责。2申请空间空间是用来存放网站的页面文件。网站空间通常有两种：专有空间和租赁空间。专有空间是指客户自己提供服务器，所有网站资料均存放在该服务器中。该类空间的特点是空间容量容易得到保证，便于设计较大的网站。但由于很多客户使用的服务器并不是专用服务器，所以服务器的性能存在较大可变性。租赁空间是指使用租赁的方式向ICP

25、服务商购买的空间。该类空间的特点是服务性能稳定，前期投入较少，租用空间容量有限，不适合大量信息流吞吐。1.5.3 确定网站的内容和主题设计前期还需要做一些准备工作，比如整合客户资源、收集网站内容资料、确定网站功能等。设计人员在参与设计前期，需要根据客户的需要和计划，确定网站的功能产品宣传型、网上营销型、客户服务型、电子商务型等。根据网站功能，确定网站应达到的目的和应发挥的作用，同时还需要考虑网站后期的可扩展性。在具体设计构思时，设计人员应该为网站定位一个主题，从而保证所有网页都围绕这一主题进行设计制作，保证风格的和谐统一。如图1-34所示的游戏网站，由于采用了统一的布局和明确的内容，整体网站主

26、题鲜明，视觉效果非常和谐。图1-34 主题鲜明的游戏网站1.5.4 设计页面设计页面是整个流程中最为重要的环节，设计人员要做的事情是设计网站整体风格、色彩搭配、布局结构等，设计的页面将决定最终的网站效果。现在设计人员常用的网页页面设计软件有两种：Photoshop和Fireworks。1PhotoshopPhotoshop在图形图像处理领域拥有毋庸置疑的权威。使用Photoshop设计网页，具有高速、优质的优点，其缺点是不能生成具有较高兼容性和Java特效的HTML页面。目前的版本是Photoshop CS，如图1-35所示。Photoshop的工作界面如图1-36所示，主要包括工具面板、图层

27、面板和工作区域。目前的CS版本中可以轻松实现切图并输出HTML页面。通常使用Photoshop设计页面的静态效果图。图1-35 Photoshop CS页面图1-36 Photoshop CS工作界面2FireworksFireworks相当于结合了Photoshop（位图处理）以及CorelDRAW（矢量图）的功能。使用Fireworks设计页面，其优点是能够输出与Dreamweaver完全兼容的，具有双向可编辑性的页面；其缺点是色彩和功能上不如Photoshop强大。目前的版本是8.0，如图1-37所示。图1-37 Fireworks 8作为一款为网络设计而开发的图像处理软件，Firewo

28、rks能够自由地导入各种图像；能够自动切图、生成鼠标动态感应的JavaScript，具有十分强大的动画功能和一个几乎完美的图像输出功能。图1-38所示是Fireworks 8的工作界面，其界面与Photoshop非常类似，易学易用。图1-38 Fireworks 8工作界面1.5.5 设计网页动画网页动画对于增添页面动感和提升网站品质具有极大的促进作用。制作精良的动画能与网页相得益彰、锦上添花。网页动画通常以Banner条或广告的形式出现，现在随着宽带网络的普及，也有越来越多的网站使用动画作为页面导航甚至整个页面。设计网页动画常用的软件是Flash。该软件制作动画具有制作方便、动态效果显著、容

29、量小、非常适合网络传播等特点；可以跨平台、跨浏览器地显示声音、图片、动画和交互式等内容。图1-39所示是Flash的工作界面，其界面非常友好，并且提供非常详细和完整的教程。Flash提供的透明技术和物体变形技术使创建复杂的功画变得更容易，给Web动画设计者丰富的想象提供了实现手段；交互设计可以让用户随心所欲地控制功画，赋予用户更多主动权；优化界面设计和强大的工具使Flash更简单实用。基于矢量图的Flash动画在尺寸上可以随意调整缩放，而不会影响图像文件的大小和质量，流式技术允许用户在动画文件全部下载完之前播放已下载的部分，而在不知不觉中下载完剩余的动画。图1-39 Flash的工作界面1.5

30、.6 网页整合网页整合是对前期设计进行汇总和编辑。整合页面需要对设计好的网页进行编辑，诸如规划站点、制作链接、制作页面效果等，该阶段主要使用可视化的网页制作软件进行整合。目前整合网页所使用的主流软件是Dreamweaver，该软件具有强大的可视化编辑功能，其优点是具有完善的站点管理机制，能够添加动态效果代码和客户端程序。在使用Dreamweaver进行整合时需要注意整体站点结构的划分，为了便于日后的维护和再开发，对于站点和栏目要做到结构清晰明了。Dreamweaver目前的版本是8.0，如图1-40所示。图1-40 Dreamweaver 8Dreamweaver工作界面如图1-41所示。Dr

31、eamweaver在网页设计流程中主要用来整合页面，例如整合Photoshop或Fireworks输出的页面，添加动态效果和客户端程序等。本书将在第2章重点介绍如何使用该软件。图1-41 Dreamweaver 8的工作界面1.5.7 文件发布文件发布阶段要做的工作是对已经搭建好的本地网站进行测试，通过测试无误后即可上传至服务器空间进行发布。将网站上传到服务器，也就是将网站文件复制到已经申请的虚拟主机中去。可以通过以下两种方法进行上传发布：q 一种是使用Dreamweaver的站点管理功能上传本地文件，使用该方法能够有效同步本地站点和远程站点，但其对远程站点的管理功能较弱。q 另一种方法是使用

32、FTP软件连接到服务器空间，然后进行上传发布文件。该方法具有较大的自主性，但其不利于对整体站点进行有序管理。不管使用哪一种方法，最终能实现将本地的网站文件复制到服务器空间中即可。1.5.8 后期维护一个网站上传后，如果没有专业人员维护，不断更新内容，网站内容就不会引起人们的关注，如果因此没有人访问这个网站，该网站也就没有存在的价值了。让更多的人知道该网站，这才是建立网站的根本目的，所以后期维护是必须的，也是非常重要的环节之一。后期维护工作主要包括站内测试、网站推广、内容更新、及时更正错误、添加新的信息、保持本地站点与远程站点同步以及必要时的改版等。在做后期维护时，需要特别注意远程站点中的文件安全，在进行相关维护操作时，应该先在本地站点中测试检查，通过后再同步远程站点中的内容。1.6 小 结网页作为一种新的视觉表现形式，它的发展虽然没有多长时间，但兼容了传统平面设计的特征，又具备其所独有的优势，成为今后信息交流的一个非常有影响的途径。好的网页设计除首先应考虑其内容上的精益求精外，其次就是对内容合理有效的视觉编排。美是任何网页所必须具备的基本因素，网页信息不仅是为了满足使用者的需求，更重要的是创造一种愉悦的视觉环境，使访问者有一种全身心的享受和共鸣。网络本身就是一个处理信息的巨型平台，设