Blogger Information
Blog 3
fans 0
comment 1
visits 975
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
图片、链接、列表的应用
猫九
Original
301 people have browsed it

图片、链接、列表的应用

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>

表格作业

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post