JS基础编程课件13_HTML高级元素.pdf

CSS设置背景

王红元coderwhy

目录

content1link元素

2计算机进制

3CSS表示颜色

4Chrome调试工具

5浏览器渲染流程

coderwhy认识列表元素

◼在开发一个网页的过程中,很多数据都是以列表的形式存在的

coderwhy列表的实现方式

◼事实上现在很多的列表功能采用了不同的方案来实现:

方案一:使用div元素来实现(比如汽车之家,知乎上的很多列表)

方案二:使用列表元素,使用元素语义化的方式实现;

◼事实上现在很多的网站对于列表元素没有很强烈的偏好,更加不拘一格,按照自己的风格来布局:

原因我认为是列表元素默认的CSS样式,让它用起来不是非常方便;

比如列表元素往往有很多的限制,ul/ol中只能存放li,li再存放其他元素;

虽然我们可以通过重置来解决,但是我们更喜欢自由的div;

◼HTML提供了3组常用的用来展示列表的元素

有序列表：ol、li

无序列表：ul、li

定义列表：dl、dt、dd

coderwhy有序列表–ol–li

◼ol（orderedlist）

有序列表，直接子元素只能是li

◼li（listitem）

列表中的每一项

coderwhy无序列表–ul-li

◼ul（unorderedlist）

无序列表，直接子元素只能是li

◼li（listitem）

列表中的每一项

coderwhy定义列表–dl–dt-dd

◼dl（definitionlist）

定义列表，直接子元素只能是dt、dd

◼dt（definitionterm）

列表中每一项的项目名

◼dd（definitiondescription）

列表中每一项的具体描述，是对dt的描述、解释、补充

一个dt后面一般紧跟着1个或者多个dd

coderwhy列表的练习

coderwhy认识表格元素

◼在网页中,对于某些内容的展示使用表格元素更为合适和方便

coderwhy表格常见的元素

◼编写表格最常见的是下面的元素:

◼table

表格

◼tr(tablerow)

表格中的行

◼td(tabledata)

行中的单元格

◼另外表格有很多相关的属性可以设置表格的样式,但是已经不推荐使用了

coderwhy表格的练习

◼通过表格元素和CSS完成下面的表格:

◼这里我们需要用到一个非常重要的属性:

border-collapseCSS属性是用来决定表格的边框是分开的还是合并的。

table{border-collapse:collapse;}

合并单元格的边框

coderwhy表格的其他元素

◼thead

表格的表头

◼tbody

表格的主体

◼tfoot

表格的页脚

◼caption

表格的标题

◼th

表格的表头单元格

coderwhy单元格合并

◼在某些特殊的情况下,每个单元格占据的大小可能并不是固定的

一个单元格可能会跨多行或者多列来使用;

◼比如下面的表格

◼这个时候我们就要使用单元格合并来完成;

coderwhy如何使用单元格合并呢?

◼单元格合并分成两种情况:

跨列