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%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...
随机推荐
- hdoj 5094 Maze 【BFS + 状态压缩】 【好多坑】
Maze Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 100000/100000 K (Java/Others) Total Sub ...
- Java 序列化Serializable具体解释（附具体样例）
Java 序列化Serializable具体解释(附具体样例) 1.什么是序列化和反序列化 Serialization(序列化)是一种将对象以一连串的字节描写叙述的过程:反序列化deserializa ...
- cvpr2017年的所有论文下载
wget -c -N --no-clobber --convert-links --random-wait -r -p -E -e robots=off -U mozilla http://op ...
- redis缓冲与数据库
redis是基于key-value结构存储的,且数据存放在内存中,相对数据库读写较快. 基于redis的优势,将redis中存放用户数据,用户第一次登录时,将用户数据从数据库存放redis中,也可以将 ...
- Openlayers中layer介绍
1.base layers & overlay layers base layer:最底层的layer,其它的图层是在他之上,最先增加的图层默认作为base layer. overlay la ...
- 网站web.cofig配置用户的权限
访问被拒绝. 说明: 访问服务此请求所需的资源时出错.服务器可能未配置为访问所请求的 URL. 错误消息 401.2.: 未经授权: 服务器配置导致登录失败.请验证您是否有权基于您提供的凭据和 Web ...
- EasyRTMP实现RTMP异步直播推送之环形缓冲区设计
本文转自EasyDarwin团队kim的博客:http://blog.csdn.net/jinlong0603 EasyRTMP的推送缓冲区设计 EasyRTMP内部也同样采用的环形缓冲的设计方法,将 ...
- A Short Introduction to Boosting
http://www.site.uottawa.ca/~stan/csi5387/boost-tut-ppr.pdf Boosting is a general method for improvin ...
- select监听多个client -- linux函数
使用select函数能够以非堵塞的方式和多个socket通信.程序仅仅是演示select函数的使用,功能很easy,即使某个连接关闭以后也不会改动当前连接数.连接数达到最大值后会终止程序. 1. 程序 ...
- 8.JS数据类型
① 数据类型:字符串,数字,布尔,数组,对象,Null,Undefined ② JavaScript拥有动态类型.这意味着相同的变量可用作不同的类型: 实例 var x: //x为undefine ...