前端项目开发-13_HTML高级元素.pdf

HTML高级元素

王红元coderwhy

目录

1列表元素

content

2常见列表

3表格元素

4表格合并

5表单元素

6表单常见属性

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）

term是项的意思,列表中每一项的项目名

◼dd（definitiondescription）

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

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

coderwhy列表的练习

所有案例的思路:

1.先完成结构

2.重置样式(body/a/ul)

3.先整体,后局部

*顺序:按照从外往里.从上往下

4.去除重复的代码(css)

*将重复的逻辑放到一个单独的class中(.icon)

*不同的代码抽到不同的class(.new.hot)

慢慢来反而是快!

coderwhy认识表格元素

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

coderwhy表格常见的元素

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