使用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>标签

更多相关文章

  1. Android(安卓)沉浸式状态栏实现
  2. Android自定义属性时TypedArray的使用方法
  3. 转帖并消化:Android中一种使用AttributeSet自定义控件的方法
  4. Android布局 android:gravity 和 android:layout_Gravity一些细
  5. Android属性动画应用超简单代码打造酷炫扇形(卫星),圆形菜单
  6. Android常用布局类整理(一)
  7. android架构师之路——APP外置换肤原理解析
  8. Android的一些属性
  9. Android布局之相对布局——RelativeLayout

随机推荐

  1. php RSA加密 JAVA 证书生成
  2. android与后台服务器的前后端通信
  3. java动态加载jar文件
  4. 003 恶补java运算(内容网摘)
  5. WebBrowser 遇到 javascript:void(0) 页
  6. IT兄弟连 JavaWeb教程 文件上传技术
  7. 读取Excel文件并跳过空行但不是空列
  8. Spring MVC-集成(Integration)-集成LOG4J示
  9. 有关JavaScript的认识
  10. Java将一个字符串中的多个连一起的空格变