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> & ...
随机推荐
- 09 Zabbix4.0系统clone、mass update使用
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 09 Zabbix4.0系统clone.mass update使用 1. clone使用: clo ...
- 面试---Python中的模块和包是什么?
python模块是: 自我包含并且有组织的代码片段为模块. 表现形式为:写的代码保存为文件.这个文件就是一个模块.sample.py 其中文件名smaple为模块名字. python包是: 包是一个有 ...
- CSS 隐藏页面元素的 几 种方法总结
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...
- [2017-8-02]Android Learning Day8
自定义动画效果 新建一个customAnim类 package com.liwenchi.myapplication; import android.view.animation.Animation; ...
- extern C小结
名词解释 1.extern extern翻译为外部的,用在变量或函数之前,使其可见范围拓宽,这就是为啥叫extern吧.那它是用来干嘛的呢?当用在变量或函数之前,提示编译器到其他模块寻找其定义. 举个 ...
- 通过WebChannel/WebSockets与QML中的HTML交互
来源:通过WebChannel/WebSockets与QML中的HTML交互 GitHub:八至 作者:狐狸家的鱼 本文链接:QML与HTML交互 在查询QML与HTML之间通信交互时资料很少,这篇文 ...
- bfs退出条件
找到结果即退出? Possibly Not! 如拓展(x)将导致距离增加0(x)或1(x+1),[这种情况用优先队列] 那么该拓展得到的结果也许并不是最优的,后面还有x. 所以最好的是遍历(不知怎么说 ...
- 初始redis数据库
redis就是一个类似于存储在内存中的大字典 安装: windows下安装redis: 你需要在你的环境下安装: pip install redis 以上是在你的全局环境安装, 你如果用的是虚拟环境你 ...
- TestNg1. 基本介绍注解介绍和如何让在maven中引用
1.更适合测试人员,有很多的套件. maven中引用: <!-- https://mvnrepository.com/artifact/org.testng/testng --><d ...
- free(): invalid next size (fast): 0x000000xxx
记录一次错误,一开始看到这个错误,第一反应是不是释放了两次,后来检测绝对没有,然后又检查了下是不是new/malloc和delete/free没配对, 发现也不是,最后是发现new[x]中x是0的缘故 ...