day4-列表标签

2016-11-14 本文已影响10人喵鸢

上一部分主要介绍关于开发工具，各种基础标签h标签、p标签、hr标签、img标签、br标签、base标签、a标签中关于选择文件路径问题及锚点等
地址：http://www.jianshu.com/p/f775285a24c8

今天要介绍关于列表标签，列表标签分为无序、有序、定义，各自特点和属性及应用场景

如果有什么笔记中有什么错漏，或者提问技术问题都可以留言，大家进行经验分享 ---- 喵

列表标签

作用：给一堆数据添加列表语义，告诉搜索引擎告诉浏览器这一堆数据是一个整体

HTML中列表标签的分类

无序列表✨✨✨unordered list
有序列表（最少）ordered list
定义列表✨definition list

无序列表unordered list

作用：给一堆数据添加列表语义，这一堆数据中的数据没有先后之分
- 先后之分：排行榜
- 无先后之分：所有的城市
格式
<h2>中国城市</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<li>天津</li>
</ul>
li是list item缩写；list是列表，item是项目
注意点：
- ①ul标签是给数据添加语义的，并没有给里面数据添加小圆点
  - 可以通过css改掉小圆点
    <style type="text/css">
    ul {
    list-style: none;
    }
    </style>
  - 有序列表的效果用无序列表也可以实现，则无序列表最常用
- ②ul和li是一个整体，一般不会单独出现的，都是要结合使用
- ③ul标签中不包含其他标签
应用场景
- 新闻列表
- 商品列表
- 导航条列表
效果图

无序列表.png

练习1

无序列表练习.png

练习2
- ul标签中只可以有li，li中可以有其他标签

练习2.png

练习3
- ul标签中可以添加ul标签
- webStorm中快捷写法
  ul>li*5
  <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul>

列表嵌套简便写法.png

有序列表ordered list

作用：给一堆内容添加有序列表语义(一个有顺序整体)，列表中的条目有先后之分
<h4>音乐排行</h4>
<ol type="A" >
<li>演员</li>
<li>绅士</li>
<li>认真的雪</li>
</ol>
应用场景
- 排行榜
- 用得少，因为可用无序列表代替有序列表
注意点：
- 和ul基本相同
- 属性type：前面符号 start：列表起始值 -- 都不推荐使用
- 样式不要用属性中的去更改，要用css

定义列表(definition list)

作用: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述
格式
- dt英文definition title, 翻译为定义标题
- dd英文definition description, 翻译为定义描述信息
  <dl>
  <dt>北京</dt>
  <dd>国家的首都, 看升国旗的地方
  </dd>
  <dt>上海</dt>
  <dd>魔都, 遍地是黄金的地方</dd>
  </dl>
应用场景:
- 网站底部相关信息
- 图文混排
- 但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl
注意点
- dl和dd dt是一个整体，不能各自单独出现
- dd和dt中可以嵌套其他标签
- 一个dt可以配置多个dd，但是 dd的语义是描述离它最近的一个，所以最好只使用一个dd
- 可以将多个dt+dd组合拆分为多个dl
练习4：模拟网站底部信息导航

<body>
<dl>
    <dt>
    <h2>购物指南</h2>
    </dt>
    <dd>
        <!--#表示一个假链接效果-->
         <p><a href="#">购物流程</a></p>
         <p> <a href="#">生活旅游</a></p>
         <p><a href="#">常见问题
         </a></p>
         <p> <a href="#">大家电</a></p>
         <p> <a href="#">联系客服</a></p>
    </dd>
</dl>
</body>

练习4.png

上一篇下一篇

猜你喜欢

热点阅读