devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web第八讲：列表和超链接

作者：AllinToyou | 2024-03-28 09:30:25

赞

踩

web无序列表超链接

列表内容提要

  • 无序列表、有序列表
  • 定义列表标记语法及属性语法
  • 菜单列表、目录列表标记语法
  • 使用无序、有序及定义列表设计Web网页
  • 使用嵌套列表设计小型网站首页

列表的简介

  • 列表能对网页中的相关信息进行合理的布局，将项目有序或无序地罗列在一起，从而方便用户浏览和操作。

  • HTML中列表一共有5种，分别是无序列表、有序列表、定义列表、菜单列表、目录列表。其中较常用的是无序列表、有序列表、定义列表三种。

    列表类型标记符号备注
    无序列表<ul> ... </ul>常用
    菜单列表<menu> ... <.menu>不常用
    目录列表<dir> ... </dir>不常用
    有序列表<ol> ... </ol>常用
    定义列表<dl> ... </dl>常用

无序列表

  • 无序列表(Unordered List)

    • 在HTML文件中插入双的标记<ul> </ul>，完成无序列表的插入。
    • 列表项(list items) <li> </li>标记用于定义一个列表项。

  • 基本语法

    1. <ul type="disc|circle|square">
    2.     <li type="">项目名称</li>
    3.     <li type="">项目名称</li>
    4.     <li type="">项目名称</li>
    5.     ...
    6. </ul>

    符号：disc-实心圆；circle-空心圆；square-正方形。

  • 案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>无序列表</title>
    8. </head>
    9.  
    10. <body>
    11.     <h4>DISC 项目符号列表：</h4>
    12.     <ul type="disc">
    13.         <li>计算机科学与技术专业</li>
    14.         <li>软件工程专业</li>
    15.         <li type="circle">信息管理与信息系统专业</li>
    16.     </ul>
    17.     <h4>Circle 项目符号列表：</h4>
    18.     <ul type="circle">
    19.         <li>计算机科学与技术专业</li>
    20.         <li type="square">软件工程专业</li>
    21.         <li>信息管理与信息系统专业</li>
    22.     </ul>
    23.     <h4>Square 项目符号列表：</h4>
    24.     <ul type="square">
    25.         <li>计算机科学与技术专业</li>
    26.         <li>软件工程专业</li>
    27.         <li>信息管理与信息系统专业</li>
    28.     </ul>
    29. </body>
    30.  
    31. </html>

有序列表

  • 有序列表(Ordered List)ol标记是双标记。在HTML文件中插入成对的标记<ol> </ol>，完成有序列表的插入。

  • 基本语法

    1. <ol type="1|A|a|I|i" start="2">
    2.     <li type="" value="n">项目名称</li>
    3.     <li type="" value="n">项目名称</li>
    4.     <li type="" value="n">项目名称</li>
    5.     ...
    6. </ol>

  • 案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>有序列表</title>
    8. </head>
    9.  
    10. <body>
    11.     <h4>数字编号：</h4>
    12.     <ol type="1">
    13.         <li>计算机科学与技术专业</li>
    14.         <li>软件工程专业</li>
    15.         <li>信息管理与信息系统专业</li>
    16.         <li>电子信息工程专业</li>
    17.     </ol>
    18.     <h4>A字母编号：</h4>
    19.     <ol type="A">
    20.         <li>计算机科学与技术专业</li>
    21.         <li>软件工程专业</li>
    22.         <li>信息管理与信息系统专业</li>
    23.         <li>电子信息工程专业</li>
    24.     </ol>
    25.     <h4>aI混合编号：</h4>
    26.     <ol type="a">
    27.         <li>计算机科学与技术专业</li>
    28.         <li type="I" value="5">软件工程专业</li>
    29.         <li>信息管理与信息系统专业</li>
    30.         <li>电子信息工程专业</li>
    31.     </ol>
    32. </body>
    33.  
    34. </html>

列表嵌套

  • 在HTML文件中，列表嵌套使用不仅使网页的内容布局更加美观，而且使显示的内容更加清晰、明白。

  • 基本语法

    1. <ul>
    2.     <li>项目名称</li>
    3.         <ol>
    4.             <li>项目名称</li>
    5.             ……
    6.         </ol>
    7.     </li>
    8.     ……
    9. </ul>

  • 案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>清华大学出版社图书分类</title>
    8. </head>
    9.  
    10. <body>
    11.     <h4>清华大学出版社图书分类</h4>
    12.     <ol type="1">
    13.         <li>
    14.             <h4>计算机与电子信息</h4>
    15.             <ol type="A">
    16.                 <li>数据库</li>
    17.                 <li>电子信息</li>
    18.                 <li>计算机组成与原理</li>
    19.                 <li>计算机基础
    20.                     <ul type="disc">
    21.                         <li>计算机文化基础</li>
    22.                         <li>公共基础</li>
    23.                         <li>软件技术基础</li>
    24.                         <li>计算机导论</li>
    25.                         <li>计算机思维</li>
    26.                     </ul>
    27.                 </li>
    28.             </ol>
    29.         </li>
    30.         <li>
    31.             <h4>理工</h4>
    32.         </li>
    33.         <li>
    34.             <h4>经管与人文</h4>
    35.         </li>
    36.     </ol>
    37. </body>
    38.  
    39. </html>

定义列表

  • 定义列表(Definition List) dl标记是双标记。在HTML文件中插入成对的标记<dl> </dl>，完成定义列表的插入。

  • 基本语法

    1. <dl>
    2.     <dt>项目1</dt>
    3.         <dd>说明1</dd>
    4.         <dd>说明1</dd>
    5.      ……
    6. </dl>

    dt标记的由来：definition term

    dd标记的由来：definition description

  • 案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>定义列表</title>
    8. </head>
    9.  
    10. <body>
    11.     <h4>定义列表展示联系人信息</h4>
    12.     <dl>
    13.         <dt>联系人：</dt>
    14.         <dd>张有为之</dd>
    15.         <dd>电话：010-11011011</dd>
    16.         <dd>E-mail：xyz@sina.com</dd>
    17.         <dt>联系地址</dt>
    18.         <dd>上海市复旦大学计算机系10计算机班</dd>
    19.         <dt>邮政编码：</dt>
    20.         <dd>200433</dd>
    21.     </dl>
    22. </body>
    23.  
    24. </html>

综合实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>多种列表在网页中混合使用</title>
  8. </head>
  9.  
  10. <body>
  11.     <h4>百度糯米-便宜实惠，品质保证，服务专业！</h4>
  12.     <img src="" width="541" height="85" border="0" alt="">
  13.     <ul>
  14.         <li>麻辣烫/冒菜</li>
  15.         <li>美食
  16.             <ul>
  17.                 <li>中餐/家常菜</li>
  18.                 <li>夏日饮品
  19.                     <ul>
  20.                         <li>米芝莲：24元</li>
  21.                         <li>沪上阿姨：12.90元</li>
  22.                         <li>哆哆鲜奶吧：30元</li>
  23.                         <li>黄记玉米汁：80元</li>
  24.                     </ul>
  25.                 </li>
  26.             </ul>
  27.         </li>
  28.         <li>创意菜/私房菜</li>
  29.     </ul>
  30.     <dl>
  31.         <dt>联系客服人员：</dt>
  32.         <dd>邮箱：nuoniuhelp@baidu.com</dd>
  33.         <dd>周一至周日9:00-22:00</dd>
  34.         <dt>客服电话免长途费</dt>
  35.         <dd>4006-888-887</dd>
  36.     </dl>
  37. </body>
  38.  
  39. </html>

HTML列表小结

  • 一共介绍了5种类型HTML列表，分别是无序列表、有序列表、定义列表、菜单列表和目录列表。
    • 常用的列表只有3种，分别是无序列表、有序列表、定义列表。菜单列表和目录列表可以认为是无序列表的特例。
  • 列表可以嵌套，但不能交叉嵌套，否则会发生语法错误。列表可以由无序列表和有序列表的多层子列表构成，从而使得网页内容的呈现更具层次感和美观感。
  • 无序列表的列表项有项目符号(3种)，有序列表的列表项有项目编号(5种)，定义列表项既没有编号也没有符号。

超链接内容提要

  • 超链接的基本标记语法和属性语法
  • 超链接分类、路径、书签等概念
  • 使用超链接实现文件下载、FTP下载、电子邮件链接、图像链接
  • 使用超链接制作书签
  • 使用浮动框架实现内嵌页面的显示

超链接概述

  • 超链接是指从一个网页指向一个目标的连接关系。
  • 这个目标可以是：网页、图片、电子邮件地址、文件或应用程序。
  • 网页中超链接的对象是一段文本或者是一个图片。

超链接语法

  • 超链接a (Anchor 锚) 标记语法

  • 基本语法

    <a href="url" name=" " title=" " target=" ">超链接标题</a>

  • 语法说明：超链接由目的地址、链接标题、打开方式等三部分组成

    1. href (href-Hypertext reference)：链接指向的目标文件。

    2. title：指向链接时的提示信息。

    3. target：指定打开的目标窗口，有5种取值：

      • _parent - 上一级窗口；

      • _blank - 新窗口；

      • _self - 同一窗口，默认值；

      • _top - 整个窗口打开；

      • _framename - 框架或浮动框架名

  • 案例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>超链接应用</title>
    8. </head>
    9.  
    10. <body>
    11.     <h3>超链接导航</h3>
    12.     <a href="https://www.baidu.com" title="BaiDu">百度</a><br>
    13.     <a href="https://www.edu.cn" target="_blank" title="CERNET">中国教育与科研计算机网</a><br>
    14.     <a href="https://www.sina.com.cn" target="_self" title="Sina">新浪</a>
    15. </body>
    16.  
    17. </html>

超链接路径

  • 超链接路径：
    • 绝对路径：指文件的完整路径，包括盘符或文件传输的协议http、ftp等，一般用于网站的外部链接。绝对路径有2种：
      1. 从盘符开始定义的文件路径，如E:\web\index.html；
      2. 从协议开始定义的URL网址，例如中国教育与科研计算机网的网址https://www.edu.cn。
    • 相对路径：指相对于当前文件的路径，从当前文件所在位置指向目的文件的路径。
      • 例如web/index.html。
    • 根路径：指从网站的最底层开始起，一般网站的根目录就是域名下对应的文件夹。以一个斜杠“/”开头，代表根目录，然后书写文件夹名，最后书写文件名。
      • 例如/download/index.html。

超链接分类

超链接可以分为：

  • 内部链接和外部链接两种。

  • 内部链接是指网站内部文件之间的链接，而外部链接是指网站内的文件链接到站点内容外的文件。

  • 案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>内部链接和外部链接</title>
    8. </head>
    9.  
    10. <body>
    11.     <h2>内部链接：</h2>
    12.     <p><a href="edu_5_2_1.html" title="通知">指向网站内的页面链接</a></p>
    13.     <h2>外部链接：</h2>
    14.     <p><a href="https://www.163.com" title="网易">指向网站外的页面链接</a></p>
    15.  
    16. </body>
    17.  
    18. </html>

超链接应用

  • 创建HTTP文件下载超链接

    • 网站提供软件、文件等资料下载，下载文件的链接指向文件所在的相对路径或绝对路径，文件类型：.doc/.pdf/.exe/.rar等
    • 基本语法：<a href="url">链接内容</a>

  • 创建FTP站点访问超链接

    • FTP服务器链接和网页链接区别在于所用协议不同，浏览网页采用http协议，而FTP服务器采用FTP协议连接。
    • 基本语法：<a href="ftp://服务器ip地址或域名">链接的文字</a>

  • 创建图像链接

    • 链接标题是一个图像，浏览时单击链接图像时，可以打开超链接所设置的URL。

    • 基本语法：<a href="#"><img scr="url" width=" " height=" " align=" " border=" " alt=" "></a>

      border表示边界，alt表示图片不存在时显示的内容

  • 创建电子邮件超链接

    • 一般网站上会有“联系我们”这样的栏目或超链接，目的是方便用户及时与网站管理员进行沟通与联系。

    • 基本语法：<a href="mailto:E-mail地址[?subject=邮件主题[&参数=参数值]]">链接内容</a>

    • 案例：

      1. <a href="mailto:111@qq.com;some@mysoft.com?cc=xyz@163.com&bcc=anbo@sina.com&subject=Hello%20again&body=下周二开会讨论">发送邮件</a>
      2. <!-- 上面的参数部分mailto后面可以写多个目标账号(用;隔开)，?后面的参数，cc指抄送账号；bcc指密送账号；subject指邮件标题；body指邮件主体，？后的多个参数之间用&连接 -->

  • 应用案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>超链接的应用</title>
    8.     <style type="text/css">
    9.         h1 {
    10.             background: #9999cc;
    11.             color: white;
    12.             padding: 10px;
    13.             height: 50px;
    14.             text-align: center;
    15.         }
    16.  
    17.         img {
    18.             width: 70px;
    19.             height: 45px;
    20.         }
    21.     </style>
    22. </head>
    23.  
    24. <body>
    25.     <h1>超链接的应用</h1>
    26.     <h3><a href="‪D:\下载\Python网络编程.epub">1.http下载</a></h3>
    27.     <h3><a href="ftp://ftp.pku.edu.cn">2.FTP下载-北京大学FTP站点</a></h3>
    28.     <h3>3.图像超链接
    29.         <a href="https://www.baidu.com//"><img border="0" src="bd_logo1.png"></a>
    30.     </h3>
    31.     <h3>4.邮件超链接-有问题可以给我
    32.         <a href="mailto:some@microsoft.com?&subject=Hello%20again&body=下周二开会讨论">发送邮件</a>
    33.     </h3>
    34.     <p>应该使用%20来替换单词之间的空格，这样浏览器就可以正确地显示文本了。</p>
    35.  
    36. </body>
    37.  
    38. </html>

  • 页面书签链接

    • 书签是指到文章内部的链接，可以实现段落间的任意跳转。

    • 实现这样的链接要先定义书签名称和书签链接。

      • 定义书签名称：<a name="书签名称">书签</a>
      • 定义书签链接：
        • 同一页面内：<a href="‪#书签名称">书签标题</a>
        • 不同页面间：<a href="‪URL#书签名称">书签标题</a>
          • URL是放置标记的HTML文件的URL，name：标记名。

    • 案例：

      1. <!DOCTYPE html>
      2. <html lang="en">
      3.  
      4. <head>
      5.     <meta charset="UTF-8">
      6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7.     <title>链接到同一页面的书签</title>
      8. </head>
      9.  
      10. <body>
      11.     <h3><a name="Software">主流的网页设计软件</a></h3>
      12.     <ul>
      13.         <li><a href="#dw">Dreamweaver MX[同页]</a></li>
      14.         <li><a href="#fl">Flash MX[同页]</a></li>
      15.         <li><a href="#fw">Fireworks MX[同页]</a></li>
      16.         <li><a href="edu_5_3_2_1.html#EditPlus">EditPlus[异页]</a></li>
      17.     </ul>
      18.     <h2><a name="dw">Dreamweaver MX</a></h2>
      19.     <p>&nbsp;&nbsp;&nbsp;&nbsp;制作网页的工具相当的多，但就功能性及使用的普及度来说，Dreamweaver MX就是一套非常值得推荐的工具软体。
      20.         在本次的改版中，Dreamweaver有几项相当实用的特色，这些特点包括有：自由配置的工作面板、丰富的建站精灵、增强的Dreamweaver样版
      21.         功能、支援编辑程式码、整合多种网路开发技术、内建「参考」面板方便使用者查阅原始码的写法与注解、使用程式码检视编辑网页、实用的
      22.         档案总管担负起网站及资源管理的重责大任、新增网站检查及报表功能、取之不尽的外挂程式等。
      23.     </p>
      24.     <br>
      25.     <br>
      26.     <br>
      27.     <h4 align="right"><a href="#Software">返回</a></h4>
      28.     <h2><a name="fl">Flash MX</a></h2>
      29.     <p>&nbsp;&nbsp;&nbsp;&nbsp;Flash的前身是Future Splash，它是为了完善Macromedia的拳头产品Director而开发的一款用于网络发布的插件，
      30.         它的出现改变了Director在网络上运行缓慢的尴尬局面。1996年原开发公司被Macromedia公司收购，其核心产品也被正式更名为Flash，并相
      31.         继推出了Flash 1.0、Flash 2.0、Flash 3.0、Flash 4.0、Flash 5.0、Flash MX以及的Flash MX 2004。
      32.     </p>
      33.     <br>
      34.     <br>
      35.     <br>
      36.     <h4 align="right"><a href="#Software">返回</a></h4>
      37.     <h2><a name="fw">Fireworks MX</a></h2>
      38.     <p>&nbsp;&nbsp;&nbsp;&nbsp;由Macromedia(在2005年被Adobe收购)推出的一款网页作图软件，软件可以加速 Web 设计与开发， 是一款创建
      39.         与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性， 还提供了一个预先
      40.         构建资源的公用库， 并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和 Adobe Animate 软件省时集成。 在 Fireworks
      41.         中将设计迅速转变为模型， 或利用来自Illustrator、Photoshop和Flash的其它资源。 然后直接置入Dreamweaver中轻松地进行开发与部署。
      42.     </p>
      43.     <br>
      44.     <br>
      45.     <br>
      46.     <h4 align="right"><a href="#Software">返回</a></h4>
      47.  
      48. </body>
      49.  
      50. </html>
      1. <!DOCTYPE html>
      2. <html lang="en">
      3.  
      4. <head>
      5.     <meta charset="UTF-8">
      6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7.     <title>不同页面之间的书签链接</title>
      8. </head>
      9.  
      10. <body>
      11.     <h4><a name="EditPlus">EditPlus</a></h4>
      12.     <p>&nbsp;&nbsp;&nbsp;&nbsp;EditPlus(文字编辑器)汉化版是一套功能强大，可取代记事本的文字编辑器，
      13.         拥有无限制的撤消与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览
      14.         功能。而它还有一个好用的功能，就是它有监视剪贴板的功能，同步于剪贴板可自动粘贴进 EditPlus 的窗
      15.         口中省去粘贴的步骤。另外它也是一个非常好用的HTML编辑器，它除了支持颜色标记、HTML 标记，同时支持
      16.         C、C++、Perl、Java，另外，它还内建完整的HTML & CSS1 指令功能，对于习惯用记事本编辑网页的朋友，
      17.         它可帮你节省一半以上的网页制作时间，若你有安装IE3.0 以上版本，它还会结合IE浏览器于 EditPlus 窗
      18.         口中，让你可以直接预览编辑好的网页(若没安装IE，也可指定浏览器路径)。因此，它是一个相当棒又多用
      19.         途多状态的编辑软件。
      20.     </p>
      21.     <h4 align="right"><a href="edu_5_3_2.html#Software">返回首页</a></h4>
      22.  
      23. </body>
      24.  
      25. </html>

浮动框架

  • 浏览器窗口含有孤立的子窗口称为浮动框架。在浏览器窗口中使用<iframe> </iframe>标记，可以嵌入浮动框架。

  • <iframe name="name" src=''url" width=" " height=" "> </iframe>

  • <a href="target.html" target="name">链接标题</a>

  • 浮动框架的属性

    属性说明属性说明
    src设置源文件属性scrolling设置框架滚动条
    name设置框架名称frameborder设置框架边框
    width设置浮动框架窗口宽度marginwidth设置框架左右边距
    height设置浮动框架窗口高度marginheight设置框架上下边距
    align设置框架对齐方式

  • 浮动框架案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>浮动框架应用</title>
    8.     <style type="text/css">
    9.         a {
    10.             width: 300px;
    11.             margin: 0 10px;
    12.         }
    13.  
    14.         h3 {
    15.             font-size: 28px;
    16.             color: blue;
    17.             text-align: center;
    18.         }
    19.  
    20.         div {
    21.             margin: 0 auto;
    22.             text-align: center;
    23.         }
    24.     </style>
    25. </head>
    26.  
    27. <body>
    28.     <div id="" class="">
    29.         <h3>浮动框架应用</h3>
    30.         <hr color="red">
    31.         <iframe name="leftiframe" src="https://www.baidu.com" width="400" height="500"></iframe>
    32.         <iframe name="rightiframe" src="https://www.pku.edu.cn" width="400" height="500" marginwidth="10px"
    33.             marginheight="10px"></iframe>
    34.         <p><a href="https://sina.com.cn" target="leftiframe">在左边浮动框架内显示新浪门户网站首页</a>
    35.             <a href="https://www.sohu.com/" target="rightiframe">在右边浮动框架内显示搜狐门户网站首页</a></p>
    36.     </div>
    37.  
    38. </body>
    39.  
    40. </html>

内容小结

  • 超链接和浮动框架
    • 超链接语法、超链接中路径以及浮动框架的关联。
    • 绝对路径、相对路径及根路径设置超链接目标。
  • 超链接的类型及每种类型适用场合，其中内部链接用于网站内部资源之间的链接，而外部链接用于网站外部的链接。
  • 超链接的不同链接对象的语法和使用方法，包括下载文件链接、书签链接、FTP链接、图像链接、电子邮件链接。
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/329226
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号