在Html5+CSS3学习记录（1）——基础中学习了基本的概念和标签，在本节学习图像、超链接、表格等标签及相关知识。
一、图像
1、简介
（1）GIF格式：采用LZW压缩，压缩相同颜色色块减小大小；只能处理256色，适合商标、新闻式标题等。
（2）JPEG格式：压缩过程中会造成一些图像数据的损失，可能过度失真；通常压缩照片之类的全彩图像，超过256色。
（3）PNG格式：非破坏性网页图像文件格式，将图像以最小方式压缩也不失真；支持48-bit的色彩，交错显示更快，
2.添加图像
<img src="图片地址">
<img src="图片地址" height="" width="">
<img src="图片地址" border="">
<img src="图片地址" title="">
<img src="图片地址" alt="">
<img src="图片地址" hspace="" vspace="">
<img src="图片地址" align="">
（1）src用来设置图像文件的地址，可以是相对地址也可以是绝对地址。
绝对地址是文件在硬盘上的真正路径，但文件移动后要重新修改。
相对地址可在站点文件夹内任意构建链接，若引用的文件位于该文件同级目录则只输入链接文档名称即可；位于下一级目录则输入目录名/+文件名称；位于上一级则../+目录名+文件名称。
（2）height：设置图像高度，单位是像素（单位可省略）
width：设置图像宽度，单位是像素（单位可省略）
border：图片边框大小，单位是像素 ，默认无边框
（3）title:设置图像的提示文字，在鼠标悬停在图像上时显示。
alt：设置图像的替换文本，当图像无法正常显示时出现。
（4）推荐CSS，不用此属性
hspace：设置图像的水平间距，调整图像和文字间距。
vspace：设置图像的垂直间距，调整图像和文字间距。
（5）推荐CSS，不用此属性
align：设置图像相对文字的对齐方式
二、超链接
链接，全称超文本链接也称超链接。
1、添加文本链接
<a href="" target="">链接文字</a><a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
href:链接地址，一般使用相对地址
target:打开新窗口的方式
| 属性值 | 意义 |
|---|---|
| _blank | 新建一个窗口打开 |
| _parent | 在上一级窗口打开，常在分帧的框架页面中使用 |
| _self | 在同一窗口打开，默认值 |
| _top | 在浏览器的整个窗口打开，忽略所有框架结构 |
2、添加图像的超链接
（1）图像的超链接
<a href="链接地址" target="目标窗口打开方式"><img src="图像地址"></a>
（2）图像热区链接
除可对整个图像进行超链接，也可以将图像分区设置超链接。包含热区的图像也可以叫做映射图像。
为图像设置热区链接时，首先需要在图像文件中设置映射图像名，在<img>标签中使用usemap属性；然后需要定义热区图像及链接。
<img src="图片地址" usemap="映射图像名称">
<map name="映射图像名称">
<area shape="热区形状" coords="热区坐标" href="链接地址" />
</map>点击相应热区即可跳转
三、表格
因还未对css进行系统学习，所以在此只学习基础表格的用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table align="center" width="80%" height="500">
<caption><b>happyeveryday</b></caption>
<tr height="35" bgcolor="#ffe4c4">
<th>表头1</th>
<th>表头2</th>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
</tr>
<tr align="center">
<td><img src="happy.jpg" alt="要快乐"></td>
<td><img src="happy.jpg" alt="要快乐"></td>
</tr>
</table>
</body>
</html>运行效果如下：
表格标签及含义：
| 标签 | 含义 |
| <table></table> | 表格标签，其他属性需要在表格标签里 |
| <tr></tr> | 行标签 |
| <th></th> | 表头标签，一般位于表格第一行，其中的内容加粗显示 |
| <td></td> | 单元格标签，可以在单元格中插入图片，可用<td colspan="合并列数"></td>进行列合并，<td rowspan="合并行数"></td>进行行合并 |
| <caption></caption> | 表题标签，显示在整个表格上方 |
| <colgroup></colgroup> | 对列进行样式控制 |
<colgroup></colgroup>的使用语法如下：
<colgroup>
<col style="background-color: aqua">
<col style="background-color: crimson">
</colgroup>针对上边示例代码的实现效果如下：
四、<div></div>和<span></span>标签
实现出来的代码都很丑，只是为了验证功能看效果
1、<div></div>
用来为HTML文档的内容提供结构和背景的元素。div全称为division，即区分。
<div></div>被称为区隔标签，表示一块可显示HTML的区域，用来设置字、图、表格等的摆放位置。简单来说可以将他看作是分组标签。常用于组合块级元素，方便应用CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div&span</title>
</head>
<body style="background: url(/happy.jpg) no-repeat center" >
<div align="center">
<h1>《长命女·春日宴》</h1>
<h2>五代 冯延巳</h2>
</div>
<div align="left" style="color: darkblue">
<h3>春日宴，绿酒一杯歌一遍。</h3>
<h3>再拜陈三愿：</h3>
<h3>一愿郎君千岁，二愿妾身常健，三愿如同梁上燕，岁岁长相见。</h3>
</div>
</body>
</html>效果（很丑，只是为了验证div的效果）：
<div></div>的语法格式：
<div id="value" align="value" class="value" style="value">
</div>属性解释：
id：名字，与CSS结合控制该块
align：对齐方式，但是html5不支持
class：元素样式，对应CSS中的class选择符
style：设置块中元素的样式，值为CSS的属性值，各属性值用分号分隔。
</div>
<div align="left" style="color: darkblue;background-color: crimson">
<h3>春日宴，绿酒一杯歌一遍。</h3>
<h3>再拜陈三愿：</h3>
<h3>一愿郎君千岁，二愿妾身常健，三愿如同梁上燕，岁岁长相见。</h3>
</div>效果（依旧很丑）：
2、<span></span>
<span></span>是行内标签，前后不会换行，没有结构的意义，纯粹是应用样式。
被 <span> 元素包含的文本，可以使用CSS对它定义样式，或者使用 JavaScript 对它进行操作。
还是上面这个例子：
<div align="left" style="color: darkblue;background-color: crimson">
<h3>春日宴，绿酒一杯歌一遍。</h3>
<h3>再拜陈三愿：</h3>
<h3>一愿郎君千岁，<span style="color: greenyellow">二愿妾身常健</span>，三愿如同梁上燕，岁岁长相见。</h3>
</div>接着看这个丑效果吧：
效果都很丑，果然还得需要css....
1008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
