博客列表 >html元素属性及常用布局标签的介绍,附案例!

html元素属性及常用布局标签的介绍,附案例!

OC的PHP大牛之路
OC的PHP大牛之路原创
2022年07月05日 17:22:02689浏览

元素的四种属性

1. 通用属性(几乎所有的元素都有)

id用来表示页面中的唯一元素
class用来表示同类元素
style用来自定义某个元素的样式

2. 预置属性(通用属性的一个子集)

  1. <a href=""></a>
  2. <img src="" alt="">

a标签和img标签中的href/src/alt都属于预置属性

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

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

常用的布局标签

header头部
main主体
footer页脚
hr水平分割线

“图片”是外部资源,通过标签引入到html中,通常使用单标签
<img src="图片地址" alt="文字说明">

“链接”
<a href="链接">文字说明</a>
<a href="../文件地址">文字说明</a>

“列表”
无序列表ul

  1. <ul>
  2. <li><a href="">item1</a></li>
  3. <li><a href="">item2</a></li>
  4. <li><a href="">item3</a></li>
  5. </ul>

有序列表ol

  1. <ol>
  2. <li><a href="">item1</a></li>
  3. <li><a href="">item2</a></li>
  4. <li><a href="">item3</a></li>
  5. </ol>

自定义列表dl
dt标题
dd说明

  1. <dl>
  2. <dt>地址:</dt>
  3. <dd>xx省xx市xx区</dd>
  4. </dl>

案例

列表案例

  1. <ul>
  2. <li><a href="https://baike.baidu.com/item/%E9%99%88%E8%8A%8B%E6%B1%90/22894783?fr=aladdin">陈芋汐<img src="https://img2.baidu.com/it/u=3619764950,178442798&fm=253&fmt=auto&app=138&f=JPEG?w=854&h=500" alt="" width="200"></a></li>
  3. <li><a href="https://baike.baidu.com/item/%E5%85%A8%E7%BA%A2%E5%A9%B5/53943633">全红婵<img src="https://img0.baidu.com/it/u=3871256462,664378978&fm=253&fmt=auto&app=138&f=PNG?w=652&h=450" alt="" width="200"></a></li>
  4. </ul>

表格元素

用“组合元素”表示,表格中的数据必须放在“单元格”中
colspan水平合并
rowspan垂直合并

案例

课程表

  1. <table width="600" border="1">
  2. <caption>课程表</caption>
  3. <thead>
  4. <tr bgcolor="lightgreen">
  5. <th bgcolor="lightblue"></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. <th rowspan="4" bgcolor="cyan">上午</th>
  16. <th bgcolor="yellow">校本</th>
  17. <th bgcolor="yellow">语文</th>
  18. <th bgcolor="yellow">语文</th>
  19. <th bgcolor="yellow">语文</th>
  20. <th bgcolor="yellow">英语</th>
  21. </tr>
  22. <tr bgcolor="lightgreen">
  23. <th bgcolor="yellow">英语</th>
  24. <th bgcolor="yellow">英语</th>
  25. <th bgcolor="yellow">数学</th>
  26. <th bgcolor="yellow">品生</th>
  27. <th bgcolor="yellow">语文</th>
  28. </tr>
  29. <tr bgcolor="lightgreen">
  30. <th bgcolor="yellow">语文</th>
  31. <th bgcolor="yellow">数学综</th>
  32. <th bgcolor="yellow">书法</th>
  33. <th bgcolor="yellow">数学</th>
  34. <th bgcolor="yellow">美术</th>
  35. </tr>
  36. <tr bgcolor="lightgreen">
  37. <th bgcolor="yellow">数学</th>
  38. <th bgcolor="yellow">形体</th>
  39. <th bgcolor="yellow">英语</th>
  40. <th bgcolor="yellow">体育</th>
  41. <th bgcolor="yellow">体育</th>
  42. </tr>
  43. <tr bgcolor="lightgreen">
  44. <th rowspan="4" bgcolor="cyan">下午</th>
  45. <th bgcolor="yellow">活动</th>
  46. <th bgcolor="yellow">科学</th>
  47. <th bgcolor="yellow">音乐</th>
  48. <th bgcolor="yellow">观影</th>
  49. <th bgcolor="yellow">数学</th>
  50. </tr>
  51. <tr bgcolor="lightgreen">
  52. <th bgcolor="yellow">活动</th>
  53. <th bgcolor="yellow">音乐</th>
  54. <th bgcolor="yellow">英语</th>
  55. <th bgcolor="yellow">品生</th>
  56. <th bgcolor="yellow">语文</th>
  57. </tr>
  58. <tr bgcolor="lightgreen">
  59. <th bgcolor="yellow">计算机</th>
  60. <th bgcolor="yellow">体育</th>
  61. <th bgcolor="yellow">兴趣</th>
  62. <th bgcolor="yellow">兴趣</th>
  63. <th bgcolor="yellow">班会</th>
  64. </tr>
  65. <tr bgcolor="lightgreen">
  66. <th bgcolor="yellow">美术</th>
  67. <th bgcolor="yellow">数学</th>
  68. <th bgcolor="yellow">兴趣</th>
  69. <th bgcolor="yellow">兴趣</th>
  70. <th bgcolor="yellow"></th>
  71. </tr>
  72. </tbody>
  73. <tfoot>
  74. <tr bgcolor="pink">
  75. <td colspan="6">注意:每天仅带需要上课的书本就行,不允许带水果、玩具进教室!</td>
  76. </tr>
  77. </tfoot>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议