img、列表和table标签

一、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：当图片不能打开时，显示的内容
'''

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

　　如下：