有序列表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>

文档结构

html文档结构树杈图

基本语法

  • ul、ol元素可以视为父元素,里面包含一系列子元素li
  • ul、ol、li在网页上显示的时候默认自动换行,都是块元素,同时具有开始标签和结束标签
  • ul取自英文无序列表Unordered list的两个单词首字母,字面的意思就是里面每一项子元素,是并列关系
  • ul取自英文有序列表Ordered list的两个单词首字母,字面的意思就是里面每一项子元素,是有先后关系,例如排行榜
  • 标签语义化

      有全局思维习惯的读者会思考有序列表、无序列表为什么要这么区分,没有列表也能实现列表的功能,比如说我使用一个div里面嵌套多个div就可以。这里大家可以去了解一个概念,html标签语义化。 大家可以思考,搜索引擎的原理,为什么你可通过百度搜索引擎搜索到一个网页,百度蜘蛛如何识别判断一个网页。先不管现在的人工智能,最原始的蜘蛛在爬取你的网站内容时会通过标签判断网站文字内容的属性, 比如title标签定义的文字,不仅仅会显示在浏览器的标题栏上面,也会显示在网页搜索界面上,同时也是搜索引擎索引库的目录关键字。标题h1~h6就像一篇文章的大小标题,p标签里面的文字就是文章段落的意思, 行业分工比较明确,可能会造成很多的隔阂。比如SEO从业者会重新修改前端工程师写的网页标签。比如文章的标题使用p标签,然后把字体定义大一些,从视觉上来看好像文章标题,但是搜索引擎不这么认为,互联网 就是互联世界,要和别人沟通,就要有标准,语义化最方便。定义各种各样的标签还有一个好处,每一类标签都会根据他的语义,拥有默认的显示样式,比如你做笔记时的列表,就是一行一行文字,还会标注123顺序或者点一个点, 前端工程师使用ol标签时,子元素li会默认添加阿拉伯数字标识,这样可以用更少的自定义style样式,节约网页文件大小,利于文件在网络间传输,可能有些同学趋向于一个div就可以走天下,也不能说不行,如果你真正开发一个大网站 就会明白为什么标签要语义化,标签要根据他的语义显示不同样式,当然有些标签没有语义,后面会讲到,这里不再展开讲解。