HTML 无序排列 有序排列 框架

2024-09-05 19:38
文章标签 html 有序 框架 frontend 排列 无序

本文主要是介绍HTML 无序排列 有序排列 框架，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML 无序排列  有序排列 :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 第四讲代码汇总</title>
</head><!--
margin-left 对象左边外延边距 （margin-left:5px; 左边外延距离5px）
margin-right 对象右边外延边距 （margin-right:5px; 右边外延距离5px）
margin-top 对象上边外延边距 （margin-top:5px; 上边外延距离5px）
margin-bottom 对象下边外延边距 （margin-bottom:5px; 下边外延距离5px）
表示与周围边框的距离，如下0px所示，表示列表位于可视界面的最顶端，紧贴可视界面边框。
-->
<body style="margin-top :0px; margin-left :0px">*****************************************************************************************************************************************
<h3>1.无序列表如下：</h3>
<!--<ul> 标签表示无序列表-->
<ul type = "disc">
<!--<li> 标签定义列表项，有序列表和无序列表中都使用 <li> 标签-->
<li> 传奇</li>
</ul>
<!--type元素定制列表元素，无序列表中disc表示圆点，circle表示圆圈，squars表示方块-->
<ul type = "circle">
<li> 传奇</li>
</ul>
<ul type = "square">
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ul>*****************************************************************************************************************************************
<h3>2.有序列表如下：</h3><!--<ol> 标签表示有序列表-->
<ol type = "i">
<!--<li> 标签定义列表项，有序列表和无序列表中都使用 <li> 标签-->
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ol>
<!--type元素定制列表元素，有序列表中type属性值有a,A,i,I,1
a 表示以小写字母a,b,c,...排序
A表示以大写字母A,B,C,...排序
i表示以小写罗马数字i,ii,iii,iv,...排序
I表示以大写罗马数字I,II,III,...排序
1表示以阿拉伯数字1,2,3，...排序
-->
<!--start属性设定开始数目，以1,2,3，...表示，否则默认从1开始排序--><ol type = "I" start = "3">
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ol>
<ol type = "a">
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ol>
<ol type = "A">
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ol>
<ol type = "1">
<li> 传奇</li>
<li> 反恐精英</li>
<li> 三国</li>
<li> 生化危机</li>
</ol></body></html>

HTML框架示例1:

<html><head>
<title>HTML框架示例</title></head><!--各窗口的尺寸设置，
cols表示纵向排列多个窗口：
rows表示横向排列多个窗口-->
<frameset  cols = "80%,20%"><!--默认情况下排列好的窗口可以用鼠标移动，若在其后加 noresize 属性，则排列好后不能移动-->
<!--frameborder属性确定有无边框，0表示无，1表示有边框-->
<!--name 对窗口进行标识，之后可对此标识进行各窗口间相互操作（起名，以便进行替换）-->
<frame src = "歌曲列表.html" name = "a1" noresize ><frame src = "b.html"  name = "a2" frameborder = "0"></frameset></html>

注意：如果a.html包括了其他的页面（frameset）则要求a.html本身不能有body模块(不能出现body标记，代码中也不能出现body模块中才有的内容，如文字等)。


如何去掉Html中frameset产生的横向滚动条

在body标签里写上style="OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN"

同理去竖条的话就是把OVERFLOW-X:HIDDEN改成OVERFLOW-y:HIDDEN

如在一下的  歌曲列表.html  的body标签中加上该style

歌曲列表.html 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>歌曲列表</title>
</head>
<p><body <span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19.5px; background-color: rgb(254, 254, 242);">style="OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN"</span>></p><!--target表示我们点击后，目标指向谁（也就是在哪显示）-->
<a href = "周杰伦.html" target="a2">周杰伦</a><br>
<a href = "汪峰.html" target="a2">汪峰</a><br>
</body>
</html>

Ø  Target属性有四个属性值：

Ø  <a href=url  target=_blank> 在新窗口打开
<a href=url  target=_self> 在本窗口打开
<a href=url  target=_parent> 父窗口
<a href=url  target=_top> 整个浏览器窗口

Ø  还有一种就是在target后直接写上要替换的frame的名字


周杰伦.html 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>周杰伦歌词</title>
</head>
<body bgcolor = "red" >
这是周杰伦的歌词
</body>
</html>

汪峰.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>汪峰的歌词</title>
</head>
<body bgcolor = "yellow">
这是汪峰的歌词
</body>
</html>

b.html 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>歌词</title>
</head>
<body bgcolor = "red" >
这边是歌词
</body>
</html>
显示效果如下图所示：



HTML框架示例2:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>all</title>
</head>
<frameset rows = "20%,80%">
<frame src = "top.html" nmae = "a1"><!--嵌套分割界面--><frameset cols = "20%,80%"><frame src = "left.html" name = "a2"><frame src = "right.html" name = "a3"></frameset>
</frameset></html>

left.html 

<html>
<head>
<title>left歌曲列表</title>
</head>
<body bgcolor = "#FFB5B5">
<a href="青花瓷.html" target="a3">青花瓷</a><br>
<a href="当兵的人.html" target="a3">当兵的人</a><br>
<a href="青花瓷.html" target="a3">青花瓷</a><br>
<a href="当兵的人.html" target="a3">当兵的人</a><br>
<a href="青花瓷.html" target="a3">青花瓷</a><br>
<a href="当兵的人.html" target="a3">当兵的人</a><br><br>
<br>
<br>
<br>
<br>
<br>
<a href="right.html" target="a3">返回</a><br>
</body></html>

top.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>top</title>
</head>
<body bgcolor="#DFFFDF">
<img src = "top.png" width="200px" height = "80px"/>
<table border = "0px" width = "60%" height = "80px" align = "right" >
<tr align = "left">
<td >音乐</td >
<td>排行榜</td>
<td>空间</td>
<td >原创</td >
<td>舞曲</td>
<td>美图</td>
<td >娱乐</td >
<td>电台</td>
</tr>
</table><table border = "0px" width = "70%" height = "10px" align = "right" bgcolor = "yellow">
<tr align = "left">
<td >音乐</td >
<td>排行榜</td>
<td>空间</td>
<td >原创</td >
<td>舞曲</td>
<td>美图</td>
<td >娱乐</td >
<td>电台</td>
<td>舞曲</td>
<td>美图</td>
<td >娱乐</td >
<td>电台</td>
</table></body></html>


right.html

<html>
<head>
<title>right显示屏</title>
</head>
<body 	bgcolor="#CEFFCE">
<table width="50%" height="50%" align = "center">
<tr>
<td>
这边是歌词
</td>
</tr>
</table>
</body>
</html>
显示效果如下图：





这篇关于HTML 无序排列 有序排列 框架的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1139876。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?

cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈？ cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
数据治理框架-ISO数据治理标准

数据治理框架-ISO数据治理标准

引言 "数据治理"并不是一个新的概念，国内外有很多组织专注于数据治理理论和实践的研究。目前国际上，主要的数据治理框架有ISO数据治理标准、GDI数据治理框架、DAMA数据治理管理框架等。 ISO数据治理标准 改标准阐述了数据治理的标准、基本原则和数据治理模型，是一套完整的数据治理方法论。 ISO/IEC 38505标准的数据治理方法论的核心内容如下： 数据治理的目标：促进组织高效、合理地
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2