HTML之图像、表格

1、插入图像

1.

图像由<img>标签定义。
同时,<img>是空标签,只包含属性,并且没有闭合标签,不能成对出现。
需要使用源属性src来指向图片的地址。

2.

也可以使用alt属性放在<img>标签中,alt的属性的值是一串文本文本,当src指向的地址的图片无法加载的时候,alt中的文本就会显示在原来图像的地方。
HTML之图像、表格
HTML之图像、表格

3.

可以使用width和height指定图像的高度和宽度。
指定以后,图片就可以按照设置的大小显示在浏览器页面上。

4.

可以使用border属性指定图片的边框大小。

<img src="url" alt="文本提示" width="100" height="100" border="10">

5.

可以为图片创建一个超链接,即点击图片的时候跳转到链接对应的地址上。
方法是将链接标签写在标签的上方,如

<a href="http://www.baidu.com">
<img src="url" alt="文本提示" width="100" height="100" border="10">

此时,当图片被加载出来的时候,点击图片就会跳转到百度的官网上。
同时,如果图片加载失败,点击alt中的文本信息,也会正常跳转。
并且,图片加载失败,也没有alt文本信息,点击浏览器页面的默认加载失败图标也会正常跳转。
就是这种图标。HTML之图像、表格

2.创建表格

1.

表格由<table></table>标签来定义。
表格中的行用<tr></tr>来定义,每行又可以被分为多个单元格,用<td></td>来定义。
<td>标签中的内容即是表格中的有用信息。
<td>标签中的内容会原样输出。

2.

与图片一样,border属性可以指定表格的边框大小。
HTML之图像、表格
HTML之图像、表格

3.

表格也支持设置表头,默认表头的字体加粗。
表头使用<td></td>标签来声明。
并且,表格也有水平和垂直样式之分。
即水平表格,表头在表格的上方,是一行;垂直表格,表头在表格的左方,是一列。
多个水平表头写的时候,是一个一个写在一起的。
多个垂直表头写的时候,是一个表头一个值写在一起的。
HTML之图像、表格
HTML之图像、表格

HTML之图像、表格
HTML之图像、表格

4.

现实的表格中,是有表的标题的,当然html也支持。
表格的标题使用<caption></caption>来声明。

HTML之图像、表格
HTML之图像、表格

5.

合并单元格后的表格是经常能见到的一种表格形式,即单元格跨行跨列。
使用 colspan rowspan属性进行单元格跨行跨列操作。属性后的值即是跨了多少行或者多少列。
属性放在标签中。
HTML之图像、表格
HTML之图像、表格

HTML之图像、表格

HTML之图像、表格

上一篇:IDEA 常用快捷键总结


下一篇:计算机基本了解