上节,我们学习了boda常用的属性以及HTML的一些标记,但是图显示的效果却不是那么的好看。
原因就是没有排版好,我们这次使用居中来使这个页面更好看一点,顺便多加入几个别的标记。
HTML排版标记
(1)<p></p> : 表示一个段落。一段文字放在p标记里就可以了。
常用属性:align 水平对齐方式,取值:left(左对齐)、center(居中对齐)、right(右对齐),一个段落默认就是左对齐。
(2)换行标记<br>
(3)水平线标记(单边标记):<hr>
size:水平线的粗细,单位一般为px
color:颜色
width:水平线的宽度
noshade:去掉水平线的阴影。(在HTML中,noshade是没有值的属性)如: <hrnoshade>
如: <hr size="1" color="blue" width="50%" noshade>
(4)<pre>预排版标记
功能:将保留所有的空白字符(空格、换行符),换句话说就是原封不动的输出。
语法:<pre></pre>:双边标记
(5)<h1>...<h6>
一级标题到六级标题
标题标记:<h1></h1> ... <h6></h6>
功能:定义各种标题
属性:
align 水平对齐,取值:left(左对齐)、center(居中对齐)、right(右对齐),一个段落默认就是左对齐。
写个例子看看效果是怎么样的:
<html>
<head>
<title>这是一首诗构成的网页</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body bgColor="white">
<!--标题1 并设置标题1居中-->
<h1 align="center">
<font size="6" color="red" face="楷体">
关雎
</font>
</h1>
<!-- 设置水平线的粗细,颜色,宽度和去阴影-->
<hr size="5" color="green" width="1600" noshade>
<!-- 标题2 并设置标题2居中-->
<h2 align="center">
<font size="5" color="red" face="楷体">
先秦:佚名
</h2>
<!-- 设置水平线的粗细,颜色,宽度和去阴影-->
<hr size="10" color="red" width="1600" noshade>
<!--段落-->
<p align="center">
<font size="4" color="black" face="楷体">
<b><i>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</i></b>
<br>
<b><u>参差荇菜,左右流之。窈窕淑女,寤寐求之。</u></b>
<br>
<b><s>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</s></b>
<br>
<b>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</b>
<br>
<b>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</b>
<br>
</p>
</body>
</html>
运行效果:
顺便推荐一个朋友的微信公众号,写的是关于android系统相关的知识,干货多多!
微信公众号:tmac_lover