img、列表和table标签

一、img图片

<body>
<a href="https://www.fmtxt.com">
<img src="data:images/1.jpg"  title="哆啦A梦" style="height: 200px; width: 200px " alt="哆啦A梦"/>
</a>
</body>
'''
1. 放在 a 标签中，点击图片就能跳转到链接的网站
2. src : 图片的位置
3. title：当鼠标放置在图片上时显示的内容
4. alt：当图片不能打开时，显示的内容
'''

　　注： img 标签默认会自带1px的边框，可以使用样式 boder:0 去掉这个边框

二、列表标签

　　2.1 ul标签

　　说明：ul=>unordered lists 无序列表，跟li标签配合着使用

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>

　　如下：

　　2.2 ol标签

　　说明：ol=>ordered lists 有序列表，也是跟li标签配合着使用　　

<body>
<ol>
<li>Python</li>
<li>Html</li>
<li>Linux</li>
</ol>
</body>

　　如下：

　　2.3 dl标签

　　dl=>defintion list 定义一个列表配合着dt=>defintion title(定义标题)和dd=>defintion description(描述)两个标签配合使用

<dl>
<dt>浙江</dt>
<dd>杭州</dd>
<dd>金华</dd>
<dd>嘉兴</dd>
<dt>江苏</dt>
<dd>苏州</dd>
<dd>南京</dd>
<dd>无锡</dd>
</dl>

　　如下：

三、table标签

　　3.1 tr 和 td　　

    <table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>上海</td>
</tr>
</table>
'''
1. tr : 表示行
2. td： 表示列
'''

　　如下：

　　3.2 规范的表格写法 　　

<table border="1">
<thead>
<tr>
<td>表头1</td>
<td>表头2</td>
<td>表头3</td>
<td>表头4</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="https://www.baidu.com">1</a>
</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>
'''
thead：表头
tbody：内容
a标签：为表格中内容做链接
'''

　　如下：

　　3.3 合并单元格--列之间合并　　

    <thead>
<tr>
<td>表头1</td>
<td>表头2</td>
<td>表头3</td>
<td>表头4</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
'''
colspan="2"：表示占两列， 同时要删去一列
'''

　　如下：

　　3.3 合并单元格--行之间合并　

    <tbody>
<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>
</tbody>
'''
rowspan="2"：表示横跨两行，同时要在下一行中删去一列
'''

　　如下：

更多专业前端知识，请上【猿2048】www.mk2048.com

img、列表和table标签相关推荐

HTML 框架、列表和table标签练习第二个模块2
HTML 框架和table标签练习 HTML 框架 iframe标签案例07 HTML 列表无序列表案例08 有序列表列表嵌套案例9 作业作业1制作方块导航器作业2使用table实现如下 ...
html5语言在tr下下拉列表,5-HTML列表， table表格标签及其属性-Go语言中文社区
一.有序列表 (ordered list) 格式: 有序列表有序列表有序列表语义及运用: 给一堆数据添加列表语义,数据有先后之分.常运用于歌单,排行榜等需要列出先后顺序的列表. 注意点: 1. ...
用li列表模拟table式的表
今天我们看看如何通过li列表模拟表格,实现多列布局: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
php中table是什么意思,table标签是什么意思
table标签是什么意思 table标签定义HTML表格,每个表格均有若干行(由标签定义),每行被分割为若干单元格(由标签定义).字母 td 指表格数据(table data),即数据单元格的内容 ...
table属于html标记吗,table标签是什么意思
table标签是什么意思 table标签定义HTML表格,每个表格均有若干行(由标签定义),每行被分割为若干单元格(由标签定义).字母 td 指表格数据(table data),即数据单元格的内容 ...
table标签、表格的跨行跨列、ifarme标签
table标签需求: 制作一个带表头的三行山列的表格,并显示边框:修改表格的宽度.高度.表格的对齐方式.单元格间距. <!DOCTYPE html> <html lang=&quo ...
HTML笔记（form与table标签区别，区分利用ul,dl与table标签）
文章目录区分 form标签 table标签 dl标签与table标签区分 <form>封装要被提交服务器的表单内容(一系列控件) form不管到底嵌套了多少个table标签;它只关心范 ...
用html语言编写表格,HTML表格（table标签）
在 HTML 中,我们使用一个完整的表格由多个标签构成,我们不妨先来看一段简单的 HTML 代码: 网站域名分类 C语言中文网 c.biancheng.net 在线教育百度 www.baidu ...
散列表(Hash Table)
散列表(Hash table,也叫哈希表),是根据关键码值(Key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个映射函数叫做散列 ...

img、列表和table标签

一、img图片

二、列表标签

三、table标签

img、列表和table标签相关推荐

最新文章

热门文章