极客学院web前端学习笔记（五） 列表和块

列表

与列表有关的标签

<ol>------------------------------------有序列表

<ul>------------------------------------无序列表

<li>-------------------------------------列表项

<dl>------------------------------------列表

<dt>------------------------------------列表项

<dd>-----------------------------------描述

<ul><!--无序列表-->
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>
<ol><!--有序列表-->
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ol>

无序列表

使用标签<ul>,<li>

属性：disc（实心圆），circle（空心圆），square（方形）

有序列表

使用标签<ol>,<li>

属性：A,a,I,i,strat

嵌套列表

使用标签<ul>,<ol>,<li>

    <li>宠物</li>
    <ul>
        <li>猫</li>
        <li>狗</li>
    </ul>
    <li>人类</li>
    <ul>
        <li>中国人</li>
        <li>英国人</li>
    </ul>
</ul>

 

有序列表以及有序，无序互相嵌套同理。

自定义列表

使用标签：<dl>,<dt>,<dd>

<dl>
    <dt>helloworld</dt>
         <dd>第一个hellowordl</dd>
    <dt>helloworld</dt>
        <dd>第二个helloworld</dd>
    <dt>helloworld</dt>
        <dd>第三个helloworld</dd>
</dl>

块

html块元素

块元素在显示时，通常会以新行开始

标签：<h1>,<p>,<ul>等

内联元素

内联元素通常不会以新行开始

标签：<b>(加重标签）,<a>,<img>等

<div>元素

一个容器，里面可以装其他元素，单独使用没有效果，主要配合css样式使用

<span>元素

一种内联元素，可作为文本的容器（被指定为文本的容器，而不是像div一样没有指定）