HTML5 列表和表格
无序列表
- 列表中各个元素在逻辑上没有先后顺序，没有级别之分
- 无序列表中，列表项之间属于并列关系
- 每个列表项独占一行
- 无序列表是使用最广泛的列表
- 无序列表语法：
<ul>无序列表开始<li></li>每一个列表项
</ul>无序列表结束
有序列表
- 列表中各个元素在逻辑上有先后顺序
- 有序列表中，列表项之间属于并列关系
- 每个列表项独占一行
- 有序列表语法：
<ol>有序列表开始<li></li>每一个列表项
</ol>有序列表结束
自定义列表
- 自定义列表是两个层次的列表，由三种标签构成
- 基本语法：
<dl></dl>表示自定义列表的开始和结束
<dt></dt>表示列表标题的开始和结束
<dd></dd>表示每个列表现///
<dl><dt>东北三省</dt><dd>辽宁</dd><dd>吉林</dd><dd>黑龙江</dd><dt>西南三省</dt><dd>云南</dd><dd>贵州</dd><dd>四川</dd>
</dl>
- 东北三省
- 辽宁
- 吉林
- 黑龙江
- 西南三省
- 云南
- 贵州
- 四川
表格
创建表格
- table标签用来定义表格
- tr标签表示表格中的一行
- th标签表示表头单元格，文本加粗、居中
- td标签表示表格中的一个单元格，文本左对齐
- 表格的单元格中可以放入任何元素
<table border="1"><tr><th>表头</th><td>表格一</td><td>表格二</td></tr>
</table>
表格合并
- colspan：横向合并单元格，属性值为正整数，表示该单元格横向合并的列数，保留要合并的第一个单元格，删除其他单元格
- 语法：
<table border = "1"><tr><th colspan="3">合并表格</th></tr><tr><td>表格1</td><td>表格2</td><td>表格3</td></tr>
</table>| 合并表格 | ||
|---|---|---|
| 表格1 | 表格2 | 表格3 |
- rowspan：纵向合并单元格，属性值为正整数，表示该单元格纵向合并的列数
- 语法：
<table border = "1"><tr><th colspan="3">合并表格</th></tr><tr><td rowspan="3">表格1</td><td>表格2</td><td>表格3</td></tr><tr><td>表格1</td><td>表格2</td></tr><tr><td>表格1</td><td>表格2</td></tr>
</table>
| 合并表格 | ||
|---|---|---|
| 表格1 | 表格2 | 表格3 |
| 表格1 | 表格2 | |
| 表格1 | 表格2 | |
其他
- caption标签：给表格添加标题，用来制定表格的标题或者说明；是table的子元素，必须放在table中使用
| 合并表格 | |||
|---|---|---|---|
| 表格1 | 表格2 | 表格3 | 表格4 |
| 表格1 | 表格2 | 表格3 | 表格4 |
| 表格1 | 表格2 | 表格3 | 表格4 |
表格规范的写法应该包含以下三部分内容，主要结合CSS、JavaScript来使用
- thead标签：表示表格的表头
- tfoot标签：表示表格的页脚
- tbody标签：表示表格的主体
<table border = "1"><thead style="background: blue"><tr><th colspan="3">合并表格</th></tr></thead><tbody style="background: red"><tr><td>表格1</td><td>表格2</td><td>表格3</td></tr><tr><td>表格1</td><td>表格2</td><td>表格3</td></tr><tr><td>表格1</td><td>表格2</td><td>表格3</td></tr></tbody><tfoot><tr><td colspan="3">备注：</td></tr></tfoot>
</table>
| 合并表格 | ||
|---|---|---|
| 表格1 | 表格2 | 表格3 |
| 表格1 | 表格2 | 表格3 |
| 表格1 | 表格2 | 表格3 |
| 备注： | ||
- colgroup标签：用来组合列，它的span属性可以设置组合列的数目；它可以包含一个子元素col；colgroup元素为table元素的子元素，必须放在caption元素之前
<table border = "1"><colgroup span = "1" style="width: 100px"></colgroup><colgroup span = "2" style="width: 200px"></colgroup><colgroup span = "1" style="width: 150px"></colgroup><tr><th colspan="4">合并表格</th></tr><tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr><tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr><tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr>
</table>
- col标签：用来设定列的属性，它也可以使用span属性；一般作为colgroup元素的子元素配合使用
<table border = "1"><colgroup span = "1" style="width: 100px"><col style="background: red"></colgroup><colgroup span = "2" style="width: 200px"><col style="background: aqua"><col style="background: chocolate"></colgroup><colgroup span = "1" style="width: 250px;"><col style="background: green;"></colgroup><tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr><tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr><tr><td>表格1</td><td>表格2</td><td>表格3</td><td>表格4</td></tr></table>
HTML5 列表和表格相关推荐
- HTML5 列表、表格、常用表单、基本标签
学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签 掌握三种列表标签 掌握表格标签 掌握表格标签 掌握表单标签 掌握H5新增表单和表单属 ...
- 前端(二)——HTML之列表、表格、媒体元素
文章目录 1. 列表 2. 表格 3.音频.视频 3.1 音频 audio 3.2 视频 video 4. 网页结构分析 5. 内联框架 1. 列表 (1)无序列表 ul-li :应用于导航.侧边栏新 ...
- html 列表、表格与媒体元素
HTML5列表分为三种类型: 1:无序列表 <ul></ul> 无序列表由<ul>和<li>标签组成,<ul>标签表示无序列表的声明 & ...
- HTML中列表、表格与媒体元素
<列表.表格与媒体元素> 一.列表的使用 1.列表是信息资源的一种展现形式,它可以使信息更加结构化条理化,便于阅读 2.列表(List)的分类: a.有序列表 b.无序列表 c.定义列表 ...
- php中插入表格 标签,列表，表格，添加表单及标签用法-2019.9.1
问题: 1.谈谈你对html标签,元素与属性的理解,并举例说明. 2.列表有几种,如何定义? 3.列表与表格的区别与联系?什么时候用列表,什么时候用表格,为什么? 4.编程实现,用列表制作你的工作计划 ...
- HTML中的列表和表格
HTML中的列表和表格 HTML中的列表 列表--建立数字编号的列表 列表--指定编号的格式和顺序 列表--建立带有项目符号的列表 列表--建立无符号的列表 列表--建立术语列表 HTML中的表格 表 ...
- h5列表 php,常用的HTML5列表标签
这次给大家带来常用的HTML5列表标签,使用用HTML5列表标签的注意事项有哪些,下面就是实战案例,一起来看一下. 一.列表标签作用 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一堆数 ...
- 复习-css列表和表格相关属性
css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...
- 列表和表格---学习笔记02
第7章 列表和表格 7.1 有序列表 <ol type="A"><li>这里是第1个li</li><li>这里是第2个li</ ...
最新文章
- 计算机老师用英语应聘,应聘计算机教师个人自荐书（精选6篇）
- Java 内存模型及GC原理
- IT兄弟连 Java语法教程 Java的发展历程
- git新建和删除远程分支
- 从无到有构建计算机网络
- ISIS协议基础知识
- java粒子群算法_Java多线程技术实现的粒子群优化算法
- 引爆Spark大数据引擎的七大工具
- Java中占位符的实战运用
- 普元框架-那些年一起走过的坑
- 范宝兴：幻方与类自然数幻方(上)「片桐善直8阶间隔幻方」「同心6阶/8阶/10阶」...
- 使用GetPixel要注意
- 如何利用IP地址开展金融反欺诈？
- 实习生招聘收割阿里、腾讯等大厂Offer后，有些话想和应届生说
- 【原理】#01红外热成像仪的工作原理介绍
- 东华大学 oj1——求长方形的面积和周长
- 什么是AJAX的同步异步？
- Resulting document after update is larger than 16777216
- 全球及中国云视频会议解决方案行业研究及十四五规划分析报告
- 能力素质有所欠缺_心理素质要怎么锻炼？