一.列表

     列表是网页中最常用的一种数据排列方式。在HTML中,列表共有三种:有序列表、无序列表和定义列表。

二.有序列表

    1.一般采用数字或字母作为顺序,默认采用数字顺序。

   语法:

<ol>
   <li>列表项</li>
   <li>列表项</li>
   <li>列表项</li>
</ol>

***在该语法中,<ol>和</ol>标志着有序列的开始和结束,而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。

     ol标签和li标签需要配合一起使用,不可以单独使用,而且<ol>标签的子标签也只能是li标签,不能是其他标签。

    2.type属性(在HTML中,我们可以使用type属性来改变列表项符号)

语法

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

type属性取值

属性值

列表项符号

1

阿拉伯数字:1、2、3······(默认值)

a

小写英文字母:a、b、c······

A

大写英文字母:A、B、C·····

i

小写罗马数字:i、ii、iii······

l

大写罗马数字:l、ll、lll······

eg:

html5列表展示 html 列表_HTML

html5列表展示 html 列表_属性值_02

 三.无序列表

1.语法:

<ul>
   <li>列表项</li>
   <li>列表项</li>
   <li>列表项</li>
</ul>

***<ul>和</ul>标志着一个无序列表的开始和结束,<li>表示这是一个列表项。一个无须列表可以         包含多个列表项。 

     注意,ul标签和li标签也需要一起使用,不可以单独使用,而且ul标签的子标签也只能是li标签,不能是其他标签。这一点与有序列表是一样的。

2.type属性

语法:

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

type属性值

属性值

列表项符号

disc

实心圆●(默认值)

circle

空心圆○

square

正方形■

eg:

html5列表展示 html 列表_前端_03

html5列表展示 html 列表_前端_04

 3.深入无序列表

    对于无序列表来说,还需注意以下两点:

    1.ul元素的子元素只能是li,不能是其他元素。

    2.ul元素内部的文本,只能在li元素内部添加,不能在li元素外部添加。

eg:ul元素的子元素只能是li,不能是其他元素

html5列表展示 html 列表_html_05

html5列表展示 html 列表_属性值_06

 

***分析:上面的代码是错误的,正确做法如下 

<div>前端最核心3个技术:</div>
<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
<ul>

四.定义列表

    在HTML中,定义列表由两部分组成:名词和描述。

   语法:

<dl>
   <dt>名词</dt>
   <dd>描述</dd>
   ......
</dl>

  在改语法中,<dl>标记和</dl>标记分别定义了定义列表的开始和结束,dt标签用于添加要解释的名词,而dd标签用于添加该名词的具体解释。

eg:

html5列表展示 html 列表_html_07

html5列表展示 html 列表_前端_08

 

五.HTML语义化

eg:  使用div实现的列表

html5列表展示 html 列表_html_09

 

html5列表展示 html 列表_前端_10

 

 ***分析:HTML的精髓就在于标签的语义。在HTML中,大部分标签都有它自身的语义。例如,p标签,表示paragraph,标记的是一个段落;h1标签,表示的是header1,标记的是一个最高级标题。但div和span是无语义的标签,我们应优先使用其他有语义的标签。语义是非常重要的一个思想,对于搜索引擎优化来说也很重要。