HTML-03. 图像，链接，表格和列表

2020-10-11 本文已影响0人 RaoZC

本节主要介绍4部分内容
1. 图像
2. 链接
3. 表格
4. 列表

1. 图像

1.1 定义图像<img>

在 HTML 中，图像由<img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
语法：

<img src="..." alt="..." height="..." width="..." crossorigin="..." ismap="..." usemap="...">

align, border, hspace, longdesc和vspace在HTML5中不再支持

属性解释如下：

src：图片地址
alt：用来为图像定义可替换的文本，即当图像不显示，则显示该文本
height：定义高度
width：定义宽度
crossorigin：设置图像的跨域属性
ismap：将图像规定为服务器端图像映射
usemap：将图像定义为客户器端图像映射

注意：假如某个 HTML 文件包含10个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
下面举几个例子：
插入静态图片和动态图片的语法是一样的

<p>
一个图像:
<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>

<p>
一个动图:
<img src="hackanm.gif" alt="Computer man" width="48" height="48"></p>

如果路径正确，输出为：

路径正确

如果路径不正确，则输出为：

路径不正确，只显示alt的文字

1.2 定义图像地图<map>

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
area 元素是定义可点击区域，永远嵌套在 map 元素内部。

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

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

结果如下：

image.png

星球区域均可以点击，点击后进入对应页面

2. 链接

HTML使用标签 <a>来设置超文本链接，使用href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：

未访链接显示为 $\color{blue}{蓝色字体}$ 并带有下划线。
访问过的链接显示为 $\color{purple}{紫色字体}$ 并带有下划线。
点击链接时，链接显示为 $\color{red}{红色字体}$ 并带有下划线。

最基本的超链接定义方式，还可以利用target="_blank"属性将链接设定在新窗口打开。
语法：

<a href="url">链接文本</a>
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>

以上为两个链接的例子，第一行为一个链接的最简单写法。第二行定义在新窗口打开。
下面看看嵌套的链接例子。

2. 1 创建图片链接

<p>创建图片链接:
    <a href="https://www.jianshu.com/u/b9490e62647d">
    <img  border="10" src="C:/Users/Administrator/Desktop/1.jpg" alt="Cover" width="32" height="32"></a></p>

<p>无边框的图片链接:
        <a href="https://www.jianshu.com/u/b9490e62647d">
    <img  border="0" src="C:/Users/Administrator/Desktop/1.jpg" alt="Cover" width="32" height="32"</a></p>

输出结果为：

图片链接

2. 2 创建邮件链接

<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
点击可以弹出选项

邮件链接
参考：
HTML教程

3. 表格

表格由 <table> 来定义。每个表格均有若干行（由 <tr> 标签定义, table row），每行被分割为若干单元格（由 <td> 标签定义, table data）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
语法：

<table border="1" cellspacing="5" cellpading="10">
    <caption>Telephone</caption>
    <colgroup>
          <col span="2" style="background-color:red">
          <col style="background-color:yellow">
    <tr>
          <th>Name</th>
          <th colspan="2">Tel</th>
    </tr>
    <tr>
          <td>Johnson</td>
          <td>18664213311</td>
          <td>18664222332</td>
    </tr>
</table>

输出：

Table
各标签解释：

<table>：定义表格，其中有3个属性较为重要，border为线条粗细，cellspacing为border的两条边的距离，即格间距，cellpadding为单元格的宽度，即格边距。

table 属性

<caption>表格标题
<th>表头
<tr>表的行
<td>单元格内容
<colgroup>定义用于列表的组
<col>定义用于列表的属性，2个较为重要的属性，span代表横跨的列数，style代表样式

4. 列表

4.1 有序列表

有序列表用<ol>标签开始，其后每一个内容就用<li>来开始。
ol=order list, li=list
语法：

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

则输出：

有序列表

4.2 无序列表

无序列表用<ul>标签开始，其后每一个内容就用<li>来开始。可以嵌套使用。
ul=unorder list, li=list
语法：

<ul>
    <li>Coffee</li>
    <ul>Tea</ul>
        <li>Black tea</li>
        <li>Green tea</li>
    <li>Milk</li>
</ul>

输出：

无序列表
在HTML4中ul属性已经废除，HTML5不再支持该属性，因此使用CSS来代替定义不同的无序列表：
语法：

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
</ul>

输出：

CSS无序列表

4.3 自定义列表

自定义列表以 <dl>标签开始。每个自定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd>开始。
dl=definition list, dt=definition table, dd=definition of definition list
语法：

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

输出：

自定义列表

参考：
HTML教程