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%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...
随机推荐
- Node.js知识点学习
Node.js知识点学习 一.基本概念 Node.js,或者 Node,是一个可以让 JavaScript 运行在服务器端的平台.可以说,Node.js开创了javascript模块化开发的先河,早期 ...
- Java EJB JBoss
JBoss:JBoss是web服务器的一种,主要做EJB容器,和tomcat集成就可以jsp,servlet,ejb通吃了JBoss有两种版本,一种是独立的,一种是和tomcat集成的,当然都是免费的 ...
- node JS 微信开发
JS-SDK 要点 微信测试号; 扫码登录;无需认证(只是名称统一为微信测试号)http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/logi ...
- 通过Pojo对象 field 属性加注解实现格式校验，极大的降低代码量
近期做一个接口.接受外系统的报文,通过XStream转换成java对象以后.须要对当中的字段做格式校验. 要求例如以下: 传统的方式是硬编码校验.可是对于field非常多的情况.代码量暴增.easy出 ...
- Jenkins + Maven + TestNG参数化调用测试用例
希望实现的场景:Jenkins中的Job可针对不同浏览器,不同环境,运行不同的测试用例集,但测试用例只保持一份. 具体实现的思路:在运行Jenkins Job时传入参数,运行 mvn test 命 ...
- SQL还原数据库后，数据库显示受限制用户解决方法
数据库->属性->选项
- EasyPlayer Android安卓流媒体播放器实现播放同步录像功能实现(附源码)
本文转自EasyDarwin团队John的博客:http://blog.csdn.net/jyt0551,John是EasyPusher安卓直播推流.EasyPlayer直播流媒体播放端的开发和维护者 ...
- svn提交异常file is scheduled for addition, but is missing
svn提交错误file is scheduled for addition, but is missing svn ci -m "" svn: E155010: Commit fa ...
- 【操作系统】使用BCD工具安装Ubuntu操作系统
Ubuntu14.04作为目前最新版本的ubuntu系统,相信很多人都想在自己的电脑上安装一下,然而系统的安装方法各式各样,U盘法.grub引导法等等,本文将介绍在win7系统下用easyBCD软件建 ...
- apk下载与安装
public class MainActivity extends Activity { private File apkFile; @Override protected void onCreate ...