img、列表和table标签

时间:2023-01-29 23:23:19

一、img图片

<body>
<a href="https://www.fmtxt.com">
<img src="images/1.jpg" title="哆啦A梦" style="height: 200px; width: 200px " alt="哆啦A梦"/>
</a>
</body>

'''
1. 放在 a 标签中,点击图片就能跳转到链接的网站

2. src : 图片的位置

3. title:当鼠标放置在图片上时显示的内容

4. alt:当图片不能打开时,显示的内容
'''

  

二、列表标签

  2.1 ul标签

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

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

  如下:

img、列表和table标签

  2.2 ol标签

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

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

  如下:

img、列表和table标签

  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>

  如下:

img、列表和table标签

三、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: 表示列
'''

  如下:

  img、列表和table标签

  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标签:为表格中内容做链接

'''

  如下:

img、列表和table标签

  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":表示占两列, 同时要删去一列
'''

  如下:

img、列表和table标签

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

  如下:

img、列表和table标签