学步园

或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！

1. 使用方法：强制断行标签<br>、强制分段标签<p>

2. 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（<br>），或是在写完某一段的时候便会分段（<p>），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。

3. 使用范例：
   

   原始码	呈现结果
   这是一个断行的范例<br>看出来了吗？	这是一个断行的范例 看出来了吗？
   这是一个分段的范例<p>基本上他会比断行还多空出一行	这是一个分段的范例 基本上分段会比断行还多空出一行

【分隔线标签】

1. 使用方法：上一段文字内容<hr>下一段文字内容

2. 标签解说：利用<hr>这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下：

3. 使用范例：
   

   一般用法	尚未加任何属性。
   原始码	普通分隔线<hr>
   呈现结果	普通分隔线

   颜色属性	用法：<hr color="颜色码或颜色名称">
   原始码	橘色分隔线<hr color="#ff8000">
   呈现结果	橘色分隔线

   宽度属性	用法：<hr width="宽度">，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占萤幕50%。
   原始码	宽度为240px的分隔线<hr width="240">
   呈现结果	宽度为240px分隔线

   厚度属性	用法：<hr size="厚度">
   原始码	厚度为5的分隔线<hr size="5">
   呈现结果	厚度为5分隔线

   位置属性	用法：<hr align="水平对齐位置">，其设定值有三个，也就是置左align="left"、置中align="center"、置右align="right"
   原始码	靠右的分隔线<hr align="right">
   呈现结果	靠右的分隔线

   阴影属性	用法：<hr noshade>，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。
   原始码	实心分隔线（无阴影）<hr noshade>
   呈现结果	实心分隔线（无阴影）

1. 使用方法：老实说，刚刚我们学过的分段标签<p>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：

   原始码	呈现结果
   <p align="left">文字靠左</p>	文字靠左
   <p align="center">文字置中</p>	文字置中
   <p align="right">文字靠右</p>	文字靠右

   标签解说：嗯！秘诀就在于“align=对齐位置”而已啦！align是分段标签<p>的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。

【置中标签】

1. 使用方法：<center>这是置中</center>

2. 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！

3. 使用范例：
   

   原始码	呈现结果
   <center>这是最中间</center>	这是最中间

【向右缩排标签】

1. 使用方法：<blockquote>要缩排的文字</blockquote>

2. 标签解说：利用<blockquote></blockquote>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。

3. 使用范例：
   

   原始码	呈现结果
   <blockquote>缩排1单位</blockquote>	缩排1单位
   <blockquote><blockquote>缩排2单位</blockquote></blockquote>	缩排2单位

【保存原始格式标签】

1. 使用方法：<pre>文字内容<pre>

2. 标签解说：利用<pre></pre>这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。

3. 使用范例：
   

   原始码	呈现结果
   <pre> 文　字 　格　式 </pre>	文　字 　格　式

1. 使用方法：<h1>标题内容</h1>

2. 标签解说：标题的大小一共有六种，两个标签一组，也就是从<h1>到<h6>，<h1>最大，<h6>最小。使用标题标签时，该标签会将字体变成粗体字，并且会自成一行。

3. 使用范例：
   

   原始码	呈现结果
   <h1>标题一</h1>	标题一
   <h2>标题二</h2>	标题二
   <h3>标题三</h3>	标题三
   <h4>标题四</h4>	标题四
   <h5>标题五</h5>	标题五
   <h6>标题六</h6>	标题六

【设定字体大小标签】

1. 使用方法：<font size=3>文字内容</font>

2. 标签解说：标题的大小一共有七种，也就是<font size=1>（最小）到<font size=7>（最大），另外，还有一种写法：<font size=+1>文字内容</font>，其意思就是说：比预设字大一级。当然也可以 font size=+2（比预设字大二级），或是 font size=-1（比预设字小一级），以一般而言，预设字体多为 3。

3. 使用范例：
   

   原始码	呈现结果
   <font size=1>字体一</font> 或是 <font size=-2>字体一</font>	字体一
   <font size=2>字体二</font> 或是 <font size=-1>字体二</font>	字体二
   <font size=3>字体三</font> 或是 <font size=+0>字体三</font>	字体三
   <font size=4>字体四</font> 或是 <font size=+1>字体四</font>	字体四
   <font size=5>字体五</font> 或是 <font size=+2>字体五</font>	字体五
   <font size=6>字体六</font> 或是 <font size=+3>字体六</font>	字体六
   <font size=6>字体七</font> 或是 <font size=+4>字体七</font>	字体七

【字型变化标签】

1. 使用方法：<b>文字</b>

2. 标签解说：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如‘强调’、‘原始码’...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标签。

3. 使用范例：
   

   原始码	呈现结果
   <b>粗体</b>	粗体
   <i>斜体</i>	斜体
   <u>底线</u>	底线
   <sup>上标</sup>	上标
   <sub>下标</sub>	下标
   <tt>打字机</tt>	打字机
   <blink>闪烁</blink>（ie没效果）	闪烁
   <em>强调</em>	强调
   <strong>加强</strong>	加强
   <samp>范例</samp>	范例
   <code>原始码</code>	原始码
   <var>变数</var>	变数
   <dfn>定义</dfn>	定义
   <cite>引用</cite>	引用
   <address>所在地址</address>	所在地址

【文字颜色设定】

1. 使用方法：<font color="#fefecb">文字颜色</font>

2. 标签解说：文字也可以设定 颜色喔！至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧！

3. 使用范例：
   

   原始码	呈现结果
   <font color="#ff0000">红</font>	红色的字喔！
   <font color="#ff8000">橙</font>	橙色的字喔！
   <font color="#ffff00">黄</font>	黄色的字喔！
   <font color="#00ff00">绿</font>	绿色的字喔！
   <font color="#0080ff">蓝</font>	蓝色的字喔！
   <font color="#0000a0">靛</font>	靛色的字喔！
   <font color="#8000ff">紫</font>	紫色的字喔！
   <font color="#000000">黑</font>	黑色的字喔！
   <font color="#c0c0c0">灰</font>	灰色的字喔！