HTML第二耍列表标签

先复习下上一节

<!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第二耍列表标签的更多相关文章

HTML第三耍图像标签
复习一下第二耍: <!doctype html> <html> <head> <meta charset="utf-8"> < ...
H5的段落标签、图片标签、列表标签与链接标签
段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...
5.22 HTML 列表标签和表单标签
1,ul无序列表标签 ul:unordered list ,就是无序列表的意思. li: listitem 列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
前端基础-html 列表标签,表格标签,表单标签
一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...
Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
HTML（标题/图片/链接/列表标签）
<!DOCTYPE html> 声明 <!DOCTYPE html> 是 html5 标准网页声明,全称为 Document Type HyperText Mark-up La ...
HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
初学HTML 常见的标签(二) 列表标签
上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面. ul-li 列表标签 <ul> <li>列表1</li> & ...

随机推荐

jQuery File Upload 图片上传解决方案兼容IE6+
1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ================= ...
SDOI2017 Round1 简要题解
我们 TM 怎么又要上文化课..我哔哔哔哔哔哔「SDOI2017」数字表格题意有 $T$ 组数据,求 \[ \prod_{i = 1}^{n} \prod_{j = 1}^{m} fib[ ...
全局变量 static变量
变量作用域全局变量( external linkage ) 定义在函数外 Int a=1 作用于整个工程在连接两个文件时若有两个a会报错 Staic 函数外(internal linkage) ...
HDU 4549 M斐波那契数列（矩阵快速幂）
题目链接:M斐波那契数列题意:$F[0]=a,F[1]=b,F[n]=F[n-1]*F[n-2]$.给定$a,b,n$,求$F[n]$. 题解:暴力打表后发现$ F[n]=a^{fib(n-1)} ...
Go实战--golang中使用JWT(JSON Web Token)
http://blog.csdn.net/wangshubo1989/article/details/74529333 之前写过关于golang中如何使用cookie的博客: 实战–go中使用cook ...
bzoj2554: Color
Description 有n个球排成一列,每个球都有一个颜色,用A-Z的大写字母来表示,我们每次随机选出两个球ball1,ball2,使得后者染上前者的颜色,求期望操作多少次,才能使得所有球的颜色都一 ...
Java 数组+循环升级篇
数组是一个变量,存储相同数据类型的一组数据(就是能存储很多数值的数据类型) 如果说声明一个变量就是在内存空间划出一块合适的空间,那么声明一个数组就是在内存空间划出一串连续的空间. 数组的基本要求标识 ...
day12-(jsp&el&jstl)
回顾: jsp: cookie: 浏览器端会话技术由服务器产生,生成key=value形式,通过响应头(set-cookie)返回给浏览器,保存在浏览器端下次访问的时候根据一定的规则携带cooki ...
【优秀的设计绘图软件】Affinity Designer Beta for Mac 1.7
[简介] Affinity Designer 1.7 beta 中文版本,具有全新的UI界面和功能,支持最新的 macOS Mojave 10.14 系统,Affinity Designer是 ...
java十进制转三十六进制
import java.util.HashMap; public class Ten2Thirty { private static final String X36 = "01234567 ...

HTML第二耍 列表标签