HTML（三）

HTML图像

        <img>标签表示图像，是空标签（只包含属性，没有闭合标签）

        要将图片显示，需要使用源属性（src）。源属性的值设置为图像的URL地址（图像存储的位置）。

        Alt属性：为图像定义一串预备的可预备的文本（在浏览器无法载入图像时，替换为该文本）

使用height和width 设置图片显示高度与宽度

        <map>定义图像地图

<area>定义图像地图中的可点击区域

例

<img src ="img1.jpg" alt ="big error" width="200" height="300">

将图片作为链接使用

<a href = "https://www.baidu.com/"><img src ="img1.jpg" alt ="big error" width="200" height="300"></a>

创建图像映射

1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

2、圆形：(圆心坐标为(X1,y1)，半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

整体：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

HTML表格

html表格用<table>标签定义，行<tr>，列<td>（单元格），边框宽度用border规定（默认无边框，设置无边框的两种方式1、border=0   2、不设置。）

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

例

<!-表格 cellpadding表示单元格边距，cellspacing表示单元格间距>
<table border="1" cellpadding="1" cellspacing="5">
<caption>mount</caption>
<tr>
    <th>hahaa</th>
    <th>hwuwuwu</th>
<tr>
<tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
<tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
</table>

<table>

    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
<tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
</table>

HTML列表

有序：

        使用数字进行标记，始于<ol>,每个列表项始于<li>，

无序

        使用圆点标记，始于<ul>,每个列表项始于<li>

例

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

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

自定义列表：

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

例