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 {
                width: 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 {
                width: 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链接、图像链接、电子邮件链接。
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页