HTML的一般概念和基本语法辑录
发表日期:2007-1-25 16:24:37 | 天气:
| 评级:
| 浏览人次:
HOMEPAGE(主页)是可以通过WWW查询的Internet上WWW站点首页。从某种角度来说可以说是 电子广告板、信息板,它包含了大量的信息。由于Internet以异乎寻常的速度发展,WWW在 信息交换查询中的地位得到了很大提高,这就使HOMEPAGE的编写变得十分重要。
HOMEPAGE是以HTML格式写成的,HTML不是WYSIWYG(所见即所得)的,不过HTML非常易学易用, 它以标签(TAG)标示及排列各对象。而标签本身则以"<"和">"号标识,标签内的内容称为
(ELEMENT),元素代表了标签的意义。一般格式为:
元素是与大小写无关的。它很类似与工业标准的SGML(标准广义标置语言),它的结构可以
归为SGML文档类型定义(DTD)。目前的版本是HTML2.0或3.0。支持HTML3.0的Web浏览器有
Netscape Navigator,Mosaic2.5b等。下面就简单介绍一下用HTML写HOME PAGE的方法。
2.1名词解释
Web presentation Web表述,Web表述是包含许多连接在一起的用于表达某一目的的网页的 总称。它是一个体系结构。
Web pages 网页就是可以被浏览器访问的单个HTML文件。
Home Page 主页是Web站点的首页。即被访问站点的第一个网页。
WWW-- World Wide Web 全球资讯网
SGML -- Standard Generalized Marked Language 标准广义标记语言。
DTD-- Document Type Definition 文件类型定义。DTD和SGML的关系,就象C++和计算机语
言的关系。
HTML -- HyperText Markup Language 超文本标记语言。
HTML is a SGML DTD.
超文本标记语言是一种标准标记文件的定义。而在全球资讯网中所阅读的文章,正是依照种这种 标准。
2.2 网页的组织与安排
在我们要在网上发布信息、建立网页之前首先注意以下几个原则和建议可能会有助与今后网 页的制作。
2.2.1首先要明确你想在网页上作些什么
在写HomePage之前最好要明确写HomePage的目的是什么,是个人信息、公司介绍、在线文档、 购物目录还是别的什么。有一个明确的目的对于Web presentation的组织很有好处。
当然这 并不是说没有一个明确的目的就不能写主页。也可以在制作中建立目的。只是那样工作量会 比较大。会有一些重复的工作。
2.2.2设定你的目标
有了一个明确的目的后还需要确定一下Web的目标,比如写公司的HomePage有人关心招聘方
|面的信息有人关心公司的产品还会有人想知道公司的技术发展状况。作为Web的制作者就要
先确定写Web要满足哪部分人的需求。确立目标可以有助于在重多的信息中保证主要目标的
实现。使信息不会被淹没在过多的额外信息中。
2.2.3将要表述的内容分成各个主题
在确立了目标之后就需要把要表述的内容分成各个主题来别论述。尽量使信息组织的条理 化。这就象写书要先写目录。一个好的组织结构会大大方便读者的浏览。应该注意的是每个 主题不要太笼统、范围太大,这样会使浏览者不知看哪个主题好。要尽量保证主题与内容的一致性。
2.2.4几种组织和浏览结构
建立Web 出版有点象出书,但它的结构比书要复杂,一个Web出版常用的结构有线性结构、 层次结构、线性交换结构以及线性和层次相结合的结构。应该尽量避免形成复杂的网状结 构。在信息不断增多后日益复杂的网状结构会使维护工作非常困难。
2.2.5几点参考意见
短小紧凑
短小紧凑可以快速下载,不要让用户等待的时间过长。一些小图标会比较有用。
信息要经常更新 前面讲过,Web是经常更新的。在主页上注明更新日期及URL对于经常访问的用户非常有用。
主页上要有文字显示 并不是所有的浏览器都有图形浏览功能,有时为了节省时间用户会关闭浏览器中下载图形的 功能。所以在主页上最好有文字显示。
2.3初步尝试
现在,我们开始制作第一个HTML文件。
超文本标记语言(HTML)其实只是很平常,很普通的文本文件。
你可以用你所熟悉的文字编辑 器来编辑它,例如EDIT、VI、WS、Word等,(但一定要以纯文本方式保存,浏览器只识别纯 文本格式的文件)不一定要用其它的新颖编辑器。只要通过一些简单的标注,就可以让文章 生动、活泼起来,这就是HTML的特色。下面是个简单的例子,其文件名为test.html。
这里放个标题
欢迎进入全球资讯网 !
这是第一段落的结束。
这里是H2字体!!
这里是H3字体!!
这里是H4字体!!
另一段落的结束在这儿
这里是H5字体!!
这里是H6字体!!
在Netscape Navigate 中调用test.html结果如如图一所示:
图一
是标记HTML文档的开始,在文件结束处要有对应的符号。是标记文件 体的开始,对应结束符是。
■ HTML 一般概念:
这节将简单介绍 HTML。
全称:HyperText Mark-up Language
译称:超文本标记语言。
简意:一种为普通文件中某些字句加上标识的语言,其目的在于运用标记(tag)合文件 达到预期的效果。
HTML 是在 SGML 定义下的一个描述性的语言,或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言,如 C++ 和 Java 之类,它只是标记语言,基本上你只要明白了各种 标记的用法便算学懂了 HTML,HTML 的格式非常简单,只是由文字及标记组合而成,于 编辑部方面,任何文字编辑器都市可以,只要能将档案存为文本格式即可, 用专门的网页编辑工具当然更好。
■ 阅读须知:
这一篇【HTML彻底剖析】偏重于标记的介绍,考虑到易懂及每节的篇幅问题,我并不按 W3C 的 HTML 分类,这可令你更易选择有兴趣的标记,其中只有【文件标记】是必须的,其余可任意选择。这一篇不会提及任何网页编辑软件,只要你掌握了 HTML ,任何网页编辑工具都可以变成一把利器。
■ 标记写法:
·任何标记皆由"<"及">"所围住,如 <P>
·标记名与小于号之间不能留有空白字元。
·有些标记需要加上参数,有些不要。如 size="+2">Hello
·参数只可加于起始标记中。
·在起始标记的标记名前加上符号"/"便是终结标记,如 </font>
·标记字母大小写皆可。
■ 围堵标记与空标记:
标记按型态分为围堵标记与空标记
1、围堵标记
顾名思义,它以起始标记及终结标记将文字围住,令其达到预期要显示的效果。
例如 HTML Source : Creation of Webpage is my favourite.
显示成: Creation of Webpage is my favourite.
其中 便称为围堵标记。它以起始标记及终结标记标示文字 Creation of webpage ,令它显示成粗体,两者失其一都会发生错误显示。
2、空标记
是指标记单独出现,只有起始标记没有终结标记。
例如 HTML Source:
I love Creation of Webpage.
It''''s a wonderful place.
显示成:
I love Creation of Webpage.
It''''s a wonderful place.
其中换行标记
便属于空标记。
它的作用是将标记后的所有东西显示于下一行,可同终结标记对它是没有意义的, 但有些人为空标记加上终结标记,这是为方便阅读而已,对 HTML 没有影响
HTML基本语法辑录(一)
一、基本标记
文件格式(文件的开头与结尾)
主题(放在文件的开头)
文头区段(描述文件的信息)
内文区段(放此文件的内容)
标题
标题对齐
字加大
字变小
粗体字
斜体字
底线字
上标字
下标字
文字对中
基本字体大小
改变字体大小(?=1~7)
字体颜色(RGB色码)
指定字型(?=宋体,楷体等)
二、超链结
网址链结
设定锚点(?以容易记为原则)
链结到锚点(同一份文件)
(锚点不同文件)
显示图形
图形位置(分别为上、下、中、左、右的位置)
图形取代文字(无法显示图形时用)
图形尺寸(?以像素为单位)
连结图形边线(?以像素为单位)
图形四周留白(?以像素为单位)
三、区段划分
段落
断行
横线
横线厚度
(?以像素为单位)
横线长度
(?以像素为单位)
横线长度
(?与页宽相比较)
实横线
(无立体效果)
四、背景颜色
背景图案(图形文件格式为gif和jpg)
背景颜色(RGB色码)
背景文字颜色(RGB色码)
未链结点颜色(RGB色码)
已链结点颜色(RGB色码)
正在链结点颜色
四 链接(Link) 基本语法
- 这是一个
链接的例子。
点一下带下划线的文字!
- 跳转到下一个"链接点"
◇ 开一个新的(浏览器)窗口 (Target Window)
◇ 标题字体(Header)
... #=1, 2, 3, 4, 5, 6
今天天气真好!
今天天气真好!
今天天气真好!
今天天气真好!
今天天气真好!
今天天气真好!
今天天气真好!
今天天气真好!
今天天气真好!
今天天气真好!
今天天气真好!
今天天气真好!
--- 这些标记显示黑体字。--- 这些标记自动插入一个空行,不必用标记再加空行。
因此在一行中无法使用不同大小的字体。
◇ 字体大小
... #=1, 2, 3, 4, 5, 6, 7 or +#, -#
#=1, 2, 3, 4, 5, 6, 7
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
◇ 物理字体(Physical Style)
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
◇ 逻辑字体(Logical Style)
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天天气真好! 今天天气真好!
今天 天气 真好!
◇ 字体颜色
指定颜色 ...
- #=rrggbb 16 进制数码,或者是下列预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
White &
White
格 式 排 版 |
格 式 排 版 | ||
| Creates a new paragraph | 创 建 一 个 新 的 段 落 | ||
| Aligns a paragraph to the left, right, or center |
将 段 落 按 左、 中、 右 对 齐 | ||
| Inserts a line break | 插 入 一 个 回 车 换 行 符 | ||
|
|
Indents text from both sides | 从 两 边 缩 进 文 本 | |
|
|
Creates a definition list | 创 建 一 个 定 义 列 表 | |
| Precedes each definition term | 放 在 每 个 定 义 术 语 词 之 前 | ||
| Precedes each definition | 放 在 每 个 定 义 之 前 | ||
|
|
Creates a numbered list | 创 建 一 个 标 有 数 字 的 列 表 | |
| Precedes each list item, and adds a number |
放 在 每 个 数 字 列 表 项 之 前, 并 加 上 一 个 数 字 | ||
|
|
Creates a bulleted list | 创 建 一 个 标 有 圆 点 的 列 表 | |
| Precedes each list item, and adds the bullet |
放 在 每 个 圆 点 列 表 项 之 前, 并 加 上 一 个 圆 点 | ||
| A generic tag used to format large blocks of HTML, also used for stylesheets |
一 个 用 来 排 版 大 块HTML 段 落 的 标 签, 也 用 于 格 式 化 表 | ||
[字号: 大 中 小] [进入论坛] [发布信息] [↑回到顶部]
- 评论内容不能超过200字。
- 不得发表广告,我除外。
- 请遵守国家的法律法规。
- 互相尊重,不得谩骂。
- 我有权利删除任何评论。