html-图像、链接、表格、列表

1. 图像

1.1 图片使用

<img src="url"> src指向了图片的路径
<img src="url" />

1.2 url

统一资源定位符， 俗称路径

url的表现形式有两种

1.绝对路径

是一个完整的路径,一般在使用网络资源的时候用绝对路径(盗图)
使用网络资源的优点:不占据自己服务器的存储空间
缺点:资源不稳定
本地资源能不能用绝对路径访问？不可以的！

2.相对路径

调用兄弟资源，直接写兄弟文件的名词

<img src="103.png" />

调用兄弟儿子资源,直接写兄弟文件夹名称，使用/进入兄弟文件夹，再直接写兄弟儿子的名称

<img src="img/142.png" />
调用父亲的兄弟，使用../找到父亲，再直接写兄弟名称

```html
<img src="../103.png"/>
调用父亲的兄弟的儿子,使用../找到父亲，使用/进入兄弟文件夹，再直接写儿子的名称

调用父亲的兄弟的儿子,使用…/找到父亲，使用/进入兄弟文件夹，再直接写儿子的名称

<img src="../img/55.png" >

1.3 img的属性

src="" 引用图片资源路径
alt="" 图片资源加载时，显示的文本
width="" 宽
height="" 高
图片设置的宽高，如果不符合原始图片的宽高比，会发生图片的失真现象
解决方案，宽高只设置一个，另外一个按照原始宽高比自适应

2.超链接，a标签

<a></a>
属性:href="http://www.baidu.com" 指向要跳转的资源路径
target="" _self 默认值，在当前页面打开新的地址
_blank 在新的选项卡中打开

<a href="1.zip">下载</a>
<a href="mailto:daidai@qq.com">发送邮件</a>

a标签的其他功能

<a href="#">超链接</a>不知道要跳转到哪里去的时候 可以使用#表示占位
<a href="#">
<img src="img/16.png" />
</a>

3.表格

表格的本意是做数据显示，早期使用表格来做页面布局，现在不用表格来布局了，因为表格渲染，需要先把数据存储到内存中，再从内存中读取，一次性画到页面，导致渲染效率极低

3.1 表格的特点

1.每一行列数相同的(不考虑合并问题)
2.某一列高度增加，当前行中的其他列也会跟着高度增加
3.某一列宽度增加，其对应列,也会跟着增加宽度
4.表格设置的尺寸大于表格内容，表格遵从设置的尺寸
5.表格设置的尺寸小于表格内容，表格遵从内容的尺寸

table	tr	td
表格标签	行标签	列标签

快捷生成表格方式 table>tr*n>td*m +tab键

3.2 表格的属性

内边距:边框到内容之间的距离
外边距:边框到边框之间的距离

table的属性

border="" 设置表格的边框

bordercolor=“” 设置表格边框颜色

bgcolor="" 设置表格背景颜色

cellspacing=“” 设置单元格外边距

cellpadding ="" 设置单元格内边距

width="" height="" 设置表格的宽高

align=“left” left center right 设置表格本身的水平对齐方式

background=“img/16.png” 设置表格背景图

<table border="1px" bordercolor="green" cellspacing="0" align="center"
width="50%" height="200px" bgcolor="pink">
<tr>
   <td>姓名</td>
   <td>性别</td>
   <td>年龄</td>
</tr>
<tr>
   <td>代代</td>
   <td>女</td>
  <td>18</td>
</tr>
</table>

tr的属性

align=“left” left center right 设置当前行文本的水平对齐方式

valign 当前行文本的垂直对齐方式 top / middle /bottom

bgcolor 当前行的背景颜色

width="" height="" 设置单元格的宽高

<tr align="center" valign="top" bgcolor="aquamarine">
   <td>姓名</td>
   <td>性别</td>
   <td>年龄</td>
</tr>

td的属性

align=“left” left center right 设置单元格水平对齐方式

valign 设置单元格文本的垂直对齐方式 top / middle /bottom

bgcolor 当前单元格的背景颜色

background=“img/16.png” 设置单元格背景图

colspan 跨列合并

rowspan跨行合并

合并的操作

colspan=“n” 从指定单元格位置处，向右合并n个单元格(n包含自己本身)要把被合并的单元格

删除 rowspan=“n” 从指定单元格位置处，向下合并n个单元格(n包含自己本身)要把被合并的单元格删除

3.3 表格的可选标记

1.表格标题

caption 必须在table结束标签后面写

2.th

替代td来当表头
效果 文本加粗，并且水平居中

4 列表

1.列表的作用

列表，本意是有条理的展示数据---------做网页布局

2.列表的组成

列表分为有序列表 无序列表(列表类型)

2.1 HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 < ul > 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

• Coffee
• Milk

2.2 HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于

1. 标签。每个列表项始于 < li > 标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器中显示如下：

1. Coffee
2. Milk

2.3 HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 < dl > 标签开始。每个自定义列表项以 < dt > 开始。每个自定义列表项的定义以 < dd > 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下：

Coffee
 - black hot drink
Milk
 - white cold drink

3.列表的属性

3.1 type="" 设置列表项的类型

有序列表默认取值 1 A a i I

无序列表 disc 实心小圆点 （默认值)

circle 空心小圆点

square 实心方块

none 去除列表项前面的符号