正文

2025渗透测试零基础学习 HTML列表与框架详解：有序/无序列表、超链接、图片、表格及框架布局实战

admin
admin V管理员 /0 评论 /101 阅读
0605
此篇文章发布距今已超过144天，您需要注意文章的内容或图片是否可用！

HTML列表与框架详解：有序/无序列表、超链接、图片、表格及框架布局实战

深入讲解了HTML中几个非常常用的标签及布局技巧，特别是有序列表（<ol>）、无序列表（<ul>）的定制方式，A标签、Image标签和Table标签的使用，以及HTML框架（frameset）的应用，结合后台管理系统的实战案例，展示了多页面布局的实现思路。本文将基于课堂内容，详细分析并附上丰富代码示例，帮助你全面掌握这些核心知识点。

一、HTML列表标签详解

1. 无序列表（UL）

无序列表通常用于导航菜单、功能列表等，其列表项默认使用实心圆点作为项目符号。

<ul><li>主页</li><li>产品</li><li>服务</li><li>联系我们</li></ul>

修改项目符号样式

可以通过CSS或type属性来修改项目符号：

HTML的type属性支持的值（部分浏览器支持）：

  • • disc（默认，实心圆）
  • • circle（空心圆）
  • • square（方块）

示例：

<ultype="circle"><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>

使用CSS更为灵活：

<ulstyle="list-style-type: square;"><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>

2. 有序列表（OL）

有序列表默认使用阿拉伯数字排序，但可以通过type属性调整排序方式。

<ol><li>第一项</li><li>第二项</li><li>第三项</li></ol>

支持的type属性值：

  • • 1：阿拉伯数字（默认）
  • • A：大写字母
  • • a：小写字母
  • • I：大写罗马数字
  • • i：小写罗马数字

示例：

<oltype="A"><li>苹果</li><li>香蕉</li><li>橙子</li></ol>

3. 起始序号

start属性可以指定有序列表的起始数字：

<olstart="5"><li>第五项</li><li>第六项</li></ol>

二、A标签（超链接）、Image标签和Table标签

1. A标签

用于创建超链接：

<ahref="https://www.example.com"target="_blank"title="访问示例网站">访问示例</a>
  • • href：链接地址
  • • target="_blank"：新窗口打开
  • • title：鼠标悬停提示

2. Image标签

用于插入图片：

<imgsrc="logo.png"alt="网站Logo"width="150"height="80" />
  • • src：图片路径
  • • alt：替代文本
  • • width、height：图片尺寸

3. Table标签

表格结构由<table>、<tr>（行）、<td>（单元格）和<th>（表头）组成。

示例：

<tableborder="1"cellpadding="5"cellspacing="0"><tr><th>姓名</th><th>年龄</th><th>城市</th></tr><tr><td>张三</td><td>28</td><td>北京</td></tr><tr><td>李四</td><td>32</td><td>上海</td></tr></table>

三、HTML框架（Frameset）基本使用

1. 创建框架页面

使用<frameset>替代<body>，定义行或列分割页面：

<framesetcols="200,*"frameborder="yes"border="1"framespacing="5"><framesrc="menu.html"name="menuFrame"scrolling="yes" /><framesrc="content.html"name="contentFrame"scrolling="auto" /></frameset>
  • • cols="200,*"：左边栏目固定200像素，右边自适应剩余宽度
  • • frameborder、border、framespacing调整边框和间距
  • • name用于目标定位

2. 引用外部页面并动态切换内容

假设menu.html菜单中链接指向contentFrame：

<ultype="circle"><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>0

点击菜单时，右侧contentFrame内容会动态更换。

四、用框架实现后台管理系统示例

1. 项目结构示例

<ultype="circle"><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>1

2. index.html - 框架页面

<ultype="circle"><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>2

3. menu.html - 左侧菜单

<ultype="circle"><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>3

4. add_article.html - 添加文章表单

<ultype="circle"><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>4

五、课堂小结与建议

  • • 有序与无序列表灵活调整样式，满足不同场景需求。
  • • A标签结合target属性支持内容动态更新，配合框架实现场景切换。
  • • 图片与表格标签为丰富页面内容提供基础支持。
  • • HTML框架在多页面后台系统中曾广泛使用，便于页面元素分区与动态加载，但现代开发推荐使用iframe、单页应用或框架技术替代。
  • • 建议通过动手搭建多页面布局，感受框架结构的层次与交互逻辑，为后续学习div和CSS布局打好基础。

六、附录：有序列表多样化排序示例代码

<ultype="circle"><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>5

关 注 有 礼

欢迎关注公众号：网络安全者


推荐站内搜索：最好用的开发软件、免费开源系统、渗透测试工具云盘下载、最新渗透测试资料、最新黑客工具下载……
https://ZhouSa.com