HTML语言与文本编辑.ppt
《HTML语言与文本编辑.ppt》由会员分享,可在线阅读,更多相关《HTML语言与文本编辑.ppt(47页珍藏版)》请在三一办公上搜索。
1、第3章 HTML语言与文本编辑,第3章 HTML语言与文本编辑,从本章开始将用3章的篇幅来讲解浏览器端的网页开发技术。尽管ASP.NET是服务器端技术,但是作为一个完整的网站常常离不开前端的浏览器,只有将网页开发技术与后台技术有机地结合才能构建出功能强大的网站。另外,ASP.NET 2.0也提供了网页开发的环境,在这个环境中我们完全能够开发出生动、美观的网页来。本章将首先讲解开发网页的两个最基础的知识:HTML语言和文本编辑。具体内容 包括:HTML语言HTML文本编辑超链接创建移动的文本HTML与XML比较综合示例,第3章 HTML语言与文本编辑,3.1 HTML语言 3.2 HTML文本编
2、辑 3.3 超 链 接 3.4 创建移动的文本 3.5 HTML与XML的比较 3.6 综 合 示 例 3.7 小 结 3.8 习 题,3.1 HTML语言,3.1.1 HTML语言概述 3.1.2 HTML标记的基础 3.1.3 HTML文档的基本结构 3.1.4 HTML文档的编辑工具,3.1.1 HTML语言概述,HTML是Hyper Text Markup Language(超文本标记语言)的缩写。它是WWW(World Wide Web)中使用的超文本标记语言。它是Tim Berners-Lee 在 CERN(在日内瓦的欧洲粒子物理实验室)发明的。它最早源于SGML(Standard
3、 Generalized Markup Language,标准通用标记语言)语言,它是在SGML定义下的一个描述性语言,或者可以说HTML是SGML的一个应用程序。HTML语言的重要性在于,它是所有浏览器都能识别的通用语言,是浏览器生成网页的基础。利用它可以完成以下三方面的工作:定义在浏览器上的显示格式;建立超链接;集成其他多媒体软件。HTML语言的特点是:第一,HTML不是程序语言,它只是一种标记语言,一种文本语言。它不同于我们平时所看到的VB、C+这类编程语言,实际上它只是在一些对象(如文本、图片、表格等)中加入各种各样的标记,从而使这些对象以这些标记所定义的形式显示出来。第二,任何文本编
4、辑器都可以编辑它,只要能将文件另存成ASCII纯文本格式即可。一个HTML文件是一页文字信息,就像一封电子邮件或一个Word字处理文件,而且实际上完全可以使用Word字处理软件来编写一个HTML网页。也可以通过其他字处理软件编写文本文件,当然使用专业的网页编辑软件更为方便一些。,第三,需要使用Web浏览器。当你想把网页制作成某种模样时,需要使用一种编码通过浏览器进行解释,这种编码就被称为HTML代码。所有网页,都是通过浏览器对HTML的解释而形成的,浏览器就相当于HTML语言的翻译程序,负责解释HTML文件各种符号的含义。一个HTML文件中包含了所有将显示在网页上的文字信息,其中也包括对浏览器
5、的一些指示,如哪些文字应放置在何处,使用哪种显示模式等。如果还有一些图片、动画、声音或是任何其他形式的资源,HTML文件也会告诉浏览器到哪里去查找这些资源,以及这些资源将放置在网页的什么位置。第四,HTML语言独立于各种平台。自1990年以来HTML就一直被用作World Wide Web(WWW)的信息表示语言,用于描述网页的格式设计和它与WWW上其他网页的连接信息。HTML语言目前已经成为各种类型浏览器的通用标准,它能独立于各种操作系统平台(如UNIX,Windows等)。其内容从功能上大体可分为:文本结构设置、列表建立、文本属性制定、超链接、图片和多媒体插入、对象、表格以及窗体的操作等。
6、,3.1.2 HTML标记的基础,HTML语法格式非常简单,基本上只要明白了各种标记的用法便算学懂了HTML,也就是说它只是在一些对象(如文本、图片、表格等)中加入各种各样的标记,从而使这些对象以这些标记所定义的形式显示出来。这里我们先了解基本的HTML语法等内容。1基本的HTML语法(1)所有的标记都必须用尖括号(即小于号“”)括起来。它以开始标记及结束标记将对象围住。(2)大部分标记是成对出现的,包括开始标记和结束标记。开始标记和相应的结束标记定义了标记所影响的范围。结束标记与开始标记名称相同,但结束标记必须用一个斜线符号开头。(3)所有被标记包围的对象,如文本、图像、表格等都按照标记定义
7、的格式显示。例如:欢迎参观本网页!中间的字符串按照号字体的大小显示。(4)有少数标记允许只有开始标记没有结束标记。例如:断行用的标记:分段用的标记:(5)标记不区分大小写,但默认情况下,ASP.NET 2.0中系统提供的HTML标记都用小写字母表示。,3.1.2 HTML标记的基础,2标记的属性大多数标记都拥有一些属性,大部分属性都有默认值,利用这些属性可以对标记的作用进行更多的控制。设置或改变属性时,将属性名=值放在标记名的同一个尖括号中,而且所有属性都放置在开始标记的尖括号内。例如:本段落将放置在右端 其中p是段落标记,align代表“对齐方式”,是属性名。right代表“右边”,是属性的
8、值。这个标记的含义是将字符串放在浏览器的右端。其中hr是水平线标记,size是水平线的高度,width是水平线的宽度,align为对齐属性。此行代码表示增加一条横线,水平线的高度为6,宽度为160,显示于浏览器的中间。,3.1.2 HTML标记的基础,3注释语句与其他程序设计语言一样,在HTML文本的适当位置上增加注释语句能提高文本的可读性,编译器将不解读注释部分,即注释不在浏览器窗口中显示出来。注释语句的格式是:这里不妨将它看作一种特殊的标志。例如:,3.1.3 HTML文档的基本结构,一个基本的HTML文档通常包含以下三对顶级标记。1.HTML标记:.HTML标记是全部文档内容的容器,是开
9、始标记,是结束标记,它们分别是网页的第一个标记和最后一个标记,其他所有HTML代码都位于这两个标记之间。HTML标记告诉浏览器或其他程序:这是一个网页文档,应该按照HTML语言规则对标记进行解释。.标记是可选的,但最好不要省略这两个标记,以保持Web文档结构的完整性。2.首部标记:.首部标记用于提供与网页有关的各种信息。在首部标记中,可以使用和标记来指定网页的标题,使用和标记来定义CSS样式表,使用和标记来插入脚本,等等。,3.1.3 HTML文档的基本结构,3.正文标记:.正文标记包含了文档的内容,文字、图像、动画、超链接以及其他HTML对象均位于该标记中。正文标记有下列属性。BACKGRO
10、UD:指定文档背景图像的URL地址,图像平铺在页背景上。BGCOLOR:指定文档的背景颜色。TEXT:指定文档中文本的颜色。LINK:指定文档中链接的颜色。关于链接的介绍请参阅后面章节。VLINK:指定文档中已被访问过的链接的颜色。ALINK:指定文档中正被选中的链接的颜色。ONLOAD:指定文档首次加载时调用的事件处理程序。ONUNLOAD:用于指定文档卸载时调用的事件处理程序。在上述属性中,各个颜色属性的值有两种表示方法:使用颜色名称来指定,例如红色、绿色和蓝色分别用red、green和blue表示;使用十六进制格式数值#RRGGBB来表示,RR、GG和BB分别表示颜色中的红、绿、蓝三基色
11、的两位十六进制数据。,3.1.3 HTML文档的基本结构,4.HTML文档的基本结构学习了文档的几个标记后,现在需要按照一定的规则组织它们才能使用。这个规则就是HTML文档的基本结构。学会它可从整体上把握HTML文档的使用。HTML文档的基本结构可以表示如下:标题文字文本、图像、动画、HTML指令等HTML文档是一种树形(层次)结构。标记是文档的根,其他的HTML标记全部包括在以内。下面有两大分支:和。其中分支为文档的主体,主体中的内容将显示在客户端的浏览器中。内又包括若干分支:如用H1、H2等表示字体字号,P、DIV、FORM等表示块元素,等等。而在段中除 包括的内容将作为窗口的标题显示在最
12、上方外,其余部分主要是关于文档的说明以及某些共用的脚本程序。与为独立的两个部分,不能互相嵌套。,3.1.4 HTML文档的编辑工具,1.HTML文档编辑器的选择虽然任何一种文本编辑器都可以作为HTML编辑器。如Windows的记事本等。但为了减少网页设计的工作量,开发商设计了许多专用的网页编辑器,像Dreamweaver、FrontPage等,提供了可视化设计网页的工具,设计者可用“所见即所得”的直观方法来创建网页,系统再自动将其转化成HTML语句,然后传送到浏览器,从而简化了设计的过程。本书的例题均在ASP.NET 2.0的【设计】或【源】视图中进行。,3.1.4 HTML文档的编辑工具,2
13、.文档编辑的基本步骤首先创建网站,然后右击网站名,在弹出的快捷菜单中选择【添加新项】,在弹出的对话框中选择【HTML页】,在左下方给网页更名,然后单击【添加】按钮。新打开的网页左下角将出现【设计】和【源】两个标签,在设计视图中可以进行可视化设计,在【源】视图中可以直接编写HTML代码。两个视图是等效的,可以随时切换,相互补充。图3.1的中间部分是刚建立HTML网页时【源】视图窗口的情况;左边工具箱是在【设计】视图中进行可视化设计时可以使用的控件;右边是控件的属性窗口。有时,一些网页中需要多次使用的标记,在工具箱中找不到相应的图标时,可以先在【源】视图窗口中,写出该标记的代码,然后将这些代码直接
14、拖到工具箱中,以后就可以直接利用工具箱进行可视化操作了。,3.1.4 HTML文档的编辑工具,图3.1 刚打开的HTML网页的代码界面,3.2 HTML文本编辑,3.2.1 HTML文本的格式化 3.2.2 设置列表文本,3.2 HTML文本编辑,现在着重介绍HTML的文本对象的编辑,掌握了这部分内容就不难学会其他对象的编辑。在这里虽然也要用到可视化方法,但是建议用输入HTML代码的方法试做一下。为了达到练习和巩固HTML语言的目的,文中有些地方有意不给出其可视化方法,待熟练后,再用可视化方法练习一遍。,3.2.1 HTML文本的格式化,1字符的格式化(1)设置字体、字号和颜色在HTML语言中
15、,可以使用字体标记来设置文本的字符格式,为此可以将文本置于和标记之间,并通过FAC、SIZE和COLOR属性来设置文本的字体、字号和颜色。FACE属性指定一种字体,或者给出一个字体列表,各种字体名称用逗号来分隔,可以按照作者的喜好程度来排列。例如:龙卷风SIZE属性指定字体的大小(即字号),其取值可以从1到7,默认值为3。SIZE属性值越大,显示的字号就越大。相对于基本字体(BASEFONT)的大小,也可使用+或-来指定相对字号。如:龙卷风静态网页设计COLOR属性指定文本的颜色,可以用颜色名称表示,也可以用十六进制RGB格式表示。例如:龙卷风静态网页设计,3.2.1 HTML文本的格式化,(
16、2)设置字符样式和特殊字符设置字符样式通过设置字符样式可以为某些字符设置特殊格式,例如粗体、斜体、下划线、删除线、上标、下标等。常用的设置字符样式的标记如下:.粗体.大字体.斜体.删除线.小字体.删除线.上标.下标.固定宽度字体.下划线插入特殊字符设计网页时,经常要插入一些空格。这本来是一个十分简单的问题,但在HTML网页中却变得比较麻烦。在输入文本时按了多次空格键,但在浏览器中打开网页时却只能看到一个空格。另外,在网页中有时可能要插入一些特殊符号,如版权符号和注册符号等。当遇到这种情况时,可以使用两种方式来输入特殊符号:使用字符实体名称或数字表示方式。前者为“”,等等。表3.1列出了一小部分
17、特殊符号的实体名称和数字表示,其他可参考帮助文档。,空格是 HTML 中最普通的字符实体。通常情况下,HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格,那么 HTML 会去掉其中的9个。如果使用 使用实体名称而不是实体编号的好处在于,名称相对来说更容易记忆。而这么做的坏处是,并不是所有的浏览器都支持最新的实体名称,然而几乎所有的浏览器对实体编号的支持都很好。注意:实体对大小写敏感。,3.2.1 HTML文本的格式化,3.2.1 HTML文本的格式化,2段落的格式化段落是文档的基本信息单位,一个字符也可能是一个段。将文档划分为段落,可以通过使用分段标记、换行标记、标题标记或插入
18、水平线的手段来实现。(1)设置分段标记P分段标记定义了一个段落,使用该标记时要跳过一个空行,使后续内容隔一行显示。若同时使用和,则将段落包围起来,表示一个分段的块。若省略结束标记,可以将开始标记放在段尾。分段标记的常用属性是ALIGN,用于设置段落的水平对齐方式。(2)设置换行标记BR标记强行规定了当前行的中断,使后续内容在下一行显示。(3)设置标题标记Hn标题标记用于设置文档中的标题和副标题,其中n的取值是1到6,如:.标记表示字号最大的标题,标记表示字号最小的标题。(4)设置水平线标记HRHR标记在文档中添加一条水平线,用来分开文档的两个部分。该标记有以下属性:ALIGN:指定线的对齐方式
19、,取值为left(左对齐)、center(居中对齐)或right(右对齐),默认值为center。COLOR:指定线的颜色。NOSHADE:若指定该项,则显示一条无阴影的实线。SIZE:指定线的宽度,以像素为单位。WIDTH:指定线的长度,单位可以是像素或百分比(占页面宽度的百分比)。,3.2.1 HTML文本的格式化,(5)设置段落的对齐方式在网页中有四种段落对齐方式:左对齐、右对齐、居中对齐和两端对齐。在HTML语言中,可以使用ALIGN属性来设置段落的对齐方式。ALIGN属性可以应用于多种标记,例如分段标记.、标题标记.以及水平线标记等。ALIGN属性的取值可以是:left(左对齐)、c
20、enter(居中对齐)、right(右对齐)以及justify(两端对齐)。两端对齐是指将一行中的文本在排满的情况下向左右两页边对齐,以避免在左右页边出现锯齿状。对于不同的标记,ALIGN属性的默认值是有所不同的。对于分段标记和各个标题标记,ALIGN属性的默认值为left;对于水平线标记,ALIGN属性的默认值为center。若要将文档中的多个段落设置成相同的对齐方式,可将这些段落置于和标记之间组成一个节,并使用ALIGN属性来设置该节的对齐方式。如果要将部分文档内容设置为居中对齐,也可以将这部分内容置于和标记 之间。,3.2.1 HTML文本的格式化,(6)示例 HTML文本的基本格式化练
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 语言 文本编辑
链接地址:https://www.31ppt.com/p-6507735.html