上一部分主要介绍关于开发工具，各种基础标签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> - 有序列表的效果用无序列表也可以实现，则无序列表最常用
- 可以通过css改掉小圆点
- ②ul和li是一个整体，一般不会单独出现的，都是要结合使用
- ③ul标签中不包含其他标签
- ①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
网友评论