-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-10-25
来源 ：
阅读 1124
评论 0
摘要：本篇教程探讨了HTML小白初步学习教程4，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了HTML小白初步学习教程4，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
<
这一次主要是学习HTML列表学习
效果先行(效果图太长，分了三张)：
image
image
image
代码：
注：type 和start除了无序列表无效，均有效
复制代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<font size="3" color="#148923">
<h2>无序列表</h2>
<b>ul是无序列表标记; li是列表项目标记; type可以规定列表前面的符号类型:disc,circle,square...</b>
<ul type="disc">
<li>书</li>
<li>音频</li>
<li>视频</li>
</ul>
</font>
<font face="黑体"size="3" color="#F34E9A">
<h2>有序列表</h2>
<b>ol是有序列表标记； li是列表项目标记； type取值：l,a,A,i,I； start可规定开始 </b>
<ol type="l" start="4">
<li>书</li>
<li>音频</li>
<li>视频</li>
</ol>
</font>
<font face="隶书"size="3" color="#CEA237">
<h2>定义列表</h2>
<b>dl是定义列表标记； dt是列表项目标记；其主要用于解释名词</b>
<ol type="l" start="4">
<dt>*书</dt><dd>没啥好解释的</dd>
<dt>*音频</dt><dd>喵</dd>
<dt>*视频</dt><dd>video</dd>
</ol>
</font>
<font face="楷体"size="3" color="#75356ED">
<h2>菜单列表标记</h2>
<b>menu是菜单列表标记； li是列表项目标记； type取值：l,a,A,i,I； start可规定开始 </b>
<menu type="A" start="1"><!--如果没有type和start，这个menu就和ul是一样的-->
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《水浒传》</li>
<li>《三国演义》</li>
</menu>
</font>
<font face="华文行楷"size="3" color="#F35E1F">
<h2>目录列表标记</h2>
<b>dir是目录列表标记； li是列表项目标记；通常用于一个压缩窄列的列表</b>
<dir><!--如果没有type和start，这个dir就和ul是一样的-->
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《水浒传》</li>
<li>《三国演义》</li>
</dir>
</font>
<font face="楷体"size="3" color="#75356ED">
<h2>菜单列表标记</h2>
<b>menu是菜单列表标记； li是列表项目标记； type取值：l,a,A,i,I； start可规定开始 </b>
<menu type="A" start="1"><!--如果没有type和start，这个menu就和ul是一样的-->
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《水浒传》</li>
<li>《三国演义》</li>
</menu>
</font>
<font face="宋体"size="3" color="#FF0F43">
<h2>列表嵌套————定义列表的嵌套</h2>
<b>一个dt多个dd</b>
</br></br>
<dt>《红楼梦》</dt>
<dd>作者：曹雪芹</dd></br>
<dd>人物：贾宝玉+林黛玉+薛宝钗+众多男男女女</dd>
<dd>简介：还泪来，还泪去</dd>
</font>
<font face="华文幼圆" size="3" color="#5F43FA">
<h2>无序列表和有序列表的嵌套</h2>
<ul type="square"><li>《魔戒》系列</li></ul>
<ol type="1">
<li>魔戒1</li>
<li>魔戒2</li>
<li>魔戒3</li>
</ol>
<ul type="square"><li>《哈利·波特》系列</li></ul>
<ol type="1">
<li>哈利·波特与魔法石</li>
<li>哈利·波特与密室</li>
</ol>
         ...
<ol type="1" start="7"> <li>哈利·波特与死亡圣器</li> </ol>
</font>
</body>
</html>
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
