设计列表和超链接

news/2025/2/21 22:32:45/

在网页中,大部分信息都是列表结构,如菜单栏、图文列表、分类导航、新闻列表、栏目列表等。HTML5定义了一套列表标签,通过列表结构实现对网页信息的合理排版。另外,网页中还包含大量超链接,通过它实现网页、位置的跳转,超链接能够把整个网站、互联网联系在一起。列表结构与超链接关系紧密,经常需要配合使用。

1、定义列表

1.1、无序列表

无序列表是一种不分排序的列表结构,使用<ul>标签定义,在<ul>标签中可以包含多个<li>标签定义的列表项目。
【示例1】使用无序列表定义一元二次方程的求解方法,预览效果如下图所示。

    <h1>解一元二次方程</h1><p>一元二次方程求解有四种方法:</p><ul><li>直接开平方法 </li><li>配方法 </li><li>公式法 </li><li>分解因式法</li></ul>

在这里插入图片描述

无序列表可以分为一级无序列表和多级无序列表。一级无序列表在浏览器中解析后,会在每个列表项目的前面添加一个小黑点的修饰符,而多级无序列表则会根据级数调整列表项目的修饰符。

【示例2】在页面中设计三层嵌套的多级列表结构,浏览器默认解析的显示效果如下图所示。

    <ul><li>一级列表项目1<ul><li>二级列表项目1</li><li>二级列表项目2<ul><li>三级列表项目1</li><li>三级列表项目2</li></ul></li></ul></li><li>一级列表项目2</li></ul>

在这里插入图片描述
无序列表在嵌套结构中随着其所包含的列表级数的增加而逐渐缩进,并且随着列表级数的增加而改变不同的修饰符。合理使用列表结构能让页面的结构更加清晰。


http://www.ppmy.cn/news/1031267.html

相关文章

19.正则表达式

19.1什么是正则表达式 ●正则表达式( Regular Expression) 是用于匹配字符串中字符组合的模式。在JavaScript中&#xff0c; 正则表达式也是对象 ●通常用来查找、替换那些符合正则表达式的文本&#xff0c;许多语言都支持正则表达式 ●正则表达式在JavaScript中的使用场景: …

【Spring专题】Bean的生命周期流程图

目录 前言阅读指引 流程图一、之前推测的简单流程图&#xff08;一点点参考&#xff09;*二、Bean生命周期流程图&#xff08;根据Spring源码自结&#xff09;*三、阶段源码流程图&#xff08;不断更新&#xff09; 前言 我向来不主张【通过源码】理解业务&#xff0c;因为每个…

什么是Web应用程序防火墙,WAF与其他网络安全工具差异在哪?

一、什么是Web 应用程序防火墙 (WAF) &#xff1f; WAF软件产品被广泛应用于保护Web应用程序和网站免受威胁或攻击&#xff0c;它通过监控用户、应用程序和其他互联网来源之间的流量&#xff0c;有效防御跨站点伪造、跨站点脚本&#xff08;XSS攻击&#xff09;、SQL注入、DDo…

Git和GitHub

文章目录 1.Git介绍2. 常用命令3. Git分支操作4. Git团队协作机制5. GitHub操作6. IDEA集成Git7.IDEA操作GitHub8. Gitee 1.Git介绍 Git免费的开源的分布式版本控制系统&#xff0c;可以快速高效从小到大的各种项目 Git易于学习&#xff0c;占地面积小&#xff0c;性能快。它…

网络安全--利用awk分析Apache日志

一、溯源 你会溯源吗&#xff1f;怎么溯 拿到日志&#xff08;ssh登录日志&#xff0c;Apache日志&#xff09;&#xff0c;通过日志溯到ip&#xff0c;对日志进行每天的拆分&#xff0c;第二通过awk日志分析工具对每天的日志进行拆分&#xff0c;分析某一个ip今天对我访问多…

折线分割平面

一、题目 我们看到过很多直线分割平面的题目&#xff0c;今天的这个题目稍微有些变化&#xff0c;我们要求的是n条折线分割平面的最大数目。比如&#xff0c;一条折线可以将平面分成两部分&#xff0c;两条折线最多可以将平面分成7部分&#xff0c;具体如下所示。 Input 输入…

上传excel文件

文件上传&#xff0c;其实就是用el-upload组件来实现上传&#xff0c;只是换了样式&#xff0c;和图片上传一样 <el-form-item label"选择文件"><el-input placeholder"请选择文件" v-model"form.file" disabled style"width: 45…

软件测试基础篇——Linux

1、Linux系统的特征 开源免费&#xff1a; 开源&#xff1a;开放源代码&#xff0c;指的是底层的源代码是可以开放出来&#xff0c;给相关的开发者&#xff0c;根据实际的需求做出修改的。 免费&#xff1a;不花钱&#xff0c;自由传播。 ​ Linux是一种免费使用和自由传播的…