HTML学习3---排版标记

来源：互联网发布：知乎如何钓鱼编辑：程序博客网时间：2024/05/20 19:47

上节，我们学习了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

阅读全文

0 0