列表标签,冬日,冬辰列表

By admin in 4858美高梅 on 2019年3月29日

1.怎么是列表标签?

第一十九课 冬天列表

列表标签:给一堆数据添加列表语义,表示这一堆数据是三个完整
分类:

冬日,冬辰列表(最多)(unordered list)
稳步列表(最少)(ordered list)
概念列表(其次) (definition list)

冬天列表:给一堆数据添加列表语义,并且这一堆数据中具有的数额都未曾先后之分
格式:

<ul>
<li> list item 1 </li>
</ul>

注意点:

① 、冬季列表是给一堆数据添加列表语义的,告诉浏览器这一堆数据是二个整机,不是添加小圆点的,小圆点css修改样式
贰 、ul和li标签是二个完整,是二个重组,不会单独使用
叁 、ul标签中不推荐添加除li标签以外的价签

应用:

① 、新闻列表
二 、商品列表
三 、导航条 css修改样式

<h2>列表</h2>
<ul>
  <li> list item1 </li>
  <li> list item2 </li>
  <li> list item3 </li>
</ul>

第②十课 冬季列表演练

<h2>搜狐新闻类标</h2>
<!--虽然通过标签可以修改样式,但是在企业开发中不建议使用 -->
<hr width="500px" align="left">
<ul type="circle">
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
    <li>list item4</li>
    <li>list item5</li>
</ul>

第2十一课 严节列表演练 2

<!--ul标签中只能放li标签,但是li中可以放其他标签 -->
<h2>四大名著</h2>
<ul>
    <li>
        <h3>《三国演员》</h3>
        <p>三国鼎立</p>
    </li>
    <li>
        <h3>《西游记》</h3>
        <p>孙悟空</p>
    </li>
    <li>
        <h3>《水浒传》</h3>
        <p>武松</p>
    </li>
    <li>
        <h3>《红楼梦》</h3>
        <p>贾宝玉</p>
    </li>
</ul>

第2十二课 冬季列表演习 3

<!-- 无序列表中li标签中可以添加ul标签,ul中只能有li -->
<h2>物品清单</h2>
<ul>
    <li>
        <h3>蔬菜</h3>
        <ul>
            <li>白菜</li>
            <li>萝卜</li>
            <li>黄瓜</li>
        </ul>
    </li>
    <li>
        <h3>水果</h3>
        <ul>
            <li>苹果</li>
            <li>西瓜</li>
            <li>香蕉</li>
        </ul>
    </li>
</ul>

webstorm 连忙格局
ul>li;ul>li*3

<ul>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul>li2>h2+ul>li3

<ul>
    <li>
        <h2></h2>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <h2></h2>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

壹 、什么是列表标签?

   
 列表标签的效率:给一堆数据添加列表语义,也正是报告浏览器这一堆数据是三个完好无缺。

一,冬日,冬辰列表

1,列表标签定义

给一堆数据添加列表语义,也等于报告搜索引擎告诉浏览器这一堆数据是1个全体的竹签大家称之为列

表标签。

2,列表标签的分类

1)冬日,冬辰列表(最多)(unordered list)

2)有种类表(最少)(ordered list)

3)定义列表(其次)(definition list)

3,冬日,冬辰列表

作用:给一堆数据添加列表语义,并且这一堆数据中享有的多少都尚未先后之分。例如:中华人民共和国有何样城市。

格式:

<ul>

    <li>供给呈现的条规的剧情<li>

<ul>

里面:li是list item(列表条目)的缩写。

注意:

1)ul标签是用来给一堆数据添加列表语义的,而不是用来给她们添加条方今的小圆点的;

2)ul标签和li标签是三个完好无缺,是3个组合.所以一般情状下ul标签和li标签都以一同出现,不会单个出

现.也正是说不会单独接纳2个ul标签可能独立使用一个li标签,都是整合在协同利用;

3)由于ul标签和li标签是多个组成,所以ul标签中不推荐包蕴其余标签,也便是说以往您在ul标签中只

会看到li标签。

冬季列表应用场景:

1)新闻列表;2)商品列表;3)导航条。

4858美高梅 1

不变列表和严节列表使用规则基本上,只可是,有种类表中的条目有程序之分,例如排名榜。

4,定义列表

作用:

1)给一堆数据添加列表语义;

2)先经过dt标签定义列表中的全部标题,然后再通过dd标签给各样题目添加描述消息。

列表标签,冬日,冬辰列表。格式:

<dl>

  <dt></dt>

  <dd></dd>

  <dt></dt>

  <dd></dd>

</dl>

里面,dt是英文definition title
的缩写,用来定义列表题指标;dd是英文definition description的缩

写,是用来定义标题对应的讲述的。

采取场景:

1)做网站的底部音讯;2)图像和文字混排。

注意:

1)dl和dt/dd是3个一体化,所以她们一般意况下不会独自出现,都以联合署名出现。

2)dl和dt/dd是构成标签,一般景色下提出dl中只放dt和dd标签;

3)二个dt能够没有相应的dd,也能够有五个照应的dd,可是无论有或许尚未dd都不推荐使用.

引进使用1个dt对应贰个dd

4)当必要丰硕界面时,在dt和dd标签中继续添加任何标签。

4858美高梅 2

列表标签的效用:给一堆数据添加列表语义,也正是告诉搜索引擎,告诉浏览器这一堆数据是3个完全

第③十三课 有类别表

不变列表:给一堆数据添加列表语义,并且这一堆数据中有着的数码都有程序之分
其他和ul一样

<ol>
    <li> list item </li>
</ol>

<ol type="a">
    <li>演员</li>
    <li>丑八怪</li>
    <li>一人饮酒醉</li>
</ol>

贰 、HTML中列表标签的分类:

2.1 严节列表(最多)(unordered list)

2.2 有连串表(最少)(ordered list)

2.3 定义列表(其次)(definition list)

2.HTML列表标签的分类

第1十四课 定义列表

① 、给一堆数据添加列表语义
② 、dt标题 dd标题描述
格式:

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

dt:definition title 定义列表中的标题
dd:definition description 定义标题对应的讲述的
注意点

1 dl和dt/dd是贰个完全,一次出现
2 dl中国建工业总会集团议只放dt和dd标签
3 3个dt能够没有对应的dd,也足以没有dd,然则不提议使用
提议采用一个dt对应2个dd
4 和li标签一样,当丰富界面时,可以在dt和dd标签中继续添加此外标签

行使场景:

壹 、做网站底部的连锁音信

② 、做图文混排

<dl>
    <dt>北京</dt>
    <dd>中国的首都</dd>
    <dt>上海</dt>
    <dd>富人聚集地</dd>
</dl>

③ 、冬季列表的效应:

给一堆数据添加列表语义,并且这一堆数据没有先后之分。

2.1冬天列表(集团费用中用到最多)(unordered list)

第3十五课 定义列表练习

和li标签一样,当丰硕界面时,能够在dt和dd标签中继续添加任何标签

<!--和li标签一样,当丰富界面时,可以在dt和dd标签中继续添加其他标签-->
<!--dl>dt+dd-->
<dl>
    <dt>
        ![](0.gif)
    </dt>
    <dd>
        <h2>图片</h2>
        <p>图片很好看</p>
    </dd>
</dl>
<!-- 定义列表 -->
<dl>
    <dt dir="rtl">购物指南</dt>
    <dd>
        <a href="#">购物指南</a>
        <a href="#">会员介绍</a>
        <a href="#">生活旅行/团购</a>
        <a href="#">常见问题</a>
        <a href="#">大家电</a>
        <a href="#">联系客服</a>
    </dd>
</dl>

情节参考

④ 、严节列表的格式:

<ul>

<li>北京</li>

</ul>

注:li是list(列表) item(条目)的缩写。

以身作则结果:

4858美高梅 3

只顾:那里的ul标签是用来给一堆数据添加列表语义的,而不是用来给他俩添加小圆点的。

ul标签和li标签都以共同出现的,无法只利用当中之一。同时ul标签中只好分包li标签,不成出现任何标签。

2.2有系列表  (集团耗费中用的至少)  (ordered list)

伍 、冬日,冬辰列表的施用场景: 新闻列表、商品列表、制作导航条

2.3定义列表  (集团支付中用的次要多)   (definition list)

六 、前边大家说过ul中最佳只放li标签不过在小卖部花费中li标签中只怕相比复杂,能够在li标签中放别的标签。

小结:一 、ul标签中最佳只放li标签。

            二 、li标签中还足以继承放任何标签

3.冬季列表成效:

柒 、多级列表:

严节列表中的li标签中除去能够加上其余标签来丰硕界面外,还是可以添加li标签来添加界面。

也正是说ul中有li,li中还足以有ul。

给一堆数据添加列表语义,并且这一堆数据中持有的数量都不曾先后之分

捌 、有体系表

格式:

<ol type=”1″>

(注:type值可以是“1”、“A”、“a”等得以作为编号的事物)

<li></li>

<li></li>

</ol>

怎么样叫有次序之分?

九 、定义列表

格式:

<dl>

<dt></dt>

<dd></dd>

<dt></dt>

<dd></dd>

</dl>

dt和dd都是英文缩写,dt是英文definition
title的缩写,所以dt的意义正是用来定义列表中的标题。dd是英文definition
description的缩写,所以dd的含义正是用来定义标题对应描述的。

概念列表的机能:

壹 、给一堆数据添加列表语义

② 、先通过dt标签定义列表中的全体标题,然后再经过dd标签给各种标题添加描述音讯。

概念列表的使用场景:

① 、做网站底部的连锁音讯

贰 、做图像和文字混排

概念列表的注意点:

① 、和ul/ol一样,dt/dd是多个完好无损,所以他们一般意况下不会独自出现,都以同步出现的。

贰 、和ul/ol一样,由于dt/dd是一个构成标签,所以dl中国建工业总会公司议只放dt和dd标签。

③ 、2个dt能够没有相应的dd,也能够有多少个照应的dd,不过无论有只怕没有都不引进应用。

④ 、和li标签一样,当需求丰裕界面时,大家得以在dt和dd标签中三番六次添加别的标签。

例如:排行榜

如何叫没有先后之分?

譬如:中华人民共和国有如何城市

4.冬天列表格式

<ul>

<li>须求出示的条目内容</li>

</ul>

li其实是英文list item的缩写

list是列表的情致,item是条款的情趣,所以结合起来正是列表条目的趣味

5.注意点

  1. 4858美高梅 ,毫无疑问要记住ul标签是用来给一堆数据添加列表语义的,而不是用来给它们拉长小圆点的
  • 如何去除小圆点?

<head>

<style type=”text/css”>

ul {

list-style:none;

}

</head>

  • 怎么集团开发中有种类表用的相当少?

因为有类别表能做的冬季列表也能做,如在冬日,冬辰列表中添加序号:

<ul>

<li>1.广州</li>

<li>2.北京</li>

<li>3.上海</li>

<li>4.武汉</li>

</ul>

       
2.ul标签和li标签是一个整机,是3个重组,所以一般景况下ul标签和li标签都以联合署名出现,不会单个出现,也正是说不会单独使用1个ul标签恐怕独立行使1个li标签,都以构成在协同行使。

       
3.由于ul标签和li标签是三个组合,所以ul标签中不引进包括别的标签,也正是说以往你在ul标签中只会看到li标签。

<ul>

<h2>中华夏族民共和国的城市有何</h2>

<li></li>

<li></li>

</ul>

那种写法是不提倡的

  • 严节列表应用场景:
  1. 快讯列表
  2. 货物列表
  3. 导航条

有人说导航条是横着的,列表是竖着的,不可能出现那种效益,其实是足以的,但是急需用到css,在<head></head>之间写

li {

float:left;

background-color:yellow;

width:150px;

height:50px;

text-align:center;

line-height:50px;

}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有