博客列表 >图片、链接、列表的应用

图片、链接、列表的应用

猫九
猫九原创
2022年07月05日 17:53:26302浏览

图片、链接、列表的应用

1.图片

1.1 外链图片链接,img+src(图片地址)+alt(图片描述)+宽度

<img src="https://huaban.com/pins/4382365198" alt="妹汁" width="200">

1.2 本地图片链接,img+src(图片存储位置)+alt(图片描述)+宽度

<img src="images/001.webp" alt="卡通妹汁" width="300">

2.链接

2.1 跳转链接a标签+href(跳转的地址)+target(新打开页面/其他属性)

<p><a href="https://php.cn" target="_blank">php.cn</a>这里是20期php班</p>

2.2 下载附件a标签+href(文件)+tarfet(属性)

<a href="images.zip target="_blank">下载附件</a>

3.列表

3.1 有序列表 ul>li

  1. <ul>
  2. <li><a href="">导航</a></li>
  3. <li><a href="">导航</a></li>
  4. <li><a href="">导航</a></li>
  5. </ul>

3.2 无序列表 ol>li

  1. <ol>
  2. <li><a href="">导航</a></li>
  3. <li><a href="">导航</a></li>
  4. <li><a href="">导航</a></li>
  5. </ol>

3.3 自定义列表 dl>dt>dd

  1. <dl>
  2. <dt>地址:
  3. <dd>深圳市宝安区</dd>
  4. </dt>
  5. <dt>邮箱:
  6. <dd>potatodesigner@aliyun.com</dd>
  7. </dt>
  8. <dt>电话:
  9. <dd>18506168888</dd>
  10. </dt>
  11. </dl>

4.图片列表

ul>li*3>img{妹汁$@0};

  1. <ul>
  2. <li><img src="https://img0.baidu.com/it/u=2301353428,260634576&fm=253&fmt=auto&app=120&f=JPEG?w=333&h=500" alt="妹汁0" width="200"></img></li>
  3. <li><img src="https://img0.baidu.com/it/u=950234826,2310429801&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=725" alt="妹汁1" width="200"></img></li>
  4. <li><img src="https://img1.baidu.com/it/u=3079431989,3499240801&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729" alt="妹汁2" width="200"></img></li>
  5. </ul>

5. 表格

1.区分 表格:是用来展示多列多行 列表:多行单列
2.列表 ul>li / ol>li / dl>dt>dd
3.
表格 table>caption+(thead>tr>th)(tbody>tr>th)+(tfoot>tr>td)
4.table:表格 caption:标题 thead:表头 th:表头的列 tbody:表格主体 tr:> 行 td:列 tfoot:表尾
5.tbody必须有,thead可以不要

实例

  1. <table width="1200" border="1">
  2. <caption>数码宝贝进化表</caption>
  3. <thead bgcolor="#CBD69D" width="auto">
  4. <tr>
  5. <td width="170">/</td>
  6. <td width="170">一级形态</td>
  7. <td width="170">二级形态</td>
  8. <td width="170">三级形态</td>
  9. <td width="170">四级形态</td>
  10. <td width="170" colspan="3">五级形态</td>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr>
  15. <th bgcolor="#9DAED6">哈克兽</th>
  16. <td>刃王哈克兽</td>
  17. <td>救星哈克兽</td>
  18. <td>杰斯兽</td>
  19. <td rowspan="2" colspan="4"></td>
  20. </tr>
  21. <tr>
  22. <th bgcolor="#9DAED6">巴鲁兽</th>
  23. <td>仙人掌兽</td>
  24. <td>花仙兽</td>
  25. <td>蔷薇兽</td>
  26. </tr>
  27. <tr>
  28. <th bgcolor="#9DAED6">亚古兽</th>
  29. <td>暴龙兽</td>
  30. <td>机械暴龙兽</td>
  31. <td>战斗暴龙兽</td>
  32. <td>电光暴龙兽</td>
  33. <td>无限龙兽</td>
  34. </tr>
  35. <tr>
  36. <th bgcolor="#9DAED6">咪罗兽</th>
  37. <td>迪路兽</td>
  38. <td>天女兽</td>
  39. <td>天使兽</td>
  40. <td rowspan="2" colspan="4"></td>
  41. </tr>
  42. <tr>
  43. <th width="70" bgcolor="#9DAED6">加布兽</th>
  44. <td>加鲁鲁兽</td>
  45. <td>狼人加鲁鲁兽</td>
  46. <td>钢铁加鲁鲁兽</td>
  47. </tr>
  48. <style>
  49. table{
  50. text-align: center;
  51. font-size: small;
  52. border-color: rgb(11, 50, 155)
  53. }
  54. th{
  55. color: #ffffff;
  56. }
  57. </style>
  58. </tbody>
  59. </table>

表格作业

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议