㈠表格
⑴表格的基本结构
①表格的基本标签有：table标签（表格），tr标签（行），td标签（单元格）。<tr>标签和<td>标签都要在表格的开始标签<table>和结束标签</table>之间才有效。
②tr即"table row"(表格行)，td即"table data cell"(表格单元格)。
③<table>和</table>标记着表格的开始和结束；<tr>和</tr>标记着行的开始和结束；<td>和</td>标记着单元格的开始和结束。在表格中包含几组<tr></tr>就表示该表格为几行。
④用代码看一下它的语法：
1 <html> 2 3 <body> 4 5 <p>每个表格由 table 标签开始。</p> 6 <p>每个表格行由 tr 标签开始。</p> 7 <p>每个表格数据由 td 标签开始。</p> 8 9 <h4>一列：</h4> 10 <table > 11 <tr> 12 <td>100</td> 13 </tr> 14 </table> 15 16 <h4>一行三列：</h4> 17 <table > 18 <tr> 19 <td>100</td> 20 <td>200</td> 21 <td>300</td> 22 </tr> 23 </table> 24 25 <h4>两行三列：</h4> 26 <table> 27 <tr> 28 <td>100</td> 29 <td>200</td> 30 <td>300</td> 31 </tr> 32 <tr> 33 <td>400</td> 34 <td>500</td> 35 <td>600</td> 36 </tr> 37 </table> 38 39 </body> 40 </html>
效果图：
默认情况下，表格是没有边框的。
⑤那么如何才能让表格拥有边框呢？就要加入border属性，如下图所示：
1 <html> 2 3 <body> 4 5 <h4>带有普通的边框：</h4> 6 <table border="1"> 7 <tr> 8 <td>First</td> 9 <td>Row</td> 10 </tr> 11 <tr> 12 <td>Second</td> 13 <td>Row</td> 14 </tr> 15 </table> 16 17 <h4>带有粗的边框：</h4> 18 <table border="8"> 19 <tr> 20 <td>First</td> 21 <td>Row</td> 22 </tr> 23 <tr> 24 <td>Second</td> 25 <td>Row</td> 26 </tr> 27 </table> 28 29 <h4>带有很粗的边框：</h4> 30 <table border="15"> 31 <tr> 32 <td>First</td> 33 <td>Row</td> 34 </tr> 35 <tr> 36 <td>Second</td> 37 <td>Row</td> 38 </tr> 39 </table>
效果图：
表格边框的粗细通过改变border的数值大小来改变。
⑵表格标题 caption
①表格一般都有一个标题，表格的标题使用caption标签。默认情况下，表格的标题位于整个表格的第一行，一个表格只能含有一个表格标题。
②代码示例如下图所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格标题标签</title> 6 </head> 7 <body> 8 <table border="1"> 9 <caption>考试成绩</caption> 10 <tr> 11 <td>小明</td> 12 <td>80</td> 13 <td>90</td> 14 <td>85</td> 15 </tr> 16 <tr> 17 <td>小红</td> 18 <td>90</td> 19 <td>89</td> 20 <td>98</td> 21 </tr> 22 <tr> 23 <td>小张</td> 24 <td>99</td> 25 <td>95</td> 26 <td>97</td> 27 </tr> 28 </table> 29 30 </body> 31 </html>
效果图：
⑶表头 th
①表格的表头th是td单元格的一种变体，它的本质还是一种单元格。它一般位于第一行，用来表明这一行或列的内容类别。表头有一种默认样式：浏览器会以粗体和居中的样式显示<th></th>标签中的内容。
②th标签和td标签在本质上都是单元格，但是不代表这两种可以互换使用。这两者的区别在于语义上。th即“table header”（表头的单元格），而td即“table data cell”（单元格）。当然对于表头，我们可以使用td标签代替th标签，但是不建议这样做。
③代码示例如下图所示:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格表头标签</title> 6 </head> 7 <body> 8 <table border="1"> 9 <caption>考试成绩</caption> 10 <tr> 11 <th>姓名</th> 12 <th>语文</th> 13 <th>数学</th> 14 <th>英语</th> 15 </tr> 16 <tr> 17 <td>小明</td> 18 <td>80</td> 19 <td>90</td> 20 <td>85</td> 21 </tr> 22 <tr> 23 <td>小红</td> 24 <td>90</td> 25 <td>89</td> 26 <td>98</td> 27 </tr> 28 <tr> 29 <td>小张</td> 30 <td>99</td> 31 <td>95</td> 32 <td>97</td> 33 </tr> 34 </table> 35 36 </body> 37 </html>
效果图：
⑷表格的语义化
①为了更深一层对表格进行语义化，HTML引入了thead，tbody和tfoot这三个标签。这三个标签把表格分为三部分：表头，表身，表脚，使得表格的结构更加清晰。
②页脚往往都是用于统计数据的。在浏览器显示下加了这三个标签和没加的效果是一样的，但是加入这三个标签可以使得代码更具有语义化，同时方便控制表格的css样式。
③代码示例如下图所示:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格语义化</title> 6 </head> 7 <body> 8 <table border="1"> 9 <caption>考试成绩</caption> 10 <thead> 11 <tr> 12 <th>姓名</th> 13 <th>语文</th> 14 <th>数学</th> 15 <th>英语</th> 16 </tr> 17 </thead> 18 <tbody> 19 <tr> 20 <td>小明</td> 21 <td>80</td> 22 <td>80</td> 23 <td>80</td> 24 </tr> 25 <tr> 26 <td>小红</td> 27 <td>90</td> 28 <td>90</td> 29 <td>90</td> 30 </tr> 31 <tr> 32 <td>小张</td> 33 <td>100</td> 34 <td>100</td> 35 <td>100</td> 36 </tr> 37 </tbody> 38 <tfoot> 39 <tr> 40 <td>平均</td> 41 <td>90</td> 42 <td>90</td> 43 <td>90</td> 44 </tr> 45 </tfoot> 46 </table> 47 48 </body> 49 </html>
效果图：
⑸合并行 rowspan
①在设计表格时，有时候需要将两个或更多的相邻单元格组合成一个单元格，类似Word表格中的“合并单元格”。合并使用td标签的rowspan属性。
②语法:<td rowspan="跨度的行数">
③代码示例如图所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>合并行rowspan</title> 6 </head> 7 <body> 8 <table border="1"> 9 <!-- 第一行 --> 10 <tr> 11 <td>姓名：</td> 12 <td>小明</td> 13 </tr> 14 <!-- 第二行 --> 15 <tr> 16 <td rowspan="2">喜欢水果：</td> 17 <td>苹果</td> 18 </tr> 19 <!-- 第三行 --> 20 <tr> 21 <td>香蕉</td> 22 </tr> 23 </table> 24 25 </body> 26 </html>
效果图：
⑹合并列 colspan
①在HTML中，表格合并列指的是将几个列进行合并。
②语法：<td colspan="跨度的列数">
③代码示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>合并列colspan</title> 6 </head> 7 <body> 8 <table border="1"> 9 <!-- 第一行 --> 10 <tr> 11 <td colspan="2">菜鸟教程</td> 12 13 </tr> 14 <!-- 第二行 --> 15 <tr> 16 <td>HTML教程</td> 17 <td>CSS教程</td> 18 </tr> 19 <!-- 第三行 --> 20 <tr> 21 <td>Java教程</td> 22 <td>json教程</td> 23 </tr> 24 </table> 25 26 </body> 27 </html>
效果图：
★当内容不能完全放于一个单元格内时，表格合并行和表格合并列就显得非常有用。通过跨越许多单元格，不需要改变表格就能将更多的文字放入单元格。
㈡图像
☆图像标签
在HTML中，图像使用<img />标签。img即“image”（图像）。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
⑴img标签src属性
①src即“source”（源文件）。img标签的src属性用于指定图像源文件所在的路径，它是图像必不可少的属性。
②语法：<img src="图像文件的路径" />
③img标签是一个自闭合标签，没有结束标签。src属性用于设置图像文件所在的路径，可以是相对路径也可以是绝对路径。
④为了整理文档的存储，通常会把图像文件存放在一个单独的文件夹中，而且通常会将这些目录命名为 "pics" 或者 "images" 之类的名称，这样做的好处是可以最大程度地简化路径。
⑤示例：演示如何将其他文件夹或服务器的图片显示到网页中。
<html> <body> <p> 来自另一个文件夹的图像： <img src="/i/ct_netscape.jpg" /> </p> <p> 来自 W3School.com.cn 的图像： <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" /> </p> </body> </html>
效果图：
⑵img标签alt属性
①<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
②假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：
- 网速太慢
- src 属性中的错误
- 浏览器禁用图像
- 用户使用的是屏幕阅读器
③注释：alt 属性的值是一个最多可以包含 1024 个字符的字符串，其中包括空格和标点。这个字符串必须包含在引号中。这段 alt 文本中可以包含对特殊字符的实体引用，但它不允许包含其他类别的标记，尤其是不允许有任何样式标签。
④语法:<a alt="value">
⑤属性值：
⑥示例：演示如何为图片显示替换文本。
1 <html> 2 3 <body> 4 5 6 <p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p> 7 8 <p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p> 9 10 <img src="/i/eg_goleft.gif" alt="向左转" /> 11 12 <p>如果无法显示图像，将显示 "alt" 属性中的文本：</p> 13 14 <img src="/i/eg_goleft123.gif" alt="向左转" /> 15 16 </body> 17 </html>
效果图：
⑶img标签title属性
title属性用于设置鼠标移到图片上的提示文字，这些文字是给用户看的。
语法：<img src="图片地址" alt="图片描述（给搜索引擎看）" title=“图片描述（给用户看）” />
☆图片格式
⑴位图
①位图又称为点阵图像，是由像素（图片元素）的单个点组成的。通常分为8位，16位，24位和32位。
②所谓8位图并不是只有8种颜色，而是2的8次幂（即256）种颜色，8位图指的是用8个bits来表示颜色，对人眼的感觉来说，16位色基本能满足需要了。
③24位又称为“真色彩”，2的24次幂，大概有1600万种颜色之多，这个数字差不多是人眼可以分辨颜色的极限了。
④32位色并不是2的32次幂，其实也是2的24次幂，不过它添加了2的8次幂阶颜色的灰度，也就是8位透明度，因此规定它为32位色。
⑤在制作页面的时候，一般选用24位图像。因为32位图像会带来更大的图像容量，会使浏览器加载页面速度变慢。
⑥放大原始位图，图像会失真，缩小原始位图，同样会使图像效果失真，这是因为缩小图像，减少的是图像中像素的数量。
⑵位图格式
①JPG格式
jpg可以很好地处理大面积色调的图像，如相片，网页中一般的图片
②PNG格式
PNG支持透明信息。所谓透明，即图像可以浮现在其他页面文件或页面图像之上。可以说PNG是专门为web创造的图像，通常大部分页面设计者在页面中加入logo或者一些点缀的小图像时，都会选用PNG格式。PNG格式图片体积小，而且无损压缩，能保证网页打开速度，所以PNG格式图片是很好地选择。
③GIF格式
GIF只支持256色以内的图像。所以，GIF格式的图片效果是很差的。但是，GIF可以制作动画，图像作者利用图像处理软件，将静态的GIF图像设置为单帧画面，然后把这些单帧画面连在一起，设置好一个画面到下一个画面的间隔时间，最后保存为GIF格式就可以了。可以说，这就是简单的逐帧动画。
当处理色调复杂，绚丽的图像时，如照片，图画等，适合使用jpg格式；而处理一些logo，banner，简单线条构图的时候，适合使用PNG格式；GIF格式通常只适合表达动画效果。
⑶矢量图
①矢量图格式
矢量图又称为“向量图”。矢量图是计算机图形中用点，直线或者多边形等基于数学方程的几何图元表示的图像。
矢量图是以一种数学描述的方式来记录图像内容的图像格式。如一个方程式y=kx，当这个小方程体现在坐标系上的时候，设置不同的参数可以绘制不同角度的直线，这就是矢量图的构图原理。
矢量图最大的优点是：无论放大，缩小或是旋转等，图像都不会失真。最大的缺点就是：难以表现色彩层次丰富的逼真图像效果。
②矢量图格式
矢量图的后缀一般有“.ai”，".cdf"，".swf"和".fh"。
“.ai”后缀的文件是一种静帧的矢量文件格式。".cdf"后缀的文件多为工程图。".swf"格式文件指的是Flash。
⑷位图和矢量图区别
①位图受分辨率的影响，而矢量图不受分辨率影响。因此，当图片放大时，位图清晰度会变低，而矢量图清晰度不变。
②位图的组成单位是“像素”，而矢量图的组成单位是“数学向量”。
③位图适用于色彩丰富的图片，而矢量图却不适用于色彩丰富的图片。
④位图常用于网页中的照片，容量较大；矢量图常用于印刷行业，网页logo或矢量插图。
未完待续。。。。。。