HTML列表

演讲者:前端开发课程组

内容提纲

  1. 有序列表
  2. 无序列表
  3. 定义列表

有序列表

ordered list, list item。

li元素

类型取值
分类
元素上下文 ol或ul
内容模型 流内容
属性 全局属性
如果是ol的子元素,具有value属性,表示序数值

有序列表示例

<ol>
    <li>明确的目标</li>
    <li>详细的行动计划</li>
    <li>即可采取行动</li>
    <li>修正自己的行为</li>
    <li>坚持不懈</li>
</ol>
  1. 明确的目标
  2. 详细的行动计划
  3. 即可采取行动
  4. 修正自己的行为
  5. 坚持不懈

有序列表示例

<ol type="a" start="3">
    <li>明确的目标</li>
    <li>详细的行动计划</li>
    <li>即可采取行动</li>
    <li>修正自己的行为</li>
    <li>坚持不懈</li>
</ol>
  1. 明确的目标
  2. 详细的行动计划
  3. 即可采取行动
  4. 修正自己的行为
  5. 坚持不懈

无序列表

unordered list, list item。

无序列表示例

<ul>
    <li>首页</li>
    <li>产品</li>
    <li>新闻</li>
    <li>关于</li>
    <li>联系</li>
</ul>
  • 首页
  • 产品
  • 新闻
  • 关于
  • 联系

定义列表

dl dt dd

dt元素

类型取值
分类
元素上下文 dl里的dd之前
内容模型 流内容,但不能包含header、footer、节内容(article aside nav section)、标题内容(h1 h2 h3 h4 h5 h6)等
属性 全局属性

dd元素

类型取值
分类
元素上下文 dl里的dt之后
内容模型 流内容
属性 全局属性

定义列表示例-词典

<dl>
    <dt><dfn>happiness</dfn></dt>
    <dd class="pronunciation">/'hæ p. nes/</dd>
    <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
    <dd>The state of being happy.</dd>
    <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
    <dt><dfn>rejoice</dfn></dt>
    <dd class="pronunciation">/ri jois'/</dd>
    <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
    <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>
happiness
/'hæ p. nes/
n.
The state of being happy.
Good fortune; success. Oh happiness! It worked!
rejoice
/ri jois'/
v.intr. To be delighted oneself.
v.tr. To cause one to be delighted.

前端开发

旨为前端开发工程师的前端开发基础课程