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%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...
随机推荐
- Ecilpse绑定jdk的源码
因为近期才入职,所以电脑环境才配好,今天在写代码的时候,想查看源码,发现不能查看,所以在网上百度了一下: 下面是解决方法: 1.在Ecilpse的窗体下,点击Preferences 2.然后点击Jav ...
- 1.新手上路：Windows下，配置Qt环境
个人体会: 我最初只是想看看C++除了"黑窗口"之外,怎么才能做一些"更好看的东西".之后在网上看到有人推荐Qt,就看了一下官网(https://www.qt. ...
- java nio 通道(二)
本文章来源于我的个人博客: java nio 通道(二) 一,文件通道 文件通道总是堵塞式的,因此不能被置于非堵塞模式. FileChannel对象是线程安全的.多个进程能够在同一个实例上并发调用方法 ...
- Vue入门（一） 环境配置
Node.js 安装,https://nodejs.org/en/ 默认安装就可以 安装好后测试版本,cmd 键入命令 1.node -v 2.npm -v 安装,淘宝 NPM n ...
- 超简单易用的 “在 pcduino 开发板上写 Linux 驱动控制板载 LED 的闪烁”
版权声明:本文为博主原创文章,未经博主同意不得转载.转载联系 QQ 30952589,加好友请注明来意. https://blog.csdn.net/sleks/article/details/251 ...
- vim编辑makefile时临时不展开tab为空格
可以先敲ctrl-v组合键,再敲tab键,这样就不会被转换成空格了. 给自己的备忘!
- NOIP2015_提高组Day2_3_运输计划
这题思路很简单: 先对每个询问求距离,对距离由大到小排序, 二分最小距离,验证是否可行,验证时用差分处理: #include<iostream> #include<cstring&g ...
- backbone测试代码
一.入门测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 未公开函数MessageBoxTimeOut 实现定时消息(ZT) MFC实现MessageBox自动消失
http://www.blogjava.net/baicker/archive/2007/07/13/130072.html #include <windows.h> #include & ...
- linux应用之用户管理相关命令
1. useradd useradd 命令可以创建一个新的用户帐号,其最基本用法为: useradd 用户名 如输入以下命令: useradd newuser 系统将创建一个新用户 newuser,该 ...