【4858美高梅】冬日,冬辰列表,HTML列表标签

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

什么样是一动不动列表?

【4858美高梅】冬日,冬辰列表,HTML列表标签。场景:
-信息列表
-商品列表
-导航条 (要改变 li 的 float 样式)
-图片列表
-游戏排名榜

1.如何是列表标签?

一 、什么是列表标签?

   
 列表标签的职能:给一堆数据添加列表语义,也正是报告浏览器这一堆数据是一个总体。

不变列表的效劳:给一堆数据添加列表语义,并且这一堆数据中有所的数目都有程序之分。

定义:
-告知浏览器、告知搜索引擎,这一堆数据是多个整机集合

列表标签的功能:给一堆数据添加列表语义,约等于告诉搜索引擎,告诉浏览器这一堆数据是3个完全

② 、HTML中列表标签的归类:

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

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

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

有体系表格式:

分类:
-冬天列表ul (用的最多)
-有类别表ol
-定义列表dl

2.HTML列表标签的分类

叁 、冬季列表的功能:

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

<ol>

冬天列表:给一堆数据添加列表语义,列表数据无先后之分
-格式
<ul>
<li> 江西气候</li>
<li> 斯图加特气候</li>
</ul>

2.1冬天列表(公司支付中用到最多)(unordered list)

肆 、严节列表的格式:

<ul>

<li>北京</li>

</ul>

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

以身作则结果:

4858美高梅 1

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

ul标签和li标签都以联合现身的,无法只使用个中之一。同时ul标签中不得不分包li标签,不成现身任何标签。

    <li></li>

暗许的列表前边会添加 3个小圆点
更改样式语法:
<head>标签的 <style> 里面
ul {
list-style: none;
}

2.2有体系表  (公司支付中用的至少)  (ordered list)

伍 、严节列表的行使场景: 音信列表、商品列表、制作导航条

</ol>

ul 标签和 li 标签是成对出现,一般不单独行使

2.3概念列表  (公司开发中用的帮衬多)   (definition list)

陆 、后面大家说过ul中最棒只放li标签可是在店铺支付中li标签中大概相比较复杂,能够在li标签中遗弃何标签。

计算:① 、ul标签中最棒只放li标签。

            二 、li标签中还足以继续放别的标签

别的用法和ul都大概,相当于应用场景/注意点都和ul大约

li 标签默许是升高变化,以列表情势显示
万一想要改成导航栏目标款型,需求用到CSS样式
<head> <style> 里面
li {
float : left ; 向左浮动
}

3.冬日,冬辰列表功效:

柒 、多级列表:

冬天列表中的li标签中除去可以添加其余标签来丰裕界面外,仍是能够添加li标签来增加界面。

也正是说ul中有li,li中仍是能够有ul。

<ol type=”A/a/I/i”>

li标签里面能够增加很多标签,也席卷 ul 标签

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

⑧ 、有系列表

格式:

<ol type=”1″>

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

4858美高梅 ,<li></li>

<li></li>

</ol>

      <li></li>

4858美高梅 2

怎么样叫有程序之分?

⑨ 、定义列表

格式:

<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是3个整机,所以他们一般景况下不会单独出现,都是联合署名出现的。

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

叁 、3个dt可以没有相应的dd,也能够有三个照应的dd,但是无论有恐怕尚未都不引进使用。

肆 、和li标签一样,当需求充裕界面时,我们能够在dt和dd标签中一而再添加别的标签。

</ol>

Paste_Image.png

例如:排行榜

在小卖部支付中绝非人钦定那么些脾性都是用CSS

有体系表:排名榜、能源榜
ol
给一堆数据添加语义,并且具有的多寡都以鱼贯而来之分的
格式:
<ol>
<li></li>
<ol>

什么样叫没有先后之分?

以不变应万变列表和冬天列表唯有语义和后边都展现区别,不过它的显得对于我们来说没有怎么用处,我们都以用CSS来做的,在铺子开发中山高校部分静止列表都是用冬日,冬辰列表来做的。

概念列表dl:
格式:
<dl>
<dt></dt>
<dd></dd>

比如:中中原人民共和国有何城市

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

4.冬季列表格式

</dl>

<ul>

dt:定义列表中的标题
dd:定义标题对应的描述

<li>供给出示的条款内容</li>

4858美高梅 3

</ul>

Paste_Image.png

li其实是英文list item的缩写

概念列表的应用场景:
-网站底部相关描述消息
-图像和文字混排

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

概念列表注意:
dl dt dd 是构成出现,不会单独出现
dl 中只许 dt dd
dt 中得以没有 dd ,可以有多个 dd
提议二个 dt 中 配置一个 dd

5.注意点

当须求丰裕界面时,能够在 dt 和 dd 中添加多少个标签,但不提出在 dl
标签中添加任何标签,也正是说 dl 标签中唯有 dt 和 dd

  1. 早晚要记住ul标签是用来给一堆数据添加列表语义的,而不是用来给它们增进小圆点的

4858美高梅 4

  • 什么样去除小圆点?

Paste_Image.png

<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标签都是手拉手现身,不会单个出现,也正是说不会独自行使2个ul标签只怕独立行使叁个li标签,都以整合在一块儿行使。

       
3.由于ul标签和li标签是3个结合,所以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 版权所有