一、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"：表示横跨两行，同时要在下一行中删去一列
'''
如下：
更多专业前端知识，请上 【猿2048】www.mk2048.com