7、html的body内标签之图片及表格
一、image
<a href="https://www.baidu.com" target="_blank">
<img src="1.jpg" title="茶杯" style="height: 200px"; width="240px;" alt="茶">
</a> #img标签包在a标签中可以加超链接
#src="1.jpg"：图片的路径
#title="茶杯"：当鼠标放在图片上时，显示的内容
#style="height: 200px"; width="240px;" ：指定图片的大小
#alt="茶"：当图片不存在时，显示的内容
二、列表
1、ul标签
#ul标签要与li标签一起用
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
2、ol标签
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
3、dl、dt、dd标签
<dl>
<dt>1</dt>
<dd>a</dd>
<dd>b</dd>
<dd>c</dd>
<dt>2</dt>
<dd>a</dd>
<dd>b</dd>
<dd>c</dd>
</dl>
三、表格
1、此方法没有严格区分表头和表格
<table border="1">
<tr>
<td>主机名</td>
<td>端口</td>
<td>操作</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a href="s8.html" target="_blank">查看详细</a>
<a href="#" target="_blank">修改</a>
</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>第二行.第3列</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>第二行.第3列</td>
</tr>
</table> #border="1"：边框
#tr标签：是行
#td标签：是列
2、此方法区分了表头和表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html> #<thead>：表头
#<tbody>：表格内容
3、合并单元格
横向合并：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html> #内容一共是4列，colspan="3"：让此标签占3列，
纵向合并：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
#rowspan="2" ：纵向占2行
7、html的body内标签之图片及表格的更多相关文章
- html的body内标签之图片及表格
<li> list 标签定义和用法: <li> 标签定义列表项目. <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中 ...
- HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
- [TFRecord格式数据]利用TFRecords存储与读取带标签的图片
利用TFRecords存储与读取带标签的图片 原创文章,转载请注明出处~ 觉得有用的话,欢迎一起讨论相互学习~Follow Me TFRecords其实是一种二进制文件,虽然它不如其他格式好理解,但是 ...
- H5的段落标签、图片标签、列表标签与链接标签
段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...
- div和span与块级和行内标签
<div>标签: 是一个区块容器标记,<div></div>之间是一个容器, 可以包含段落.表格.图片等各种HTML元素. <span>标签: 没有实际 ...
- 前端基础-html 字体标签,排版标签,超链接,图片标签
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- HTML开发之（块级标签，行内标签，行内块标签）
显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...
- 关于html 中form表单的内标签和使用
表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...
- HTML基础知识（块级标签，行内标签，行内块标签）
块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...
随机推荐
- LVDS、MIPI、EDP、VGA、DVI、HDMI、DP3.0(雷电接口）
1.LVDS 2.mipi 3.EDP:Embedded DisplayPort 4.VGA VGA接口的特性: 1)理论上能够支持2048x1536分辨率画面传输. 2)VGA由于是模拟信号传输,所 ...
- 剖析CPU温度监控技术
转载 :剖析CPU温度监控技术 标签: CPU 温度控制技术 1805 具体温度检测调整代码(转载) 迄今为止还没有一种cpu散热系统能保证永不失效.失去了散热系统保护伞的“芯”,往 ...
- 基于bootstrap的纯静态网站目录
一.博客页面 二.登陆页面 三.信息采集 四.管理后台 五.网站汇总(基于上边四个功能) 因为样式统一采用bootstrap的样式,所以不做介绍 样式导入可以将bootstrap下载至本地(有自动补齐 ...
- java IO 框架图
- 一个兼容性比较好的图片左右滚动的js
下载地址:http://www.cnblogs.com/RightDear/admin/Files.aspx 文件:shhds.rar
- AppStore审核--17.5
本文转载至 http://blog.csdn.net/addychen/article/details/39672185 感谢原文作者分享 AppStore审核 为了确保用户理解应用如何使用他们的数据 ...
- linux 中添加自己的库路径的方法 cannot open shared object file: No such file or directory
本文转自:http://blog.csdn.net/maotianwang/article/details/44619197 库文档在连接(静态库和共享库)和运行(仅限于使用共享库的程式)时被使用,其 ...
- iframe调用父页面js函数 方法 元素
在一个页面中添加iframe,但是有时需要与父页面进行通信,传递参数. 网上总结有以下方法: 一.iframe标签中 src属性传参 <iframe src="test.jsp?i ...
- Adjusting Network Connection
Adjusting Network Connection The Selenium Mobile JSON Wire Protocol Specification supports an API fo ...
- linux 网络设备，网卡配置 ,相关
网络设备,网卡配置: Eth0是物理网卡:唯一mac地址,Bcast:广播地址,MAsk:子网掩码, Lo:系统自带的回环的ip地址,可以做一些基本的测试应用,比如没有网卡就用127.0.0.1, r ...