HTML5从入门到精通 (第2版)
上QQ阅读APP看书,第一时间看更新

3.4 水平线标记

教学录像:光盘\TM\lx\3\水平线标记.exe

水平线用于段落与段落之间的分隔,使文档结构清晰明白,使文字的编排更整齐。水平线自身具有很多的属性,如宽度、高度、颜色、排列对齐等。在HTML文档中经常会用到水平线,合理使用水平线可以获得非常好的效果。一篇内容繁杂的文档,如果合理放置几条水平线,就会变得层次分明,便于阅读。

3.4.1 添加水平线——hr

语法

        <hr>

语法解释

在网页中输入一个<hr>标记,就添加了一条默认样式的水平线。

【例3.17】实例代码。(实例位置:光盘\TM\sl\3\17)

        <html>
        <head>
        <title>添加水平线</title>
        </head>
        <body>
        <center><h4>编程词典个人版</h4></center>
        <hr>
        编程词典个人版是一套学、查、用为一体的数字化学习编程软件。科学的学习模式、系统的学习方案,实现快速
        学习、快速提高,真正做到理论与实践相结合。海量的数据资源,帮助您解决在学习编程语言中遇到的问题。丰
        富的实战资源,包括视频、应用范例、模块和项目源码,既能够作为学习的资料,也可以应用到实战中。
        </body>
        </html>

图3.17 添加水平线

运行代码,可以看到在网页中出现了一条水平线,如图3.17所示。

3.4.2 设置水平线宽度与高度属性——width、height

在默认情况下,在网页中插入的水平线是100%的宽度,1像素的高度。而在实际创建网页时,可以对水平线的宽度和高度进行设置。

语法

        <hr width=水平线宽度  height=水平线高度>

语法解释

在该语法中,水平线的宽度值可以是确定的像素值,也可以是窗口的百分比。而水平线的高度值则只能是像素数。如果在创建水平线时只设置一个参数,那么另外一个参数则会取默认值。

【例3.18】实例代码。(实例位置:光盘\TM\sl\3\18)

        <html>
        <head>
        <title>设置水平线大小</title>
        </head>
        <body>
        <center>
        <font face="隶书" size="+4">醉花阴</font>
        <hr width="130">
        <font size="+3">李清照</font>
        </center>
        <hr width="85%" size="3">
        <p>&nbsp; &nbsp; &nbsp; &nbsp;薄雾浓云愁永昼,瑞脑销金兽。<br/>
        &nbsp; &nbsp; &nbsp; &nbsp;佳节又重阳,玉枕纱橱,半夜凉透彻<br />
        &nbsp; &nbsp; &nbsp; &nbsp;东篱把酒黄昏后,有暗香盈袖<br />
        &nbsp; &nbsp; &nbsp; &nbsp;莫道不消魂,帘卷西风,人比黄花瘦。</p>
        <hr size="5">
        </body>
        </html>

运行这段代码,可以看到3条高度和宽度不等的水平线效果,如图3.18所示。

图3.18 设置水平线宽度和高度

3.4.3 设置水平线的颜色——color

为了使水平线更美观,同整体页面更协调,我们可以设置水平线的颜色。

语法

        <hr color="颜色代码">

语法解释

颜色代码是十六进制的数值。

【例3.19】实例代码。(实例位置:光盘\TM\sl\3\19)

        <html>
        <head>
        <title>设置水平线的颜色</title>
        </head>
        <body>
        <center><font face="隶书" size="+5" color="#0066FF">吉林省明日科技有限公司</center>
        <hr width="220" size="3" color="#FFCC00">
        <p>
        吉林省明日科技有限公司是一家以计算机软件技术为核心的高科技型企业,公司创建于2000年12月,是专业的
        应</p>
        <!--省略部分代码-->
        <p><strong>企业宗旨</strong>:为企业服务,打造企业智能管理平台,改善企业的管理与运作过程,提高企业
        效率,降低管理成本,增</p>
        <p>强企业核心竞争力。为企业快速发展提供源动力。</p>
        <p ><strong>企业精神</strong>:博学、创新、求实、笃行</p>
        <p><strong>公司理念</strong>:以高新技术为依托,战略性地开发具有巨大市场潜力的高价值的产品。</p>
        <p ><strong>公司远景</strong>:成为拥有核心技术和核心产品的高科技公司,在某些领域具有领先的市场地位。
        </p>
        <p ><strong>核心价值观</strong>:永葆创业激情、每一天都在进步、容忍失败,鼓励创新、充分信任、平等交
        流。</p>
        <hr size="5" color="#33FFFF">
        </body>
        </html>

运行这段代码,可以看到颜色和大小不同的两条水平线,而这两条水平线将文章的主体映衬得更加醒目,如图3.19所示。

图3.19 设置水平线的颜色

3.4.4 设置水平线的对齐方式——align

通过前面几个实例可以看到,水平线在默认情况下是居中对齐的。如果希望水平线左对齐或右对齐,就需要使用align参数。

语法

        <hr aligh=对齐方式>

语法解释

在该语法中对齐方式可以有3种,包括left、center和right。其中,center的效果与默认效果相同。

【例3.20】实例代码。(实例位置:光盘\TM\sl\3\20)

        <html>
        <head>
        <title>设置水平线对齐方式</title>
        </head>
        <body>
        <font face="隶书" size="+3" color="#FF6600">苏轼</font>
        <hr width="130" color="#996600" align="left">
        古之成大事者,不惟有超士之才,亦有坚忍不拔之志。
        <p align="right">大家要牢记啊!
        <hr size="2"  width="120" color="#FF99CC" align="right">
        </body>
        </html>

运行这段代码,可以看到分别位于左边和右边的不同效果的水平线,如图3.20所示。

图3.20 设置水平线的对齐方式

3.4.5 去掉水平线阴影——noshade

在默认情况下,水平线是空心带阴影的立体效果,通过设置noshade参数可以将水平线的阴影去掉。

语法

        <hr noshade>

【例3.21】实例代码。(实例位置:光盘\TM\sl\3\21)

        <html>
        <head>
        <title>去掉水平线的阴影</title>
        </head>
        <body>
        <center>
        <font face="隶书" size="+3" color="#00FF00">老子</font></center>
        <hr width="130" size="4" >
        <p align="center">信言不美,美言不信。善者不辩,辩者不善</p>
        <hr size="3" noshade="noshade"/>
        </body>
        </html>

运行代码,可以看到如图3.21所示的效果,上面的水平线是空心带阴影的立体效果,而下面的水平线是通过noshade参数将阴影去除掉的水平线。

图3.21 去掉水平线的阴影效果