有序列表or和无序列表ul
源码下载在线测试显示效果
本节课除了讲解列表标签外还要通过列表引出其它总结性的知识，列表只是一个引子，就如同大家学习外语，每一个节课讲解语法的前提是先学习几个单词，同时单词和语法有体现在文章中。 本教程整体秉承单词、语法总结、文章阅读循环渐进的教学思路，不可能一直讲解语法，那样太空，也不能之一给他家介绍各种标签，也没有学习的动力，所以每一节课基本上会讲解几个标签，然后实现一个 小案例，最后再总结普适的规律。除此外，还会从营销、编程、艺术等拓展角度理解html语言，站在互联网生态的高度看，不论你是编程高手，还是艺术大师，还是SEO营销的大牛，毫无疑问HTML是你们的联系纽带， 共同的语言。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>WebGL统计数据</title> 6 </head> 7 <body> 8 <div> 9 <h3>WebGL百度指数排名</h3> 10 <div>1.北京</div> 11 <div>2.广东</div> 12 <div>3.浙江</div> 13 <div>4.江苏</div> 14 <div>5.上海</div> 15 <div>6.四川</div> 16 <div>7.湖北</div> 17 <div>8.山东</div> 18 <div>9.湖南</div> 19 <div>10.福建</div> 20 </div> 21 <ul> 22 <h3>WebGL应用领域</h3> 23 <li>教育</li> 24 <li>工业设计</li> 25 <li>机械</li> 26 <li>室内设计</li> 27 <li>建筑</li> 28 <li>地图导航</li> 29 <li>航空</li> 30 </ul> 31 <ol> 32 <h3>WebGL百度指数排名</h3> 33 <li>北京</li> 34 <li>广东</li> 35 <li>浙江</li> 36 <li>江苏</li> 37 <li>上海</li> 38 <li>四川</li> 39 <li>湖北</li> 40 <li>山东</li> 41 <li>湖南</li> 42 <li>福建</li> 43 </ol> 44 </body> 45 </html>
- 尝试用前面学习的标签元素之时实现一个排行榜显示
- 了解ul、ol列表标签
- 了解标签语义化概念
学习流程
文档结构
基本语法
- ol:有序列表
- 1
- A
- a
- I
- i
- ul:无序列表，有compact、type属性，通过过style引入样式也可以实现，可以不使用这两个属性
- ul、ol共有的列表样式属性
标签意义
| 属性 | 属性值 | 意义 |
| reversed | reversed | 升降序排列 |
| start | number | 枚举元素标识序号从第几个开始显示，比如start="2"第一个枚举元素前面显示2或B或II.... |
| type |
|
顺序标识方式，1标识阿拉伯数字，A表示英文字母表... |
ul、ol共有的样式属性，上一节课为大家讲解过style属性，style在英文中就是样式、风格的意思，html的标签主要是为了容纳文字、图片等内容，虽然浏览器对元素有默认显示效果，
但是不能适应自定义的需要，引入style属性主要是为了自定义元素的显示效果。
style="list-style-type:none;"表示不显示列表前面的表示符号，其它的相关样式属性不在意义列举，这里你有一个影响即可，有些样式属性，比如字体大小，基本通用，
有些样式属性只适用几类甚至一类元素。
标签语义化
有全局思维习惯的读者会思考有序列表、无序列表为什么要这么区分，没有列表也能实现列表的功能，比如说我使用一个div里面嵌套多个div就可以。这里大家可以去了解一个概念，html标签语义化。 大家可以思考，搜索引擎的原理，为什么你可通过百度搜索引擎搜索到一个网页，百度蜘蛛如何识别判断一个网页。先不管现在的人工智能，最原始的蜘蛛在爬取你的网站内容时会通过标签判断网站文字内容的属性， 比如title标签定义的文字，不仅仅会显示在浏览器的标题栏上面，也会显示在网页搜索界面上，同时也是搜索引擎索引库的目录关键字。标题h1~h6就像一篇文章的大小标题，p标签里面的文字就是文章段落的意思， 行业分工比较明确，可能会造成很多的隔阂。比如SEO从业者会重新修改前端工程师写的网页标签。比如文章的标题使用p标签，然后把字体定义大一些，从视觉上来看好像文章标题，但是搜索引擎不这么认为，互联网 就是互联世界，要和别人沟通，就要有标准，语义化最方便。定义各种各样的标签还有一个好处，每一类标签都会根据他的语义，拥有默认的显示样式，比如你做笔记时的列表，就是一行一行文字，还会标注123顺序或者点一个点， 前端工程师使用ol标签时，子元素li会默认添加阿拉伯数字标识，这样可以用更少的自定义style样式，节约网页文件大小，利于文件在网络间传输，可能有些同学趋向于一个div就可以走天下，也不能说不行，如果你真正开发一个大网站 就会明白为什么标签要语义化，标签要根据他的语义显示不同样式，当然有些标签没有语义，后面会讲到，这里不再展开讲解。