HTMLASP网页制作代码编写.docx
- 文档编号:9217506
- 上传时间:2023-05-17
- 格式:DOCX
- 页数:95
- 大小:56.10KB
HTMLASP网页制作代码编写.docx
《HTMLASP网页制作代码编写.docx》由会员分享,可在线阅读,更多相关《HTMLASP网页制作代码编写.docx(95页珍藏版)》请在冰点文库上搜索。
HTMLASP网页制作代码编写
1HTMl概述
超文本标记语言与层叠样式表
本章要点:
本章首先简要介绍HTML和文本编辑的基本知识,接着深入介绍图片、超链接与多媒体,并讲述如何利用这些知识建立框架网页。
本章难点:
建立框架网页。
6.1HTML简介
6.1.1HTMl概述
HTML是英文HyperTextMarkupLanguage的缩写,即超文本标记语言。
HTML由万维网联盟(W3C,WorldWideWebConsortium)制订和更新。
1980年,人们开发了一种创建文档的标记语言,这种语言创建的文档在使用不同硬件和操作系统的计算机上的显示是一致的。
这种语言称为标准一般化标记语言(SGML,StandardandGeneralizedMarkupLanguage)或SGML。
HTML是使用SGML定义的,它提供了一种将文本、图像、声音、动画结合在一个称为网页的文档中的方法。
这些文档可以使用Web浏览器显示。
它还使用超链接以访问其他的资源。
1.HTML基于两个概念
HTML基于两个基本概念,即超链接文本和标记语言。
。
超链接文本:
提供了一种将同一文档的不同部分或不同文档之间的信息联系起来的机制。
在HTML文档中设置了超链接后,访问者单击该超链接时,就可以打开相关的网页、文档或应用程序。
。
标记语言:
HTML文档是一种标记语言,它由指定要在浏览器窗口上显示的内容附加于这些内容的标记所组成。
标记指的是HTML文档中的一些特殊的符号。
这些符号指明如何显示文档中的内容。
2.HTML中标记的组成
HTML中的标记可以分为标记符号和HTML元素两部分。
。
标记符号:
在HTML中,标记符号用一对尖括号“<>”或带斜杠的一对尖括号“>”表示,前者被称为开始符号,后者称为结束符号。
。
元素:
元素是HTML文件中的一种基本结构单位。
处在标记符号之内的所有内容都可以称为一个元素。
如标记
其中的pClass=RedAlign=Center即是一个元素。
也可以把上述标记中的p称为元素,而把Class和Align称为该元素的属性。
HTML目前已定义了几十种元素,每个元素就是一个已经封装好的代码块,它可以通过浏览器完成某些特定的功能。
随着Internet的发展,新的元素还在不断的被定义。
3.编辑、保存和访问HTML文件
HTML文档的文件格式为ASCII码,也就是说HTML文档是一个纯文本格式文件。
因此,任何一个可以编辑纯文本文件的编辑器都可以用于编辑HTML文档。
最常用的纯文本编辑器就是Windows记事本。
当然我们还可以使用一些功能更为强大的编辑器,如支持拖放复制的EditPlus2.1等。
下面我们以一个实例来说明编辑、保存和访问HTML文档的过程。
(1)编辑HTML文档
打开Windows记事本,输入以下的HTML源代码。
cyzdo(http:
//localhost/Test/06/Asp06_01.asp)
这是我的第一个HTML文档
(2)保存HTML文档
当我们在Windows记事本中编辑好一个文档,要将它以扩展名“.htm”或“.html”保存为页面文件。
(3)访问HTML文档
保存完毕后就可以用浏览器访问它了。
首先,打开“Windows资源管理器”,然后双击网页文件打开即可。
6.1.2HTML文档的基本语法
6.1.2HTML文档的基本语法
HTML文档的基本语法非常简单,它只有一种语法结构:
<元素属性=属性值>
在元素和属性之间输入一个空格。
如标记:
表示将文本“HTML文档的基本语法”显示为一个段落,并且该段落居中对齐。
一个元素可以不设置任何属性,也可以设置多个属性。
上述标记不设置对齐方式属性时的语句如下:
HTML文档的基本语法
若要设置多个属性,所有语句可以并列在一个标签中,方法是在每个属性语句间插入一个空格。
基本语法结构如下:
<元素属性1=属性值1属性2=属性值2属性3=属性值3>
例如:
HTML标记不区分大小写,但有时为了增加代码的可读性,我们仍然要养成合理使用大小写的习惯。
另外,在编写HTML文档时,需要注意将代码按照不同格式缩进,其目的也同样是为了增加代码的可读性。
在HTML文档的编写中,还必须注意以下的一些规则:
(1)HTML标记可以嵌套使用,但不能互相交叉,如在上例中,
同样,
和标记也嵌套在和之间。(2)大多数HTML标记都是成对地使用开始和结束标记,有的可以不使用结束标记,如
、
此外还有一些标记禁止使用结束标记,如插入图片标记、插入段内换行标记
和插入水平线标记
等。
6.1.3文档的基本结构
6.1.3文档的基本结构
从上面的例子可以看到,一个HTML文档是以标记开头,以标记结尾的。
标记用于声明以下的文档是一个HTML文档,以使浏览器辨认。
一个HTML文档可以分为两部分:
和之间的文档头以及和之间的文档主体。1.文档头
HTML文档包含一对标记
和,这对标记用来标志HTML文档头。许多浏览器不需要这对标记,但是考虑到文档的可读性和结构化,建议读者使用。
在
和之间可以插入许多其他标记,在这些标记中,重要的有以下几个:(1)文件标题元素Title
标记
(2)样式定义元素Style
Style元素用于定义网页中使用的样式表(CSS),例如:
样式定义语句块
(3)样式表文件链接元素Link
Link元素用于连接外联样式表,常用的语法格式为:
其中,URL是样式表文件的完整地址(完整路径名/文件名.扩展名)
(4)脚本语言元素Script
Script用于在网页中插入脚本语言,基本语法格式为:
脚本语言代码
(5)页面定义元素Meta
Meta元素通常用来为搜索引擎定义页面描述以及搜索关键字,或者定义缓存\页面刷新等内容,它的主要属性有Name,Content,Http-equiv等。
主要用法如下:
。
定义搜索类型:
。
定义页面描述:
。
定义页面的生成器:
。
定义页面字符集:
。
控制页面的缓存:
2.文档主体
HTMl文档的主体包含网页中显示的全部信息,以及连接到其他相关信息的超链接等内容。
文档主体内容包含在标记
和之间。它描述该Html文档的布局和结构,在其中使用了各种各样的标记来表示文本标题、嵌入的图像、文本段、列表等等丰富多彩的内容。
标记
和之间的元素众多,属性繁复,是本章的重点,将在此后各节中详述。6.1.4HTML的基本单位
6.1.4HTML的基本单位
1.长度单位
HTML中常用的长度单位有四种:
绝对长度单位磅(pt),英寸(in)和相对长度单位像素(px),百分比(%)。
在HTML文档中使用绝对长度单位磅或英寸时,同一个文档在不同大小的显示器上有不同的显示。
例如在17英寸显示器上每行显示的字符数将多于15英寸的显示器。
采用相对长度单位像素时,在不同分辨率的显示器上也会有不同的显示方式。
在一般情况下,可以800*600的分辨率作为标准进行页面设计。
当采用相对长度单位百分比时,则页面在不同大小和不同分辨率的显示器上的显示是完全相同的。
2.颜色单位
常用的表示颜色的方法有三种:
。
使用保留字,如:
Red、Cyan、Black等;
。
使用RGB函数,如:
RGB(255,255,255);RGB(0,0,255)等;
。
使用16进制常量,如:
#ffffff、#0000ff等
6.1.5URL中的路径
URL(UnitedResourceLocator)即统一资源定位器,是定位网络系统中一个特定文件的方法。
在HTML中,URL指定某个文件在网络中的地址,包括该文件的存放路径以及完整的文件名。
在HTML中,URL的使用有两种方法,即绝对根目录和相对根对目录。
(1)绝对根目录
如:
(2)相对根目录
站点文件夹是一个根目录(称为站点根目录),在站点根目录下的任何两个文件之间的链接都可以使用相对根目录。
例如,在站点根目录“HTML/CSS”下有两个子目录,分别是“File”和“Images”,如果要在“File”子目录下某一HTML文件设置一个指向“Images”子目录下某一图像文件log01.gif的超链接,则可以使用以下的URL:
其中,每一个“../”表示回到上一级目录。
值得指出的是:
当你设计的主页在Internet上发布时,网络服务商(ISP)所提供的服务器空间未必与你在设计时的磁盘分区相同。
显然,使用相对路径就不会出现链接文件无法定位的问题。
6.2.1段落与文本结构
6.2文本编辑
6.2.1段落与文本结构
1.文本标题
这对标记之间的文本将以粗体和大字体显示。
HTML中有6级标题标记。
分别用
、、。
。
。
。
表示。
2.段落元素
是段落(Paragraph)标记,
用于标志HTML文档的段落。
在HTML中,段落与段落之间相当于插入了硬回车。
3.标题元素和段落元素的常用属性
标题元素和段落元素常用属性及其作用,如表1.1所示。
表1.1标题元素和段落元素的常用属性
------------------------------------------------------
属性名作用可以接受的属性值
------------------------------------------------------
Align设置段落之间的对齐方式Left(默认)|Center|Right
Style设置段落文本的内定样式样式表定义
------------------------------------------------------
以下代码对文本段落定义了一个文本两端对齐、字体为隶书的样式:
justify;font-family: 隶书> 关于样式表定义的内容,将在6.8节介绍。 例6-1段落与文本标题: cyzdo(http: //localhost/Test/06/Asp06_01_01.asp)
这是标题H1
这是标题H2
这是标题H4
这是第一个段落。
这是第二个段落。
中间是两个段落之间的距离
在浏览器上显示的结果中,其中第一行是H1标题,第二行是H2标题,第三行是H4标题。
第四行也是H1标题,但将它的对齐属性设置成了居中对齐。
4.段内换行元素BR和不换行元素NOBR
段内换行(Break)元素BR强制性地在段落内进行换行,它不使用结束标记。
而是在出现
标记处进行换行,其作用相当于插入一个软回车(Shift+Enter)。
段内换行标记
和段落标记
的区别举例如下:
例6-2:
标记和
标记的区别
cyzdo(http:
//localhost/Test/06/Asp06_02.asp)
这是第一个段落。
这是第二个段落。
中间是两个段落之间的距离
这是第二个段落中的强制换行,可以看到它们之间的差别了吧。
不换行标记
当文本字符长度超过浏览器宽度时,浏览器窗口将出现水平滚动条。
5.BODY元素的属性与页面风格设置
标记定义页面主体的风格,如页面的背景色、背景图案、前景色、页面在浏览器窗口中的布局等内容,重要属性的设置如表1.2所示。表1.2Body元素的常用属性
------------------------------------------------------
属性名作用可以接受的属性值备注
------------------------------------------------------
Bgcolor设置页面的背景颜色颜色值
Background设置页面的背景图案图片文件的URL建议相对路径
Text设置页面的文本颜色颜色值
Link设置可链接文字的颜色颜色值
Alink设置活动链接文字的颜色颜色值
Vlink设置已访问链接文字的颜色颜色值
Leftmargin设置页面左边距长度值默认单位:
像素
Topmargin设置页面上边距长度值默认单位:
像素
------------------------------------------------------
例6-3Body元素的颜色属性
cyzdo(http:
//localhost/Test/06/Asp06_03.asp)
文本的颜色值为#03081c,背景的颜色值为efeffc
index.htm内容如下:
第二行是一个已访问过的超连接,第三和第四行是可用的超链接。
例6-4BODY元素的Leftmargin和Topmargin属性
cyzdo(http:
//localhost/Test/06/Asp06_04.asp)
凉州词
王翰
葡萄美酒夜光杯,
欲饮琵琶马上催。
醉卧沙场君莫笑,
古来征战几人回。
6.预格式化元素PRE
有时,我们可以在记事本中将文本按某种格式预先排版,然后使用预格式化元素PRE保持原有的格式。
例6-5在记事本中输入以下代码,在
和之间的四行诗的排版格式是在记事本中完成的。
cyzdo(http:
//localhost/Test/06/Asp06_05.asp)
凉州词
王翰
葡萄美酒夜光杯,
欲饮琵琶马上催。
醉卧沙场君莫笑,
古来征战几人回。