站长之站 站长之站QQ群:16356000 100345456 16263640 130690866
还没有任何记录...
当前位置:站长之站 > 网页设计 > 正文 > HTML教程 第二章 页面布局与文字设计

HTML教程 第二章 页面布局与文字设计

来源:网络作者:网络日期:2012/2/12 0:53:00收藏
本文链接:HTML教程 第二章 页面布局与文字设计http://www.cncncc.com/ArtSJ/Show.Asp?id=4230

标题

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


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

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

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

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

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

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


请看下面的例子:

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

<body>

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

</html>

显示结果

这是一行普通文字

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

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


换行<br>

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

  请看下面的例子:


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

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

</html>

显示结果

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



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

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

</html>

显示结果

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



段落标签

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

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

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


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

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

</html>

显示结果                  浣溪沙 

一曲新词酒一杯,去年天气旧亭台,夕阳西下几时回。

无可奈何花落去,似曾相识燕归来。小园香径几徘徊。


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

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

</html>

显示结果

登鹳雀楼

白日依山尽,
黄河入海流。
欲穷千里目,
更上一层楼。


水平线段<hr>

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

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

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


线段粗细的设定

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

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

</HTML>
显示结果

这是第一条线段,无size设定,取内定值SIZE=1来显示


这是第二条线段,SIZE=5


这是第三条线段,SIZE=10


 

 线段长度的设定

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

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

</HTML>
显示结果

这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示


这是第二条线段,WIDTH=50(点数方式)


这是第三条线段,WIDTH=50%(百分比方式)


 

 线段排列的设定

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

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

</HTML>

显示结果

这是第一条线段,无ALIGN设定,(取内定值CENTER显示)


这是第二条线段,向左对齐BR>


这是第三条线段,向右对齐


 

 无阴影的设定

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

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

</HTML>

显示结果

这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示


这是第二条线段,有NOSHADE设定


 


文字的大小设置

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

  请看示例:


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

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

</html>

显示结果

这是size=7的字体

这是size=6的字体

这是size=5的字体

这是size=4的字体

这是size=3的字体

这是size=2的字体

这是size=1的字体

这是size=-1的字体


文字的字体与样式

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

  <font face="字体">

请看例子:


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

<BODY>
<CENTER>
<FONT face="楷体_GB2312">欢迎光临</FONT><P>
<FONT face="宋体">欢迎光临</FONT><P>
<FONT face="仿宋_GB2312">欢迎光临</FONT><P>
<FONT face="黑体">欢迎光临</FONT><P>
<FONT face="Arial">Welcom my homepage.</FONT><P>
<FONT face="Comic Sans MS">Welcom my homepage.</FONT><P>
</CENTER>
</BODY>

</HTML>

显示结果

欢迎光临

欢迎光临

欢迎光临

欢迎光临

Welcom my homepage.

Welcom my homepage.


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

<B>     </B>     粗体              HTML语言

<I>     </I>     斜体              HTML语言

<U>     </U>     加下划线            HTML语言

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

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

<SMALL>   </SMALL>   小型字体            HTML语言

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

<EM>     </EM>     表示强调,一般为斜体      HTML语言

<STRONG>   </STRONG>   表示特别强调,一般为粗体    HTML语言

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

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


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

<body>
<B>黑体字</B>
<P> <I>斜体字</I>
<P> <U>加下划线</U>
<P> <BIG>大型字体</BIG>
<P> <SMALL>小型字体</SMALL>
<P> <BLINK>闪烁效果</BLINK>
<P><EM>Welcome</EM>
<P><STRONG>Welcome</STRONG>
<P><CITE>Welcom</CITE></P>
</body>

</html>

显示结果

黑体字

斜体字

加下划线

大型字体

小型字体

闪烁效果

Welcome

Welcome

Welcom


文字的颜色

  文字颜色设置格式如下:

   <font color=color_value>…</font>

  这里的颜色值可以是一个十六进制数(用“#”作为前缀),也可以是以下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>
<FONT COLOR=WHITE>色彩斑斓的世界</FONT><BR>
<FONT COLOR=RED>色彩斑斓的世界</FONT> <BR>
<FONT COLOR=#00FFFF>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#FFFF00>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#FFFFFF>色彩斑斓的世界</FONT> <BR>
<FONT COLOR=#00FF00>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#C0C0C0>色彩斑斓的世界</FONT><BR>
</CENTER>
</BODY>

</HTML>

显示结果

色彩斑斓的世界
色彩斑斓的世界
色彩斑斓的世界
色彩斑斓的世界

色彩斑斓的世界
色彩斑斓的世界
色彩斑斓的世界

 


位置控制

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

     <DIV ALIGN=#>   #=left/right/center


例:

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

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

</html>

显示结果

你好!
你好!
你好!

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

  如:<P ALIGN=#>
    <HR ALIGN=#>   #=left/right/center
    <H1 ALIGN=#〉

 


综合示例

前面我们所讲是单独使用一个标签的方法,在实际的编写中,许多标签和一些属性是结合起来使用的,
比如:
    <FONT COLOR="#" SIZE=#>文字</FONT>
    <B><U>文字</U></B>


【例】

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

<BODY>
<P>
<B><U><FONT COLOR="#A35252"><FONT SIZE=+1>白居 易</FONT></FONT></U></B>
</P>

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

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

<P ALIGN=center><FONT COLOR="#3C7777"><CITE>“离离原上草,一岁一枯荣;野火烧不尽,春风吹又生”</CITE></FONT></P>

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

<P>  白居易生活的时代,主要是建中、元和、长庆时期(公元781-824年)。是唐朝走向衰败的极端苦难动荡的时代。 </P>

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

</BODY>
</HTML>

显示结果

白 居 易

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

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

“离离原上草,一岁一枯荣;野火烧不尽,春风吹又生”

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

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

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


作者:站长之站 收集整理,任何媒体转发须保留作者个人微信和来源,不尊重作者劳动的行为将受到举报。
本文链接:HTML教程 第二章 页面布局与文字设计http://www.cncncc.com/ArtSJ/Show.Asp?id=4230

【HTML教程 第二章 页面布局与文字设计】由站长之站收集整理,您可以自由传播,请主动带上本文链接

觉得有用就多来支持一下,没有能帮到您,站长之站也只能表示遗憾,希望有一天能帮到您。

(责任编辑:站长之站)

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
站长之站 · CNCMS
站长之站 测试频道
业界动态
业界动态 门户网站 聚焦人物 电子商务 站长新闻 观察评论
编程开发
ASP教程 .NET教程 JSP教程 PHP教程 Xml/Xslt Shtml教程 CGI专区 JavaScrip 其他编程
服务器类
Web服务器 Ftp服务器 Mail服务器 Dns服务器 Linux服务器 Win服务器 安全防护 服务器其他
建站指南
主机域名 建站入门 建站经验 网站推广 网站优化 网站策划 网络赚钱 网络创业 SEO 专区
网页设计
Html教程 设计心得 动态网页 JS/Ajax Div/Css CSS教程 设计其它
软件教程
Photoshop Fireworks FLASH Dreamweaver Frontpage 其他教程
数据库类
MSAccess MS_SQL My_SQL VFP PowerBuilder Oracle 其它数据
全站导航
业界动态编程开发服务器类建站指南网页设计软件教程数据库类
关于我们/版权
版权所有:
Copyright © 2008 - 2019 站长之站 www.cncncc.com
PowerBy:CNCMS(5.1.20)

苏ICP备16002106号-1