• 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 有序列表ol 和无序列表 ul

网页HTML 有序列表ol 和无序列表 ul

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

本文主要包含HTML,有序列表,ol,,无序列表,ul等相关知识,佚名 希望在学习及工作中可以帮助到您

 用于组织数据的列表

学习了这么多控制网页显示的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表单提交的几种方式_动力节点Java学院整理
  • HTML表单_动力节点Java学院整理
  • HTML大于号、小于号、空格、引号等常用的转义代码写法一览表
  • HTML中实现鼠标经停时整行(tr)变色
  • html格式化json的实例代码
  • html在消息按钮上增加数量角标的实现代码
  • html页面跳转传递参数问题
  • html、css和js注释规范用法小结
  • Html 实现动态显示颜色块的报表效果(实例代码)
  • html是什么文件 html文件如何打开

相关文章

  • 2017-08-05关于shortcut icon和icon代码的区别介绍
  • 2017-05-27html在消息按钮上增加数量角标的实现代码
  • 2017-08-05用table表格来调整表单控件的格式让它好看一些
  • 2017-08-05html+css+javascript实现列表循环滚动示例代码
  • 2017-08-05用image来提交form不想使用button提交form
  • 2017-08-05html中select optgroup标签使用介绍
  • 2017-08-05HTML 特殊字符转换表
  • 2017-08-05链接A的语义、写法和最佳实践
  • 2017-08-05清空select标签中option选项的3种不同方式
  • 2017-08-05让前端开发者价值百万的10项技能

文章分类

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

最近更新的内容

    • html页面实现过两秒跳转至其他页面的方法
    • 浅谈HTML空链接的作用
    • 向HTML中插入视频并兼容所有浏览器的方法
    • Html注释 Html中标记文字注释的符号
    • meta viewport标签的使用说明(手机浏览缩放控制)
    • 空格 在ie、firefox、chrome浏览器中显示距离不一致
    • HTML对于元素水平垂直居中的探讨
    • 【网页设计】分享E-WebTemplates国外精美网页模板(FLASH+PSD源文件+HTML)
    • html base标签 target=_parent使用介绍
    • 利用微软在线预览链接展示office相关文档内容

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

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