细说HTML标签
1 网页架构
<HTML>
<HEAD>
<TITLE>
智勇之家网页制作教学</TITLE>
<Meta>
</HEAD>
<BODY>
BODY之间则为主要语法所在，也是网页的主要呈现部分。
</BODY>
</HTML>
【标签解说】
以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。
简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
在抬头的部份<HEAD></HEAD>中，有另一组标签<TITLE></TITLE>。打在<TITLE></TITLE>这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。
您可能会发现，为什么我一直没提到<HTML></HTML>这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。
2 分隔标签
【文字上的分隔标签】 或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！
- 使用方法：强制断行标签<br>、强制分段标签<p>
- 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（<br>），或是在写完某一段的时候便会分段（<p>），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。
- 使用范例
| 原始码 | 呈现结果 | | 这是一个断行的范例<br>看出来了吗？ | 这是一个断行的范例
看出来了吗？ | | 这是一个分段的范例<p>基本上他会比断行还多空出一行 | 这是一个分段的范例 基本上分段会比断行还多空出一行
|
|
【分隔线标签】
- 使用方法：上一段文字内容<hr>下一段文字内容
- 标签解说：利用<hr>这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下：
- 使用范例：
| 一般用法 | 尚未加任何属性。 |
| 原始码 | 普通分隔线<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> |
| 呈现结果 | 实心分隔线（无阴影） |
3 排版标签
【文字置左、置中、置右】
- 使用方法：老实说，刚刚我们学过的分段标签<p>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：
| 原始码 | 呈现结果 | | <p align="left">文字靠左</p> | 文字靠左
| | <p align="center">文字置中</p> | 文字置中 | | <p align="right">文字靠右</p> | 文字靠右 |
标签解说：嗯！秘诀就在于“align=对齐位置”而已啦！align是分段标签<p>的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。
【置中标签】
- 使用方法：<center>这是置中</center>
- 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！
- 使用范例：
| 原始码 | 呈现结果 | | <center>这是最中间</center> | 这是最中间
|
【向右缩排标签】
- 使用方法：<blockquote>要缩排的文字</blockquote>
- 标签解说：利用<blockquote></blockquote>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。
- 使用范例：
| 原始码 | 呈现结果 | | <blockquote>缩排1单位</blockquote> |
缩排1单位
| | <blockquote><blockquote>缩排2单位</blockquote></blockquote> |
缩排2单位
|
【保存原始格式标签】
- 使用方法：<pre>文字内容<pre>
- 标签解说：利用<pre></pre>这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。
- 使用范例：
| 原始码 | 呈现结果 | <pre>
文 字
格 式
</pre> | 文 字 格 式 |
|
4 字体标签
【标题标签】
- 使用方法：<h1>标题内容</h1>
- 标签解说：标题的大小一共有六种，两个标签一组，也就是从<h1>到<h6>，<h1>最大，<h6>最小。使用标题标签时，该标签会将字体变成粗体字，并且会自成一行。
- 使用范例：
| 原始码 | 呈现结果 | | <h1>标题一</h1> | 标题一 | | <h2>标题二</h2> | 标题二 | | <h3>标题三</h3> | 标题三 | | <h4>标题四</h4> | 标题四 | | <h5>标题五</h5> | 标题五 | | <h6>标题六</h6> | 标题六 |
【设定字体大小标签】
- 使用方法：<font size=3>文字内容</font>
- 标签解说：标题的大小一共有七种，也就是<font size=1>（最小）到<font size=7>（最大），另外，还有一种写法：<font size=+1>文字内容</font>，其意思就是说：比预设字大一级。当然也可以 font size=+2（比预设字大二级），或是 font size=-1（比预设字小一级），以一般而言，预设字体多为 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> | 字体七 |
【字型变化标签】
- 使用方法：<b>文字</b>
- 标签解说：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如‘强调’、‘原始码’...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标签。
- 使用范例：
| 原始码 | 呈现结果 | | <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> | 所在地址 |
【文字颜色设定】
- 使用方法：<font color="#fefecb">文字颜色</font>
- 标签解说：文字也可以设定颜色喔！至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧！
- 使用范例：
| 原始码 | 呈现结果 | | <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> | 灰色的字喔！ |
- 5 文字标签
【文字字型设定】
- 使用方法：<font face="字型名称">文字</font>
- 标签解说：网页上也可以使用字型喔！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是宋体。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显现，不过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来显示，所以不用怕会一团乱！ 另外，如果您的网页中有加上这一行叙述<meta http-equiv="content-type" c>（指定网页的语言格式，以后我会解释），那么，netscape可以正确显示出中文，但英文无反应。若没有加该行，那么英文会正确显示，但中文却仍是宋体。至于 ie 系列，均能正常显示。
- 使用范例：
| 原始码 | 呈现结果 | | <font face="楷体_GB2312">楷体_GB2312</font> | 楷体_GB2312 | | <font face="华康俪中黑">华康俪中黑</font> | 华康俪中黑 |
【特殊字元】
- 使用方法：
- 标签解说：很多特殊的符号是需要特别处理的，比如说" < "、" > "这两个符号若想要呈现在网页上是没有办法直接打" < "的，要呈现" < "必须输入编码表示法：“<”，常用的如下：
- 使用范例：
| 原始码 | 呈现结果 | | | ( 代表一个不断行空白) | | < | < | | > | > | | & | & | | " | " |
【设定文字内定值大小】
- 使用方法：<basefont size="1~7">
- 标签解说：这个标签可以改变文字大小的内定值，直接加在<body>标签之后就行了。一般而言，若是没有特别设定，文字大小内定值预定值为3。
|
6 影像标签
【影像标签】 在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您要的图，档名大小写不一致，如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但是一但传到网路上去时，因为系统不一样的关系（电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样的档案了，所以，可别忽略档名大小写不一致的影响。 另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我们先来看看影像的标签如何写。
- 使用方法：<img src="boy.gif" alt="本站特约模特儿" align=right border=0 hspace=2 vspace=2 height=56 width=32>
- 标签解说：目前常见的网页图形格式有两种就是gif及jpg两种格式。gif格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而jpg格式的图案是全彩失真压缩，比较适合一大堆颜色的图片，如照片就较适合用jpg格式来呈现。
- 使用范例：
| 基本用法 | 用法：<img src="图档名称、路径">
显示图片最基本的方法（就是不加任何属性啦！）其中 boy.gif 就是图档的档名。 | | 原始码 | <img src="http://www.ezhy.com/logo/logo2.gif">嗨！我是本站的模特儿喔！ | | 呈现结果 |  嗨！我是本站的模特儿喔！ |
| 长宽设定 | 用法：<img src="图档" height="高度" width="宽度">
设图片的大小，其实不用设也可以，但是有设更好，可以加快浏览速度，因为浏览器就不用在那边花时间算您的图片有多大啦！此外您也可以自己随意设定图片大小。 | | 原始码 | <img src="http://www.ezhy.com/logo/logo2.gif"> | | 呈现结果 | |
| 加上说明 | 用法：<img src="图档" alt="说明文字">
滑鼠一到图上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段字代替，让使用者知道这个未显示出来的图片究竟是干嘛用的。 | | 原始码 | <img src="http://www.ezhy.com/logo/logo2.gif" alt="本站特约模特儿">移到图上看看。 | | 呈现结果 | 移到图上看看。 |
| 图片位置 | 用法：<img src="图档" align="位置">
图片位置设定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成‘文绕图’的效果。 | | 原始码 | <img src="http://www.ezhy.com/logo/logo2.gif" align=right>嗨！我往右边靠！ | | 呈现结果 | 嗨！我往右边靠！ | | 原始码 | <img src="http://www.ezhy.com/logo/logo2.gif" align=left>嗨！我往左边靠！ | | 呈现结果 | 嗨！我往左边靠！ | | 原始码 | <img src="http://www.ezhy.com/logo/logo2.gif" align=top>文字对齐我头顶！
| | 呈现结果 | 文字对齐我头顶！ | | 原始码 | <img src="http://www.ezhy.com/logo/logo2.gif" align=bottom>文字对齐我脚底！ | | 呈现结果 | 文字对齐我脚底！ | | 原始码 | <img src="http://www.ezhy.com/logo/logo2.gif" align=middle>文字对齐我中间！ | | 呈现结果 | 文字对齐我中间！ | | 原始码 | <img src="http://www.ezhy.com/logo/logo2.gif" align=absmiddle>文字对齐我绝对中间！ | | 呈现结果 | 文字对齐我绝对中间！ |
| 边框设定 | 用法：<img src="图档" border="边框粗细">
设定边框大小，通常都设成 0 感觉比较美观啦！因为内定的框框实在是不怎么漂亮....。尤其在连结时，设框框简直是丑毙了...。 | | 原始码 | <img src="http://www.ezhy.com/logo/logo2.gif" border="4"> | | 呈现结果 | |
| 左右间距 | 用法：<img src="图档" hspace="离左右物件的距离">
离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。 | | 原始码 | 左边的字<img src="http://www.ezhy.com/logo/logo2.gif" hspace="15">右边的字 | | 呈现结果 | 左边的字右边的字 |
| 上下间距 | 用法：<img src="图档" vspace="离上下物件的距离">
离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。 | | 原始码 | 上面的字<br><img src="http://www.ezhy.com/logo/logo2.gif" vspace="15"><br>下面的字 | | 呈现结果 | 上面的字
下面的字 |
|
|
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
