HTMl图像
在HTML中，图像由<img>标签定义。
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性(src)。src指“source”。源属性的值是图像的URL地址。
定义图像的语法是：<img src="url" />
URL指存储图像的位置，如果名为"boat.gif"的图像位于www.w3school.com.cn的images目录中，那么其URL为
http://www.w3school.com.cn/images/boat.gif。
示例：
1）背景图片：
<html>
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>
结果如下（ 这里只是博客自动对html语言编译，所以像背景这些不会显示，最好还是自己用记事本和浏览器试一下）：
图像背景
gif 和 jpg 文件均可用作 HTML 背景。
如果图像小于页面，图像会进行重复。
2）排列图片：
<html>
<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
</body>
</html>
结果如下（在这里所有的图片并不存在，所以不会显示，大家可以用自己的图片试一下，效果挺好看的）：
未设置对齐方式的图像：
图像 
在文本中
已设置对齐方式的图像：
图像 在文本中
图像 在文本中
图像 在文本中
请注意，bottom 对齐方式是默认的对齐方式。
3）浮动图像：
<html>
<body>
<p>
<img src ="/i/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>
结果：
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
4）调整图像大小：
<html>
<body>
<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<br />
<img src="/i/eg_mouse.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
</body>
</html>
结果：
通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。
5）为图片显示替换文本：
<html>
<body>
<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>
<p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>
<img src="/i/eg_goleft.gif" alt="向左转" />
<p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>
<img src="/i/eg_goleft123.gif" alt="向左转" />
</body>
</html>
结果：
仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。
请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。
如果无法显示图像，将显示 "alt" 属性中的文本：
6）制作图像链接
<html>
<body>
<p>
您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
结果：
您也可以把图像作为链接来使用： 
表格：
表格由<table>标签来定义。每个表格均有若干行(由<tr>标签定义)，每行被分隔为若干单元(由<td>标签定义)。
字母td指表格数据(table data)，即数据单元格的内容。数据单元格可以包含文本，图片，列表，段落，表单，水平线，表格等等。
示例：
1）没有边框的表格：
<html>
<body>
<h4>这个表格没有边框：</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>这个表格也没有边框：</h4>
<table border="0">
<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>
结果：
这个表格没有边框：
| 100 | 200 | 300 |
| 400 | 500 | 600 |
这个表格也没有边框：
| 100 | 200 | 300 |
| 400 | 500 | 600 |
2）表格中的表头：
<html>
<body>
<h4>表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</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>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
结果：
表头：
| 姓名 | 电话 | 电话 |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
垂直的表头：
| 姓名 | Bill Gates |
|---|---|
| 电话 | 555 77 854 |
| 电话 | 555 77 855 |
3）跨行或跨列的表格单元格：
<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>
结果：
横跨两列的单元格：
| 姓名 | 电话 | |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
横跨两行的单元格：
| 姓名 | Bill Gates |
|---|---|
| 电话 | 555 77 854 |
| 555 77 855 |
<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>
结果：
| 这是一个段落。 这是另一个段落。 |
这个单元包含一个表格：
|
||||
这个单元包含一个列表：
|
HELLO |
5）单元格边距：
<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>
结果：
没有 cellpadding：
| First | Row |
| Second | Row |
带有 cellpadding：
| First | Row |
| Second | Row |
6）单元格间距
<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>
结果：
没有 cellspacing：
| First | Row |
| Second | Row |
带有 cellspacing：
| First | Row |
| Second | Row |
7）向表格添加背景颜色或背景图像
<html>
<body>
<h4>背景颜色：</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景图像：</h4>
<table border="1"
background="/i/eg_bg_07.gif">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
结果：
背景颜色：
| First | Row |
| Second | Row |
背景图像：
| First | Row |
| Second | Row |
8）在表格单元中排列内容：
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
结果：
| 消费项目.... | 一月 | 二月 |
|---|---|---|
| 衣服 | $241.10 | $50.20 |
| 化妆品 | $30.00 | $44.45 |
| 食物 | $730.40 | $650.00 |
| 总计 | $1001.50 | $744.65 |
HTML列表：
无序列表是一个项目的列表，此列表项目使用粗体圆点进行标记。
无序列表始于<ul>标签。每个列表项始于<li>
有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于<ol>标签，每个列表项始于<li>标签。
示例：
1）不同类型的无序列表：
<html>
<body>
<h4>Disc 项目符号列表：</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Circle 项目符号列表：</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Square 项目符号列表：</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
</body>
</html>
结果：
Disc 项目符号列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
Circle 项目符号列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
Square 项目符号列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
2）不同类型的有序列表：
<html>
<body>
<h4>数字列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
</body>
</html>
结果：
数字列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
小写字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
罗马字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
小写罗马字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
3）嵌套列表：
<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
结果：
一个嵌套列表：
- 咖啡
- 茶
- 红茶
- 绿茶
- 牛奶
4）定义列表：
<html>
<body>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
结果：
一个定义列表：
- 计算机
- 用来计算的仪器 ... ...
- 显示器
- 以视觉方式显示信息的装置 ... ...
列表标签：
标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
<dir> 已废弃。使用 <ul> 代替它。
<menu> 已废弃。使用 <ul> 代替它。
HTML块元素：
大多数HTML元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束），
例子：<h1>,<p>,<ul>,<table>
HTML内联元素：
内联元素在显示时通常不会以新行开始，如<b>,<td>，<a>,<img>
HTML<div>元素：
<div>元素是块级元素，它是可用于组合其他HTML元素的容器。
<div>元素，没有特定的含义，除此之外，由于它数于块级元素，浏览器会在其前后显示折行。
如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用定义布局的老式方法。
使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
HTML<span>元素：
<span>元素是内联元素，可用作文本的容器。
<span>元素也没有特定的含义。
当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。
