学习HTML实例(一)

王乐散 2011-10-16

展开全文

html的样式style 和颜色color

<html>
<body style="background-color:PowderBlue">
<h1>Look! Styles and Colors</h1>
<p style="font-family:Verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30Px">
This text is 30 pixels high</p>
<body>
<html>

HTML 样式实例 - 字体、颜色和尺寸

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px">A paragraph</p>
</body>
</html>

设置字体的旧方法
<html>
<body>
<h1><font face="verdana">A heading</font></h1>
<p><font size="5" face="arial" color="red">A paragraph.</font></p>
</body>
</html>

HTML 样式实例 - 文本对齐
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>
超级连接
<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>

图像来作链接
html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
HTML 链接 - target 属性
<a href="http://www.hao123.com/" target="_blank">Visit 好123!</a>

创建电子邮件链接
<html>
<body>
<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>

另一种邮件连接
<html>
<body>
<p>
这是另一个 mailto 链接：
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>

带有边框的表格
<html>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>

表格的表头
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符&nbsp，就可以将边框显示出来。

带标题 (caption) 的表格
<h4>这个表格有一个标题，以及粗边框：</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>

跨行或跨列的表格单元格

<html>

<body>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>

表格内的标签

<html>

<body>

<table border="1">
<tr>
<td>
   <p>这是一个段落。</p>
   <p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格：
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表：
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
</td>
<td>HELLO</td>
</tr>
</table>

</body>
</html>

单元格边距

<html>

<body>

<h4>没有 cellpadding：</h4>
<table border="1">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>

</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1"; cellpadding="10">
     <tr>
         <td>First</td>
         <td>Row</td>
    </tr>
     <tr>
          <td>Second</td>
          <td>Row</td>
     </tr>
  </table>
</body>
</html>

单元格间距cellspacing
<html>
<body>
<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>带有 cellspacing：</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>

向表格填加背景颜色和背景图像
<h4>背景颜色：</h4>
<table border="1"
bgcolor="red">

向表格单元添加背景颜色和背景图像

<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="/i/eg_bg_07.gif">
Second</td>

表格单元中排列《align》

<html>

<body>