Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML基础：HTML的图片、链接、列表、表格标签属性及使用案例/用表格做一个课程表
Blogger Information
Blog 14
fans 2
comment 1
visits 8006
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
HTML基础：HTML的图片、链接、列表、表格标签属性及使用案例/用表格做一个课程表
梦想
Original
616 people have browsed it

学习到的内容

一、html中的常用属性

  1. 通用属性
    1.1 id 唯一元素，唯一性自己保证
    1.2 class 同类元素
    1.3 style 样式元素
  1. 预置属性
    2.1 id class style 通常也属于预置属性
    2.2 预置属性是一个标签内预设置的属性如：<a href="https://www.php.cn">PHP中文网</a> 中的href就是预置属性,href中应放站点链接，注意必须是http:// 或者https:// 开头。效果图：1

2.3 <img src="https://img.php.cn/upload/aroundimg/000/000/068/623980ded5fcf319.jpg" alt="这是一个图片"> 其中 src展示的图片链接是必选属性 alt是在图片失效或不能正常显示
的情况下显示的文字效果图如下

  1. 事件属性
    3.1事件属性前面通常加个on+事件名称如：<button onclick="alert('php中文网')">111</button>

4.自定义属性

  • 和事件属性相同有个共同前缀data- 这个属性需要调用js实现

二、列表的使用语法

1.有序列表

  • `<ol>
    1.  <li>有序列表1</li>
    2.  <li>有序列表2</li>
    3.  <li>有序列表3</li>
    </ol>`效果图如下：

2.无序列表

  • <ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li></ul>
    效果图如下：

3.自定义列表

  • 使用dl声明标签 dt是列表的表题 dd是列表的内容
    代码：
    1. <dl>
    2.      <dt>自定义列表 我是标题</dt>
    3.      <dd>你好1 我是内容</dd>
    4.      <dd>你好2</dd>
    5.      <dd>你好3</dd>
    6.  </dl>
    效果图见下面:

课程表小实例

仿照以下课程表

效果图如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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="1" style="text-align: center;" width="500">
  11.         <caption><h3>七年级七班“停课不停学”临时课程表 （2020.2）</h3></caption>
  12.         <thead style="background-color: rgba(2, 238, 255, 0.829);">
  13.             <th>时间</th>
  14.             <th>星期</th>
  15.             <th>周一</th>
  16.             <th>周二</th>
  17.             <th>周三</th>
  18.             <th>周四</th>
  19.             <th>周五</th>
  20.         </thead>
  21.         <tbody>
  22.             <tr>
  23.                 <td>7：40-8：20</td>
  24.                 <td colspan="6" align="center">早读</td>  
  25.             </tr>
  26.             <tr>
  27.                 <td>8：30-9：10</td>
  28.                 <td>第一节</td>
  29.                 <td>英语</td>
  30.                 <td>数学</td>
  31.                 <td>数学</td>
  32.                 <td>英语</td>
  33.                 <td>数学</td>
  34.             </tr>
  35.             <tr>
  36.                 <td>9：20-10：00</td>
  37.                 <td>第二节</td>
  38.                 <td>地理</td>
  39.                 <td>语文</td>
  40.                 <td>语文</td>
  41.                 <td>语文</td>
  42.                 <td>英语</td>
  43.             </tr>
  44.             <tr>
  45.                 <td>10：10-10：50</td>
  46.                 <td>第三节</td>
  47.                 <td>语文</td>
  48.                 <td>英语</td>
  49.                 <td>英语</td>
  50.                 <td>数学</td>
  51.                 <td>语文</td>
  52.             </tr>
  53.             <tr>
  54.                 <td>11：00-11：40</td>
  55.                 <td>第四节</td>
  56.                 <td>数学</td>
  57.                 <td>历史</td>
  58.                 <td>数学</td>
  59.                 <td>地理</td>
  60.                 <td>政治</td>
  61.             </tr>
  62.             <tr>
  63.                 <td>11：40-13：40</td>
  64.                 <td>午饭</td>
  65.                 <td colspan="5">午休</td>
  66.             </tr>
  67.             <tr>
  68.                 <td>14：00-14：40</td>
  69.                 <td>第五节</td>
  70.                 <td>生物</td>
  71.                 <td>生物</td>
  72.                 <td>语文</td>
  73.                 <td>历史</td>
  74.                 <td>生物</td>
  75.             </tr>
  76.             <tr>
  77.                 <td>14：50-15：30</td>
  78.                 <td>第六节</td>
  79.                 <td>英语</td>
  80.                 <td>语文</td>
  81.                 <td>英语</td>
  82.                 <td>数学</td>
  83.                 <td>语文</td>
  84.             </tr>
  85.             <tr>
  86.                 <td>15：40-16：20</td>
  87.                 <td>第七节</td>
  88.                 <td>语文</td>
  89.                 <td>英语</td>
  90.                 <td>生物</td>
  91.                 <td>英语</td>
  92.                 <td>数学</td>
  93.             </tr>
  94.             <tr>
  95.                  <td>16：30-17：10</td>
  96.                 <td>第八节</td>
  97.                 <td>数学</td>
  98.                 <td>地理</td>
  99.                 <td>政治</td>
  100.                 <td>政治</td>
  101.                 <td>地理</td>
  102.             </tr>
  103.             <tr>
  104.                 <td>18：40-19：30</td>
  105.                 <td align="center" colspan="6">晚自习一</td>
  106.             </tr>
  107.             <tr>
  108.                 <td>19：40-20：30</td>
  109.                 <td colspan="6" align="center">晚自习二</td>
  110.             </tr>
  111.             <tr>
  112.                  <td colspan="7">说明：早读时间由语文和英语老师布置适当的早读任务，可以下载一些音频在平台上播放，一三五语文，二四英语，下周再倒过来，期间早读老师要在平台上抽查学生的上课情况，晚自习学生完成当天作业及预习第二天学习内容，由班主任抽查学习到位情况。</td>
  113.             </tr>
  114.         </tbody>
  115.     </table>
  116.     </body>
  117.     </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