<![CDATA[延年松鹤]]> http://hi.baidu.com http://hi.baidu.com http://img.baidu.com/img/logo-hi.gif http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7 zh-cn www.baidu.com 5 <![CDATA[表格中的表格]]>
这是综合性的表格：

==============================

table2.htm

=========================

html>
<body>

<table border="1">
<tr>
<td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
</td>
<td>此单元包含一个table（表格）:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
</td>
</tr>
<tr>
<td>此单元包含一个list（列表）
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
</td>
<td>你好</td>
</tr>
</table>

</body>
</html>
====================================

阅读全文
类别：默认分类 查看评论]]> 2009-11-28 15:34 http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7/blog/item/0d09ff8be8a86c18c8fc7ab8.html <![CDATA[html中的表格标签table]]> 有3个近义词：table表格，list 列表 ， form表单。

先说 table:

Table表格
用 table标签 . 又用 tr标签来划分行, 每行又用td标签来划分数据单元data cell
td 即"table data,"就是表格数据.数据单元可包含 text文本, images图片, lists列表
paragraphs段落, forms表单, horizontal rules水平线, tables表格（表格中的表格）等。
如： table1.htm

====================================<br>
<table border="1">
<tr>
<td>row 1第一行, cell 1第一单元</td>
<td>row 1第一行, cell 2第二单元</td>
</tr>
<tr>
<td>row 2第二行, cell 1第一单元</td>
<td>row 2第二行, cell 2第二单元</td>
</tr>
</table>
====================================<br>
网页上的效果：


==================================

代码中 border="1"   是表格的边界粗细属性。

将它改为：border=“4” ，看看效果如何？

阅读全文
类别：默认分类 查看评论]]> 2009-11-27 21:33 http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7/blog/item/72091e13e09c198a6438db62.html <![CDATA[img标签内的属性ismap的作用]]> 将普通图片变为image map

编一个 ismap.htm 文件：
==========================
<html>
<body>

<p>
将鼠标在图片内移动, 看看状态栏有无坐标变化。如果有，就是image map了。
如果没有坐标变化出现，就不是。

</p>

<p>
<a href="ismap.htm">
<img src="planets.gif"
ismap width="146" height="126">
</a>
</p>

</body>
</html>
=========================================
再编一个 no_ismap.htm 文件：无ismap属性的。
===============================
<html>
<body>

<p>
将鼠标在图片内移动, 看看左下角状态栏有无坐标变化。如果有，就是image map了。
如果没有坐标变化出现，就不是。

</p>

<p>
<a href="no_ismap.htm">
<img src="planets.gif"
width="146" height="126">
</a>
</p>

</body>
</html>
===============================
对比一下这两个htm文件的效果，看看如何？

---------------------------------
planets.gif 保存在同一文件夹内：


-------------------------------------

用右键》图片另存为》到你的硬盘内。

阅读全文
类别：默认分类 查看评论]]> 2009-11-26 15:24 http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7/blog/item/57335907e50729c77a894745.html <![CDATA[html中的map标签]]>
               html中的map标签
<map> 标签用来定义用户端的 image-map（图片-映射）. 图片-映射就是图中有若干个可点击区area的图形.

在map标签中要求有name属性.此属性加上 <img>的 usemap 属性来建立image图片和map映射之间的关系.

map 标签包含大量 area元素, 以便定义在 image map中的可点击区 area.

例子：planets.htm
========================================
<html>
<body>

<p>
点击其中一个行星可看得更详细:
</p>

<img src="planets.gif"
width="145" height="126"
usemap="#planetmap">

<map id="planetmap" name="planetmap">

<area shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.htm">

<area shape="circle"
coords="90,58,3"
alt="Mercury"
href="mercur.htm">

<area shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm">

</map>

<p><b>注意:</b> 在img标签中 "usemap" 属性用到map标签中的 "id" 或 "name" 属性(依所用的浏览器而定) ,<br>
因此 map标签中必须加上 "id" 和 "name"两个属性.</p>

</body>
</html>
==============================================================
其中必须加上3个附加htm文件：sun.htm , mercur.htm, venus.htm
=============================
<html>
<body>
<p>

<a href="sun.htm">
<img border="0" src="sun.gif" width="65" height="65">
</a>
</p>

</body>
</html>
=====================================
<html>
<body>
<p>

<a href="mercur.htm">
<img border="0" src="merglobe.gif" width="65" height="65">
</a>
</p>

</body>
</html>
=====================================
<html>
<body>
<p>

<a href="venus.htm">
<img border="0" src="venglobe.gif" width="65" height="65">
</a>
</p>

</body>
</html>
==========================================
此外还要4个gif图片：planets,sun,merglobe,venglobe.把它们都放在同一文件夹中。
此4个小图可在下面分别用右键‘图片另存为’复制到你的硬盘中。

/////////////////////////////////////////////////////////////////////

效果：

planets
sun
venglobe
merglobe



其中：rect=矩形，circle=圆，coords=形状坐标（矩形对角两点、圆心及半径），area有3个。

venus=金星，mercury=水星。area标签不成对，它是嵌套在map标签内的。

由此，我们可以理解为什么有些网页挑浏览器，即有些浏览器可以看，而有些浏览器却不能看。那可能是

因为map标签内的id和name两个属性都应该同时加上而它没有加。

所以就出现上述问题啦！

阅读全文
类别：默认分类 查看评论]]> 2009-11-25 15:48 http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7/blog/item/cf3ccfa70009059fd143583a.html <![CDATA[html中图片大小的改变]]> <html>
<body>

<p>
<img src="http://www.w3schools.com/html/hackanm.gif"
width="20" height="20">
</p>

<p>
<img src="http://www.w3schools.com/html/hackanm.gif"
width="45" height="45">
</p>

<p>
<img src="http://www.w3schools.com/html/hackanm.gif"
width="70" height="70">
</p>

<p>
你可以改变img标签属性中的 width="xx"和height="xx"来改变图片的大小 .
</p>

</body>
</html>

============================================

效果：

阅读全文
类别：默认分类 查看评论]]> 2009-11-25 12:54 http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7/blog/item/423e42fceca04688b901a0b8.html <![CDATA[html图片的浮动安排]]> <html>
<body>

<p>
<img src ="http://www.w3schools.com/html/hackanm.gif"
align ="left" width="48" height="48">
这是带有图片的段落.<br> 图片的安排位置： "left".<br> 图片就会浮动（float）到文本的左边.
</p>

<p>
<img src ="http://www.w3schools.com/html/hackanm.gif"
align ="right" width="48" height="48">
这是带有图片的段落.<br> 图片的安排位置："right".<br> 图片就会浮动（float）到文本的右边.
</p>

</body>
</html>

==============================================

效果：


阅读全文
类别：默认分类 查看评论]]> 2009-11-25 12:32 http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7/blog/item/6d2cd482d21d1ca80cf4d2aa.html <![CDATA[html背景图的插入]]> <html>
<body background="mypic.jpg">

<h3>Look: A background image看：这里的背景图!</h3>

<p> gif和 jpg文件都可用作HTML背景.</p>

<p>如果图片小于页面, 图片就会自动重复.</p>

</body>
</html>

============================================

在body的开始标签属性中插入背景图。图片可自己随便选。

我选了win7中的一幅示例图片“八仙花”，调浅颜色，改名为mypic。

把它放在此htm文件旁边。

效果：


阅读全文
类别：默认分类 查看评论]]> 2009-11-24 13:04 http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7/blog/item/d020de43ac3c7b1b9313c696.html <![CDATA[html图片在文本中的位置]]>

<html>
<body>

<p>
图片
<img src="http://www.w3schools.com/html/hackanm.gif"
align="bottom" width="48" height="48">
在文本中的位置底部靠齐，较高。
</p>

<p>
图片
<img src ="http://www.w3schools.com/html/hackanm.gif"
align="middle" width="48" height="48">
在文本中的位置中部靠齐。
</p>

<p>
图片
<img src ="http://www.w3schools.com/html/hackanm.gif"
align="top" width="48" height="48">
在文本中的位置顶部靠齐，较低。
</p>

<p>注意"bottom" 靠齐底部是默认位置，你不说明时即自动底部靠齐</p>

<p>
图片
<img src ="http://www.w3schools.com/html/hackanm.gif"
width="48" height="48">
在文本中的默认位置。
</p>

<p>
<img src ="http://www.w3schools.com/html/hackanm.gif"
width="48" height="48">
图片在文本的前面。

<p>
图片在文本的后面。
<img src ="http://www.w3schools.com/html/hackanm.gif"
width="48" height="48">
</p>

</body>
</html>

=============================================

效果：




阅读全文
类别：默认分类 查看评论]]> 2009-11-23 13:55 http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7/blog/item/583aff0e3afc10c07bcbe157.html <![CDATA[同一文档中的局部位置链接方法：名称锚Named Anchor]]> <html>
<body>

<p>
<a href="#C4">See also Chapter 4.</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

================================================

将上述内容复制粘贴到记事本，另存为：location.htm     保存类型改为：所有文件。

点击location ,点击:See Also Chapter 4

=================================

通过本例，可以理解在同一文档中链接名称锚的方法：

<p>

<a href="#C4">See also Chapter 4.</a>

</p>

<h2><a name="C4">Chapter 4</a></h2>

自己再加一个：Chapter 1 ,   如何加上去？

阅读全文
类别：默认分类 查看评论]]> 2009-11-23 11:23 http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7/blog/item/cfab82249d3d1f39c89559da.html <![CDATA[HTML链接links]]> HTML链接links
--------------------------------------------------------------------------------

Hyperlinks, Anchors, Links 超链接，锚，链接（3个术语）
超链接是作为网络的来源的一个引用 (一个地址address) .

超链接可指向网络的任意来源：网页、图片、声音文件、电影等。

anchor锚这个术语用来定义文档内超链接的目的地。

HTML 锚元素 <a>, 用来定义超链接和锚两者。

当<a>元素指向来源时使用术语：链接link , 当<a>元素定义文档内的地址时使用术语：锚anchor。..


--------------------------------------------------------------------------------

链接句法:

<a href="url">Link text</a>

开始标签中包含链接地址的属性.

元素内容 (链接文本) 定义显示部分.

注意:元素内容不必单是文本，也可以是图片或其它HTML元素。 The element content doesn't have to be text. You can link from an image or any other HTML element.


--------------------------------------------------------------------------------

href 属性
href 属性定义链接“地址”。

这里 <a> 元素定义了到 W3Schools的地址:

<a href="http://www.w3schools.com/">    Visit   W3Schools! </a>

上面一行源码在浏览器中会显示：

Visit W3Schools!


--------------------------------------------------------------------------------

目标属性
目标属性定义被链接的文档在何处打开.

下面的源码定义在新浏览器窗口打开:

例：
<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>

--------------------------------------------------------------------------------

名称属性
使用名称属性时,<a> 元素定义了在文档内的名称锚.

名称锚是看不见的.

名称锚句法:

<a name="label">Any content任意内容</a>

名称锚的链接句法:

<a href="#label">Any content任意内容</a>

记号 # 在 href属性中定义了到名称锚的链接。

例:
在一个文档内的名称锚:

<a name="tips">Useful Tips Section有用的提示部分</a>

--------------------------------------

链接到同一文档的Useful Tips Section有用的提示部分:

<a href="#tips">
Jump to(跳到) Useful Tips Section</a>
-------------------------------------------

从另外的文档链接到 Useful Tips Section :

<a href="http://www.w3schools.com/html_tutorial.htm#tips">
Jump to the Useful Tips Section</a>


--------------------------------------------------------------------------------

Basic Notes基本说明 - Useful Tips有用的提示
通常加一个斜杠到子文件夹引用. 如果链接是这样的: href="http://www.w3schools.com/html",你就会产生两个 HTTP到服务器的请求，因为服务器会加一个斜杠到地址，建立新的请求，像这样: href="http://www.w3schools.com/html/"

名称锚通常用于大型文档开头部分的内容表 "table of contents" .文档内的每一章被给出一个名称锚，而链接到的每个锚就会被置于文档顶部。

如果浏览器找不到指定的名称锚，它会跑到文档顶部去，不会出错。


--------------------------------------------------------------------------------

阅读全文
类别：默认分类 查看评论]]> 2009-11-22 20:47 http://hi.baidu.com/%D1%D3%C4%EA%CB%C9%BA%D7/blog/item/090ff23ed2420c3770cf6c0b.html