HTML基础（二）列表标签
2024-09-08 10:39:53
无序列表ul
ul标签的格式为
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<h1>HTML 属性赋予元素意义和语境</h1>
<p>HTML 全局属性</p>
<ul>
<li>规定激活元素的快捷键</li>
<li>规定元素内容是否可编辑</li>
<li>规定元素是否可拖动</li>
</ul> </body>
</html>
效果
如果不想用圆点，想用方块只需要在ul标签里加上type属性就可以了，属性有
disc: 圆点 默认
square： 正方形
circle： 空心圆
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<h1>HTML 属性赋予元素意义和语境</h1>
<p>HTML 全局属性</p>
<ul type="disc">
<li>规定激活元素的快捷键</li>
<li>规定元素内容是否可编辑</li>
<li>规定元素是否可拖动</li>
</ul>
<ul type="square">
<li>规定激活元素的快捷键</li>
<li>规定元素内容是否可编辑</li>
<li>规定元素是否可拖动</li>
</ul>
<ul type="circle">
<li>规定激活元素的快捷键</li>
<li>规定元素内容是否可编辑</li>
<li>规定元素是否可拖动</li>
</ul> </body>
</html>
在来刷新看看效果
有序列表ol
ol标签的格式为 <ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body> <h1>HTML 属性赋予元素意义和语境</h1>
<p>HTML 全局属性</p>
<ol >
<li>规定激活元素的快捷键</li>
<li>规定元素内容是否可编辑</li>
<li>规定元素是否可拖动</li>
</ol> </body>
</html>
有序列表的type属性
1 数字1，2
a 小写字母a，b
A 大写字母A,B
i 小写罗马数字i
I 大写罗马数字I
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body> <h1>HTML 属性赋予元素意义和语境</h1>
<p>HTML 全局属性</p>
<ol type="a">
<li>规定激活元素的快捷键</li>
<li>规定元素内容是否可编辑</li>
<li>规定元素是否可拖动</li>
</ol>
<ol type="i">
<li>规定激活元素的快捷键</li>
<li>规定元素内容是否可编辑</li>
<li>规定元素是否可拖动</li>
</ol>
<ol type="I">
<li>规定激活元素的快捷键</li>
<li>规定元素内容是否可编辑</li>
<li>规定元素是否可拖动</li>
</ol> </body>
</html>
效果
定义列表
基本格式 dl，dt，dd三个是一起出现的，缺一不可
<dl>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
<dd>列表项描述</dd>
...
</dl>
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<dl>
<dt>我是列表</dt>
<dd>我是描述1</dd>
<dd>我是描述2</dd>
<dt>我是列表</dt>
<dd>我是描述1</dd>
<dd>我是描述2</dd>
</dl> </body>
</html>
效果
最新文章
- HTML5 data-* 自定义属性
- C#进程操作
- SQL Server如何启用xp_cmdshell组件
- VC远控（二）连接Server端及密码验证
- 查找进程对应的PID和对应的端口号
- [jquery]高级篇--标签选择
- c 语言结构体struct的三种定义方式 及 typedef
- DiscreteSeekBar---->SeekBar的使用
- MySql中PreparedStatement对象与Statement对象
- 在CodeBlocks 开发环境中配置使用OpenCV (ubuntu系统)
- 汇编实现: C库常见函数,串操作指令作用
- Python 入门知识捡漏
- unable to auto-detect email address
- 快递小哥逆袭自传：用了6年时间做到了IT部门主管
- react componentWillReceiveProps 使用注意
- python测试开发django-12.models设置主键primary_key
- LEARNING TO NAVIGATE IN COMPLEX ENVIRONMENTS
- Linux文件时间详解ctime、mtime、atime【转】
- jQuery控制a标签不可用
- with在模板中的应用