分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

Html列表:

发布时间:2023-09-06 02:08责任编辑:熊小新关键词:暂无标签

有序列表:

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现,如:

<ol>

<li>列表文字一</li>

<li>列表文字二</li>

<li>列表文字三</li>

</ol>

在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开中较少使用。

 写上面列表标签的快捷键:输入 ol>li*3 后,按Tab键 (其中的3可根据需要换成其他数字)

无序列表:

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现,如:

<ul>

<li>列表文字一</li>

<li>列表文字二</li>

<li>列表文字三</li>

</ul>

在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示的效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同。实际开发中一般用这种列表

定义列表:

定义列表通常用于术语的定义。

<dl>标签表示列表的整体

<dt>标签定义术语的题目

<dd>标签是术语的解释

一个<dl>中可以有多个题目和解释

代码:

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>列表标签</title></head><body> ???<h1>有序列表</h1> ???<ol> ???????<li>html</li> ???????<li>css</li> ???????<li>javascript</li> ???</ol> ???<!-- 快捷键:ol>li*4 按Tab键 ?效果如下: ???<ol> ???????<li></li> ???????<li></li> ???????<li></li> ???????<li></li> ???</ol> ???--> ???<h1>无序列表</h1> ???<ul> ???????<li><a href="https://www.baidu.com">百度首页</a></li> ???????<li><a href="https://www.sogou.com">搜狗首页</a></li> ???????<li><a href="https://www.sohu.com">搜狐首页</a></li> ???</ul> ???<!-- 快捷键:ul>(li>a{首页})*3 ?按Tab键,效果如下: ???<ul> ???????<li><a href="">首页</a></li> ???????<li><a href="">首页</a></li> ???????<li><a href="">首页</a></li> ???</ul> ???--> ???<h1>定义列表</h1> ???????<h3>前端三大块</h3> ???<dl> ???????<dt>html</dt> ???????<dd>负责页面的结构</dd> ???????<dt>css</dt> ???????<dd>负责页面的表现</dd> ???????<dt>javascript</dt> ???????<dd>负责页面的行为</dd> ???</dl> ???<!-- 快捷键:dl>(dt+dd)*3 按Tab键 ?效果如下: ???<dl> ???????<dt></dt> ???????<dd></dd> ???????<dt></dt> ???????<dd></dd> ???????<dt></dt> ???????<dd></dd> ???</dl> ???--></body></html>

 页面显示效果:

Html列表:

原文地址:https://www.cnblogs.com/reyinever/p/10549872.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved