HTML5 (自学第四天）

HTML 图像

使用<img>标签定义 HTML 页面中的图像。<img>标签有两个必需的属性：src和alt。

<img src="图片所在位置以及格式" alt="图片显示不出来所替换的文字">

注意：插入动图的语法和静态图的语法是一样的。

HTML 图像- 图像标签（<img>）和源属性（Src）

---

　在 HTML 中，图像由<img>标签定义。

　<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

　要在页面上显示图像，你需要使用源属性（src）。src指 "source"。源属性的值是图像的 URL 地址。

　定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。如果名为 "csdn.gif" 的图像位于 www.csdn.com 的 images 目录中，那么其 URL 为 //www.csdn.com/images/csdn.gif。

HTML 图像- Alt属性

---

　alt属性用来为图像定义一串预备的可替换的文本。　替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

　在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

 

HTML 表格

每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

---

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

　HTML 表格的基本结构：

<table>…</table>：定义表格

<th>…</th>：定义表格的标题栏（文字加粗）

<tr>…</tr>：定义表格的行

<td>…</td>：定义表格的列

HTML 表格和边框属性

---

　如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

　使用边框属性border来显示一个带有边框的表格：

HTML 表格表头单元格

---

　表格的表头单元格使用<th>标签进行定义。

　表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。

　大多数浏览器会把表头显示为粗体居中的文本：

表格标题 <caption>

---

　在<table>标签中我们可以使用<caption> ... </ caption>标签作为标题，并在表的顶部居中显示出来。

HTML 表格高度和宽度

---

　在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

HTML 表格背景

---

　您可以使用以下方法之一设置 HTML 表格的背景 

• bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
• background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。
• bordercolor属性 - 可以设置边框颜色。

HTML 表格空间

---

　有以下两个属性，用于调整 HTML 表格中单元格的空间：

• cellspacing属性-定义表格单元格之间的空间 
• cellpadding属性-表示单元格边框与单元格内容之间的距离

HTML 合并单元格

---

• 如果要将两个或多个列合并为一个列，将使用colspan属性 
• 如果要合并两行或更多行，则将使用rowspan属性。

HTML 表格头部、主体、页脚

---

　表格可以分为三个部分 - 头部，主体和页脚，如同word 文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。

　头部，主体和页脚的对应的三个标签是：

• <thead> - 创建单独的表头。
• <tbody> - 表示表格的主体。
• <tfoot> - 创建一个单独的表页脚。

　表可以包含多个<tbody>元素以指示不同的页面。

　但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前.

HTML 表格的嵌套

---

　您可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

HTML 列表

---

HTML 支持有序、无序和定义列表:

HTML无序列表

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

无序列表适合成员之间无级别顺序关系的情况。

无序列表使用 <ul> 标签:

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

有序列表适合各项目之间存在顺序关系的情况。

列表项项使用数字来标记。您可以通过本站的编程测试来练习创建有序列表。

<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

HTML 自定义列表

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

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

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。