本节主要介绍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属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 未访链接显示为
并带有下划线。
- 访问过的链接显示为
并带有下划线。
- 点击链接时，链接显示为
并带有下划线。
最基本的超链接定义方式，还可以利用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教程
网友评论