社区服务
邀请注册
勋章中心
部落银行
道具中心
朋友圈
天赐良缘

风格切换
white

短消息
收件箱
发件箱
消息跟踪
写新消息

控制面板
控制面板首页
编辑个人资料
查看个人资料
好友列表
用户权限查看
钣金币管理
积分转换
特殊组购买
收藏夹
我的主题

统计排行
基本统计信息
到访IP统计
管理团队
管理统计
在线统计
会员排行
版块排行
帖子排行

本页主题: HTML编程教程	打印 \| 加为IE收藏 \| 复制链接 \| 收藏主题 \| 上一主题 \| 下一主题

www

我们都是钣金人，钣金部落连着你、我、他！！！

级别: 论坛版主

小中大

HTML编程教程

0

标题

　　一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：

--------------------------------------------------------------------------------

〈H1>…</H1>　　　　　第一级标题

〈H2>…</H2>　　　　　第二级标题

〈H3>…</H3>　　　　　第三级标题

〈H4>…</H4>　　　　　第四级标题

〈H5>…</H5>　　　　　第五级标题

〈H6>…</H6>　　　　　第六级标题

--------------------------------------------------------------------------------

请看下面的例子：

<html>
<head>
<title>标题示例</title>
</head>

<body>

这是一行普通文字
〈H1>一级标题</H1>
〈H2>二级标题</H2>
〈H3>三级标题</H3>
〈H4>四级标题</H4>
〈H5>五级标题</H5>
〈H6>六级标题</H6>
</body>

</html>

--------------------------------------------------------------------------------

　　从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。

[NextPage]

换行 

　　在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上 标签。

　　请看下面的例子：

--------------------------------------------------------------------------------

<html>
<head>
<title>无换行示例</title>
</head>

<body>
登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
</body>

</html>

--------------------------------------------------------------------------------

<html>
<head>
<title>换行示例</title>
</head>

<body>
登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。
</body>

</html>

[NextPage]

段落标签

　　为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。

　　标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。

　　下面，我们用两个例子来说明这个标签的用法。

--------------------------------------------------------------------------------

<html>
<head>
<title>段落标签</title>
</head>

<body>

浣溪沙　一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。
</body>

</html>

--------------------------------------------------------------------------------

<html>
<head>
<title>段落标签</title>
</head>

<body>
登鹳雀楼白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。
</body>

</html>

[NextPage]

水平线段<HR>

　　这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有三个属性：

　　　size　水平线的宽度
　　　width 水平线的长，用占屏幕宽度的百分比或象素值来表示
　　　align 水平线的对齐方式，有LEFT RIGHT CENTER三种
　　　noshade 线段无阴影属性，为实心线段

　　我们可以用几个例子来说明这线段的用法：

--------------------------------------------------------------------------------

线段粗细的设定

<HTML>
<HEAD>
<TITLE>线段粗细的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无size设定，取内定值SIZE=1来显示 
<HR>
这是第二条线段，SIZE=5 
<HR SIZE=5>
这是第三条线段，SIZE=10 
<HR SIZE=10>
</BODY>

</HTML>

--------------------------------------------------------------------------------

线段长度的设定
<HTML>
<HEAD>
<TITLE>线段长度的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示 
<HR SIZE=3>
这是第二条线段，WIDTH=50(点数方式) 
<HR WIDTH=50 SIZE=5>
这是第三条线段，WIDTH=50%(百分比方式) 
<HR WIDTH=50% SIZE=7>
</BODY>

</HTML>

--------------------------------------------------------------------------------

线段排列的设定

<HTML>
<HEAD>
<TITLE>线段排列的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无ALIGN设定，(取内定值CENTER显示) 
<HR WIDTH=50% SIZE=5>
这是第二条线段，向左对齐BR>
<HR WIDTH=60% SIZE=7 ALIGN=LEFT>
这是第三条线段，向右对齐 
<HR WIDTH=70% SIZE=2 ALIGN=RIGHT>
</BODY>

</HTML>

--------------------------------------------------------------------------------

无阴影的设定

<HTML>
<HEAD>
<TITLE>无阴影的设定</TITLE>
</HEAD>

<BODY>
这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示 
<HR WIDTH=80% SIZE=5>
这是第二条线段，有NOSHADE设定 
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
</BODY>

</HTML>

[NextPage]

文字的大小设置

　　提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。

　　请看示例：

--------------------------------------------------------------------------------

<html>
<head>
<title>字号大小</title>
</head>

<body>
这是size=7的字体
这是size=6的字体
这是size=5的字体
这是size=4的字体
这是size=3的字体
这是size=2的字体
这是size=1的字体
这是size=-1的字体
</body>

</html>

[NextPage]

文字的字体与样式

　　HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。

　　

请看例子：

--------------------------------------------------------------------------------

<HTML>
<HEAD>
<TITLE>字体</TITLE>
</HEAD>

<BODY>
<CENTER>
欢迎光临
欢迎光临
欢迎光临
欢迎光临
Welcom my homepage.
Welcom my homepage.
</CENTER>
</BODY>

</HTML>

--------------------------------------------------------------------------------

　　为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：

　　　　　　　　　　粗体　　　　　　　　　　　　　　HTML语言

　　　　　　　　　　斜体　　　　　　　　　　　　　　HTML语言

　　　　　　　　　　加下划线　　　　　　　　　　　　HTML语言

<TT>　　　　 <TT>　　　　　打字机字体　　　　　　　　　　　HTML语言

<BIG>　　　　</BIG>　　　　大型字体　　　　　　　　　　　　HTML语言

　　　　　　小型字体　　　　　　　　　　　　HTML语言

<BLINK>　　　</BLINK>　　　闪烁效果　　　　　　　　　　　　HTML语言

　　　　 　　　　表示强调，一般为斜体　　　　　　HTML语言

　　 　　表示特别强调，一般为粗体　　　　HTML语言

<CITE>　　　 </CITE>　　　用于引证、举例，一般为斜体　　　HTML语言

现在我们用一个实例来看看效果：

--------------------------------------------------------------------------------

<html>
<head>
<title>字体样式</title>
</head>

<body>
黑体字
 斜体字
 加下划线
 <BIG>大型字体</BIG>
 小型字体
 <BLINK>闪烁效果</BLINK>
Welcome
Welcome
<CITE>Welcom</CITE>
</body>

</html>

[NextPage]

文字的颜色

　　文字颜色设置格式如下：

　　　…

　　这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。

--------------------------------------------------------------------------------

Black = "#000000" Green = "#008000"
Silver = "#C0C0C0" Lime = "#00FF00"
Gray = "#808080" Olive = "#808000"
White = "#FFFFFF" Yellow = "#FFFF00"
Maroon = "#800000" Navy = "#000080"
Red = "#FF0000" Blue = "#0000FF"
Purple = "#800080" Teal = "#008080"
Fuchsia = "#FF00FF" Aqua = "#00FFFF"

--------------------------------------------------------------------------------

请看例子：

<HTML>
<HEAD>
<TITLE>文字的颜色</TITLE>
</HEAD>

<BODY BGCOLOR=000080>
<CENTER>
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
色彩斑斓的世界 
</CENTER>
</BODY>

</HTML>

[NextPage]

位置控制

　　通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：

　　　　　<DIV ALIGN=#>　　　#＝left／right／center

--------------------------------------------------------------------------------

例：

<html>
<head>
<title>位置控制</title>
</head>

<body>
<div align=left>
你好! 
<div align=right>
你好! 
<div align=center>
你好! 
</body>

</html>

--------------------------------------------------------------------------------

　　另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。

　　如：
　　　　<HR ALIGN=#>　　　#＝left／right／center
　　　　<H1 ALIGN=#〉

[NextPage]

综合示例

　　前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的，
比如：
　　　　文字
　　　　文字

--------------------------------------------------------------------------------

【例】

<HTML>
<HEAD>
<TITLE>字体样式</TITLE>
</HEAD>

<BODY>

白居易


　　白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 

　　白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不易！”及披卷读到《赋得古原草送别》中的

<CITE>“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”</CITE>

时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,‘居’下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。 

　　白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。 

　　白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自《诗经》以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动——新乐府运动，创作了大量优秀的现实主义诗篇。 

</BODY>
</HTML>

【显示结果】

[NextPage]

搜索更多相关文章：资料教程软件设计免费

呵呵，钣金部落，我总算找到一个家了！！！

Posted: 2008-04-07 08:23 | [楼主]

www

我们都是钣金人，钣金部落连着你、我、他！！！

级别: 论坛版主

小中大

HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。
　　所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

　　通过HTML可以表现出丰富多彩的设计风格

　　　　　图片调用：<IMG SRC="文件名">
　　　　　文字格式：文字

　　通过HTML可以实现页面之间的跳转

　　　　　页面跳转：〈A HREF="文件路径/文件名"></A>

　　通过HTML可以展现多媒体的效果

　　　　　声频：<EMBED SRC="音乐文件名" AUTOSTART=true>
　　　　　视频：<EMBED SRC="视频文件名" AUTOSTART=true>

　　上面我们在示例超文本特征的同时，采用了了一些我们在制作超文本文件时需要用到的一些标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。有关标签详细的内容参见下一页。

呵呵，钣金部落，我总算找到一个家了！！！

Posted: 2008-04-07 08:26 | 1 楼

	帖子浏览记录版块浏览记录
钣金部落高峰论坛 » 免费综合