Web第八讲：列表和超链接

列表内容提要

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

列表的简介

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

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

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

无序列表

  • 无序列表(Unordered List)

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

  • 基本语法

    <ul type="disc|circle|square">
    <li type="">项目名称</li>
    <li type="">项目名称</li>
    <li type="">项目名称</li>
    ...
</ul>

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

  • 案例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>

<body>
    <h4>DISC 项目符号列表：</h4>
    <ul type="disc">
        <li>计算机科学与技术专业</li>
        <li>软件工程专业</li>
        <li type="circle">信息管理与信息系统专业</li>
    </ul>
    <h4>Circle 项目符号列表：</h4>
    <ul type="circle">
        <li>计算机科学与技术专业</li>
        <li type="square">软件工程专业</li>
        <li>信息管理与信息系统专业</li>
    </ul>
    <h4>Square 项目符号列表：</h4>
    <ul type="square">
        <li>计算机科学与技术专业</li>
        <li>软件工程专业</li>
        <li>信息管理与信息系统专业</li>
    </ul>
</body>

</html>

有序列表

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

  • 基本语法

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

  • 案例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>

<body>
    <h4>数字编号：</h4>
    <ol type="1">
        <li>计算机科学与技术专业</li>
        <li>软件工程专业</li>
        <li>信息管理与信息系统专业</li>
        <li>电子信息工程专业</li>
    </ol>
    <h4>A字母编号：</h4>
    <ol type="A">
        <li>计算机科学与技术专业</li>
        <li>软件工程专业</li>
        <li>信息管理与信息系统专业</li>
        <li>电子信息工程专业</li>
    </ol>
    <h4>aI混合编号：</h4>
    <ol type="a">
        <li>计算机科学与技术专业</li>
        <li type="I" value="5">软件工程专业</li>
        <li>信息管理与信息系统专业</li>
        <li>电子信息工程专业</li>
    </ol>
</body>

</html>

列表嵌套

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

  • 基本语法

    <ul>
    <li>项目名称</li>
        <ol>
            <li>项目名称</li>
            ……
        </ol>
    </li>
    ……
</ul>

  • 案例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清华大学出版社图书分类</title>
</head>

<body>
    <h4>清华大学出版社图书分类</h4>
    <ol type="1">
        <li>
            <h4>计算机与电子信息</h4>
            <ol type="A">
                <li>数据库</li>
                <li>电子信息</li>
                <li>计算机组成与原理</li>
                <li>计算机基础
                    <ul type="disc">
                        <li>计算机文化基础</li>
                        <li>公共基础</li>
                        <li>软件技术基础</li>
                        <li>计算机导论</li>
                        <li>计算机思维</li>
                    </ul>
                </li>
            </ol>
        </li>
        <li>
            <h4>理工</h4>
        </li>
        <li>
            <h4>经管与人文</h4>
        </li>
    </ol>
</body>

</html>

定义列表

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

  • 基本语法

    <dl>
    <dt>项目1</dt>
        <dd>说明1</dd>
        <dd>说明1</dd>
     ……
</dl>

    dt标记的由来：definition term

    dd标记的由来：definition description

  • 案例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义列表</title>
</head>

<body>
    <h4>定义列表展示联系人信息</h4>
    <dl>
        <dt>联系人：</dt>
        <dd>张有为之</dd>
        <dd>电话：010-11011011</dd>
        <dd>E-mail：xyz@sina.com</dd>
        <dt>联系地址</dt>
        <dd>上海市复旦大学计算机系10计算机班</dd>
        <dt>邮政编码：</dt>
        <dd>200433</dd>
    </dl>
</body>

</html>

综合实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多种列表在网页中混合使用</title>
</head>

<body>
    <h4>百度糯米-便宜实惠，品质保证，服务专业！</h4>
    <img src="" width="541" height="85" border="0" alt="">
    <ul>
        <li>麻辣烫/冒菜</li>
        <li>美食
            <ul>
                <li>中餐/家常菜</li>
                <li>夏日饮品
                    <ul>
                        <li>米芝莲：24元</li>
                        <li>沪上阿姨：12.90元</li>
                        <li>哆哆鲜奶吧：30元</li>
                        <li>黄记玉米汁：80元</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>创意菜/私房菜</li>
    </ul>
    <dl>
        <dt>联系客服人员：</dt>
        <dd>邮箱：nuoniuhelp@baidu.com</dd>
        <dd>周一至周日9:00-22:00</dd>
        <dt>客服电话免长途费</dt>
        <dd>4006-888-887</dd>
    </dl>
</body>

</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 - 框架或浮动框架名

  • 案例：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接应用</title>
</head>

<body>
    <h3>超链接导航</h3>
    <a href="https://www.baidu.com" title="BaiDu">百度</a><br>
    <a href="https://www.edu.cn" target="_blank" title="CERNET">中国教育与科研计算机网</a><br>
    <a href="https://www.sina.com.cn" target="_self" title="Sina">新浪</a>
</body>

</html>

超链接路径

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

超链接分类

超链接可以分为：

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

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

  • 案例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部链接和外部链接</title>
</head>

<body>
    <h2>内部链接：</h2>
    <p><a href="edu_5_2_1.html" title="通知">指向网站内的页面链接</a></p>
    <h2>外部链接：</h2>
    <p><a href="https://www.163.com" title="网易">指向网站外的页面链接</a></p>

</body>

</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>

    • 案例：

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

  • 应用案例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接的应用</title>
    <style type="text/css">
        h1 {
            background: #9999cc;
            color: white;
            padding: 10px;
            height: 50px;
            text-align: center;
        }

        img {
             70px;
            height: 45px;
        }
    </style>
</head>

<body>
    <h1>超链接的应用</h1>
    <h3><a href="‪D:\下载\Python网络编程.epub">1.http下载</a></h3>
    <h3><a href="ftp://ftp.pku.edu.cn">2.FTP下载-北京大学FTP站点</a></h3>
    <h3>3.图像超链接
        <a href="https://www.baidu.com//"><img border="0" src="bd_logo1.png"></a>
    </h3>
    <h3>4.邮件超链接-有问题可以给我
        <a href="mailto:some@microsoft.com?&subject=Hello%20again&body=下周二开会讨论">发送邮件</a>
    </h3>
    <p>应该使用%20来替换单词之间的空格，这样浏览器就可以正确地显示文本了。</p>

</body>

</html>

  • 页面书签链接

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

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

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

    • 案例：

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接到同一页面的书签</title>
</head>

<body>
    <h3><a name="Software">主流的网页设计软件</a></h3>
    <ul>
        <li><a href="#dw">Dreamweaver MX[同页]</a></li>
        <li><a href="#fl">Flash MX[同页]</a></li>
        <li><a href="#fw">Fireworks MX[同页]</a></li>
        <li><a href="edu_5_3_2_1.html#EditPlus">EditPlus[异页]</a></li>
    </ul>
    <h2><a name="dw">Dreamweaver MX</a></h2>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;制作网页的工具相当的多，但就功能性及使用的普及度来说，Dreamweaver MX就是一套非常值得推荐的工具软体。
        在本次的改版中，Dreamweaver有几项相当实用的特色，这些特点包括有：自由配置的工作面板、丰富的建站精灵、增强的Dreamweaver样版
        功能、支援编辑程式码、整合多种网路开发技术、内建「参考」面板方便使用者查阅原始码的写法与注解、使用程式码检视编辑网页、实用的
        档案总管担负起网站及资源管理的重责大任、新增网站检查及报表功能、取之不尽的外挂程式等。
    </p>
    <br>
    <br>
    <br>
    <h4 align="right"><a href="#Software">返回</a></h4>
    <h2><a name="fl">Flash MX</a></h2>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;Flash的前身是Future Splash，它是为了完善Macromedia的拳头产品Director而开发的一款用于网络发布的插件，
        它的出现改变了Director在网络上运行缓慢的尴尬局面。1996年原开发公司被Macromedia公司收购，其核心产品也被正式更名为Flash，并相
        继推出了Flash 1.0、Flash 2.0、Flash 3.0、Flash 4.0、Flash 5.0、Flash MX以及的Flash MX 2004。
    </p>
    <br>
    <br>
    <br>
    <h4 align="right"><a href="#Software">返回</a></h4>
    <h2><a name="fw">Fireworks MX</a></h2>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;由Macromedia（在2005年被Adobe收购）推出的一款网页作图软件，软件可以加速 Web 设计与开发， 是一款创建
        与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性， 还提供了一个预先
        构建资源的公用库， 并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和 Adobe Animate 软件省时集成。 在 Fireworks
        中将设计迅速转变为模型， 或利用来自Illustrator、Photoshop和Flash的其它资源。 然后直接置入Dreamweaver中轻松地进行开发与部署。
    </p>
    <br>
    <br>
    <br>
    <h4 align="right"><a href="#Software">返回</a></h4>

</body>

</html>

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不同页面之间的书签链接</title>
</head>

<body>
    <h4><a name="EditPlus">EditPlus</a></h4>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;EditPlus（文字编辑器）汉化版是一套功能强大，可取代记事本的文字编辑器，
        拥有无限制的撤消与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览
        功能。而它还有一个好用的功能，就是它有监视剪贴板的功能，同步于剪贴板可自动粘贴进 EditPlus 的窗
        口中省去粘贴的步骤。另外它也是一个非常好用的HTML编辑器，它除了支持颜色标记、HTML 标记，同时支持
        C、C++、Perl、Java，另外，它还内建完整的HTML & CSS1 指令功能，对于习惯用记事本编辑网页的朋友，
        它可帮你节省一半以上的网页制作时间，若你有安装IE3.0 以上版本，它还会结合IE浏览器于 EditPlus 窗
        口中，让你可以直接预览编辑好的网页（若没安装IE，也可指定浏览器路径）。因此，它是一个相当棒又多用
        途多状态的编辑软件。
    </p>
    <h4 align="right"><a href="edu_5_3_2.html#Software">返回首页</a></h4>

</body>

</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 设置框架对齐方式

  • 浮动框架案例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动框架应用</title>
    <style type="text/css">
        a {
             300px;
            margin: 0 10px;
        }

        h3 {
            font-size: 28px;
            color: blue;
            text-align: center;
        }

        div {
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="" class="">
        <h3>浮动框架应用</h3>
        <hr color="red">
        <iframe name="leftiframe" src="https://www.baidu.com" width="400" height="500"></iframe>
        <iframe name="rightiframe" src="https://www.pku.edu.cn" width="400" height="500" marginwidth="10px"
            marginheight="10px"></iframe>
        <p><a href="https://sina.com.cn" target="leftiframe">在左边浮动框架内显示新浪门户网站首页</a>
            <a href="https://www.sohu.com/" target="rightiframe">在右边浮动框架内显示搜狐门户网站首页</a></p>
    </div>

</body>

</html>

内容小结

  • 超链接和浮动框架
    • 超链接语法、超链接中路径以及浮动框架的关联。
    • 绝对路径、相对路径及根路径设置超链接目标。
  • 超链接的类型及每种类型适用场合，其中内部链接用于网站内部资源之间的链接，而外部链接用于网站外部的链接。
  • 超链接的不同链接对象的语法和使用方法，包括下载文件链接、书签链接、FTP链接、图像链接、电子邮件链接。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/fz17/p/14094938.html