html5--1.11列表
html5--1.11列表
学习要点：
1.无序列表的基本格式
ul（unorder line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签
<ul>
<li></li>
<li></li>
</ul>
2.无序列表的type属性
无序列表的type属性有三个值：1.disc（默认值）；2.circle；3.square
分别对应
- 实心圆
- 空心圆
- 实心方块
这里演示的就是ul中type为circle的效果
在css中可以设置更多更加复杂的效果，比如前面加小图片
3.有序列表的基本格式
ol（order line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签
<ol>
<li></li>
<li></li>
</ol>
4.有序列表的type属性
- 整数（默认值）；
- 大（小）写字母A\B\C...
- 大小写的罗马字母：i ii .../I II III
这里设置的ol的type为大写字母A
li标签里面放图片链接都是可以的，元素的嵌套
5.有序列表的start属性
定义列表的开始序号，比如第一项不是数字1，而是从10开始.......
就把ol的start属性设置成不同就可以了
6.有序列表的value属性
定义某个单个列表项的序号.......
- 可以通过value属性来设置不连续列表
- 我们之前都是对ol操作，这里是对li操作
- 因为要设置每一项，所以可以每一项任意设置
- 比如说之前是连续的123，这里却跳到了10
- 做法是把跳的那一项li的value属性单独设置成10就好了
- 设置之后，后面的值会在这个设置的值上面递增
7.自定义列表
自定义列表项组成：由 dl定义列表；dt定义列表项目；dd定义列表内容；
<dl>
<dt>列表项目一</dt>
<dd>列表项目一的内容</dd>
<dt>列表项目二</dt>
<dd>列表项目二的内容</dd>
</dl>
- 列表项目一
- 列表项目一的内容
- 列表项目二
- 列表项目二的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.11列表</title>
</head>
<body>
<p>学习要点：</p>
<p style="color: #ff7f50">
<ul>
<li><strong><a href="#1">无序列表</a></strong><br></li>
<li><strong><a href="#2">有序列表</a></strong><br></li>
<li><strong><a href="#3">列表的属性</a></strong><br></li>
<li><strong><a href="#4">自定义列表</a></strong></li>
</ul>
</p>
<hr>
<a id="1"></a>
<h4>1.无序列表的基本格式</h4>
<p style="color: #ff0000">ul（unorder line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签</p>
<p><ul></p>
<p> <li></li></p>
<p> <li></li></p>
<p></ul></p>
<h4>2.无序列表的type属性</h4>
<p>无序列表的type属性有三个值：1.disc（默认值）；2.circle；3.square</p>
<p>分别对应
<ul type="circle" style="color: #ff0000">
<li><strong>实心圆</strong></li>
<li><strong>空心圆</strong></li>
<li><strong>实心方块</strong></li>
</ul>
<span style="color: #ff0000">
这里演示的就是ul中type为circle的效果
</span>
<p>在<strong><span style="color: #ff0000">css</span></strong>中可以设置更多更加复杂的效果，比如前面加小图片</p>
</p>
<a id="2"></a>
<h4>3.有序列表的基本格式</h4>
<p style="color: #ff0000">ol（order line）标签里面放li标签就好了，每一项就是一个li（LineItem）标签</p>
<p><ol></p>
<p> <li></li></p>
<p> <li></li></p>
<p></ol></p>
<a id="3"></a>
<h4>4.有序列表的type属性</h4>
<ol type="A">
<li>整数（默认值）；</li>
<li>大（小）写字母A\B\C...</li>
<li>大小写的罗马字母：i ii .../I II III</li>
</ol>
<p>这里设置的ol的type为大写字母A</p>
<p>li标签里面放图片链接都是可以的，元素的嵌套</p>
<h4>5.有序列表的start属性</h4>
<p>定义列表的开始序号，比如第一项不是数字1，而是从10开始.......</p>
<p>就把ol的start属性设置成不同就可以了</p> <h4>6.有序列表的value属性</h4>
<p>定义某个单个列表项的序号.......</p>
<ol>
<li>可以通过value属性来设置不连续列表</li>
<li>我们之前都是对ol操作，这里是对li操作</li>
<li>因为要设置每一项，所以可以每一项任意设置</li>
<li value="10">比如说之前是连续的123，这里却跳到了10</li>
<li>做法是把跳的那一项li的value属性单独设置成10就好了</li>
<li value="20">设置之后，后面的值会在这个设置的值上面递增</li>
</ol>
<a id="4"></a>
<h4>7.自定义列表</h4>
<p>自定义列表项组成：由 dl定义列表；dt定义列表项目；dd定义列表内容；</p>
<p><dl></p>
<p> <dt>列表项目一</dt></p>
<p> <dd>列表项目一的内容</dd></p>
<p> <dt>列表项目二</dt></p>
<p> <dd>列表项目二的内容</dd></p>
<p></dl></p>
<dl>
<dt>列表项目一</dt>
<dd>列表项目一的内容</dd>
<dt>列表项目二</dt>
<dd>列表项目二的内容</dd>
</dl>
<h4>
</body>
</html>
html5--1.11列表的更多相关文章
- HTML5样式和列表、CSS链接的四种状态
一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...
- Mozilla对HTML5规范支持列表
翻译自Mozilla Developer Network 在2009年10月28日,HTML 5规范草稿在网络超文本应用技术工作组(WHATWG)中基本出于最后定稿阶段,这意味着HTML 5标准基本定 ...
- 关于 HTML5 的 11 个让人难以接受的事实
HTML5为Web开发者提供了很多强大的新特性,但是它的一些特定的限制会让它无法和本地应用匹敌. HTML5整合进了很多新的特性,并且有可能提升Web编程模式.和每一个阅读技术资讯的人所知道的一样,没 ...
- HTML5中 HTML列表／块／布局 韩俊强的博客
从简单到复杂HTML5详解:每日更新关注:http://weibo.com/hanjunqiang 新浪微博! 1.HTML列表 1.有序 2.无序 3.有序star属性 4.有序无序列表 代码: ...
- C++11 列表初始化
在我们实际编程中,我们经常会碰到变量初始化的问题,对于不同的变量初始化的手段多种多样,比如说对于一个数组我们可以使用 int arr[] = {1,2,3}的方式初始化,又比如对于一个简单的结构体: ...
- c++11——列表初始化
1. 使用列表初始化 在c++98/03中,对象的初始化方法有很多种,例如 int ar[3] = {1,2,3}; int arr[] = {1,2,3}; //普通数组 struct A{ int ...
- HTML5 第二章 列表和表格和媒体元素
列表: (1)什么是列表? 列表就是信息资源的一种展示形式. (2)无序列表: 语法: <ul> <li>第1项</li> <li>第2项</li ...
- [HTML/HTML5]7 使用列表
7.1 在Web页面中使用有序.无序.定义列表 (1)有序列表 有序列表中的每一个列表项之前,都以一个数字或字母作为编号. <ol> <li>树莓</li> &l ...
- 50个最受网友欢迎的HTML5资源下载列表
完整附件下载地址:http://down.51cto.com/data/413867 附件预览: HTML 5游戏源码精选(共含9个游戏源码) http://down.51cto.com/zt/227 ...
随机推荐
- Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental……
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to th ...
- MySQL具体解释（14）----------事务处理
前言:前一篇文章关于事务处理的博文没有写清楚,读起来非常晦涩.非常难理解,所以有整理了一些资料,帮助理解.见谅! 关于MySQL事务处理学习记 START TRANSACTION COMMIT ROL ...
- 重读金典------高质量C编程指南（林锐）-------第四章 表达式和基本语句
4.1 运算符的优先级 规则:如果代码行中的运算符比较多,可用括号确定操作顺序.if((a|b)&&(a&c)) 4.2 复合表达式 规则:不要编写太复杂的复合表达式 ...
- ubuntu 安装 rpm 软件包
1.首先安装alien和fakeroot这两个软件,alien可以将rpm转换为deb包.命令sudo apt-get install alien fakeroot 2.使用alien将rpm包转为d ...
- 如何禁止同IP站点查询和同IP站点查询的原理分析 Robots.txt屏蔽BINGBOT
很多站长工具中都有“同IP站点查询”.“IP反查域名”这种服务不少人都不知道是什么原理,其实这些服务几乎都是用BING(以前的LIVE)来实现 的,BING有个特别功能 BING抓取页面时会把站点的I ...
- Proving Equivalences (hdu 2767 强联通缩点)
Proving Equivalences Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- POJ3009 Curling 2.0(DFS)
迷宫问题求最短路. 略有不同的是假设不碰到石头的话会沿着一个方向一直前进,出界就算输了.碰到石头,前方石头会消失,冰壶停在原地. 把这个当作状态的转移. DFS能够求出其最小操作数. #include ...
- 对Oracle的rownum生成时机的理解
在Oracle中,rownum和rowid是平时经常用到的.比如rownum经常用于分页查询,rowid用于排重或者快速定位到记录. 对rownum跟order by配合下的生成时机一直没有具体研究过 ...
- Java学习之路 第四篇 oop和class (面向对象和类)
本人水平有限,创作本文是为了记录学习和帮助初学者学习,欢迎指正和补充 一.面向对象编程的设计概述 很多同学都在学校学了电脑的编程,现在的书籍大部分都是oop面向对象编程,一个很抽象的的名字,比较难以理 ...
- LeetCode(100)题解--Same Tree
https://leetcode.com/problems/same-tree/ 题目: Given two binary trees, write a function to check if th ...