图文列表学习与实践

1.图片、列表、链接标签：

  • html中图片标签：
    1. <img src="" alt=""/>
    其中src和alt被称为预制属性
  • html中链接标签：
    1. <a href=""></a>
    a标签为双标签，href为其预制属性
  • html中列表标签:
    1.   <!-- 无序列表 -->
    2.   <ul>
    3.       <li>x</li>
    4.       <li>x</li>
    5.       <li>x</li>
    6.       <li>x</li>
    7.       <li>x</li>
    8.   </ul>
    9.   <!-- 有序列表 -->
    10.   <ol>
    11.       <li>y</li>
    12.       <li>y</li>
    13.       <li>y</li>
    14.       <li>y</li>
    15.       <li>y</li>
    16.   </ol>
    17.   <!-- 自定义列表 -->
    18.   <dl>
    19.       <dt>xy</dt>
    20.       <dd>xz</dd>
    21.   </dl>
    列表效果：

2.图文序列实践:

代码：

  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=device-width, initial-scale=1.0">
  7.     <title>图文序列</title>
  8. </head>
  9. <body>
  10.     <ul class="nav" style="display: flex; list-style: none">
  11.         <li><a href="http://www.baidu.com"><img src="/0317/static/images/bear.jpg" alt=""></a></li>
  12.         &nbsp;
  13.         <!-- &nbsp;为空格，如果不用&nbsp；浏览器会将输入的多空格默认认为只有一个空格 -->
  14.         <li><a href="http://www.baidu.com"><img src="/0317/static/images/dog.jpg" alt=""></a></li>
  15.         &nbsp;
  16.         <li><a href="http://www.baidu.com"><img src="/0317/static/images/duck.jpg" alt=""></a></li>
  17.         &nbsp;
  18.         <li><a href="http://www.baidu.com"><img src="/0317/static/images/bear.jpg" alt=""></a></li>
  19.     </ul>
  20. </body>
  21. </html>

代码实现：

3.表格标签的学习总结：

3.1 表格的标签：

  • 定义表格：<table></table>

  • 定义表格的标题：<caption></caption>

  • 定义表格的表头：：<th></th>

  • 定义表格单元：<td></td>

    • 表格单中的属性：
      <td colspan="x"></td>
      colspan为跨列合并，x为合并列数
      <td rowspan="x"></td>
      rowspan为跨行合并，x为合并行数

  • 定义表格页眉：<thead></thsead>

  • 定义表格主体：<tbody></tbody>

  • 定义表格的页脚：<tfoot></tfoot

注意：表格的定义先行后列

3.2 课程表的实现：

代码：
  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=device-width, initial-scale=1.0">
  7.     <title>课程表</title>
  8. </head>
  9. <body> 
  10.     <table border="6" width="750px" align="center" frame="void" height="100px" cellspacing="0px" cellpadding="10px">
  11.         <!-- 表格标题 -->
  12.         <caption font-size="280px">
  13.             江苏大学电子信息工程19级课程表
  14.         </caption>
  15.         <!-- 表头 -->
  16.         <thead>
  17.             <tr height="50px" align="center">
  18.                 <th colspan="2" width="110px">时间</th>
  19.                 <!-- <th></th> -->
  20.                 <th width="110px">星期一</th>
  21.                 <th width="110px">星期二</th>
  22.                 <th width="110px">星期三</th>
  23.                 <th width="110px">星期四</th>
  24.                 <th width="110px">星期五</th>
  25.             </tr>
  26.         </thead>
  27.         <!-- 表体 -->
  28.         <tbody>
  29.             <tr>
  30.                 <td colspan="2">早晨</td>
  31.                 <!-- <td></td> -->
  32.                 <td></td>
  33.                 <td></td>
  34.                 <td></td>
  35.                 <td></td>
  36.                 <td></td>
  37.             </tr>
  38.             <tr>
  39.                 <td rowspan="4">上午</td>
  40.                 <td>第1节</td>
  41.                 <td></td>
  42.                 <td></td>
  43.                 <td rowspan="2">DSP原理及应用</td>
  44.                 <td rowspan="2">Windows应用程序设计</td>
  45.                 <td rowspan="2">网络系统集成及应用</td>
  46.             </tr>
  47.             <tr>
  48.                 <!-- <td>x</td> -->
  49.                 <td>第2节</td>
  50.                 <td></td>
  51.                 <td></td>
  52.                 <!-- <td>x</td> -->
  53.                 <!-- <td>x</td> -->
  54.                 <!-- <td></td> -->
  55.             </tr>
  56.             <tr>
  57.                 <!-- <td>x</td> -->
  58.                 <td>第3节</td>
  59.                 <td></td>
  60.                 <td rowspan="2">Windows应用程序设计</td>
  61.                 <td></td>
  62.                 <td></td>
  63.                 <td rowspan="2">数字图像处理</td>
  64.             </tr>
  65.             <tr>
  66.                 <!-- <td>x</td> -->
  67.                 <td>第4节</td>
  68.                 <td></td>
  69.                 <!-- <td>x</td> -->
  70.                 <td></td>
  71.                 <td></td>
  72.                 <!-- <td></td> -->
  73.             </tr>
  74.             <tr>
  75.                 <td rowspan="4">下午</td>
  76.                 <td>第5节</td>
  77.                 <td rowspan="2">人工智能技术</td>
  78.                 <td rowspan="2">计算机网络技术</td>
  79.                 <td></td>
  80.                 <td rowspan="2">计算机网络技术</td>
  81.                 <td></td>
  82.             </tr>
  83.             <tr>
  84.                 <!-- <td>x</td> -->
  85.                 <td>第6节</td>
  86.                 <!-- <td>x</td> -->
  87.                 <!-- <td>x</td> -->
  88.                 <td></td>
  89.                 <!-- <td>x</td> -->
  90.                 <td></td>
  91.             </tr>
  92.             <tr>
  93.                 <!-- <td>x</td> -->
  94.                 <td>第7节</td>
  95.                 <td rowspan="2">物联网技术及应用</td>
  96.                 <td></td>
  97.                 <td></td>
  98.                 <td rowspan="2">人工智能技术</td>
  99.                 <td></td>
  100.             </tr>
  101.             <tr>
  102.                 <!-- <td>x</td> -->
  103.                 <td>第8节</td>
  104.                 <!-- <td>x</td> -->
  105.                 <td></td>
  106.                 <td></td>
  107.                 <!-- <td>x</td> -->
  108.                 <td></td>
  109.             </tr>
  110.             <tr>
  111.                 <td rowspan="3">晚上</td>
  112.                 <td>第9节</td>
  113.                 <td></td>
  114.                 <td></td>
  115.                 <td></td>
  116.                 <td></td>
  117.                 <td></td>
  118.             </tr>
  119.             <tr>
  120.                 <!-- <td>x</td> -->
  121.                 <td>第10节</td>
  122.                 <td></td>
  123.                 <td></td>
  124.                 <td></td>
  125.                 <td></td>
  126.                 <td></td>
  127.             </tr>
  128.             <tr>
  129.                 <!-- <td>x</td> -->
  130.                 <td>第11节</td>
  131.                 <td></td>
  132.                 <td></td>
  133.                 <td></td>
  134.                 <td></td>
  135.                 <td></td>
  136.             </tr>
  137.             <tr>
  138.                 <td colspan="7" align="center">熄灯</td>
  139.                 <!-- <td>x</td>
  140.                 <td>x</td>
  141.                 <td>x</td>
  142.                 <td>x</td>
  143.                 <td>x</td>
  144.                 <td></td> -->
  145.             </tr>
  146.             <!-- <tr>
  147.                 <td>x</td>
  148.                 <td>x</td>
  149.                 <td>x</td>
  150.                 <td>x</td>
  151.                 <td>x</td>
  152.                 <td>x</td>
  153.                 <td></td>
  154.             </tr> -->
  155.         </tbody>
  156.     </table>
  157. </body>
  158. </html>
效果展示：

更多相关文章

  1. Android双列滑动表格(双表头不动)
  2. vscode的安装与插件安装，md演示与H5标签功能
  3. markdown和html的初体验
  4. Markdown知识点+HTML标签对应功能
  5. Markdown语法小结和HTML标签学习小结
  6. 0316html
  7. HTML基础标签练习作业
  8. Markdown基本运用与HTML描述及标签
  9. HTML表格制作

随机推荐

  1. 新手求助一条sql语句~~帮忙看看
  2. SQL 日志太大,脚本清除
  3. 使用python抓取csdn博客访问量并保存在sq
  4. 编译安装mysql-server5.6.32手记
  5. 将非常简单的Expression >转换为SQL wher
  6. Mysql基础篇(笔记)
  7. 入门 --ubuntu下面mysql数据库安装以及相
  8. SQLite3使用总结备忘(多线程/WAL/锁等)
  9. MySQL：讨人喜欢的 MySQL replace into 用
  10. [新开一贴]php5.4 连接Sqlserver2008 的