一、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":表示横跨两行,同时要在下一行中删去一列
'''
如下: