欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Web前端从零开始 | 6.HTML的学习(4)

程序员文章站 2022-03-27 21:21:54
一、前言林清弦说:“一个人的气质里,藏着她读过的书。”二、内容有序列表< ol>< /ol>标记用于定义有序列表。列表项中使用编号来记录项目的顺序。列表的语法格式如下:< ol type="排序类型” start ="起始数值” >< li>列表项1< /li>< li>列表项2< /li>…< /ol>无序列表< ul>< /ul>标记用于定义无序列表。...

一、前言

林清弦说:“一个人的气质里,藏着她读过的书。”

二、内容

  1. 有序列表
    < ol>< /ol>标记用于定义有序列表。列表项中使用编号来记录项目的顺序。列表的语法格式如下:
    < ol type="排序类型” start ="起始数值” >
    < li>列表项1< /li>
    < li>列表项2< /li>

    < /ol>
    Web前端从零开始 | 6.HTML的学习(4)
  2. 无序列表
    < ul>< /ul>标记用于定义无序列表。列表项中使用type来记录项目的顺序。列表的语法格式如下:
    < ul type=" 列表的项目符号的类型">
    < li>列表项1< /li>
    < li>列表项2< /li>
    < /ul>
    其中< li> < /i>代表的是列表项。
    Web前端从零开始 | 6.HTML的学习(4)
  3. 嵌套列表
    列表是可以嵌套的,无序列表中嵌套有序列表或无序列表等;有序列表也可以嵌套无序列表或者无序。
  4. 定义列表
    定义列表通常用于定义名词或者概念,类似名词解释的内容。每-一个子项由两部分组成,第一部分是名词或者是概念,第二部分是相应的解释和描述。自定义列表以< dl> 标记开始,每个自定义列表项以< dt> 标记开始,每个自定义列表项的定义以< dd>标记开始。其语法格式如下:
    < dl >
    < dt>名词或者概念1< /dt>
    < dd>解释和描述内容< /dd>
    < dt>名词或者概念2< /dt>
    < dd>解释和描述内容< /dd>

    < d1>

三、实例

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>1开始的有序列表:
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li></1i>
</ol>50开始的有序列表:
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li></li>
</ol>
字母编号的有序列表:
<ol type = "i" >
<li>咖啡</li>
<li>牛奶</li>
<li></li>
</ol>
</body>
</html>

Web前端从零开始 | 6.HTML的学习(4)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
	
<h4>无序列表:</h4>
<ul >
<li type="disc">Coffee</li>
<li type="circle">Tea</li>
<li type="square">Milk</li>
</ul>
<h4>嵌套列表:</h4>
<ul></ul>
<li>咖啡</li>
<li><ul>	
	<li type="circle">红茶</li>
	<li type="circle">绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<h4>定义列表</h4>
<d1>
<dt><b>计算机</b></dt>
<dd>用来计算的仪器... .. .</dd>
<dt><b>显示器</b></dt>
<dd>以视觉方式显示信息的装置... ...</dd>
</dl>
</body>
</html>

Web前端从零开始 | 6.HTML的学习(4)

本文地址:https://blog.csdn.net/no31neverfailed/article/details/107349840