列表标签

容器里面装载着文字或图表的一种形式，叫列表。

列表最大的特点就是整齐、整洁、有序

无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>......
</ul>

注意：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。2. <li>与</li>之间相当于一个容器，可以容纳所有元素。3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>四大名著</title><base target="_blank">
</head>
<body><h2>中国四大名著</h2><ul><li><h4><img src="四大名著/shz.jpg" width="100" /><a href="https://baike.baidu.com/item/%E6%B0%B4%E6%B5%92%E4%BC%A0/348">《水浒传》</a></h4><p>《水浒传》，中国四大名著之一，是一部以北宋末年宋江起义为主要故事背景、类型上属于英雄传奇的章回体长篇小说。作者或编者一般被认为是施耐庵，现存刊本署名大多有施耐庵、罗贯中两人中的一人，或两人皆有。全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安，以及受招安后为宋朝征战，最终消亡的宏大故事，艺术地反映了中国历史上宋江起义从发生、发展直至失败的全过程，深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，也具体揭示了起义失败的内在历史原因。<br />《水浒传》问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。《水浒传》是中国历史上最早用白话文写成的章回小说之一，流传极广，脍炙人口；同时也是汉语文学中具备史诗特征的作品之一，对中国乃至东亚的叙事文学都有极其深远的影响。 </p></li><li><h4><img src="四大名著/sgyy.jpg" width="100" /><a href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782">《三国演义》</a></h4><p>《三国演义》全名为《三国志通俗演义》（又称《三国志演义》），是中国古典四大名著之一，也是中国第一部长篇章回体历史演义小说，作者是元末明初的小说家罗贯中。《三国志通俗演义》成书后有嘉靖壬午本等多个版本传于世，到了明末清初，毛宗岗对《三国演义》整顿回目、修正文辞、改换诗文。<br />《三国演义》描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一群叱咤风云的三国英雄人物。<br />全书可大致分为黄巾起义、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分。在广阔的历史舞台上，上演了一幕幕气势磅礴的战争场面。作者罗贯中将兵法三十六计融于字里行间，既有情节，也有兵法韬略。<br />《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说。</p></li><li><h4><img src="四大名著/xyj.jpg" width="100" /><a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/6786341">《西游记》</a></h4><p>《西游记》又称央视86版《西游记》，改编自明代小说家吴承恩同名文学古典名著。是由中央电视台、中国电视剧制作中心出品的一部25集古装神话剧。由杨洁执导，戴英禄，杨洁，邹忆青共同编剧，六小龄童、徐少华、迟重瑞、汪粤、马德华、闫怀礼等主演，李世宏、李扬、张云明、里坡等担任主要配音。 <br />该剧讲述的是孙悟空、猪八戒、沙僧辅保大唐高僧玄奘去西天取经，师徒四人一路抢滩涉险，降妖伏怪，历经八十一难，取回真经，终修正果的故事。</p></li><li><h4><img src="四大名著/hlm.jpg" width="100" /><a href="https://baike.baidu.com/item/%E7%BA%A2%E6%A5%BC%E6%A2%A6/15311">《红楼梦》</a></h4><p>《红楼梦》，中国古代章回体长篇小说，又名《石头记》等，被列为中国古典四大名著之首，一般认为是清代作家曹雪芹所著。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，描绘了一批举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从各个角度展现女性美以及中国古代社会世态百相的史诗性著作。<br />《红楼梦》版本可分为120回“程本”和80回“脂本”两大系统。程本为程伟元排印的印刷本，脂本为脂砚斋在不同时期抄评的早期手抄本。脂本是程本的底本。<br />《红楼梦》是一部具有世界影响力的人情小说，举世公认的中国古典小说巅峰之作，中国封建社会的百科全书，传统文化的集大成者。小说以“大旨谈情，实录其事”自勉，只按自己的事体情理，按迹循踪，摆脱旧套，新鲜别致，取得了非凡的艺术成就。“真事隐去，假语村言”的特殊笔法更是令后世读者脑洞大开，揣测之说久而遂多。二十世纪以来，学术界因《红楼梦》异常出色的艺术成就和丰富深刻的思想底蕴而产生了以《红楼梦》为研究对象的专门学问——红学。</p></li></ul>
</body>
</html>

效果：

有序列表 ol （了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>......
</ol>

所有特性基本与ul 一致。

练习：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>有序列表</title></head><body><h3>有序列表</h3><hr /><p>有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义</p><ol><li>淘宝</li><li>京东</li><li>百度</li><li>网易</li><li>哈哈</li></ol></body></html>

效果：

自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...
</dl>

练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义列表</title>
</head>
<body><h3>自定义列表</h3><hr /><p>自定义列表常用对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号，多用于网站结尾</p><dl><dt>湖南</dt><dd>长沙</dd><dd>郴州</dd><dd>株洲</dd><dd>岳阳</dd></dl><dl><dt>广东</dt><dd>深圳</dd><dd>广州</dd><dd>潮汕</dd><dd>惠州</dd></dl>
</body>
</html>

效果：

前端学习笔记-html-列表标签相关推荐

前端学习笔记day01 html 标签之音频 embed+audio+video
1. embed标签有时候视频很大,我们不直接从本地导入到html中,而是从优酷上直接复制html代码即可: 2. 如果是一些小的视频文件可以借助video标签 2.1 <video sr ...
2013年7月28日web前端学习笔记-------head相关标签应用
7月份快过完了.趁周日写写学过觉得有用的东西. 1.缩略图的展示问题,不要以为缩略图设置了width,height,就是缩略图了.比如一个300kb的500*500原始图片,用户请求web服务器后,展 ...
前端学习笔记day47 其他标签
1. 其他标签标签的属性都是属性名=属性值的形式: 每一个标签都有三个基本属性 id="" (表示该标签的唯一标识,不能重复) class="" styl ...
前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
前端学习笔记：省市区三级联动
前端学习笔记:省市区三级联动一.数据库 sql表是自关联的表. 表名:province_city_district 字段: id:区域自身的id pid:区域的父级id name:区域自身的名字二 ...
HTML+CSS学习笔记(2) - 认识标签（1）转载
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 http://www.cnblogs.com/wanglongshuai/p/5204070.html@ ...
Java学习笔记-Day43 HTML标签
Java学习笔记-Day43 HTML标签一.布局标签 1.p标签 2.div标签 3.span标签二.列表标签 1.有序列表 2.无序列表 3.自定义列表三.文本标签 1.内联型文本标签 2. ...
web前端学习笔记（最新）
web前端学习笔记大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...

前端学习笔记-html-列表标签

列表标签

无序列表 ul （重点）

有序列表 ol （了解）

自定义列表（理解）

前端学习笔记-html-列表标签相关推荐

最新文章

热门文章