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>