Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 图文列表操作、表格制作课程表
Blogger Information
Blog 9
fans 0
comment 0
visits 4010
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
图文列表操作、表格制作课程表
龠
Original
416 people have browsed it

html中的列表

  • html中的图片属性

    <img src="" alt=""/>

  • html中的链接属性
    <a src="">链接内容</a>

  • html中的列表属性
    代码：

    1.     <!-- 无序列表 -->
    2. <ul>
    3.   <li>a</li>
    4.   <li>b</li>
    5.   <li>c</li>
    6. </ul>
    7. <!-- 有序列表 -->
    8. <ol>
    9.   <li>a</li>
    10.   <li>b</li>
    11.   <li>c</li>
    12. </ol>
    13. <!-- 解释说明列表 -->
    14. <dl>
    15.   <dt>西红柿</dt>
    16.   <dd>一种可以吃的蔬菜</dd>
    17. </dl>

    效果：

图片、链接、列表制作图文列表

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <ul class="nav" style="display: flex;list-style:none;">
  11.         <li>
  12.             <a href="https://www.baidu.com"><img src="static/images/bear.jpg" alt="小熊" width="200" height="100"></a><a href="">小熊</a>
  13.         </li>
  14.         &nbsp;
  16.         <li>
  17.             <a href="https://www.php.cn"><img src="static/images/dog.jpg" alt="小狗" width="200" height="100"></a>
  18.             <a href="">小狗</a>
  19.         </li>
  20.         &nbsp;
  22.         <li>
  23.             <a href="https://www.php.net"><img src="static/images/duck.jpg" alt="小鸭" width="200" height="100"></a>
  24.             <a href="">小鸭</a>
  25.         </li>
  26.         &nbsp;
  28.     </ul>
  29. </body>
  30. </html>

效果：

使用表格写一个课程表

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.   <table border="1" cellspacing="0" align="center" width="300" bgcolor="underint">
  11.       <caption>
  12.           学生课程休息表
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.             <th>时间</th>
  17.             <th>周一</th>
  18.             <th>周二</th>
  19.             <th>周三</th>
  20.             <th>周四</th>
  21.             <th>周五</th>
  22.         </tr>
  23.       </thead>
  24.       <tbody>
  25.         <tr>
  26.             <td rowspan="2">上午</td>
  27.             <td>语文</td>
  28.             <td>体育</td>
  29.             <td>英语</td>
  30.             <td>数学</td>
  31.             <td>体育</td>
  32.         </tr>
  33.         <tr>
  35.             <td>英语</td>
  36.             <td>政治</td>
  37.             <td>生物</td>
  38.             <td>自然</td>
  39.             <td>语文</td>
  40.         </tr>
  41.         <tr>
  42.             <td align="center" colspan="6">中午吃饭</td>
  44.         </tr>
  45.         <tr>
  46.             <td rowspan="2">体育</td>
  47.             <td>数学</td>
  48.             <td>英语</td>
  49.             <td>化学</td>
  50.             <td>物理</td>
  51.             <td>化学</td>
  52.         </tr>
  53.         <tr>
  55.             <td>物理</td>
  56.             <td>体育</td>
  57.             <td>数学</td>
  58.             <td>化学</td>
  59.             <td>英语</td>
  60.         </tr>
  61.         </tbody>
  62.         <tfoot>
  63.             <td>注意</td>
  64.             <td colspan="5" align="center">晚上写作业</td>
  65.         </tfoot>
  66.   </table>
  67. </body>
  68. </html>

效果：

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