破洛洛首页

破洛洛论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 11368|回复: 51

[基础] 网页设计之基础篇-HTML(更新完结)

  [复制链接]

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

发表于 2012-6-18 10:21:00 | 显示全部楼层 |阅读模式
本帖最后由 zybx520 于 2012-7-15 10:37 编辑

本贴介绍的是一些网页设计的基础知识,高手可当复习,新手可当学习!
下面我们从HTML标记语言开始讲起。
HTML(Hypertext markup language,超文本标记语言)是Web页面的描述性语言,是在标准通用化标记语言SGML(Standard Generalized markup language)的基础上建立起来的。利用其语法规则建立的文本可以运行在不同的操作系统平台和浏览器上。HTML语言是所有网页制作棱柱的核心与基础。无论是在Web上发布信息,还是在编写可供交互的程序,都离不开HTML语言的应用。
1.1 HTML文件结构
用HTML语言编写的超文本文件称为HTML文件。HTML文件可以手工编写,例如在Windows下的文本编辑器中编写,也可以使用可视化编辑软件编写,例如在Frontpage,Dreamweaver等可视化网页编辑软件中编写。
HTML通过在文本中嵌入各种标记,使普通文本具有超文本的功能。在HTML文件中,所有的标记都必须用尖括号"<"和">"括起来,例如<HTML>,<BODY>等。大部分标记都是成对出现的,包括开始标记和结束标记。开始标记和相就的结束标记定义了标记所影响的范围,所有的结束标记都是在开始标记前添加了一个斜杠"/",如<HTML>和</HTML>。但也有一些标记只要求单一标记符号,例如,换行标记<BR>。
HTML文件的基本结构如下:
<html>
<head>
....头部信息
</head>
<body>
....主体内容
</body>
</html>

<HTML>......</HTML>:HTML文件的开始和结束,其中包含<HEAD>和<BODY>标记的内容。
<HEAD>......</HEAD>:HTML文件的头部标记,用于包含文件的基本信息。
<BODY>......</BODY>:HTML文件的主体标记,在头部标记</HEAD>之后,定义了HTML文件显示的主要内容和格式。
下面我们做个简单的示例:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
  4. <title>破洛洛论坛之网页设计篇</title>
  5. </head>
  6. <body>
  7. 这是一个简单的HTML基本框架文件,祝大家在破洛洛里能学到更多的知识。
  8. </body>
  9. </html>
复制代码
这里需要注意的是:<HEAD>与<BODY>标记是两个独立的部分,不能互相嵌套。







评分

参与人数 3威望 +6 破洛币 +8 贡献 +5 收起 理由
时光、 + 3 赞一个!
℡〇nLy烟火 + 1
xiaoc + 5 + 5 + 5 很给力!

查看全部评分

回复

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-18 11:04:02 | 显示全部楼层
本帖最后由 zybx520 于 2012-6-18 17:11 编辑

1.2HTML头部标记与主体标记
一个标准的HTML文件分为头部标记和主体两大部分。这里主要介绍HTML的头部标记<HEAD>与主体标记<BODY>。其中,标题标记<TITLE>和无信息标记<META>隶属于头部标记。
1.2.1头部标记<HEAD>
头部标记<HEAD>用于提供与Web页面有关的各种信息。在头部标记中,可以使用<TITLE>…..</TITLE>标记来指定网页的标题,使用<STYLE>…..</STYLE>标记来定义CSS样式表,使用<SCRIPT>…..</SCRIPT>标记来插入脚本等。一般的说,位于头部标记中的内容都不会在网页上直接显示。
头部标记内容如下图所示:
              头标记                                                                描述                                                                                 
<BASE> 当前文档的URL全称(基底网址)
<BASEFONT> 设定基准的文字字体,字号和颜色
<TITLE> 设置网页的标题
<ISINDEX> 表明该文档是一个可用于检索的网关脚本,由服务器自动建立         
<META> 有关文档本身的元信息
<STYLE> 设置CSS样式表的内容
<LINK> 设定外部文件的链接,如链接CSS外部样式表文件
<SCRIPT> 设定网页中程序脚本的内容



下面我们做个简单示,该示例在HTML文件头部标记内,用<TITLE>标记设置网页的标题,应用<META>标记设置字符的编码格式,在<STYLE>标记中定义CSS样式,代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>HTML头部标记</title>
  5. <style type="text/css">
  6. <!--
  7. p{font-family:"宋体"; font-size:30px; color:#6699FF; text-align:center; font-weight:600}
  8. -->
  9. </style>
  10. </head>
  11. <body>
  12. <p>网页学习制作,从破洛洛开始...</p>
  13. </body>
  14. </html>
复制代码








评分

参与人数 1威望 +5 破洛币 +5 贡献 +5 收起 理由
xiaoc + 5 + 5 + 5 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-18 11:59:29 | 显示全部楼层
本帖最后由 zybx520 于 2012-6-19 10:08 编辑

标题标记<TITLE>

HTML文件中,标题文字位于<TITLE></TITLE>标记之间,用于说明文件的用途。浏览网页时,标题将显示在浏览器窗口的标题栏中。

在实际应用中,浏览者在保存网页时,网页标题将成为保存后网页的默认文件名。影星者将网页添加到收藏夹时,网页标题将成为收藏夹中网页的名称。
语法:<TITLE>….</TITLE>
下面示例在<TITLE></TITLE>标记之间填写网页标题文字,执行程序后在浏览器窗口的标题栏中将显示标题内容,运行结果如图:

网页标题显示

网页标题显示

程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>破洛洛论坛欢迎您!</title>
  5. </head>
  6. <body>
  7. <h3 align="center">HTML基础教程</h3>
  8. </body>
  9. </html>
复制代码
注意:标题一定要反映页面的内容,让人容易读懂。标题文字不要过长,浏览器标题栏中如果没有足够的空间,多余的字符将不会显示出来,其上限通常是50-60个字符。





评分

参与人数 1威望 +5 破洛币 +5 贡献 +5 收起 理由
xiaoc + 5 + 5 + 5 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-18 11:59:49 | 显示全部楼层
本帖最后由 zybx520 于 2012-6-20 11:02 编辑

元信息标记<META>
<META>标记是用来在HTML文件中模拟HTTP协议的响应头报文,是实现元数据的主要标记,它可以用于鉴别作者,标注内容提要和关键字,设定页面字符集,刷新页面等。在HTML头部,可以包括任意数量的<META>标记。
语法:
<META HTTP-EQUIV="value" CONTENT="value">
<META NAME="value" CONTENT="value">
HTTP-EQUIV:用于生成一个HTTP标题域,相应取值由CONTENT确定。
NAME:如果元数据是以关键字/取值的形式出现,NAME表示关键字。
CONTENT:用于指定关键字/取值的内容。
能过<META>标记HTTP-EQUIV属性和NAME属性,可以实现多种多样的功能,下面我们分别进行介绍。
(1)       HTTP-EQUIV属性
HTTP-EQUIV属性类似于HTTP的头部协议,它可以回应给浏览器一些有用的信息,以帮助正确的精确地显示网页内容。设置HTTP-EQUIV属性,可以实现的功能如下:
A:定义字符集
语法:
<META HTTP-EQUIV="content-type" CONTENT="text/html;CHARSET=VALUE">
HTTP-EQUIV:传送HTTP通信协议的标头。
CONTENT:定义页面的内码,其中CHARSET是写下内码的语言类别。
字符集用以说明HTML页面的内容所使用的文字以及语言。HTML语言用以告知浏览器以相应的内码显示页面的内容。
示例:设置网页页面的字符集为GB2312简体中文,代码如下:
  1. <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=GB2312">
复制代码
B:设定自动刷新
语法:
<META HTTP-EQUIV="REFRESH" CONTENT="VALUE">

REFRESH
:代表刷新。
CONTENT:刷新间隔的秒数。
网页内容需要适时更新以便浏览者查看到最新的信息内容。使用HTTP-EQUIV属性中的REFRESH能够设定页面每隔几秒时间来刷新页面的内容。
示例:设置网页页面每隔180s自动刷新一次,代码如下:
  1. <font size="3"><META HTTP-EQUIV="REFRESH" CONTENT="180"></font>
复制代码
C:设定跳转URL
语法:
<META HTTP-EQUIV="REFRESH" CONTENT="VALUE;URL=URL_VALUE">
REFRESH:代表刷新。
CONTENT:跳转间隔的秒数以及跳转后打开文件的网址。
使用HTTP-EQUIV属性的REFRESH不仅能够完成页面自身的自动刷,也可以实现页面之间的跳转过程。
示例:设置网站页面的自动跳转时间为50s,跳转到页面bbs.poluoluo.com,代码如下:
  1. <font size="3">< META HTTP-EQUIV="REFRESH" CONTENT="50; URL="http://bbs.poluoluo.com"></font>
复制代码
D:设定缓存
语法:
< META HTTP-EQUIV="CACHE-CONTROL"CONTENT="NO-CACHE">
CACHE-CONTROL:定义缓存控制。
CONTENT:定义禁止缓存。
使用网页缓存将曾经浏览过的页面暂存在电脑中,当用户下次打开同一个网页时,其实就是打开本地报储存的网页,节省读取同一网页的时间,从而加快浏览网页的速度。但是网页内容在不断的更新,为了能让用户随时都能查看到更新后的页面,这时我们便可以通过META语句禁用页面缓存。
示例:设定禁用缓存,代码如下:
  1. <font size="3">< META HTTP-EQUIV="CACHE-CONTROL" CONTENT=:NO-CACHE"></font>
复制代码
E:设定有效期限
语法:
< META HTTP-EQUIV="EXPIRES" CONTENT="value">

EXPIRES
:定义网页到期时间。
CONTENT:定义到期具体时间,其格式为“星期,日月 GMT”,使用英文和数字进行设定。
示例:设置网站页面到期时间为20121231日星期一235959秒,代码如下:
  1. <font size="3">< META HTTP-EQUIV="EXPIRES" CONTENT="mon,31 dec 2012 23 59 59 GMT"></font>
复制代码
F:设定转场效果
转场效果是指当进入或者离开网站时,页面具有不同的切换效果。添加此英功能可以使网页看起来更具有动感。
语法:
<METAHTTP-EQUIV="EVENT"CONTENT="REVEALTRAN(DURATION=VALUE,TRANSITION=NUMBER)">
EVENT;设定页面进入或者页面退出时产生的转换效果。EVENT事件为Page-Enter,表示进入页面时有网页过渡效果;EVENT事件为Page-exit,表示退出网页时有网页过渡效果。
CONTENTDURATION中设定网页过渡效果的延续时间,单位为sTRANSITION中设定过渡效果方式的编号,编号效果如下表:
             过渡效果                        
          效果编号                  
盒状收缩             0
盒状展开             1
圆形收缩             2
圆形展开             3
向上擦除             4   
向下擦除             5
向左擦除             6
向右擦除             7
垂直百叶窗             8
水平百叶窗             9
横向棋盘式            10
纵向棋盘式            11
溶解            12
左右向中部收缩            13
中部向左右展开            14
上下向中部收缩            15
中部向上下展开            16
阶梯状向左下展开            17
阶梯状向左上展开            18
阶梯状向右下展开            19
阶梯状向右上展开            20
随机水平线            21
随机垂直线            22
随机            23

示例:<META>标记设定转场效果
下面的压缩包里有三个页面文件来展示<META>标记设定转场效果。文件index.htm作为主页面,包含图片,页面中分别将“进入页面效果”文字和“退出页面效果”文字加以链接以展示不同的转场效果。文件index01.htm实现进入页面时,经过3s的时间使用编号为8的垂直百叶窗效果转场。文件index02.htm实现退出页面时,经过3s的时间使用编号为1的盒状展开效果转场。具体代码就不在这里描述,有兴趣的朋友可以下载压缩包,效果代码里面都有。
转场效果.rar (101.24 KB, 下载次数: 30)

评分

参与人数 1威望 +5 破洛币 +5 贡献 +5 收起 理由
xiaoc + 5 + 5 + 5 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-18 12:00:52 | 显示全部楼层
本帖最后由 zybx520 于 2012-6-19 22:37 编辑

NAME属性
NAME属性通过使用不同的参数实现不同的功能。
A:设定编辑工具
语法:<META NAME="GENERATOR" CONTENT="VALUE">
GENERATOR:编辑器定义。
CONTENT:定义编辑器名称。
HTML文档中可以设定网页编辑器的名称,这个名称不会出现在浏览器的显示页面中。
示例:设定以Notepad(记事本)作为网页的编辑工具,代码如下:
  1. <META NAME="GENERATOR" CONTENT="Notepad">
复制代码
B:设定关键字
语法:<<META NAME="KEYWORDS" CONTENT="value">
KEYWORDS:关键字定义
CONTENT:定义关键字的内容。
关键字是为搜索引擎提供的,即向搜索引擎说明网页的关键词。可以设定多个与主题相关的关键字以便搜索,关键字之间用逗号分隔,这些关键字不会在浏览器中出现。关键字不限语言种类,可以是中文,英文,数字,也可以是不同文字的混合形式。
示例:设置网站页面的关键字为“破洛洛”,程序代码如下:
  1. <META NAME="KEYWORDS" CONTENT="破洛洛">
复制代码
注意:大多数搜索引擎检索时都会限制关键字的数量,所以关键字的输入不宜过多,应明确主题。
C:设定站点描述
语法:<META NAME="DISCRIPTION" CONTENT="VALUE">
DISCRIPTION:描述定义。
CONTENT:定义描述语句。
描述语句的作用是在源代码中添加说明文字,可以将网站的主题描述清晰,这个描述内容不会在浏览器中显示出来。描述语句同时向搜索引擎说明站点的主要内容,由于搜索引擎限制说明文字的字数,所以内容也要简明扼要。
示例:设置网站页面的描述为“破洛洛论坛”,代码如下:
  1. <META NAME="DISCRIPTION" CONTENT="破洛洛论坛"
复制代码
D:设定作者
语法:<META NAME="AUTHOR" CONTENT="VALUE">
AUTHOR:作者定义。
CONTENT:定义作者的个人信息。
在页面的源代码中,可以标注页面制作者的姓名及个人信息。这样可以在源代码中保留作者的一些相关信息。
示例:设置网站页面作者为“破洛洛zybx520”,代码如下:
  1. <META NAME="AUTHOR" CONTENT="破洛洛zybx520">
复制代码
E:设定建立网站的日期
语法:<META NAME="BUILD"CONTENT="VALUE">
BUILD:定义网页建设。
CONTENT:定义网页建设的具体时间。
示例:设置建立网站的日期为2012619日,代码如下:
  1. <META NAME="BUILD" CONTENT="2012.06.19">
复制代码
F:说明版权
语法:<META NAME="COPYRIGHT" CONTENT="VALUE">
COPYRIGHT:定义版权。
CONTENT:定义版权信息。
示例:说明网站版权信息为“破洛洛”,代码如下:
  1. <META NAME="COPYRIGHT" CONTENT="破洛洛"
复制代码
G:保留联系人的邮箱
语法:<META NAME="REPLY-TO”" CONTENT="VALUE">
REPLY-TO:定义回复。
CONTENT:定义邮箱地址。
示例:保留联系人邮箱为:zybx520@163.com
  1. <META NAME="REPLY-TO" CONTENT="zybx520@163.com">
复制代码
H:设置搜索方式
语法:<META NAME=”ROBOTS” CONTENT=”VALUE”>
ROBOTS:定义搜索方式。
CONTENT:定义可以采用的不同方法进行搜索,其值如下表

描述
All
搜索当前网页及与其链接的网页
Index
搜索当前网页
Nofollow
不能搜索与当前网页链接的网页
Noindex
不能搜索当前网页
None
不能搜索当前网页及与其链接的网页
示例:设置搜索方式为只能搜索当前的网页,代码如下:
  1. <META NAME="ROBOTS" CONTENT="index">
复制代码

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-19 16:19:53 | 显示全部楼层

主体标记<BODY>

本帖最后由 zybx520 于 2012-6-20 09:59 编辑

主体标记<BODY>
HTML的主体标记是<BODY>,在<BODY></BODY>中旋转的是页面展示的所有内容。作为网页的主体部分,<BODY>标记有很多的内置属性,这些属性用于设定网页的总体风格。例如,定义页面的背景图像,背景颜色,文字颜色以及超文本链接颜色等。<BODY>标记的属性如下表所示:
属性
描述
BGCOLOR
设定网页的背景颜色
BACKGROUND
设定网页的背景图像
BGPROPERTIES
设定网页的背景图像是否随滚动条滚动
TEXT
设定网页文字的颜色
LINK
设定未访问过的链接颜色
ALINK
设定鼠标正在单击时的链接颜色
VLINK
设定访问过后的链接颜色
TOPMARGIN
设定页面的上边距
LEFTMARGIN
设定页面的左边距
MARGINWIDTH
设定页面的空白宽度
MARGINHEIGHT
设定页面的空白高度

下面我们针对<BODY>标记的几种属性分别进行介绍。
A:背景颜色属性BGCOLOR
<BODY>标记的BGCOLOR属性用来设定整个页面的背景颜色。
语法:<BODY BGCOLOR="COLOR_VALUE">
BGCOLOR:定义页面的背景颜色。
COLOR_VALUE:背景颜色值,可以使用颜色的英文名称或者十六进制值来表示。
颜色属性的值有两种表示方法:使用颜色名称来,例如红色,绿色和蓝色分别用red,greenblue表示,这种颜色定义是采用英文单词来定义的;使用十六进制格式数值#RRGGBB来表示,RR,GGBB分别表示颜色中的红,绿,蓝三基色的两位十六进制数据,例如红色,绿色和蓝色分别用#FF0000#00FF00#0000FF表示。
示例:设置页面的背景颜色值为#CCCCFF。程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>BODY标记背景颜色属性BGCOLOR</title>
  5. </head>

  6. <body bgcolor="#CCCCFF" text="#FF6600">
  7. <center>
  8. <h1>设置页面背景颜色值为CCCCFF</h1>
  9. </center>
  10. </body>
  11. </html>

复制代码
B:背景图像属性BACKGROUND
语法:<BODY BACKGROUND="IMG_FILE_URL">
IMG_FILE_URL:背景图片文件存放路径,可以输入本地图像文件的和文件名称,也可以用URL的形式输入其他位置的图像名称。例如http://bbs.poluoluo.com/data/attachment/forum/201206/14/161408ccer28m82cc42nsa.jpg。默认情况下,背景图片在水平方向和垂直方向会不断地重复出现,直到铺满整个网页。
示例:设置网站页面的背景图像为01-02.gif,代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>BODY标记背景图像属性BACKGROUND</title>
  5. </head>

  6. <body background="01-02.gif">
  7. <center>
  8. <h1 style="color:#0000FF ">设置页面背景图像是01-02.gif</h1>
  9. </center>
  10. </body>
  11. </html>

复制代码
C:背景图像固定属性BGPROPERTIES
语法:<BODY BACKGROUND="IMG_FILE_URL" BGPROPERTIES="FIXED">
BACKGROUND:定义页面的背景图像。
IMG_FILE_URL:指定图片文件所在的路径。
BGPROPERTIES:定义背景属性。如果参数的值 为“FIXED,表示当文本滚动时背景图片不随之滚动;如果参数的值为空或者不使用该参数,表示背景图片同文本一起滚动。
示例:设置网站页面的背景图像固定不动。程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>BODY标记背景图像固定属性BGPROPERTIES</title>
  5. </head>

  6. <body background="01-02.gif" bgproperties="fixed">
  7. <center>
  8. <h1 style="color:#0000FF ">设置页面背景固定属性BGPROPERTIES</h1>
  9. <p style="letter-spacing:6px; line-height:58px; font-size:16px;">所谓背景图像固定,

  10. 是指不论浏览器的滚动条如何拖动,

  11. 背景都固定在相同的位置,

  12. 不会随着文字滚动而滚动。

  13. BODY标记的BGPROPERTIES属性

  14. 用于设置网页文本滚动时,

  15. 背景图片是否随之滚动。

  16. 如果参数的值为“Fixed”时,

  17. 表示当文本滚动时背景图片不随之滚动;

  18. 如果参数的值为空或者不使用该参数时,

  19. 表示背景图片同文本一起滚动。</p>
  20. </center>
  21. </body>
  22. </html>
复制代码
D:文字颜色属性TEXT
<BODY>标记的TEXT属性可以改变整个页面默认文字的颜色。在没有对文字进行单独定义颜色的时候,这个属性将对页面中所有的文字产生作用。
语法:<BODY TEXT="COLOR_VALUE">
TEXT:定义文字的颜色。
COLOR_VALUE:文字的颜色值,颜色值可以使用颜色的英文名称或者十六进制值表示。
示例:设置页面文字颜色值为#FF6600,程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>BODY标记文字颜色属性TEXT</title>
  5. </head>

  6. <body text="#FF6600">
  7. <center>
  8. <h1>设置页面文字颜色值为FF6600</h1>
  9. </center>
  10. </body>
  11. </html>
复制代码
E:文字链接颜色属性LINK
在浏览器默认的情况下,链接文字的颜色为蓝色,访问过后的链接文字颜色为紫红色,通过属性LINK可以改变未访问过的链接文字颜色。
语法:<BODY LINK="COLOR_VALUE">
LINK:定义未访问过的链接文字颜色
COLOR_VALUE:定义颜色的英文名称或者十六进制值。
示例:设置网站页面链接文字颜色值为#6699FF,程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>BODY标记文字链接属性LINK</title>
  5. </head>

  6. <body link="#6699FF">
  7. <center>
  8. <p><a href="#" style="font-size:24px ">设置页面链接文字颜色值为#6699FF</a></p>
  9. </center>
  10. </body>
  11. </html>
复制代码
F:鼠标单击链接文字颜色属性ALINK
语法:<BODY ALINK="COLOR_VALUE">
ALINK:定义鼠标单击链接文字时的链接文字颜色。
COLOR_VALUE:定义颜色的英文名称或者十六进制值。
示例:设置网站页面单击链接文字颜色值为#3333FF,程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>BODY标记激活链接文字颜色属性ALINK</title>
  5. </head>

  6. <body link="#6699FF" alink="#FF6600">
  7. <center>
  8. <p><a href="#" style="font-size:24px ">设置页面激活链接文字颜色值为#FF6600</a></p>
  9. </center>
  10. </body>
  11. </html>
复制代码
G:访问后链接文字颜色属性VLINK
语法:<BODY VLINK="COLOR_VALUE">
VLINK:定义鼠标单击后链接文字的颜色。
COLOR_VALUE:定义颜色的英文名称或者十六进制值。
示例:设置网站页面链接访问后的文字颜色为#FF0000。程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>BODY标记访问后链接文字颜色属性VLINK</title>
  5. </head>

  6. <body link="#6699FF" alink="#FF6600" vlink="#FF0000">
  7. <center>
  8. <p><a href="#" style="font-size:24px ">设置网站页面链接访问后的文字颜色为红色</a></p>
  9. </center>
  10. </body>
  11. </html>
复制代码
H:上边距属性TOPMARGIN
HTML页面中,使用TOPMARGIN属性定义页面的上边距,即内容和浏览器上部边框之间的距离。
语法:<BODY TOPMARGIN="VALUE">
TOPMARGIN:定义页面的上边距。
VALUE:以像素为单位。
设置网站页面的上边距为50px,程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>BODY标记上边距属性TOPMARGIN</title>
  5. </head>

  6. <body topmargin="50px" text="#FF6600">
  7. <center>
  8. <p style="font-size:24px ">设置页面的上边距为50px</p>
  9. </center>
  10. </body>
  11. </html>
复制代码
I:左边距属性LEFTMARGIN
HTML的页面中,使用LEFTMARGIN属性定义页面的左边距,即内容和浏览器左侧边框之间的距离。
语法:<BODY LEFTMARGIN="VALUE">
LEFTMARGIN:定义页面的左边距。
VALUE:以像素为单位。
示例:设置网站页面的左边距为30px,程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>BODY标记左边距属性LEFTMARGIN</title>
  5. </head>

  6. <body leftmargin="30px" topmargin="50px" text="#FF6600">
  7. <p style="font-size:24px ">设置页面的左边距为30px</p>
  8. </body>
  9. </html>
复制代码
H:空白宽度和高度属性MARGINWIDHMARGINHEIGHT
示例:设置页面的空白宽度和高度,程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>BODY标记空白宽度和高度属性MARGINWIDTH、MARGINHEIGHT</title>
  5. </head>
  6. <body marginheight="100" marginwidth="200">
  7. BODY标记空白宽度和高度属性MARGINWIDTH、MARGINHEIGHT
  8. </body>
  9. </html>
复制代码

评分

参与人数 1威望 +5 破洛币 +5 贡献 +5 收起 理由
xiaoc + 5 + 5 + 5 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-19 19:26:35 | 显示全部楼层

1.3文字排版

本帖最后由 zybx520 于 2012-6-20 20:39 编辑

文字是页面的基础部分,美观大方的文字页面能够确切地传达出页面的主要信息。下面介绍文字排版以及文字效果的实现。

1.3.1文字的内容
文字编写在正文标记<BODY></BODY>之间,文字的内容包括普通的文字,空格符号和特殊符号。

A
:显示普通文字

可以在页面的<BODY>…….</BODY>标记中输入任何文字。
示例:在网站页面中输入普通文字,程序代码如下:

  1. <font size="3"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>输入普通文字</title>
  5. </head>
  6. <body>
  7. 这里可以输入普通文字
  8. </body>
  9. </html>
  10. </font>
复制代码
B:显示空格符号
在浏览HTML页面时,浏览器会忽略多余的空格。HTML页面中的空格符号是通过代码控制的,一个半角空格使用一个“ ”表示,多个空格只需要使用多次即可。
在网站页面中输入空格符号,程序代码如下:
  1. <font size="3"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>输入空格符号</title>
  5. </head>
  6. <body>
  7.        输入空格符号
  8. </body>
  9. </html>
  10. </font>
复制代码
C:显示特殊符号
HTML为一些特殊的字符设置了特殊的代码,字符的实体名称都以一个“&”符号开始,以一个“;”符号结束,如下图中的表格所示
特殊符号.jpg


在网站页面中输入特殊符号,程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>输入特殊符号</title>
  5. </head>
  6. <body>
  7. &reg;<<破洛洛论坛网站建设版块>> &轻松完成网站建设™
  8. </body>
  9. </html>
复制代码
1.3.2 字体标记
1:字体标记<FONT>
<FONT>标记可以设定文字的字体,大小和颜色。<FONT>标记属性包括FACE(字体),SIZE(字号)和COLOR(颜色)。
接下来我们对<FONT>标记属性进行详细介绍。
A:字体属性FACE
一般来说,不应该在网页中使用过于特殊的字体。对于中文网页来说,应该尽量对汉字使用宋体或者是黑体,因为大多数计算机中,默认时都安装有这两种字体。
语法:<FONTFACE="FONT_NAME,Font_name,….">…………</FONT>
FACE:定义文字的字体,字体可以定义多次,字体之前使用“,”分开,如果第一种字体系统中不存在,就显示第二种字体,如果字体都不存在,就显示默认的字体。
B:字号属性SIZE
字号指的是字体的大小,它没有一个的大小标准,其大小只是相对于默认字体而言。HTML页面中的文字字号默认为3.
语法:<FONTSIZE="VALUE">……</FONT>
SIZE:定义文字字号。
VALUE:取值范围为从17或者从+1+7,从-1-71是最小的字号,7是最大的字号,或者取值为像素PX,可以进行细微的调节。
C:字体颜色属性COLOR
HTML页面中的议定可以使用不同的颜色来表示。
语法:<FONT COLOR="VALUE">……..</FONT>
COLOR:定义文字的颜色。
VALUE:定义颜色的英文名称或者是十六进制代码。
2:基字标记<BASEFONT>
基字标记<BASEFONT>用于设定基本的文字属性,可以放在头部标记<HEAD></HEAD>之间。<FONT>标记受到基字标记<BASEFONT>的影响。
语法:<BASEFONT FACE="FONT_NAME,FONT_NAME…." COLOR="VALUE" SIZE="VALUE">
FACE:定义文字的字体
COLOR:定义文字的颜色
SIZE:定义文字的字号
<BASEFONT>标记定义将影响整个页面,<FONT>标记是应用于文件的主体标记<BODY></BODY>之间的位置,只影响所标识的文字。
示例:该示例中的文字应用<BASEFONT>标记和<FONT>标记,程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>文字的<BASEFONT>标记和<FONT>标记</title>
  5. <!--<BASEFONT>标记定义文字属性-->
  6. <basefont size="5" color="#FF6600" face="宋体">
  7. </head>
  8. <body>
  9. <<破洛洛论坛网页设计版块>>轻松完成网站建设
  10. <!--受到<BASEFONT>标记定义影响,字号为5,字体是宋体-->
  11. <font color="#6699FF">欢迎</font>
  12. <!--在<BASEFONT>标记定义基础上字号加1,字体定义为黑体-->
  13. <font size="+1" face="黑体">大家多多捧场</font>
  14. </body>
  15. </html>
复制代码
3:标题字标记<H>
标题字标记是指以某几种固定的字号显示文字。标题字标记从<H1><H6>,每级标题文字的字体大小依次递减。每个标题字标记所标识的文字将独占一行且上下一空白行。
有关标题字的说明如下图所示:
标题字说明.jpg
示例:在网站页面中使用标题字。程序代码如下:
  1. <font size="3"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>使用标题字</title>
  5. </head>
  6. <body>
  7. <H1>1级标题</H1>
  8. <H2>2级标题</H2>
  9. <H3>3级标题</H3>
  10. <H4>4级标题</H4>
  11. <H5>5级标题</H5>
  12. <H6>6级标题</H6>
  13. </body>
  14. </html>
  15. </font>
复制代码
标题记的常用属性是ALIGN(对齐)属性,用于定义标题字的对齐方式,使页面更加整齐美观。
语法:<Hn ALIGH="LEFT/CENTER/RIGHT">…….</Hn>
Hn:表示标题标记H1H6
LEFT:标题居左对齐
CENTER:标题居中对齐
RIGHT:标题居右对齐
示例:在网站页面中使用标题字的对齐属性,程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>标题字的对齐属性ALIGN</title>
  5. </head>
  6. <body>
  7. <H1 align="left">1级标题</H1>
  8. <H2 align="center">2级标题</H2>
  9. <H3 align="right">3级标题</H3>
  10. </body>
  11. </html>
复制代码



回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-21 18:58:24 | 显示全部楼层

文字的排版标记

本帖最后由 zybx520 于 2012-6-21 19:12 编辑

文字的排版标记使文字按照定义的规则显示。一个清晰,排版整齐的页面更能反映包含的内容,使读者一目了然,文字的排版标记如下图所示:
文字排版标记.jpg
下面对以上文字排版标记进行详细介绍。
A:居中标记<CENTER>
标记<CENTER>可以使段落,文字,,表格等元素居中对齐。
语法:<CENTER>……</CENTER>
B:段落标记<P>
段落是指一段格式统一的文本,在HTML文档窗口中,每输入一段文字,按下回车键后,就自动生成一个段落。在HTML文件中,段落主要由标记<P>定义。
语法:<PALIGN="LEFT/CENTER/RIGHT">……</P>
ALIGH:段落标记常用的属性,可以实现段落在水平方向上的左,中,右的对齐。
C:换行标记<BR>
段落与段落之间是隔行换行的,则文字的午间距过大,可以使用换行标记来完成文字的换行显示。
语法:<BR>
D:不换行标记<NOBR>
单行文字的宽度如果过长,浏览器会自动将该文字换行显示。使用该标记可以令文字不因太长而换行,强制浏览器不换行显示。它对住址,数学公式,一行数字等需要整行显示的文字作用很大。
语法:<NOBR>……</NOBR>
E:强制换行标记<WBR>
<NOBR>标记中的文字被强制不换行,但是在<NOBR>标记中被<WBR>标记包含的内容,则可以被强制换行。
语法:<WBR>……</WBR>
F:水平线标记<HR>
插入水平线可以使文档结构清晰明了,文字的编排更整齐。
语法:<HR>
水平线自身具有很多的属性,如宽度,高度,颜色,排列对齐等,下面向大家介绍水平线标记的属性:
(1)       水平线的宽度属性WIDTH
默认情况下,水平线的宽度为100%,可以自定义水平线的宽度。宽度单位为像素或者以百分比形式表现。
语法:<HRWIDTH="VALUE">
(2)       水平线高度属性SIZE
定义水平线的高度。
语法:<HRSIZE="VALUE">
(3)       水平线颜色属性COLOR
定义水平线的颜色
语法:<HRCOLOR="VALUE">
(4)       水平线排列属性ALIGN
在水平方向上,可以定义水平线的居左,居中或者居右对齐。
语法:<HRALIGN="LEFT/CENTER/RIGHT">
(5)       水平线去掉阴影属性NOSHADE
默认的水平线是空心立方体效果的,可以将其定义为实心并且不带阴影的水平线。
语法:<HRNOSHADE>
我们做个简单的示例:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>文字的水平线标记</title>
  5. </head>
  6. <body background="01-02.gif">
  7. <p align="left" style="margin-left:60px "><b><big><big>HTML 标记语言</big></big></b></p>
  8. <!--设置水平线居中,去阴影,宽度为50%,高度为1px-->
  9. <hr align="center" NOSHADE width="50%" size="1">
  10. <p align="left" style="text-indent:16px; margin-left:20px; margin-right:20px; line-height:25px "> 随着计算机网络的飞速发展,人们通过互联网进行的信息交流变得更加简便和快捷。网页是全球广域网上的基本文档,网页中包含的基本元素以及内容都是通过 HTML 语言( Hypertext Markup Language ,超文本标记语言)表现出来的。 HTML 语言是在标准通用化标记语言 SGML 的基础上建立起来的。 HTML 语言可以格式化文本、创建列表、建立指向其他页面的链接、插入图像、用表格显示信息和使用框架, HTML 语法规则建立的文本可以运行在不同的操作系统上平台上和浏览器上。 HTML 语言的设计原则具有统一性和国际性,是 Web 页面和 Web 应用开发的基础。 </p>
  11. <!--设置水平线颜色值为#BEBEE7,高度为2px,宽度为60%-->
  12. <hr color="#BEBEE7" size="2" width="60%">
  13. </body>
  14. </html>
复制代码
G:预格式化标记<PRE>
预格式化是指在浏览器显示页面时保留文字在源代码中的格式,即页面中显示的和源代码中的效果完全一致。例如:保留文档中的空格,回车符,制表符等。
语法:<PRE>……</PRE>

I
:缩排标记<BLOCKQUOTE>
使用缩排标记,可以实现页面文字的段落缩排,使用多次缩排标记就可以实现多次缩排。
语法:<BLOCKQUOTE>…..</BLOCKQUOTE>

J:注释标记<COMMENT><!-- -->
页面中可以加入相关的说明注释语句,便于源代码编写者对代码的检查与维护,还可以用于版权说明。这些注释语句并不会出现在浏览器中显示。
语法:<COMMENT>….</COMMENT>或者<!--….-->
示例:在网站页面中写入注释语句。程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>注释语句<COMMENT>,<!-- --></title>
  5. </head>
  6. <body>
  7. <COMMENT>这一行不会显示在浏览器上</COMMENT>
  8. 页面中可以加入相关的说明注释语句
  9. <!--这一行也不会显示在浏览器上-->
  10. </body>
  11. </html>
复制代码
文字的排版标记对于HTML页面设计起到不可忽视的作用。
下面我们做一个完整的段落标记具体应用示例:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>文字的段落标记</title>
  5. </head>
  6. <body style="font-size:16px; letter-spacing:4px ">
  7. <!--段落标记<p>,段落文字居左-->
  8. <p align="left">破洛洛论坛</p>
  9. <!--不换行标记<nobr>-->
  10. <nobr><<HTML开发技术教程>>  欢迎学习 如有技术问题请联系 zybx520@163.com   浙江省瑞安市嘉宝锦园B幢2-2,天才宝贝</nobr>
  11. <!--强制换行标记<wbr>-->
  12. <p align="center"><nobr><<HTML开发技术教程>>轻松完成网站建设  欢迎学习 <wbr>如有技术问题请联系zybx520@163.com   浙江省瑞安市嘉宝锦园B幢2-2,天才宝贝</wbr></nobr></p>
  13. <!--预格式化标记<pre>-->
  14. <pre>
  15.     破洛洛论坛

  16.             <<HTML开始技术教程>>                  
  17. </pre>
  18. <!--居中标记<center>-->
  19. <center> 轻松完成网站建设</center>
  20. <!--缩排标记<blockquote>-->
  21. <blockquote><blockquote>欢迎学习</blockquote></blockquote>
  22. </body>
  23. </html>
复制代码

评分

参与人数 1威望 +1 贡献 +1 收起 理由
xiaoc + 1 + 1 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-21 20:50:31 | 显示全部楼层

文字的修饰标记

本帖最后由 zybx520 于 2012-6-21 20:53 编辑

HTML文件中,可以对文字使用多种文字修饰标记,从而呈现不同的效果。文字的修饰标记如下图所示:
文字的修饰标记.jpg

下面是对文字修饰标记的详细介绍:
A:粗体标记<B><STRONG>
可以使用HTML文字粗体标记以粗体来表现需要强调的文字。
语法:<B>…….</B>或者<STRONG>……</STRONG>
B:斜体标记<I>,<EM>,<CITE>
可以使用斜体的效果来表现要强调的内容。
语法:<I>….</I>或者<EM>…..</EM>或者<CITE>….</CITE>
C:上标标记<SUP>
常见于数学表达式,可以将一段文字以小字体的方式显示在另一段文字的右上角。
语法:<SUP>…..</SUP>
D:下标标记<SUB>
常见于数学表达式或者化学方程式,可以将一段文字以小字体的方式显示在另一段文字的右下角。
语法:<SUB>…..</SUB>
E:大字号标记<BIG>
可以使用大字号标记将当前的文字加大一级字号显示。使用几次大字号标记,当前的文字就相应的地加大几级字号显示。
语法:<BIG>…..</BIG>
F:小字号标记<SMALL>
可以使用小字号标记将当前的文字减小一级字号显示。
语法:<SMALL>……</SMALL>
G:下划线标记<U>
可以使用下划线标记为文字加注下划线。
语法:<U>……</U>
H:删除线标记<S>,<STRIKE>
为页面中的文字加注删除线
语法:<S>…..</S>或者<STRIKE>……</STRIKE>
I:等宽文字标记<CODE>,<SAMP>
这两个标记的作用是使用等宽的字体来显示文字,多用天英文文字,能使每个字母有相等的宽度且每个字母之间的距离稍微加宽。
语法:<CODE>…..</CODE>或者<SAMP>……</SAMP>
J:地址文字标记<ADDRESS>
地址文字标记可用来说明住址,E-mail,电话之类的文字,其字体较一般的文字细且为斜体。
语法:<ADDRESS>…..</ADDRESS>
K:键盘输入文字标记<KBD>
这个标记可以显示用户输入命令的文字效果。
语法:<KBD>……</KBD>
L:打字机标记<TT>
这个标记可以创建出打字机风格的字体,文字间是以等宽来显示的。
语法:<TT>……</TT>
M:声明变量标记<VAR>
这个标记可以显示变量的文字效果,其字体罗一般的文字细且为斜体。
语法:<VAR>……</VAR>

下面我们对文字修饰标记做一个示例:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>文字的修饰标记</title>
  5. </head>
  6. <body>
  7. <p style="line-height:30px; font-size:16px ">
  8. <strong><big>破洛洛论坛</big></strong>

  9. <u><b><big>Web开发</big></b></u>
  10. <!--字体加粗,大字号效果-->
  11. <em><<HTML开发技术基础教程>></em><!--斜体效果-->


  12. <small>轻松完成网站建设</small>

  13. <u><strong><big>代数方程式</big></strong>
  14. </u><!--下划线效果-->
  15. x<sup>2</sup>-y<sup>2</sup>=(x+y)*(x-y)
  16. <!--上标记效果-->
  17. 5x<sub>1</sub>+y<sub>2</sub>=100
  18. <!--下标记效果-->
  19. <strike>2x<sub>2</sub>+8y<sub>1</sub>=100</strike>
  20. <!--删除线效果-->
  21. <tt>That's The Best You Find.</tt>
  22. <!--打字机风格字体效果-->
  23. <code>That's The Best You Find.</code>
  24. <!--等宽字体效果-->
  25. <kbd>That's The Best You Find.</kbd>
  26. <!--键盘输入文字效果-->
  27. <var>That's The Best You Find.</var>
  28. <!--声明变量效果-->
  29. <address>瑞安市嘉宝锦园B幢2-2,天才宝贝</address><!--地址文字效果-->
  30. </p>
  31. </body>
  32. </html>
复制代码

今天由于宝宝在身边,没有太多的时间整理码字,所以这一节完了要等明天才更新了,希望大家多多谅解,明天我将会给大家讲讲《特殊文字标记》和《HTML的建立列表》。


评分

参与人数 1威望 +1 贡献 +1 收起 理由
xiaoc + 1 + 1 赞一个!

查看全部评分

回复 支持 反对

使用道具 举报

469

主题

731

帖子

1738

积分

版主

Rank: 7Rank: 7Rank: 7

社区QQ达人优秀版主

 楼主| 发表于 2012-6-22 15:38:14 | 显示全部楼层

特殊文字标记

今天我们介绍一些HTML语言中的特殊的文字标记,这些标记不经常使用,但是却各有特色。
A:文字的说明标记
<RT>标记标识的文字,将以缩小字号的形式,显示在以<RUBY>标记标识的文字上方,用来说明这段文字
语法:<RUBY>文字内容<RT>说明文字</RT></RUBY>
我们来做一个简单的示例:
  1. <font size="3"><html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>文字的说明标记</title>
  5. </head>

  6. <body>
  7. <RUBY>
  8. 文字的说明标记
  9. <RT>
  10. 注释说明
  11. </RT>
  12. </RUBY>
  13. </body>
  14. </html>
  15. </font>
复制代码
B:显示HTML标签标记<PLAINTEXT>或者<XMP>
语法:<PLAINTEXT>或者<XMP>
HTML语言中加入<PLAINTEXT>标签,可以令该标签后的HTML标签失去其标识作用,而直接显示在网页页面中。
示例:显示HTML标签标记<XMP>效果如下图:
显示HTML标签标记.jpg
其程序代码如下:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>显示HTML标签标记<XMP></title>
  5. </head>
  6. <body topmargin="0">
  7. <XMP>
  8. <!--<PLAINTEXT>标记也有显示HTML标签标记的功能-->
  9. <p align="left" style="margin-left:60px "><b><big><big>HTML 标记语言</big></big></b></p>
  10. <!--设置水平线居中,去阴影,宽度为50%,高度为1px-->
  11. <hr align="center" NOSHADE width="50%" size="1">
  12. <p align="left" style="text-indent:16px; margin-left:20px; margin-right:20px; line-height:25px "> 随着计算机网络的飞速发展,人们通过互联网进行的信息交流变得更加简便和快捷。网页是全球广域网上的基本文档,网页中包含的基本元素以及内容都是通过 HTML 语言( Hypertext Markup Language ,超文本标记语言)表现出来的。 HTML 语言是在标准通用化标记语言 SGML 的基础上建立起来的。 HTML 语言可以格式化文本、创建列表、建立指向其他页面的链接、插入图像、用表格显示信息和使用框架, HTML 语法规则建立的文本可以运行在不同的操作系统上平台上和浏览器上。 HTML 语言的设计原则具有统一性和国际性,是 Web 页面和 Web 应用开发的基础。 </p>
  13. <!--设置水平线颜色值为#BEBEE7,高度为2px,宽度为60%-->
  14. <hr color="#BEBEE7" size="2" width="60%">
  15. </body>
  16. </html>
复制代码



评分

参与人数 1威望 +1 贡献 +1 收起 理由
xiaoc + 1 + 1

查看全部评分

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|破洛洛 ( 黔ICP备14000367号  |版权声明

GMT+8, 2018-11-16 22:20 , Processed in 0.264215 second(s), 29 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表