1.如何是列表标签?

第三十玖课 冬日列表

列表标签:给一批数据加多列表语义,表示这一批数据是多个整机
列表标签,冬日列表。分类:

冬辰列表(最多)(unordered list)
不改变列表(最少)(ordered list)
概念列表(其次) (definition list)

冬日列表:给一群数据加多列表语义,并且这一群数据中具备的数据都不曾先后之分
格式:

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

注意点:

壹、冬季列表是给一批数据增多列表语义的,告诉浏览器这一批数据是二个完好,不是增加小圆点的,小圆点css修改样式
2、ul和li标签是三个整机,是二个构成,不会单独行使
三、ul标签中不引进加多除li标签以外的价签

应用:

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

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

第二10课 冬天列表演习

<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>

第2101课 冬辰列表练习 二

<!--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>

第贰10贰课 冬季列表演练 叁

<!-- 无序列表中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,冬季列表

1,列表标签定义

给一批数据加多列表语义,相当于报告搜索引擎告诉浏览器这一群数据是3个完整的价签大家称之为列

表标签。

2,列表标签的分类

一)九冬列表(最多)(unordered list)

二)有体系表(最少)(ordered list)

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

三,冬天列表

功效:给一群数据加多列表语义,并且这一批数据中有着的数码都未曾先后之分。举例:中华夏族民共和国有怎么着城市。

格式:

<ul>

    <li>需求体现的条目的内容<li>

<ul>

其间:li是list item(列表条目款项)的缩写。

注意:

1)ul标签是用来给一批数据加多列表语义的,而不是用来给她们加多条近期的小圆点的;

贰)ul标签和li标签是2个完好,是3个组合.所以一般景况下ul标签和li标签都以同步出现,不会单个出

现.也正是说不会单独选拔3个ul标签大概独立使用三个li标签,都以结合在联合签名利用;

3)由于ul标签和li标签是一个构成,所以ul标签中不引入包蕴别的标签,相当于说今后你在ul标签中只

会看到li标签。

冬日列表应用场景:

壹)消息列表;二)商品列表;3)导航条。

金沙注册送58 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是结合标签,一般景色下提议dl中只放dt和dd标签;

三)2个dt能够未有相应的dd,也得以有四个照顾的dd,不过无论有恐怕未有dd都不推荐使用.

引入应用2个dt对应多少个dd

肆)当必要丰硕界面时,在dt和dd标签中持续加多任何标签。

金沙注册送58 2

列表标签的职能:给一群数据增添列表语义,相当于告诉搜索引擎,告诉浏览器这一群数据是2个完整

第三103课 有系列表

不变列表:给一批数据加多列表语义,并且这一群数据中具有的数额都整齐不乱之分
其他和ul一样

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

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

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

二.一 冬日列表(最多)(unordered list)

二.二 有种类表(最少)(ordered list)

二.三 定义列表(其次)(definition list)

二.HTML列表标签的归类

第叁拾四课 定义列表

1、给一批数据增多列表语义
二、dt标题 dd标题描述
格式:

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

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

一 dl和dt/dd是3个完好,二遍现身
二 dl中国建工业总会公司议只放dt和dd标签
3 三个dt能够未有对应的dd,也得以未有dd,然而不提议利用
建议选取3个dt对应一个dd
四 和li标签一样,当充界面时,能够在dt和dd标签中继续增多任何标签

行使场景:

1、做网址尾巴部分的相关消息

贰、做图像和文字混排

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

三、冬辰列表的效益:

给一群数据加多列表语义,并且这一群数据尚未先后之分。

2.一冬日列表(集团开支中用到最多)(unordered list)

第二105课 定义列表练习

和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>

内容参考

4、冬季列表的格式:

<ul>

<li>北京</li>

</ul>

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

以身作则结果:

金沙注册送58 3

留意:这里的ul标签是用来给一批数据增加列表语义的,而不是用来给他们增多小圆点的。

ul标签和li标签都以联合具名出现的,不可能只行使个中之一。同时ul标签中只好分包li标签,不成出现别的标签。

2.2有系列表  (公司开垦中用的起码)  (ordered list)

五、严节列表的选拔场景: 音讯列表、商品列表、制作导航条

2.三定义列表  (公司开销中用的附带多)   (definition list)

陆、前边大家说过ul中最棒只放li标签不过在合营社开采中li标签中也许比较复杂,能够在li标签中扬弃何标签。

小结:1、ul标签中最棒只放li标签。

            2、li标签中还足以继续吐弃何标签

叁.冬天列表效率:

7、多级列表:

严节列表中的li标签中除了可以拉长其余标签来丰硕分界面外,还足以增加li标签来丰裕分界面。

也便是说ul中有li,li中还是能够有ul。

给一群数据加多列表语义,并且这一批数据中享有的多少都未有先后之分

捌、有体系表

格式:

<ol type=”1″>

(注:type值能够是“1”、“A”、“a”等足以看作编号的事物)

<li></li>

<li></li>

</ol>

哪些叫有程序之分?

9、定义列表

格式:

<dl>

<dt></dt>

<dd></dd>

<dt></dt>

<dd></dd>

</dl>

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

概念列表的功用:

1、给一群数据加多列表语义

2、先通过dt标签定义列表中的全数标题,然后再经过dd标签给每一种标题增多描述音信。

概念列表的利用场景:

一、做网址尾巴部分的相关消息

二、做图像和文字混排

概念列表的注意点:

1、和ul/ol同样,dt/dd是2个总体,所以她们一般情状下不会独自出现,都以一路出现的。

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

3、1个dt可以未有对应的dd,也得以有三个照望的dd,不过无论有可能未有都不引入应用。

四、和li标签同样,当须求丰硕分界面时,大家得以在dt和dd标签中继承增加其他标签。

例如:排行榜

何以叫未有先后之分?

举个例子:中中原人民共和国有哪些城市

四.冬天列表格式

<ul>

<li>要求呈现的条规内容</li>

</ul>

li其实是英文list item的缩写

list是列表的意趣,item是条目款项的意味,所以结合起来就是列表条指标意思

5.注意点

  1. 自然要记住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>

       
二.ul标签和li标签是一个整机,是三个重组,所以一般景色下ul标签和li标签都以两头出现,不会单个出现,相当于说不会独自使用多少个ul标签也许独立行使贰个li标签,都以结合在共同行使。

       
3.由于ul标签和li标签是多少个组合,所以ul标签中不推荐包蕴别的标签,也正是说今后您在ul标签中只会师到li标签。

<ul>

<h二>中中原人民共和国的都市有怎么着</h贰>

<li></li>

<li></li>

</ul>

这种写法是不提倡的

  • 冬天列表应用场景:
  1. 音讯列表
  2. 金沙注册送58,货色列表
  3. 导航条

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

li {

float:left;

background-color:yellow;

width:150px;

height:50px;

text-align:center;

line-height:50px;

}

相关文章

网站地图xml地图