HTML列表

演讲者:whqet

内容提纲

  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.

前端开发

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