网页设计与制作教程Web前端开发（第7版）课件：HTML5的块级元素-列表元素.pptx

HTML5提供了3种列表模式，即有序列表、无序列表和定义列表。HTML5的块级元素列表元素

目录块级元素2.1基本块级元素2.2列表元素2.3表格元素table2.4表单2.5分区元素div2.6缩排元素blockquote2.7实训—制作精选信息板块习题2

2.2.1无序列表元素ul无序列表（unorderedlist）定义格式为：ulli第一个列表项/lili第二个列表项/li…/ul【例2-5】无序列表示例。本例文件2-5.html在浏览器中显示的效果如图2-5所示。2.2列表元素

!DOCTYPEhtmlhtmlheadmetacharset=utf-8title无序列表示例/title/headbodyh4征文排行/h4 ul li最佳图书奖/li li最佳创意奖/li li最具人气作品奖/li li最佳短篇奖/li li最烧脑作品奖/li /ul/body/html2.2列表元素

2.2.2有序列表元素ol有序列表（orderedlist）格式为：olli第一个列表项/lili第二个列表项/li…/ol【例2-6】有序列表示例。本例文件2-6.html在浏览器中显示的效果如图2-6所示。2.2列表元素

!DOCTYPEhtmlhtmlheadmetacharset=utf-8title有序列表示例/title/headbodyh4征文排行/h4ol!--列表样式为默认的数字--li最佳图书奖/lili最佳创意奖/lili最具人气作品奖/lili最佳短篇奖/lili最烧脑作品奖/li/ol/body/html2.2列表元素

2.2.3自定义列表元素dl自定义列表（definitionlist）元素的格式为：dldt第一个字典词语项/dtdd对第一个字典词语项的描述文字1/dddd对第一个字典词语项的描述文字2/dd…dt第二个字典词语项/dtdd对第二个字典词语项的描述文字1/dd…/dl【例2-7】使用列表显示高分电影排行榜，本例文件2-7.html的浏览效果如图2-7所示。2.2列表元素

!DOCTYPEhtmlhtmlheadmetacharset=utf-8title定义列表示例/title/headbodyh4高分电影排行榜/h4dldt按类型排行/dtdd爱情/dddd喜剧/dddd其他类型/dddt按年代排行/dtdd2020/dddd2019/dddd其他年代/dd/dl/body/html2.2列表元素

2.2.4嵌套列表所谓嵌套列表就是无序列表与有序列表嵌套混合使用。【例2-8】在无序列表中嵌套无序列表、有序列表和定义列表，本例文件2-8.html在浏览器中显示的效果如图2-8所示。2.2列表元素!DOCTYPEhtmlhtmlheadmetacharset=utf-8title青青博客/title/headbodyul!--无序列表--li点击排行/liol!--无序列表--li十条设计原则教你学会如何设计网页布局/lili6条网页设计配色原则,让你秒变配色高手/lili三步实现滚动条触动css动画效果/li/ol

2.2列表元素hr/!--水平分隔线--li猜你喜欢/liul!--嵌套有序列表--li安静地做一名爱设计的女子/lili个人博客，属于我的小世界/li/ulhr/!--