西安 做网站做社交的招聘网站
文章目录
- 1、列表
- 1.1 无序列表
- 1.2 有序列表
- 1.3 定义列表
- 2、表格
- 2.1 定义
- 2.2 表格结构标签
- 2.3 合并单元格
1、列表
列表分为：
- 无序列表
- 有序列表
- 定义列表：一个标题下有多个小分类
1.1 无序列表
ul嵌套li，ul是无序列表，li是列表条目
<body><ul><li>开发</li><li>测试</li><li>发布</li></ul>
</body>
效果：
注意，ul标签里，只能嵌套li标签，不能嵌套h、img等其他标签，但li标签里，可以包裹任何内容
1.2 有序列表
ol嵌套li，ol是有序列表，li是列表条目
<body><ol><li>开发</li><li>测试</li><li>发布</li></ol>
</body>
效果：
同样的，ol标签里，只能嵌套li标签，但li标签里，可以包裹任何内容
1.3 定义列表
一个标题下有多个内容，如很多官网底部的：
dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述/详情
<body><dl><dt>服务中心</dt><dd>申请售后</dd><dd>售后政策</dd><dd>维修服务价格</dd><dd>订单查询</dd><dd>以旧换新</dd></dl>
</body>
效果：
注意：dl里面只能包含dt和dd，而dt和dd则可以包含任何内容
2、表格
2.1 定义
类似excel，用来展示数据，语法上：table嵌套tr，tr嵌套td/th，th是表头，有加粗和居中效果
比如写上面这个表格，一行一行写：
<body><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>
</body>
2.2 表格结构标签
此外，还有三个表格结构标签：
加上他们的好处是：
- 让表格结构更加清晰
- 方便为这三大块分别设置不同的CSS样式
<body><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
</body>
以上代码，在前端展示效果上，和不加结构标签一模一样
2.3 合并单元格
合并时，保留最左最上的单元格（如上图的跨行合并，保留最上的单元格，跨列合并，则保留最左的单元格）
- 跨行合并，保留最
上的单元格，添加属性rowspan，其值为需要合并的单元格数量，删掉被合并的其他单元格 - 跨列合并，保留最
左的单元格，添加属性colspan，其值为需要合并的单元格数量，删掉被合并的其他单元格
<body><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><!-- <td>100</td> 删掉被合并的其他单元格--><td>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>
</body>
效果：
注意，合并不能跨越表格结构标签，比如上面把李四和总结两个格子合并，就横跨了tbody和tfoot