HTML-块标签、语义化标签、表格标签
HTML-块标签
div和span:
div:每一个div占满一整行。块级标签
span:文本信息在一行展示,行内标签 内联标签
<span>传智</span><!-- span文本信息在一行展示--> <span>播客</span><!-- span行内标签,内联标签--> <hr><!-- 横线--> <div>传智</div><!-- 每一个div都沾满一整行--> <div>播客</div><!-- div块级标签-->
HTML-语义化标签
语义化标签:html5中为了提高程序的可读性,提供了一些标签
<header>
<footer>
还有很多,就不一一列举了
HTML-表格标签
table:定义表格
width:宽度
border:边框
cellpadding:定义内容和单元格的距离
cellspacing:定义单元格之间的距离,如果指定为0,则单元个的线会何为一条
bgcolor:背景色
align:对齐方式
tr:定义行
td:定义单元格
th:定义表头单元格
<!-- 背景色:绿色,边框为0,宽度:0.内容和单元格的距离:0,单元格与单元格之间的距离:0 居中--> <table bgcolor="#556b2f" border="1" width="50%" cellpadding="0" cellspacing="0" align="center"> <tr> <!-- 定义行--> <th>编号</th> <!-- 表头单元格--> <th>姓名</th> <!-- 表头单元格--> <th>成绩</th> <!-- 表头单元格--> </tr> <!-- 结束行--> <tr> <!-- 定义行--> <td>1</td> <!-- 表头单元格--> <td>李四</td> <!-- 表头单元格--> <td>99</td> <!-- 表头单元格--> </tr> <!-- 结束行--> <tr> <!-- 定义行--> <td>2</td> <!-- 表头单元格--> <td>王五</td> <!-- 表头单元格--> <td>99</td> <!-- 表头单元格--> </tr> <!-- 结束行--> </table>
<!-- 边框为0,宽度:50,内容和单元格的距离:0,单元格与单元格之间的距离:0,背景色:绿色,居中--> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#556b2f" align="center"> <thead> <!-- 表格中的表头内容--> <caption>学生信息表</caption> <!-- 表格标题--> <tr> <!-- 定义行--> <th>编号</th> <!-- 表头单元格--> <th>姓名</th> <!-- 表头单元格--> <th>成绩</th> <!-- 表头单元格--> </tr> </thead> <tbody> <!-- 定义表格中的主体内容--> <tr bgcolor="#556b2f" align="center"> <!-- 定义行,背景色:绿色,居中--> <td>1</td> <!-- 表头单元格--> <td>小龙女</td> <!-- 表头单元格--> <td>100</td> <!-- 表头单元格--> </tr> <tr> <!-- 定义行--> <td>2</td> <!-- 表头单元格--> <td>杨过</td> <!-- 表头单元格--> <td>50</td> <!-- 表头单元格--> </tr> </tbody> <tfoot> <!-- 定义表格中的标注内容(脚注)--> <tr> <!-- 定义行--> <td>3</td> <!-- 表头单元格--> <td>尹志平</td> <!-- 表头单元格--> <td>10</td> <!-- 表头单元格--> </tr> </tfoot> </table> <hr> <!-- 换行--> <!-- 边框为1,宽度:50,内容和单元格的距离:0,单元格与单元格之间的距离:0 ,背景色:绿色,居中--> <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#556b2f" align="center"> <tr> <!-- 定义行--> <th rowspan="2">编号</th> <!-- 表头单元格 合并行--> <th>姓名</th> <!-- 表头单元格--> <th>成绩</th> <!-- 表头单元格--> </tr> <tr> <!-- 定义行--> <td>小龙女</td> <!-- 表头单元格--> <td>100</td> <!-- 表头单元格--> </tr> <tr> <!-- 定义行--> <td>2</td> <!-- 表头单元格--> <td colspan="2">杨过</td> <!-- 表头单元格 合并列--> </tr> </table> <hr> <!-- 换行-->
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix