简单玩转HTML的邪修大法速成(三)!!

60 阅读1分钟

数据展示:表格标签

当需要规整地展示数据(如成绩表、商品信息表等 )时,表格标签能清晰呈现行列结构 。

  <table border="1">
 <caption>学生成绩表</caption>
 <tr> 
 <<th>姓名</</th> 
 <<th>数学</</th> 
 <<th>语文</</th> 
 </tr>
 <tr> 
 <td>张三</td> 
 <td>90</td> 
 <td>85</td> 
 </tr>
 <tr> 
 <td>李四</td> 
 <td>88</td> 
 <td>92</td> 
 </tr>
</table>

 

  •  <table> :定义表格的外框, border="1"  可显示表格边框(也可通过 CSS 更灵活设置样式 )。
  •  <caption> :为表格添加标题,描述表格的整体内容 。
  •  <tr> :代表表格的一行,用来组织行数据 。
  •  <th> :表头单元格,文本默认加粗且居中显示,用于标识每一列的含义 。
  •  <td> :表格的普通单元格,存放具体的数据内容 。

还可通过  colspan (横向合并单元格 )和  rowspan (纵向合并单元格 )属性,实现更复杂的表格布局,比如合并表头单元格等 。

交互入口:表单标签

表单是网页与用户交互收集信息的重要方式,像登录页面、注册页面、信息提交页面等都会用到 。

(一)表单容器  <form> 

作为表单元素的容器,用于包裹各种表单控件, action  属性指定表单数据提交的服务器地址, method  属性设置提交方

——————————----------------------------————————————

基操勿六,点赞加关注,更新不迷路😍😍😍!