第3章 HTML语言与文本编辑

第3章HTML语言与文本编辑本章将首先讲解开发网页的两个最基础的知识：HTML语言和文本编辑。具体问题包括：•HTML语言•HTML文本编辑•超链接•创建移动的文本•HTML与XML比较•综合示例3.1HTML语言3.1.1HTML语言概述•HTML是（HyperTextMarkupLanguage，超文本标签语言）的缩写。它是（WorldWideWeb）中使用的超文本标签语言。它最早源于SGML（StandardGeneralizedMarkupLanguage--标准通用标签语言）语言，它是在SGML定义下的一个描述性语言，或可说HTML是SGML的一个子集。HTML语言的重要性在于，它是所有浏览器都能识别的通用语言，是浏览器生成网页的基础。利用它可以完成以下三方面的工作：•定义在浏览器上的显示格式；•建立超链接；•集成其他多媒体软件。HTML语言的特点是：1.HTML不是程序语言，它只是一种标签语言，一种文本语言。实际上它只是将一些对象（如文本、图片、表格等）中加入各种各样的标签符，从而使这些对象以这些标签符所定义的形式显示出来。2.任何文本编辑器都可以编辑它。3.需要使用Web浏览器，所有网页，都是由浏览器对HTML解释而形成的，浏览器就相当于HTML语言的翻译程序，负责解释HTML文件各种符号的含义。4.HTML语言独立于各种平台。HTML语言目前已经成为各种类型浏览器的通用标准，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。其内容从功能上大体可分为：文本结构设置、列表建立、文本属性制定、超链接、图片和多媒体插入、对象、表格以及窗体的操作等。3.1.2HTML标签的基础1.基本的HTML语法所有的标签都必须用尖括号（即小于号“”和大于号“”）括起来。它以起始标签及终结标签将元素围住。大部分标签是成对出现的，包括开始标签和结束标签。开始标签和相应的结束标签定义了标签所影响的范围；结束标签与开始标签名称相同，但结束标签必须用一个斜线符号开头。所有被标签包围的元素，如：文本、图像、表格等都按照标签定义的格式显示。例如：h2欢迎参观本网页！/h2有少数标签允许只有起始标签没有终结标签。例如：断行用的标签：br分段用的标签：p标签不区分大小写，但缺省情况下，ASP.NET2.0中系统提供的HTML标签都用小写字母表示。2.标签的属性大多数标签都拥有一些属性，大部分属性都有缺省值，利用这些属性可以对标签的作用进行更多的控制。设置或改变属性时，将“属性名=值”放在标签名的同一个尖括弧中，而且所有属性都放置在开始标签的尖括号内。3.注释语句与其它程序设计语言一样，在HTML文本的适当位置上增加注释语句能提高文本的可读性，编译器将不解读注释部分即不在浏览器窗口中显示出来。注释语句的格式是：!——注释语句——3.1.3HTML文档的基本结构一个基本的HTML文档通常包含以下三对顶级标签。1.HTML标签：HTML.../HTMLHTML标签是全部文档内容的容器2.首部标签：HEAD.../HEAD首部标签用于提供与Web页有关的各种信息。在首部标签中，可以使用TITLE和/TITLE标签来指定网页的标题，使用STYLE和/STYLE标签来定义CSS样式表，使用SCRIPT和/SCRIPT标签来插入脚本，等等。3.正文标签：BODY.../BODY正文标签包含了文档的内容，文字、图像、动画、超链接以及其他HTML元素均位于该标签中。4.HTML文档的基本结构表示如下：HTMLHEADTITLE标题文字/TITLEHEADBODY文本、图像、动画、HTML指令等/BODY/HTML注：Body…/Body分支为文档的主体，主体中的内容将显示在客户端的浏览器中HEAD与BODY为独立的两个部分，不能互相嵌套。3.1.4HTML文档的编辑工具1.HTML文档编辑器的选择用的网页编辑器，像Dreamweaver、FrontPage等等，它们提供了可视化设计网页的工具，设计者可用“所见即所得”的直观方法来创建网页。2.文档编辑的基本步骤在“设计”视图中可以进行可视化设计，在“源”的视图窗口中可以直接编写HTML代码，两个视图是等效的，可以随时切换，相互补充。3.2HTML文本编辑3.2.1HTML文本的格式化1．字符的格式化1）设置字体、字号、颜色在HTML语言中，可以使用字体标签FONT…/FONT来设置文本的字符格式，为此可以将文本置于FONT和/FONT标签之间，并通过FACE、SIZE和COLOR属性来设置文本的字体、字号和颜色。2）设置字符样式和特殊字符（1）设置字符样式常用的设置字符样式的标签如下：B.../B粗体BIG.../BIG大字体I.../I斜体S.../S删除线SMALL.../SMALL小字体STRIKE.../STRIKE删除线SUP.../SUP上标SUB.../SUB下标TT.../TT固定宽度字体U.../U下划线（2）插入特殊字符使用两种方式来输入特殊符号：即使用字符实体名称或数字表示方式，前者为“&”之后跟助记符，后者为“&”之后加#再跟十进制代码，前者的方法更为可取，因为它与平台几乎无关。2．段落的格式化段落是文档的基本信息单位。1）设置分段标签P分段标签定义了一个段落2）设置换行标签BRBR标签强行规定了当前行的中断，使后续内容在下一行显示。3）设置标题标签Hn标题标签用于设置文档中的标题和副标题，其中n的取值是1到6；4）设置水平线标签HRHR标签在文档中添加一条水平线，用来分开文档的两个部分。5）设置段落的对齐方式若要将文档中的多个段落设置成相同的对齐方式，可将这些段落置于DIV和/DIV标签之间组成一个节，并使用ALIGN属性来设置该节的对齐方式。6）示例3.2.2设置列表文本1．创建有序列表有序列表：是在各列表项前面显示数字或字母的缩排列表，可以使用有序列表标签OL和列表项标签LI来创建，语法格式如下：OLLI列表项1LI列表项2……LI列表项n/OLOL标签有两个常用属性：START和TYPE。LI标签有两个常用属性：TYPE和VALUE。2．创建无序列表无序列表：是一种在各列表项前面显示特殊项目符号的缩排列表，可以使用无序列表标签UL和列表项标签LI来创建，语法格式如下：ULLI列表项1LI列表项2……LI列表项n/ULUL标签的TYPE属性用于指定列表项前面显示的项目符号，其取值可以是：disc：使用实心圆作为项目符号（默认值）。circle：使用空心圆作为项目符号。square：使用方块作为项目符号。3．示例3.3超链接1．超级链接的概念：（1）超链接的含义“超链接”是HTML语言的精华。超链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本或一幅图像等。目标端点可以是任意类型的网络资源。（2）超链接的形式按照目标端点的不同，可以将超链接分为以下几种形式：文件超链接：这种链接的目标端点是的一个文件，当然包括各种文件，如页面文件，它可以位于当前网页所在的服务器上，此时可称为“站点内页面的链接”；也可以位于其他服务器，此时可称为“与站点外页面的链接”。锚点超链接：这种链接的目标端点是网页中的一个位置，通过这种链接可以从当前网页跳转到本页面或其他页面中的指定位置。E-mail链接：通过这种链接可以启动电子邮件客户端程序（如Outlook或FoxMail等），并允许访问者向指定的地址发送邮件。图像超链接：这种链接是在图像上建立若干个区域称为“链接区”，通过它可以跳转其他目标端点去。（3）路径路径是指从站点根文件夹或当前文件夹起到目标文件所经过的路线，可以使用路径来指定超链接中目标端点的位置。路径有以下几种类型：•绝对路径：也称为绝对URL，它给出目标文件的完整URL地址，包括传输协议在内。如果要链接的文件位于外部服务器上，则必须使用绝对路径。•相对路径：也称为相对URL，是指以当前文档所在位置为起点到目标文档所经过的路径。若要将当前文档与处在同一文件夹中的另一个文档链接，或者将同一站点中不同文件夹下的文档相互链接，都可以使用相对路径，此时可以省去当前文档与目标文档完整URL中的相同部分，只留下不同部分。•根相对路径：是指从站点根目录到被链接文件的路径。使用这种路径是指定站点内文档链接的最好方式。2．常见链接的创建：（1）创建文件链接在HTML语言中，可以使用A标记来创建超链接，基本语法格式如下：AHREF=字符串TARGET=字符串TITLE=字符串文本/A上述语法格式包含A标记的以下基本属性：•HREF：该属性是必选项，用于指定目标端点的URL地址，具体地，如果是与站点以外页面的等链接的情况，就为URL；如果是与站点内页面之间的链接，则为文件名。•TARGET：该属性是可选项，用于指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开。如果省略该属性，则目标文档将取代包含该超链接的文档。TARGET属性的取值既可以是窗口或框架的名称，也可以用“_blank”指定将链接的目标文件加载到未命名的新浏览器窗口中；用“_parent”指定将链接的目标文件加载到包含链接的父框架页或窗口中，如果包含链接的框架不是嵌套的，则链接的目标文件加载到整个浏览器窗口中；用“_self”指定将链接的目标文件加载到链接所在的同一框架或窗口中；用“_top”指定将链接的目标文件加载到整个浏览器窗口中，并由此删除所有框架。•TITLE：该属性也是可选项，用于指定指向超链接时所显示的标题文字。（2）创建锚点链接创建锚点链接时，要在页面的某处设置一个位置标记（即所谓锚点），并给该位置指定一个名称，以便在同一页面或其他页面中引用。通过创建锚点链接，可以使超链接指向当前页面或其他页面中的指定位置。若要创建锚点链接，首先在页面中为需要跳转的位置命名，即在该位置上放置一个A标记并通过NAME属性为该位置指定一个名称，但不要在A和/A标记之间放置任何文字。例如，可以使用A标记在test.htm页面顶部创建一个锚点：PANAME=top/A/P创建锚点后，可以使用A标记来创建指向该锚点的超链接。例如，要在同一个页面中跳转到名为“top”的锚点处，可以使用以下HTML代码：PAHREF=#top返回顶部/A/P若要在其他页面中跳转到该锚点，则使用以下HTML代码：PAHREF=test.htm#top跳转到test.htm页的顶部/A/P作业操作题在网站中创建多张.htm网页，要求在网页中实现以下技术：1.使用各种不同字体、颜色的文本；2.使用两种列表；3.超链接（文本超链接、锚点超链接、电子邮件超链接等）；4.结合移动字符串进行超链接。