【HTML504】HTML基础04_图像_表格_列表

最新推荐文章于 2023-08-30 16:12:23 发布

cs_xuhuan

最新推荐文章于 2023-08-30 16:12:23 发布

阅读量230

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/cs_xuhuan/article/details/86716150

版权

HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML图像

图像标签(`<img>`)和源属性(Src)

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

定义图像的语法是：

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

URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

Alt属性

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

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

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

设置图像的高度和宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

基本的注意事项-有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

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

HTML图像标签

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

HTML表格

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

<table border="3" style="background-color: #b3d4fc;color: blue">
  <tr>
    <td>Xu Huan</td>
    <td>Sheng Zeyu</td>
  </tr>
  <tr>
    <td>Feng Weiheng</td>
    <td>Guo Jiahua</td>
  </tr>
</table>

Xu Huan	Sheng Zeyu
Feng Weiheng	Guo Jiahua

HTML表格和边框属性

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

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

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML表格表头

表格的表头使用标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML表格标签

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

HTML列表

HTML支持有序、无序和定义列表：
在这里插入图片描述

HTML无序列表

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

无序列表使用 <ul> 标签

<ul>
  <li>无序排列1</li>
  <li>无序排列2</li>
  <li>无序排列3</li>
</ul>

无序排列1
无序排列2
无序排列3

HTML有序列表

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

列表项使用数字来标记。

<ol>
  <li>有序排列1</li>
  <li>有序排列2</li>
  <li>有序排列3</li>
</ol>

有序排列1
有序排列2
有序排列3

HTML自定义列表

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

<dl>
  <dt>Xu Huan</dt>
  <dd>——a handsome boy</dd>
  <dt>Sheng Zeyu</dt>
  <dd>——a pig</dd>
</dl>

Xu Huan

——a handsome boy

Sheng Zeyu

——a pig

注意事项-有用提示

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

HTML列表标签

<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述