博客列表 >使用HTML标签制作简单的导航和课程表

使用HTML标签制作简单的导航和课程表

Pharaoh
Pharaoh原创
2022年07月04日 23:13:39656浏览

使用HTML标签制作简单的导航和课程表

1.制作简单的图文列表

  1. <ui>
  2. <li><a href=""><img src="图片url" alt="" width="200"></a></li>
  3. <li><a href=""><img src="图片url" alt="" width="200"></a></li>
  4. <li><a href=""><img src="图片url" alt="" width="200"></a></li>
  5. </ui>

效果:

2.制作简单的导航

  1. <ol>
  2. <li><a href="页面URL">关于我们</a></li>
  3. <li><a href="页面URL">联系我们</a></li>
  4. <li><a href="页面URL">帮助</a></li>
  5. </ol>

效果:

3.制作简单的友情链接

  1. <dl>
  2. <dt>友情链接</dt>
  3. <dd><a href="www.baidu.com">百度</a></dd>
  4. <dt>友情链接</dt>
  5. <dd><a href="www.php.cn">php中文网</a></dd>
  6. <dt>友情链接</dt>
  7. <dd><a href="www.163.com">网易</a></dd>
  8. </dl>

效果:

4.制作简单的课程表

  1. <table border="1" style="text-align: center;">
  2. <caption>课程表</caption>
  3. <thead>
  4. <tr bgcolor="green">
  5. <th>时间</th>
  6. <th>星期一</th>
  7. <th>星期二</th>
  8. <th>星期三</th>
  9. <th>星期四</th>
  10. <th>星期五</th>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr>
  15. <td rowspan="4" >上午<br/>8:00-11:50</td>
  16. <td>语文</td>
  17. <td>语文</td>
  18. <td>数学</td>
  19. <td>英语</td>
  20. <td>数学</td>
  21. </tr>
  22. <tr>
  23. <td>数学</td>
  24. <td>英语</td>
  25. <td>音乐</td>
  26. <td>美术</td>
  27. <td>体育</td>
  28. </tr>
  29. <tr>
  30. <td>语文</td>
  31. <td>数学</td>
  32. <td>语文</td>
  33. <td>英语</td>
  34. <td>语文</td>
  35. </tr>
  36. <tr>
  37. <td>英语</td>
  38. <td>语文</td>
  39. <td>英语</td>
  40. <td>语文</td>
  41. <td>英语</td>
  42. </tr>
  43. <tr bgcolor="yellow">
  44. <td colspan="6">中午休息</td>
  45. </tr>
  46. <tr>
  47. <td rowspan="3">下午<br/>13:30-13:30</td>
  48. <td>美术</td>
  49. <td>音乐</td>
  50. <td>语文</td>
  51. <td>数学</td>
  52. <td>体育</td>
  53. </tr>
  54. <tr>
  55. <td>体育</td>
  56. <td>美术</td>
  57. <td>数学</td>
  58. <td>语文</td>
  59. <td>美术</td>
  60. </tr>
  61. <tr>
  62. <td>音乐</td>
  63. <td>体育</td>
  64. <td>英语</td>
  65. <td>英语</td>
  66. <td>音乐</td>
  67. </tr>
  68. </tbody>
  69. <tfoot>
  70. <tr bgcolor="yellow">
  71. <td>备注:</td>
  72. <td colspan="5">下午放学后需要做完作业才可以回家</td>
  73. </tr>
  74. </tfoot>
  75. </table>

效果:

学习总结

标签元素的属性和语义化布局

1.通用属性:ID,CLASS,STYLE,几乎所有的元素都有。

id: 唯一元素
class: 同类元素
style: 自定义某个元素样式

2.预置属性:

a标签里的href和img标签里的src就是预置属性。
ID,CLASS,STYLE,也是预置属性,只不过几乎所有的元素都会有。

3.事件属性:有一个通用前缀: on+事件名称: 事件属性

<button onclick="alert('提交成功')">提交</button>

4.自定义属性:有一个通用前缀: “data-“

v-model , v-for, v-bind, 都是自定义属性

5.语义化布局:HTML5定义了一种新的语义化标签来描述元素的内容,让很多更语义化的结构化代码标签代替大量无意义的<div>标签

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