码迷,mamicode.com
首页 > Web开发 > 详细

HTML初步学习4

时间:2015-09-29 20:21:44      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

这一次主要是学习HTML列表学习

效果先行(效果图太长,分了三张):

技术分享

技术分享

技术分享

代码:

注: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>
  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp...
  <ol type="1" start="7">   <li>哈利·波特与死亡圣器</li>  </ol>
  </font>
 </body>
</html>
HTML列表示例

HTML初步学习4

标签:

原文地址:http://www.cnblogs.com/puluotiya/p/4847136.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!