博客列表 >HTML常用标签属性以及应用场景/怎么用表格做一个课程表

HTML常用标签属性以及应用场景/怎么用表格做一个课程表

汇享科技
汇享科技原创
2022年07月05日 08:57:41646浏览

HTML元素属性/应用场景

元素属性有四种分别是通用属性、预置属性、事件属性、自定义属性

1.通用属性

  • 通用属性有三个分别是id、class、style 通用属性是基本所有元素都可以使用的
    • id:通常为元素的唯一属性 注意:此“唯一”是用户自己判定的唯一
    • class:用的比较多,它满足了样式复用的基本
    • style:行内样式属性通过它可以改变某个元素的自定义样式

      2.预置属性

  • 预置属性是指某些元素/标签内独有的属性相当于通用属性的子集
    • 例如:a标签中的href属性<a hred="url地址"></a>
    • 例如:img标签中的src属性 alt属性 <img src="" alt=""/>
    • 当然通用属性也是内置属性只不过基本绝大多数元素都可以用

      3.事件属性

  • 事件属性是只一个可以产生一些交互事件的属性 有一个共同前缀on + 事件名称 组成的事件方法
    • 例如点击事件:onclick <button onclick="alert(1)"></button>

      4.自定义属性

  • 自定义属性是用户自定义的一个属性 有一个共同前缀 data-自定义属性名
    • 例如<div data-username="张三"></div> 自定义属性需要通过js代码来获取

常用布局标签

  • 布局标签:语义化的标签 用的更多的还是div+class
    • 布局标签有常用的有<header></header>、<main></main>、<footer></footer>、<nav></nav>
    • 布局标签通常用在简单一点的布局上面

常用标签介绍

常用的三种标签图片、链接、列表标签

1.图片标签

  • 图片标签是引入外部图片例如<img src="图片地址" alt=""/> 注意:通常引用的外部资源多半都是使用单标签
    l56ugbgo.png

2.链接标签

  • 链接标签的应用场景居多:<a href="https://www.hui-xiang.cn">跳转网页</a>比如这段代码在浏览器如下图 点击后将会跳转到新界面
  • a标签内有一个属性target通常使用它的两个属性_blank:在新页面打开网页 _self:覆盖当前页面打开
    l56uk5lv.png

3.列表标签

有序列表ol、无序列表ul、自定义列表dl(注意里面是成对出现的)

  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>Document</title>
  8. </head>
  9. <body>
  10. <ul>
  11. <li>无序列表</li>
  12. </ul>
  13. <ol>
  14. <li>有序列表</li>
  15. </ol>
  16. <dl>
  17. <dt>标题:</dt>
  18. <dd>自定义列表</dd>
  19. </dl>
  20. </body>
  21. </html>

l56umu7u.png

通常图片元素和链接元素会搭配着列表元素使用

表格元素

表格在很久以前会用来布局 再后来被div+css替代 现在被flex和grid替代
表格目前通常使用格式化数据输出

  • 表格通常由<table>+<tbody>+<tr>+<td>组成
  • thead和tfoot是可选元素可以写可以不写

合并单元格

  • 合并单元格使用两个属性rowspan:合并水平单元格 colspan:合并垂直单元格
    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>Document</title>
    8. </head>
    9. <body>
    10. <table border="1px">
    11. <caption>
    12. xxx
    13. </caption>
    14. <thead>
    15. <tr>
    16. <th>xxx</th>
    17. <th>xxx</th>
    18. <th>xxx</th>
    19. <th>xxx</th>
    20. <th>xxx</th>
    21. </tr>
    22. </thead>
    23. <tbody>
    24. <tr>
    25. <td rowspan="4">item1</td>
    26. <td>item2</td>
    27. <td>item3</td>
    28. <td>item4</td>
    29. <td>item5</td>
    30. </tr>
    31. <tr>
    32. <!-- <td>item1</td> -->
    33. <td>item2</td>
    34. <td colspan="3">item3</td>
    35. <!-- <td>item4</td> -->
    36. <!-- <td>item5</td> -->
    37. </tr>
    38. <tr>
    39. <!-- <td>item1</td> -->
    40. <td>item2</td>
    41. <td>item3</td>
    42. <td>item4</td>
    43. <td>item5</td>
    44. </tr>
    45. <tr>
    46. <!-- <td>item1</td> -->
    47. <td>item2</td>
    48. <td>item3</td>
    49. <td>item4</td>
    50. <td>item5</td>
    51. </tr>
    52. </tbody>
    53. </table>
    54. </body>
    55. </html>
    l56v0j27.png

用图片、链接和列表做个图片导航和用表格做一个课程表

l56v6eh0.png

  1. <!-- 在vscode当中输入html:5或者一个英文状态下的感叹号!按下TAB键即可自动生成如下代码 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <title>课程表</title>
  9. <style>
  10. table {
  11. border-collapse: collapse;
  12. border: 1px solid red;
  13. font-size: 16px;
  14. font-weight: bold;
  15. margin: auto;
  16. }
  17. table th,
  18. table td {
  19. border: 1px solid blue;
  20. padding: 3px;
  21. }
  22. table th {
  23. background-color: lightgreen;
  24. }
  25. ul {
  26. list-style: none;
  27. display: flex;
  28. }
  29. ul li img {
  30. width: 100px;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <p>图片导航:</p>
  36. <ul>
  37. <li>
  38. <a href="">
  39. <img
  40. src="https://www.php.cn/static/images/PHPlogo.png"
  41. alt="php中文网"
  42. />
  43. </a>
  44. </li>
  45. <li>
  46. <a href="" target="_self"
  47. ><img
  48. src="https://www.php.cn/static/images/PHPlogo.png"
  49. alt="php中文网"
  50. /></a>
  51. </li>
  52. <li>
  53. <a href=""
  54. ><img
  55. src="https://www.php.cn/static/images/PHPlogo.png"
  56. alt="php中文网"
  57. /></a>
  58. </li>
  59. </ul>
  60. <hr />
  61. <p>课程表作业:</p>
  62. <table>
  63. <caption>
  64. 课程表
  65. </caption>
  66. <thead>
  67. <tr>
  68. <th>时间</th>
  69. <th>节次</th>
  70. <th>星期一</th>
  71. <th>星期二</th>
  72. <th>星期三</th>
  73. <th>星期四</th>
  74. <th>星期五</th>
  75. </tr>
  76. </thead>
  77. <tbody>
  78. <tr>
  79. <td rowspan="4">上午</td>
  80. <td>1</td>
  81. <td>科学</td>
  82. <td>语文</td>
  83. <td>语文</td>
  84. <td>校本</td>
  85. <td>语文</td>
  86. </tr>
  87. <tr>
  88. <!-- <td>xxx</td> -->
  89. <td>2</td>
  90. <td>语文</td>
  91. <td>数学</td>
  92. <td>数学</td>
  93. <td>语文</td>
  94. <td>校本</td>
  95. </tr>
  96. <tr>
  97. <!-- <td>xxx</td> -->
  98. <td>3</td>
  99. <td>数学</td>
  100. <td>美术</td>
  101. <td>体育</td>
  102. <td>数学</td>
  103. <td>足球</td>
  104. </tr>
  105. <tr>
  106. <!-- <td>xxx</td> -->
  107. <td>4</td>
  108. <td>体育</td>
  109. <td>环安</td>
  110. <td>道法</td>
  111. <td>美术</td>
  112. <td>综合</td>
  113. </tr>
  114. <tr>
  115. <td colspan="7" align="center">午休(12:00-13:30)</td>
  116. <!-- <td>xxx</td>
  117. <td>xxx</td>
  118. <td>xxx</td>
  119. <td>xxx</td>
  120. <td>xxx</td>
  121. <td>xxx</td> -->
  122. </tr>
  123. <tr>
  124. <td rowspan="3">下午</td>
  125. <td>5</td>
  126. <td>数学</td>
  127. <td>语文</td>
  128. <td>道法</td>
  129. <td>语文</td>
  130. <td>语文</td>
  131. </tr>
  132. <tr>
  133. <!-- <td>xxx</td> -->
  134. <td>6</td>
  135. <td>音乐</td>
  136. <td>体育</td>
  137. <td>传文</td>
  138. <td>道法</td>
  139. <td>音乐</td>
  140. </tr>
  141. <tr>
  142. <!-- <td>xxx</td> -->
  143. <td>7</td>
  144. <td>活动</td>
  145. <td>活动</td>
  146. <td>活动</td>
  147. <td>活动</td>
  148. <td>班会</td>
  149. </tr>
  150. </tbody>
  151. <tfoot>
  152. <tr>
  153. <td colspan="7" align="center">作业(22:00-23:00)不写完不放学</td>
  154. <!-- <td>7</td>
  155. <td>活动</td>
  156. <td>活动</td>
  157. <td>活动</td>
  158. <td>活动</td>
  159. <td>班会</td> -->
  160. </tr>
  161. </tfoot>
  162. </table>
  163. <footer></footer>
  164. <main></main>
  165. </body>
  166. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议