一、img图片
<body> <a href="https://www.fmtxt.com"> <img src="images/1.jpg" title="哆啦A梦" style="height: 200px; 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":表示横跨两行,同时要在下一行中删去一列 '''
如下: