第7章 【HTML5入门精通实战教程】HTML5列表.pptx

HTML5 入门精通实战教程第7章 列表讲师：金超服第7章 列表（大纲）7.1 无序列表7.2 有序列表7.3 描述列表7.4 综合实例7.1 无序列表ul无序列表是一个项目的列表，此列项目使用粗体圆点进行标记。无序列表用ul 标签进行标记。列表项用li标签进行标记，列表项内部可以使用段落、换行符、图片、链接以及其他列表等。无序列表的compact、type属性在HTML5中已废除，不建议使用，用CSS进行样式定义。无序列表的语法结构 ul li列表项一/li li列表项二/li li列表项三/li /ul7.2 有序列表ol和无序列表一样，有序列表是一列项目，列表项目使用数字进行标记。有序列表用ol 标签进行标记。列表项用li标签进行标记，列表项内部可以使用段落、换行符、图片、链接以及其他列表等。有序列表的compact、type、start在HTML5中不赞成使用，用CSS定义。有序列表HTML5新增reversed属性（列表倒序）。不过目前只有Chrome 和 Safari 支持 reversed 属性。7.2 有序列表ol无序列表的语法结构 ol li列表项一/li li列表项二/li li列表项三/li /ol ol reversed li列表项一/li li列表项二/li li列表项三/li /ol7.3 描述列表dl描述列表不仅仅是一列项目，而是项目及其注释的组合。描述列表用 dl标签进行标记。（定义描述列表）列表项以 dt标签进行标记。（定义列表项）列表项的定义以 dd标签进行标记。（定义列表项的描述）7.3 描述列表dl描述列表的语法结构UL、OL、DL列表可以互相嵌套 dl dt定义列表项一/dt dd描述列表项1/dd dd描述列表项2/dd /dl ul li水果 ol li苹果/lili香蕉/li /ol /li li蔬菜 ol li萝卜/lili白菜/li/ol /li /ul7.4 综合实例 bodyheaderh1a href=###img src=logo.jpg alt=html5/a/h1nav ul lia href=#Home/a/li lia href=#HTML5/a/li lia href=#CSS3/a/li lia href=#JavaScript/a/li lia href=#jQuery/a/li lia href=#Bootstrap/a/li /ul/nav/header/body