HTML基础——HTML基本要素(二)

1、水平线标记——hr

  水平线用于段落与段落之间的分隔,可使得文档结构清晰明白,使文字编排更为整齐。水平线自身包括很多属性:宽度、高度、颜色、排列对齐等。

  语法:<hr>  (添加一条默认的水平线)

<html>
<head>
<title>添加水平线</title>
</head>
<body>

<center><h4>七步诗(曹植)</h4></center>
<hr>
<center>煮豆持作羹, 漉菽以为汁。</center><br/>
<center>萁在釜下燃, 豆在釜中泣。</center><br/>
<center>本自同根生, 相煎何太急。</center>

</body>
</html>
  • 水平线宽度与高度——width、height

  默认情况下,插入的水平线是100%宽度,1像素高度。

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

水平线宽度可以是确定的像素值,也可以是窗口的百分比;而水平线高度值则只能是像素数。如果在设置水平线时只设置一个值,那另一个则为默认值。

<html>
<head>
<title>添加水平线</title>
</head>
<body>

<center>
<font face="隶书" size="+3">七步诗</font>
<hr width="130">
<font size="+1">曹植</font>
</center>

<hr width="60%" height = "4">
<center>煮豆持作羹, 漉菽以为汁。</center><br/>
<center>萁在釜下燃, 豆在釜中泣。</center><br/>
<center>本自同根生, 相煎何太急。</center>
<hr width="80%" height = "6">

</body>
</html>
  • 水平线颜色——color

  语法:<hr color="颜色代码">

<html>
<head>
<title>添加水平线</title>
</head>
<body>

<center>
<font face="隶书" size="+3">七步诗</font>
<hr width="130" color="#FF0066">
<font size="+1">曹植</font>
</center>

<hr width="60%" height = "4" color="#33FFFF">
<center>煮豆持作羹, 漉菽以为汁。</center><br/>
<center>萁在釜下燃, 豆在釜中泣。</center><br/>
<center>本自同根生, 相煎何太急。</center>
<hr width="80%" height = "6">

</body>
</html>
  • 去掉水平线阴影——noshade

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

  语法:<hr noshade>

<html>
<head>
<title>添加水平线</title>
</head>
<body>

<center>
<font face="隶书" size="+3">七步诗</font>
<hr width="130" color="#FF0066">
<font size="+1">曹植</font>
</center>

<hr width="60%" height = "4" color="#33FFFF">
<center>煮豆持作羹, 漉菽以为汁。</center><br/>
<center>萁在釜下燃, 豆在釜中泣。</center><br/>
<center>本自同根生, 相煎何太急。</center>
<hr size="+5" noshade="noshade">

</body>
</html>
  • 水平线对齐方式——align

  默认居中对齐。

  语法:<hr align="对齐方式">    left、right、center

2、其他文字标记

  • 文字标注标记——ruby

  在默认情况下,标注文字很小,但是在HTML中也可以像设置其他文字一样调整标注文字的各种属性,包括大小、颜色等。

语法:

<ruby>
  被说明的文字
  <rt>
  文字标注
  </rt>
</ruby>

<html>
<head>
<title>添加文字标注</title>
</head>

<body>
<ruby>
有情芍药含春泪,无力蔷薇卧晓枝。<br/><br/>
<rt>
作者秦观
</rt>
</ruby>
</body>

</html>
  • 声明变量标记——var

  为突出变量,将其设置为斜体。

  语法:<var> 变量 </var>

<html>
<head>
<title>声明变量标记</title>
</head>

<body>
<p>定义变量<var>x</var>的值为<var>y+6</var><br/><br/>
</body>

</html>
  • 设置地址文字标记——<address>

  用于显示E-Mail、地址等文字内容,主要用于英文字体的显示中。

  语法:<address> 文字 </address>

<html>
<head>
<title>页面地址文字</title>
</head>

<body>
<p>请在上面的文本框中编辑您的代码,然后单击提交按钮测试结果。<address>www.w3school.com.cn</address>
</body>

</html>

 

posted @ 2016-08-16 10:16  一碗周  阅读(470)  评论(0编辑  收藏  举报