先复习下上一节

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>练习</title>

</head>

<body>

    <h1>This is heading one</h1>

    <hr/>

    <p>这是一个段落，上下皆有一个水平线</p>

    <hr/>

    <h2>This is heading two</h2>

    <p>接下来有一个换行<br/>换行咯</p>

    <h3>This is heading three</h3>

    <p>领略一下<font size="+8" face="楷体" color="blue">font</font>标签的作用吧！</p>

    <h4>This is heading four</h4>

    <b>b标签是加粗哦！</b>

    <h5>This is heading five</h5>

    <i>i标签是变斜体</i>

    <u>u标签是加下划线</u>

    <s>s是加删除线</s>

    <big>big呈现大号字体效果</big>

    <small>small呈现小号字体效果</small>

    <p><font size="22">五的二次方<sup>二</sup></font>碳<sub>十四</sub></p>

    <h6>This is heading six</h6>

</body>

</html>

HTML 列表标签支持有序、无序和定义列表。

列表标签表格：

1.无序列表

　　无序列表是一个项目的列表。无序列表项开始于 <ul> 标签，结束于</ul>标签。每个列表项开始于 <li>标签，结束于</li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。在这里只是最基础的文字来演示。

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>列表标签演示</title>

</head>

<body>

    <h1>这是一个无序列表标签演示</h1>

    <ul<!--unOrderList-->

        <li>苹果</li>

        <li>香蕉</li>

        <li>葡萄</li>

        <li>西瓜</li>

        <li>荔枝</li>

    </ul>

</body>

</html>

2.有序列表

　　同样，有序列表也是一列项目，列表项目使用数字，字母等进行标记。有序列表开始于 <ol> 标签，结束于</ol>标签。每个列表项始于 <li> 标签，结束于</li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>列表标签演示</title>

</head>

<body>

    <h1>这是一个有序列表标签演示</h1>

    <ol type="a"><!--orderList利用标签的属性设置属性值，从a开始增长-->

        <li>苹果</li>

        <li>香蕉</li>

        <li>葡萄</li>

        <li>西瓜</li>

        <li>荔枝</li>

    </ol>

</body>

</html>

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>列表标签演示</title>

</head>

<body>

    <h1>这是一个有序列表标签演示</h1>

    <ol type="1"><!--利用标签的属性设置属性值，从1开始自增长-->

        <li>苹果</li>

        <li>香蕉</li>

        <li>葡萄</li>

        <li>西瓜</li>

        <li>荔枝</li>

    </ol>

</body>

</html>

3.定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始，结束于</dl>标签。每个自定义列表项以 <dt> 开始，结束于</dt>标签。每个自定义列表项的定义以 <dd> 开始，结束于</dd>标签。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>列表标签演示</title>

</head>

<body>

    <h1>这是一个定义列表标签演示</h1>

    <!--HTML注释：演示列表标签

    列表标签：dl

    上层项目：dt

    下层项目：dd    封装的内容在显示时会缩进的，有自动缩进现象

    -->

    <dl>

        <dt>游戏名称:</dt>

        <dd>魂斗罗</dd>

        <dd>超级玛丽</dd>

        <dd>冒险岛</dd>

        <dd>热血格斗</dd>

        <dd>忍者神龟</dd>

    </dl>

</body>

</html>

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

HTML第二耍 列表标签的更多相关文章

  1. HTML第三耍 图像标签

    复习一下第二耍: <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  2. H5的段落标签、图片标签、列表标签与链接标签

    段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...

  3. 5.22 HTML 列表标签和表单标签

    1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li:  listitem  列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...

  4. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  6. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  7. HTML（标题/图片/链接/列表标签）

    <!DOCTYPE html> 声明 <!DOCTYPE html> 是 html5 标准网页声明,全称为 Document Type HyperText Mark-up La ...

  8. HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  9. 初学HTML 常见的标签(二) 列表标签

    上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面. ul-li 列表标签 <ul> <li>列表1</li> & ...

随机推荐

  1. C/C++ 程序库

    C/C++ 程序库 // --------------------------------------------- 来几个不常见但是很变态的库吧: bundle: 把几乎所有常见的压缩库封装成了一个 ...

  2. Linux 通过Shell 查找问题进程 [转]

    背景介绍: 最近公司服务器不太稳定,总是在凌晨某个时段突发高负载情况,因为客观环境比较复杂,所以很难猜测出到底是哪个进程出现了问题,加之故障发生时,通常我在睡觉,等我被报警短信吵醒,通过公司 VPN ...

  3. HAOI2015 简要题解

    「HAOI2015」树上染色 题意 有一棵点数为 \(N\) 的树,树边有边权.给你一个在 \(0 \sim N\) 之内的正整数 \(K\),你要在这棵树中选择 \(K\) 个点,将其染成黑色,并将 ...

  4. 文艺平衡树 Splay 学习笔记(1)

    (这里是Splay基础操作,reserve什么的会在下一篇里面讲) 好久之前就说要学Splay了,结果苟到现在才学习. 可能是最近良心发现自己实在太弱了,听数学又听不懂只好多学点不要脑子的数据结构. ...

  5. HttpWebRequest发http参数

    使用js发请求时,一般使用表单.json对象或者字符串 $.post(url,jsonStr) 服务端获取参数 Request.QueryString.Get();// GET参数 Request.F ...

  6. unittest单元测试框架中的参数化及每个用例的注释

    相信大家和我有相同的经历,在写自动化用例脚本的时候,用例的操作是一样的,但是就是参数不同,比如说要测一个付款的接口,付款有很多种渠道,另外只有部分参数不一样,如果我们一个渠道一个渠道的写,在unitt ...

  7. luogu5019 [NOIp2018]铺设道路 (贪心)

    和NOIp2013 积木大赛一模一样 我在堆一格的时候,我把它尽量地往右去延伸 于是如果对于一个i,a[i-1]<a[i],那i在之前一定只堆过a[i-1]那么多,所以要再堆a[i]-a[i-1 ...

  8. 20165223 实验一 Java开发环境的熟悉

    目录 一.实验报告封面 二.实验内容 (一)命令行下的JAVA程序开发 (二)IDEA中的JAVA程序开发 (三)自主练习 三.实验总结 四.PSP时间 一.实验报告封面 北京电子科技学院(BESTI ...

  9. Shiro中的Rememberme后出现浏览器500错误

    问题详述:在Shiro中添加Remember me功能后,只要勾选Remember me选项为true的时候,浏览器就会跳转到一个不可达页面,并且在Chrome中显示HTTP 500错误. 问题追踪: ...

  10. 如何在jsp中引入bootstrap

    如何在jsp中引入bootstrap包: 1.首先在http://getbootstrap.com/上下载Bootstrap的最新版. 您会看到两个按钮: Download Bootstrap:下载 ...