HTML(图像img、表格table、列表)

  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
无序列表
无序列表
无序列表
无序列表
有序列表
有序列表
有序列表
有序列表
自定义列表: 自定义列表
自定义列表: 自定义列表