先复习下上一节

<!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. 使用tree命令导出文件夹/文件的目录树

    前提:己安装扩展: 介绍: TREE [drive:][path] [/F] [/A] /F   显示每个文件夹中文件的名称.(带扩展名)   /A   使用 ASCII 字符,而不使用扩展字符. t ...

  2. 在 CentOS 上编写 init.d service script [转]

    背景:之前编写了一些脚本,下载了一些开源软件,想把它们做成系统服务,通过 service your_prog_name start 这样的方式来后台运行,并在开机时自动启动.在了解了 daemon 命 ...

  3. 网络文件系统(NFS)简介

    网络文件系统(Network File System, NFS)是一种分布式文件系统协议,最初由Sun Microsystems公司开发,并于1984年发布.其功能旨在允许客户端主机可以像访问本地存储 ...

  4. Finding Lines UVALive - 6955（随机）

    给出n个点,问你有没有可能存在一条直线,这n个点中存在百分号p以上点在这条直线上. 两个点确定一条直线,所以可以随机枚举两个点,然后用这条直线去判断其他的点是不是在这条直线上,如果在这个直线上的点超过 ...

  5. CentOS6.5安装JDK1.8

    1.查看Linux自带的JDK是否已安装(如果安装则卸载CentOS已安装的低版本) 安装好的CentOS会自带OpenJdk,用命令 java -version,会有下面的信息: java -ver ...

  6. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  7. [luogu3369][普通平衡树]

    题目链接 思路 模板 只是有几个容易出错的地方 第45行容易忘记 第54行里面的cnt--和siz--容易忘记 第56行是根据id判断不是val 第60行siz--容易忘记 第64行是siz+1不是s ...

  8. 利用captcha库绘制验证码

    #导包 from captcha.image import ImageCaptcha from PIL import Image import random import time import os ...

  9. Python三大web框架简单介绍

    Django 是重量级框架:它封装的的功能常丰富非常多所以它是重量级,Django的文档最完善.市场占有率最高.招聘职位最多.Django提供全套的解决方案(full-stack framework ...

  10. CMakeLists.txt使用

    背景:C++代码在编译的过程中需要进行文件的包含,该文主要介绍CMakeLists.txt相关语法 CMake之CMakeLists.txt编写入门