1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <!-- 图片(重点) --> 12 <!-- src放图片的位置/...(按文件夹所在的位置， 13 如果不在与该.html文件同文件夹则用点"."返回到上一个文件夹) --> 14 <!-- alt放图片不能显a示时代替的文字 --> 15 <!-- <img src="tp/xxx.png" alt="狮子王,小鹿"> --> 16 <!-- 在尖括号中可以设置图片的大小,边框 --> 17 <!-- <img src="" alt="狮子王，小鹿" width="10px" height="10px"> --> 18 <!-- border 为图像设置边框 --> 19 <img border="10px" src="tp/1.gif" alt="狮子王，小鹿" width="50px" height="37px"> 20 21 <br> 22 <!-- img使用map --> 23 <!--usemap="#lion_king" 给图片加lion_king的id--> 24 <img src="tp/1.gif" src="tp/1.jpg" alt="狮子王，小鹿" usemap="#lion_king"> 25 <!-- name="lion_king"使用图片的id--> 26 <!-- <area shape="选择面积（矩形rect）还是（园circle）" 27 coords="（矩形起始坐标到终止坐标，圆圆心坐标半径）" 28 href="要查看的图片位置或图片对应的网址" alt="无法加载时图片的名称"> --> 29 <map name="lion_king"> 30 <area shape="rect" coords="140,0,280,360" href="tp/3.gif" alt="大鹿"> 31 <area shape="circle" coords="375,280,50" href="https://baike.baidu.com/item/%E7%8B%AE%E5%AD%90%E7%8E%8B/29497?fr=aladdin" alt="小鹿"> 32 </map> 33 34 <!-- 表格 --> 35 <!-- 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 --> 36 <table> 37 <!-- caption定义表格名称 ,<caption> 标签必须直接放置到 <table> 标签之后--> 38 <caption>表格名称</caption> 39 <!-- tr标签,行标签 --> 40 <tr> 41 <!-- th标签,定义表头,效果会加粗居中一般会用td代替--> 42 <th>姓名</th> 43 <th>姓名</th> 44 <th>姓名</th> 45 </tr> 46 <tr> 47 <!-- td标签,定义表单元 --> 48 <td>123</td> 49 <td>123</td> 50 <td>123</td> 51 </tr> 52 <tr> 53 <td>345</td> 54 <td>345</td> 55 <td>345</td> 56 </tr> 57 </table> 58 <!-- <table width="100%" border="边框的宽度" cellspacing="单元格的外边距" cellpadding="单元格内容字的边距" align="center" bgcolor="blue"></table> --> 59 <table width="100%" border="1" cellspacing="12" cellpadding="12" align="center" bgcolor="fcfcfc"> 60 <tr> 61 <th>姓名</th> 62 <th>姓名</th> 63 <th>姓名</th> 64 </tr> 65 <tr> 66 <th>123</th> 67 <th>123</th> 68 <th>123</th> 69 </tr> 70 </table> 71 <!-- 列表 --> 72 <!-- 无序列表 使用频率高,在后面会在浮动上运用--> 73 <!-- li 使用 style="list-style-type:"来选择是否有圆点,什么样的圆点--> 74 <ul> 75 <li style="list-style-type:none">无序列表</li> 76 <li style="list-style-type:circle">无序列表</li> 77 <li style="list-style-type:lower-greek">无序列表</li> 78 <li style="list-style-type:square">无序列表</li> 79 </ul> 80 <!-- 有序列表 使用的少 --> 81 <ol> 82 <li>有序列表</li> 83 <li>有序列表</li> 84 <li>有序列表</li> 85 <li>有序列表</li> 86 </ol> 87 <!-- 自定义列表 使用少--> 88 <!-- 自定义列表以 <dl> 标签开始。 89 每个自定义列表项以 <dt> 开始。 90 每个自定义列表项的定义以 <dd> 开始 --> 91 <dl> 92 <!-- dd会首航缩进 --> 93 <dt>自定义列表</dt> 94 <dd>自定义列表</dd> 95 <dt>自定义列表</dt> 96 <dd>自定义列表</dd> 97 </dl> 98 99 </body> 100 101 </html>
由于兼容性问题使得map中的效果无法显示
| 姓名 | 姓名 | 姓名 |
|---|---|---|
| 123 | 123 | 123 |
| 345 | 345 | 345 |
| 姓名 | 姓名 | 姓名 |
|---|---|---|
| 123 | 123 | 123 |
- 无序列表
- 无序列表
- 无序列表
- 无序列表
- 有序列表
- 有序列表
- 有序列表
- 有序列表
- 自定义列表
- 自定义列表
- 自定义列表
- 自定义列表