列表内容提要
- 无序列表、有序列表
- 定义列表标记语法及属性语法
- 菜单列表、目录列表标记语法
- 使用无序、有序及定义列表设计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>
-
语法说明：超链接由目的地址、链接标题、打开方式等三部分组成
-
href (href-Hypertext reference)：链接指向的目标文件。
-
title：指向链接时的提示信息。
-
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种：
- 从盘符开始定义的文件路径，如E:\web\index.html；
- 从协议开始定义的URL网址，例如中国教育与科研计算机网的网址https://www.edu.cn。
- 相对路径：指相对于当前文件的路径，从当前文件所在位置指向目的文件的路径。
- 例如web/index.html。
- 根路径：指从网站的最底层开始起，一般网站的根目录就是域名下对应的文件夹。以一个斜杠“/”开头，代表根目录，然后书写文件夹名，最后书写文件名。
- 例如/download/index.html。
- 绝对路径：指文件的完整路径，包括盘符或文件传输的协议http、ftp等，一般用于网站的外部链接。绝对路径有2种：
超链接分类
超链接可以分为：
-
内部链接和外部链接两种。
-
内部链接是指网站内部文件之间的链接，而外部链接是指网站内的文件链接到站点内容外的文件。
-
案例
<!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> 制作网页的工具相当的多，但就功能性及使用的普及度来说，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> 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> 由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> 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链接、图像链接、电子邮件链接。