[返回首页]
 ◎ 您当前的位置：首页 >> 站长学堂 >> 网页设计 >> Html/Css >> 正文
HTML语言剖析(3)
作者：未知 来源：网上收集 发布时间：2007-3-23 15:58:02 浏览次数： 0732316511697050

清单标记
<OL> <LI>
<UL>
<MENU> <DIR>
<DL> <DT> <DD>
■ <OL> <LI> :
<OL>称为顺序清单标记。<LI>则用以标示清单项目。
所谓顺序清单就是在每一项前面加上 1,2,3... 等数目，又称编号清单。

<OL> 的参数设定（常用）：
例如： <ol type="i" start="4"></ol>

  • type="i"
    设定数目款式，其值有五种，请参考 右表，内定为 type="1"。
  • start="4"
    设定开始数目，不论设定了哪一数 目款式，其值只能是 1,2,3.. 等整 数，内定为 start="1"。
TypeNumbering style
1arabic numbers1, 2, 3, ...
alower alphaa, b, c, ...
Aupper alphaA, B, C, ...
ilower romani, ii, iii, ...
Iupper romanI, II, III, ...

<LI> 的参数设定（常用）：
例如： <li type="square" value="4">

  • type="square"
    只适用于非顺序清单，设定符号款式，其值有三种，如下，内定为 type="disc"：
    符号 是当 type="disc" 时的列项符号。
    符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
    符号 是当 type="square" 时的列项符号。
  • value="4"
    只适用于顺序清单，设定该一项的数目，其後各项将以此作为起始数目而递增， 但前面各项则不受影响，其值只能是 1,2,3.. 等整数，没有内定值。

例子：
HTML Source Code （原始码）浏览器显示结果
My best friends:
<ol>
<li>Michelle Wei
<li>Michael Wan
<li>Gloria Lam
</ol> 		My best friends:
  1. Michelle Wei
  2. Michael Wan
  3. Gloria Lam

■ <UL> ：
<UL>称为无序清单标记。
所谓无序清单就是在每一项前面加上 、、 等符号，故又称符号清单。

<UL> 的参数设定（常用）：
例如： <UL type="square">

  • type="square"
    设定符号款式，其值有三种，如下，内定为 type="disc"：
    符号 是当 type="disc" 时的列项符号。
    符号 是当 type="circle" 时的列项符号。
    符号 是当 type="square" 时的列项符号。

注意：由于 <UL> 及 <LI> 都有 type 这个参数，两者尽可能选用其一。

例子：
HTML Source Code （原始码）浏览器显示结果
My Homepages:
<ul>
<li>Penpals Garden
<li>ICQ Garden
<li>Software City
<li>Creation of Webpage
</ul> 		My Homepages:
  • Penpals Garden
  • ICQ Garden
  • Software City
  • Creation of Webpage

■ <MENU> <DIR> ：
这两个标记都不为 W3C 所赞同，希望用者能以 <ul> 及 <ol> 代之。
<MENU> 及 <DIR>，基本上它和 <ul> 是一样的，在一些特别的浏览器可能表现出 <ol> 的 效果，于旧版的 IE 或 NC 标记 <DIR> 不显示符号或数目。两标记的用法与 <ul> 完全一 样。

例子：
HTML Source Code （原始码）浏览器显示结果
My Homepages:
<dir>
<li>Penpals Garden
<li>ICQ Garden
<li>Software City
<li>Creation of Webpage
</dir> 		My Homepages:
  • Penpals Garden
  • ICQ Garden
  • Software City
  • Creation of Webpage

    • ■ <DL> <DT> <DD> :
    <DL>称为定义清单标记。 <DT> 用以标示定义条目，<DD> 则用以标示定义内容。
    所谓定义清单就是一种分二层的项目清单，其不故符号及数目。

    三个标记都没有常用的参数。而 <DT> <DD> 可以独立使用，只是一些旧的浏览器并不支 援，如 IE 3.0。常用的如 <DD> 标记可用以制造段落第一个字前面的空白。

    例子：
    原始码<dl>
    <dt>How to use Definition List
    <dd>First, you should not place paragraph tag right after or before a list strUCture or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.
    <dt>Other things to know
    <dd>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.
    </dl>
    显示结果
    How to use Definition List
    First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.
    Other things to know
    We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.

     

    表格标记

    <TABLE> <TR> <TD>
    <TH>
    <CAPTION>
    ■ <TABLE> <TR> <TD> ：
    这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。
    <TABLE>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用，属容器标记的还有其他。
    <TR>用以标示表格列（row）
    <TD>用以标示储存格（cell）

    <TABLE> 的参数设定（常用）：
    例如： <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">

    • width="400"
      表格宽度，接受绝对值（如 80）及相对值（如 80%）。

    • border="1"
      表格边框厚度，不同浏览器有不同的内定值，故请指明。

    • cellspacing="2"
      表格格线厚度，请看例子三，那是加厚到 5 的格线。

    • cellpadding="2"
      文字与格线的距离，请看例子四，那是加至 10 的 padding。

    • align="CENTER"
      表格的摆放位置（水平），可选值为： left, right, center，请看例子五或六，那表格 是放于中间的，为怕一些浏览器不支援，故特加上居中标记<CENTER>，只是多 层保证而己，当然只用<CENTER>亦可。

    • valign="TOP".
      表格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

    • background="myweb.gif"
      表格　纸，与 bgcolor 不要同用。

    • bgcolor="#0000FF"
      表格底色，与 background 不要同用，请看例子六。

    • bordercolor="#FF00FF"
      表格边框颜色，NC 与 IE 有不同的效果，请看例子六。

    • bordercolorlight="#00FF00"
      表格边框向光部分的颜色，请看例子二。『只适用于 IE』

    • bordercolordark="#00FFFF"
      表格边框背光部分的颜色，请看例子二，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

    • cols="2"
      表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。

    <TR> 的参数设定（常用）：
    例如：<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

    • align="RIGHT"
      该一列内字画等的摆放贴　位置（水平），可选值为： left, center, right。

    • valign="MIDDLE"
      该一列内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

    • bgcolor="#0000FF"
      该一列底色，请看例子五。

    • bordercolor="#FF00FF"
      该一列边框颜色，请看例子三。『只适用于 IE』

    • bordercolorlight="#808080"
      该一列边框向光部分的颜色，请看例子三。『只适用于 IE』

    • bordercolordark="#FF0000"
      该一列边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

    <TD> 的参数设定（常用）：
    例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

    • width="48%"
      该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。

    • height="400"
      该一储存格高度。

    • colspan="5"
      该一储存格向右打通的栏数。请看例子六

    • rowspan="4"
      该一储存格向下打通的列数。请看例子六

    • align="RIGHT"
      该一储存格内字画等的摆放贴　位置（水平），可选值为： left, center, right。

    • valign="BOTTOM"
      该一储存格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

    • bgcolor="#FF00FF"
      该一储存格底色，请看例子四。

    • bordercolor="#808080"
      该一储存格边框颜色，请看例子三。『只适用于 IE』

    • bordercolorlight="#FF0000"
      该一储存格边框向光部分的颜色，请看例子三。『只适用于 IE』

    • bordercolordark="#00FF00"
      该一储存格边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

    • background="myweb.gif"
      该一储存格　纸，与 bgcolor 任用其一。

    例子一：
    原始码<table width="60%" border="1">
    <tr><td>只有一个储存格（cell）的表格</td></tr>
    </table>
    显示结果

     
    只有一个储存格（cell）的表格

    例子二：
    原始码<table width="60%" border="5" bordercolorlight="#FF00FF" bordercolordark="#FF0000">
    <tr><td>第一列第一栏</td><td>第一列第二栏</td></tr>
    </table>
    显示结果

     
    第一列第一栏第一列第二栏

    例子三：
    原始码<table width="60%" border="1" cellspacing="5">
         <tr bordercolor="#0000FF">
    <td>第一列第一栏</td>
    <td>第一列第二栏</td>
         </tr>
         <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00">
    <td>第二列第一栏</td>
    <td>第二列第二栏</td>
         </tr>
    </table>
    显示结果

     
    第一列第一栏第一列第二栏
    第二列第一栏第二列第二栏

    例子四：
    原始码<table width="60%" border="1" cellpadding="10">
         <tr>
    <td bgcolor="#FFCCE6">第一列第一栏</td>
    <td bgcolor="#FFFFC6">第一列第二栏</td>
         </tr>
         <tr>
    <td bgcolor="#FFD9FF">第二列第一栏</td>
    <td bgcolor="#DAB4B4">第二列第二栏</td>
         </tr>
    </table>
    显示结果

     
    第一列第一栏第一列第二栏
    第二列第一栏第二列第二栏

    例子五：
    原始码<center>
    <table width="60%" cellspacing="0" cellpadding="2" align="CENTER">
         <tr>
    <td bgcolor="#FFD2E9">第一列第一栏</td>
    <td bgcolor="#FFDAB5">第一列第二栏</td>
    <td bgcolor="#FFFFB5">第一列第三栏</td>
         </tr>
         <tr bgcolor="#C0C0C0">
    <td>第二列第一栏</td>
    <td>第二列第二栏</td>
    <td>第二列第三栏</td>
         </tr>
    </table>
    </center>
    显示结果

    第一列第一栏第一列第二栏第一列第三栏
    第二列第一栏第二列第二栏第二列第三栏

    例子六
    原始码<center>
    <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">
         <tr>
    <td>第一列第一栏</td>
    <td colspan="2">第一列 之 第二栏及第三栏</td>
         </tr>
         <tr>
    <td rowspan="2">第二列及第三列 之 第一栏</td>
    <td>第二列第二栏</td>
    <td>第二列第三栏</td>
         </tr>
         <tr>
    <td>第三列第二栏</td>
    <td>第三列第三栏</td>
         </tr>
    </table>
    </center>
    显示结果

    第一列第一栏第一列 之 第二栏及第三栏
    第二列及第三列 之 第一栏第二列第二栏第二列第三栏
    第三列第二栏第三列第三栏

    ■ <TH> ：
    <TH>与<TD>同样是标示一个储存格，唯一不同的是<TH>所标示的储存格中的文字是以粗 体出现，通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以，其参数 设定请参考<TD>。
    当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。

    例子：
    原始码<center>
    <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
         <tr align="CENTER">
    <th>Month</th><th>% of IE visitor</th><th>% of NC visitor</th>
         </tr>
         <tr align="CENTER">
    <td>August</td><td>61%</td><td>39%</td>
         </tr>
         <tr align="CENTER">
    <td>July</td><td>54%</td><td>46%</td>
         </tr>
         <tr align="CENTER">
    <td>June</td><td>52%</td><td>48%</td>
         </tr>
    </table>
    </center>
    显示结果

    Month% of IE visitor% of NC visitor
    August61%39%
    July54%46%
    June52%48%

    ■ <CAPTION> ：
    <CAPTION> 的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。 当然亦可置于下方，通常用以存放该表格的标题。

    <CAPTION> 的参数设定（常用）：
    例如：<caption align="TOP" valign="TOP"></caption>

    • align="TOP"
      该表格标题列相对于表格的摆放贴　位置（水平），可选值为： left, center, right, top, middle, bottom，若 align="bottom" 的话标题列便会出现对表格的下方，不管你 的原始码中把 <caption> 放在 <table> 中的头部或尾部。

    • valign="TOP"
      该表格标题列相对于表格的摆放位置（上下），可选值为： top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的，虽然功能重复了，但如果你要标题列 置于下方及向右或向左贴　，那末两个参数便可一　用了。当只　一个参数时， 请首选 align，因为 valign 是由 HTML 3.0 才开始的参数。

    例子：
    原始码<center>
    <table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
    <caption>网页速成 八月份访客浏览器使用分析</caption>
         <tr align="CENTER">
    <th>Month</th>
    <th>% of IE visitor</th>
    <th>% of NC visitor</th>
         </tr>
         <tr align="CENTER">
    <td>August</td>
    <td>61%</td>
    <td>39%</td>
         </tr>
    </table>
    </center>
    显示结果

    网页速成 八月份访客浏览器使用分析
    Month% of IE visitor% of NC visitor
    August61%39%

    [返回上一页] [打 印]
    上一篇文章：HTML语言剖析(2) | 下一篇文章：HTML语言剖析(4)
    热点文章 推荐文章 相关信息
    ·HTML中meta作用
    ·网页表单自动填写技术(gmail为例)
    ·根据分辨率不同调用不同的css文件
    ·DIV下图片自适应解决方法
    ·怎样在Web开发中完美控制IE标题栏
    ·玩转表格 让你的网页炫起来
    ·凸显个性 网页右键菜单我作主
    ·用CSS打造可折叠伸缩名片菜单
    ·用相对定位和负向移动完成图片象框阴
    ·CSS+DIV:让文本字符环绕在你的图片周
    ·用CSS做滑动效果的图片画廊
    ·CSS里也能写脚本？