• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 网页HTML代码讲解:有序列表和无序列表

网页HTML代码讲解:有序列表和无序列表

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含序列,讲解,代码,网页,<,/li>,li>,学习,结构,元素等相关知识,佚名 希望在学习及工作中可以帮助到您

本节学习HTML中的列表元素,列表形式在网站设计中占有比较大的比重,显示信息非常整齐直观,便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。
用于组织数据的列表
学习了这么多控制网页显示的HTML标签,读者可以初步制作纯文章页面了。本节学习HTML中的列表元素,列表形式在网站设计中占有比较大的比重,显示信息非常整齐直观,便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。
文本框:

图4.17  列表元素的结构
4.4.1 列表的结构组成
HTML的列表元素是一个由列表标签封闭的结构,包含的列表项由<li></li>组成。具体结构如图4.17所示。
4.4.2 制作无序列表
顾名思义,无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表,其列表标签采用<ul></ul>,编写方法如下:
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
<li>列表项五</li>
</ul>
4.4.3 制作有序列表
顾名思义,有序列表就是列表结构中的列表项有先后顺序的列表形式,从上到下可以有各种不同的序列编号,如1、2、3或a、b、c等。在D:\web\目录下创建网页文件,命名为ul_ol.htm,编写代码如代码4.17所示。
代码4.17 列表的设置:ul_ol.htm
<html>
<head>
<title>列表的设置</title>
</head>
<body>
<font size="5">
网页前台技术
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>FLASH</li>
</ul>
网页后台的学习
<ol>
<li>ASP</li>
<li>ASP.net</li>
<li>PHP</li>
<li>CGI</li>
<li>Ruby</li>
<li>Python</li>
</ol>
</font>
</body>
</html>
在浏览器地址栏输入http://localhost/ul_ol.htm,浏览效果如图4.18所示。

图4.18 列表的设置

您可能想查找下面的文章:

  • 浅谈html有序列表、无序列表与定义列表
  • HTML 无序列表项目符号使用图片的CSS写法
  • html无序列表标签和有序列表标签使用示例
  • 网页HTML代码讲解:有序列表和无序列表
  • 网页HTML 有序列表ol 和无序列表 ul
  • HTML网页列表标记学习教程

相关文章

  • 2017-08-05HTML打折计算价格实现原理与脚本代码
  • 2017-08-05详解HTML的style标签以及相关的CSS引用
  • 2017-08-05Html 元素隐藏的几种方式
  • 2017-08-05input元素[type="file"]时的样式定制及浏览器兼容性问题探讨
  • 2017-08-05HTML embed标签使用方法和属性详解
  • 2017-08-05html 文本框(text)不可用只读的多种实现方法
  • 2017-08-05用简单的jquery+CSS创建自定义的a标签title提示tooltip
  • 2017-08-05html中的div、td 、p 等容器内强制换行和不换行的实现
  • 2017-08-05不可不知的HTML优化技巧
  • 2017-08-05使用HTML编写简单的邮件模版

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • div标签中的元素margin-top失效的解决方法
    • Iframe和FRAME的区别分析
    • Zen HTML Elements 使用zen coding的朋友可以收藏下
    • HTML输入框优化以此来提高用户体验和易用度
    • 浅析html 空格代码
    • html 标签ID可以是变量
    • HTML九宫格布局实现方法
    • HTML表单(HTML Form)中get 和post 的区别
    • 用html的ul和li标签做图片展示功能示例代码
    • 关于type="file"的input框样式修改小结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有