首页 / HTML / HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格）

HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3209字，纯文字阅读大概需要5分钟。

内容图文

1.图片

图片标签：<img src="图片位置" alt="图片描述" width="宽度" height="高度" >

嵌入图片需要src和alt两个属性，src输入图片文件位置，注意使用相对路径；alt是对图片的表述，对用户来说没什么用，但是如果图片无法加载，浏览器会把图片转化成alt内容；width、height分别表示图片的宽度和高度，可加可不加，有这两个数据便于浏览器加载数据时预留图片位置.

img元素还有一个常用的方法就是结合a元素创建一个超链接，图片超链接可以将图片变成一个链接路口，点击图片可以到达目标网页。

图片超链接：<a href=""> <img src="" alt=""> </a>

关于HTML图片的选择，图片共有以下几种常见格式：

图片格式压缩方式是否支持动画适应浏览器
JPG有损不支持所有
PNG无损不支持所有
GIF无损支持所有
APNG无损支持firefox、safari
WebP有损/无损支持chrome、opera

在日常开发中，因为APNG和WebP存在兼容问题，所以一般不使用。一般常用的是JPG、PNG和GIF。

JPG图片体积较大，且压缩会有损耗，但可以很好地处理大面积色调的图片。如果要使用颜色丰富的复杂图片且没有透明效果的，可以使用JPG图片。但jpg的每一次压缩，对图片都是有损的。因此，对于一些有线条，或者文字的图片，jpg压缩之后，看起来并不理想，因此，在这种情况下，应该 尽量避免对jpg的使用。

PNG图片压缩无损，可以保证页面打开速度，并且PNG图片体积较小，支持透明。若要使用透明图片或颜色不复杂的图片可以使用PNG图片。

GIF图片仅有256种颜色，并且对透明对支持仅仅局限于全透明或者不透明，因此，gif若作为非动图来说，只能用于颜色不太复杂的图片。不过一般来 说，我们用gif都是由于其对动画的友好支持，在APNG兼容性十分不友好的情况下，如果仅仅想引入一个动图的话，gif是目前很好的选择。


2.数据列表

有序列表：

<ol>
    <li>文本</li>
    <li>文本</li>
    <li>文本</li>
</ol>

HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格） - 文章图片
无序列表：

<ul>
    <li>文本</li>
    <li>文本</li>
    <li>文本</li>
</ul>

HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格） - 文章图片

因为HTML只负责网页的结构，所以不过是有序列表还是无序列表都不要使用type属性，type属性的效果交给负责网页表现的CSS。

定义列表

<dl>
        <dt>名词</dt>
        <dd>名词的描述</dd>
    </dl>

HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格） - 文章图片

3.表格

（1）表格标签：

  • 表格：<table></table>
  • 行：<tr><tr>
  • 单元格：<td></td>
  • 表头单元格：<th></th>
  • 表头：<thead></thead>
  • 表身：<tbody></tbody>
  • 表脚：<tfoot></tfoot>
  • 表格标题：<caption></caption>

table元素有一个属性border可以为表格加上边框，但是加边框是表现属于CSS的工作，所以border属性只在在学习HTML表格元素便于观察使用。

<body>
    <table border="1">
        <caption>表格标题</caption>
        <!-- 表头 -->
        <thead>
            <!-- 表格第一行 -->
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!-- 表身 -->
        <tbody>
            <!-- 表格第二行 -->
            <tr>
                <td>单元格1</td>
                <td>单元格2</td>
            </tr>
            <!-- 表格第三行 -->
            <tr>
                <td>单元格3</td>
                <td>单元格4</td>
            </tr>
        </tbody>
        <!-- 表脚 -->
        <tfoot>
            <!-- 表格第四行 -->
            <tr>
                <td>表脚</td>
                <td>表脚</td>
            </tr>
        </tfoot>
    </table>
</body>

HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格） - 文章图片
HTML的语义性十分重要，虽然td元素可以直接实现所有表格的内容，但分块写不仅增加可读性和可维护性，还能让浏览器更好分辨表格结构。


（2）单元格的合并

合并列单元格（水平合并）：<td colspan="合并的单元格个数"></td>

合并后注意把合并了的单元格删除，比如下面合并了“1”的单元格，所以1被删除了。

<table border="1">
    <tr>
      <td colspan="2">2</td>
      <td>3</td>
    </tr>
    <tr>
     <td>4</td>
     <td>5</td>
      <td>6</td>
    </tr>
</table>

HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格） - 文章图片
合并行单元格（垂直合并）：<td rowspan="合并的单元格个数"></td>

合并后注意把合并了的单元格删除，比如下面合并了“1”的单元格，所以1被删除了。

<table border="1">
    <tr>
        <td rowspan="2">2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格） - 文章图片
需要特别注意合并行和合并列的概念，合并列就是将相邻的几列单元格合并，所以使用colspan属性，而合并行就是将相邻的几行合并，所以使用rowspan属性。

内容总结

以上是互联网集市为您收集整理的HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格）全部内容，希望文章能够帮你解决HTML文档主体＜body＞标签汇总2--（图片、数据列表、表格）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1042309.html

来源：【匿名】