列表能对网页中的相关信息进行合理的布局，将项目有序或无序地罗列在一起，从而方便用户浏览和操作。
HTML中列表一共有5种，分别是无序列表、有序列表、定义列表、菜单列表、目录列表。其中较常用的是无序列表、有序列表、定义列表三种。
| 列表类型 | 标记符号 | 备注 |
|---|---|---|
| 无序列表 | <ul> ... </ul> | 常用 |
| 菜单列表 | <menu> ... <.menu> | 不常用 |
| 目录列表 | <dir> ... </dir> | 不常用 |
| 有序列表 | <ol> ... </ol> | 常用 |
| 定义列表 | <dl> ... </dl> | 常用 |
无序列表(Unordered List)
基本语法
<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</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</dd><dd>周一至周日9:00-22:00</dd><dt>客服电话免长途费</dt><dd>4006-888-887</dd></dl>
</body></html>超链接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="" title="BaiDu">百度</a><br><a href="" target="_blank" title="CERNET">中国教育与科研计算机网</a><br><a href="" target="_self" title="Sina">新浪</a>
</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><h2>内部链接：</h2><p><a href="edu_5_2_1.html" title="通知">指向网站内的页面链接</a></p><h2>外部链接：</h2><p><a href="" title="网易">指向网站外的页面链接</a></p></body></html>创建HTTP文件下载超链接
创建FTP站点访问超链接
创建图像链接
链接标题是一个图像，浏览时单击链接图像时，可以打开超链接所设置的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;some@mysoft?cc=xyz@163&bcc=anbo@sina&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="">2.FTP下载-北京大学FTP站点</a></h3><h3>3.图像超链接<a href="//"><img border="0" src="bd_logo1.png"></a></h3><h3>4.邮件超链接-有问题可以给我<a href="mailto:some@microsoft?&subject=Hello%20again&body=下周二开会讨论">发送邮件</a></h3><p>应该使用%20来替换单词之间的空格，这样浏览器就可以正确地显示文本了。</p></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><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 {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="" width="400" height="500"></iframe><iframe name="rightiframe" src="" width="400" height="500" marginwidth="10px"marginheight="10px"></iframe><p><a href="" target="leftiframe">在左边浮动框架内显示新浪门户网站首页</a><a href="/" target="rightiframe">在右边浮动框架内显示搜狐门户网站首页</a></p></div></body></html>本文发布于:2024-02-04 12:00:39，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170706708455373.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
