HTML5列表和超链接(1)

最新推荐文章于 2024-05-01 15:27:58 发布
最新推荐文章于 2024-05-01 15:27:58 发布
阅读量550 收藏 5
点赞数 1
分类专栏： HTML5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42108313/article/details/112691848
版权

HTML5列表和超链接

文章目录

4.1 HTML5列表

4.1.1 无序列表、有序列表

无序列表
不分排序的列表结构，列表之间没有主次、轻重等位置之分，在< ul >标签中可以包含多个< li >标签，用来定义列表项目。

<nav  id="menu">
    <h1>企业网站导航</h1>
    <ul>
        <li><a href="#" title="">首页</a></li>
        <li><a href="#" title="">公司新闻</a></li>
        <li><a href="#" title="">产品信息</a></li>
        <li><a href="#" title="">媒体互动</a></li>
        <li><a href="#" title="">关于</a></li>
    </ul>
</nav>

几种错误用法

  1. 在< ul >最直接插入非< li >内容。（< p >标签放在< ul >标签外或者< li >标签内）
<ul>
	<li>列表项目</li>
	<p>描述内容</p>
</ul>
  1. 不规范的列表嵌套（应该将< ul >放在< li >内）
<ul>
	<li>列表项目</li>
	<ul>
		<li>子列表项目</li>
	</ul>
</ul>

<li>
	<a href="#" title="">关于</a>
	<ul>
		<li>子列表</li>
	</ul>
</li>

有序列表
< ol > 标签定义有序列表。有序列表讲究顺序强调时间、排名、先后次序。

<!doctype html>
<div class="music_sort">
    <h1>音乐排行榜</h1>
    <ol>
    	<!--<font size="1">内容</font>-->
        <li><h2>沙漠骆驼</h2> <span>展展与罗罗</span></li>
        <li><h2>往后余生</h2> <span>马良/孙茜茹</span></li>
        <li><h2>卡路里</h2> <span>火箭少女101</span></li>
        <li><h2>只要平凡</h2> <span>张杰/张碧晨</span></li>
        <li><h2>无问西东</h2> <span>王菲</span></li>
    </ol>
</div>

4.1.2 项目编号

< ol >标签属性
在这里插入图片描述
< li >标签属性value可以设置项目编号
在这里插入图片描述

<h1>排行榜</h1>
<ol>
    <li>张三<span>100</span> </li>
    <li>李四<span>98</span> </li>
    <li value="2">王五<span>98</span> </li>
    <li value="4">赵六<span>96.5</span> </li>
    <li>侯七<span>94</span> </li>
</ol>

<ol type="I" start="5" reversed >
    <li>黄鹤楼 <span>崔颢</span> </li>
    <li>送元二使安西 <span>王维</span> </li>
    <li>凉州词（黄河远上） <span>王之涣</span> </li>
    <li> 登鹳雀楼 <span>王之涣</span> </li>
    <li> 登岳阳楼 <span>杜甫</span> </li>
</ol>

4.1.3 嵌套列表、描述列表、菜单列表

嵌套列表

<nav role="navigation">
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a>
            <ul class="subnav">
                <li><a href="#">手机</a></li>
                <li><a href="#">配件</a></li>
            </ul>
        </li>
        <li><a href="#">支持</a>
            <ul class="subnav">
                <li><a href="#">社区</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </li>
        <li><a href="#">关于</a></li>
    </ul>
</nav>

描述列表
< dd > 标签定义一个定义列表中对项目的描述。
< dt > 标签定义一个定义列表中的一个项目，以及 dialog 中的角色。
< dl > 标签定义一个定义列表。

<h2>中药词条列表</h2>
<dl>
    <dt>丹皮</dt>
    <dd>为毛茛科多年生落叶小灌木植物牡丹的根皮。产于安徽、山东等地。秋季采收，晒干。生用或炒用。</dd>
</dl>

菜单列表
< menu > 标签定义菜单列表。当希望列出表单控件时使用该标签，在Firefox进行。
list 定义列表菜单。一个用户可执行或激活的命令列表。
context 定义上下文菜单。必须在用户能够与命令进行交互之前被激活。
toolbar 定义工具栏菜单。活动式命令，允许用户立即与命令进行交互。
在这里插入图片描述
< command > 标签定义命令按钮，比如单选按钮、复选框或按钮。
在这里插入图片描述

<!--示例1-->
<menu>
    <command onclick="alert('Hello World')">命令</command>
</menu>
<!--示例2-->
<menu>
    <command icon="images/1.png" onclick="alert('男士')" type="radio" radiogroup="group1" label="男士">男士</command>
    <command icon="images/2.png" onclick="alert('女士')" type="radio" radiogroup="group1" label="女士">女士</command>
    <command icon="images/3.png" onclick="alert('未知')" type="radio" radiogroup="group1" label="未知">未知</command>
</menu>
<!--示例3-->
<menu type="toolbar">
    <li>
        <menu label="File" type="toolbar">
            <button type="button" onclick="file_new()">新建...</button>
            <button type="button" onclick="file_open()">打开...</button>
            <button type="button" onclick="file_save()">保存</button>
        </menu>
    </li>
    <li>
        <menu label="Edit" type="toolbar">
            <button type="button" onclick="edit_cut()">剪切</button>
            <button type="button" onclick="edit_copy()">复制</button>
            <button type="button" onclick="edit_paste()">粘贴</button>
        </menu>
    </li>
</menu>
<!--示例4-->
<menu type="context" id="mymenu">
    <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"> </menuitem>
    <menu label="Share on...">
        <menuitem label="Twitter" icon="ico_twitter.png"  onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);"> </menuitem>
        <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);"> </menuitem>
    </menu>
    <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

4.1.4 快捷菜单、添加命令

快捷菜单
< menuitem > 标签定义用户可以从弹出菜单调用的命令/菜单项目。
在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html, body{ height:100%;}
</style>
</head>
<body contextmenu="new-context-menu">
<menu id="new-context-menu" type="context">
    <menuitem>Hello World</menuitem>
</menu>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 contextmenu="new-context-menu">使用&lt;menuitem&gt;标签设计弹出菜单</h1>
<menu id="new-context-menu" type="context">
    <menuitem>Hello World</menuitem>
</menu>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="images/1.png" width="500"  contextmenu="demo-image" />
<menu id="demo-image" type="context">
    <menu label="旋转图像">
        <menuitem icon="images/icon1.png">旋转90度</menuitem>
        <menuitem icon="images/icon2.png">旋转180度</menuitem>
        <menuitem icon="images/icon4.png">水平翻转</menuitem>
        <menuitem icon="images/icon3.png">垂直翻转</menuitem>
    </menu>
</menu>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="images/1.png" width="500"  contextmenu="demo-image" />
<menu id="demo-image" type="context">
    <menu label="旋转图像">
        <menuitem>旋转90度</menuitem>
        <menuitem>旋转180度</menuitem>
        <menuitem>水平翻转</menuitem>
        <menuitem>垂直翻转</menuitem>
    </menu>
</menu>
</body>
</html>

添加命令(在火狐浏览器看一下效果就行)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function imageRotation(name) {
    document.getElementById('image').className = name;
}
</script>
<style>
.rotate-90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}
.rotate-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
.flip-horizontal {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1)
}
.flip-vertical {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1)
}
</style>
</head>
<body>
<img src="images/1.png" width="500"  contextmenu="demo-image" id="image" />
<menu id="demo-image" type="context">
    <menu label="旋转图像">
        <menuitem icon="images/icon1.png" onclick="imageRotation('rotate-90')" >旋转90度</menuitem>
        <menuitem icon="images/icon2.png" onclick="imageRotation('rotate-180')">旋转180度</menuitem>
        <menuitem icon="images/icon4.png" onclick="imageRotation('flip-horizontal')">水平翻转</menuitem>
        <menuitem icon="images/icon3.png" onclick="imageRotation('flip-vertical')">垂直翻转</menuitem>
    </menu>
</menu>
</body>
</html>

4.1.5 设计快捷命令、设计任务列表

设计快捷命令

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var post = {
	"source" : "images/liuyong.rar",
	"demo"   : "images/liuyong.jpg",
	"feed"   : "http://www.weibo.com/"
};
function downloadSource() {
	window.open(post.source, '_self');
}
function viewDemo() {
	window.open(post.demo, '_blank');	
}
function getFeed() {
  window.prompt('发送地址:', post.feed);
}
function sendEmail() {
	var url  = document.URL;
	var body = '分享地址: ' + url +'';
    window.location.href = 'mailto:?subject='+ document.title +'&body='+ body +'';
}
</script>
<style>
</style>
</head>
<body>
<section id="on-a-blog" contextmenu="download">
    <header class="section-header">
        <h3>雨霖铃</h3>
    </header>
    <p>寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。  多情自古伤离别，更那堪，冷落清秋节。今宵酒醒何处?杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说? </p>
</section>
<menu id="download" type="context">
    <menuitem onclick="downloadSource()" icon="images/icon1.png">下载文件</menuitem>
    <menuitem onclick="viewDemo()" icon="images/icon2.png">查看源文件</menuitem>
    <menu label="我要分享...">
        <menuitem onclick="getFeed()" icon="images/icon3.png">反馈</menuitem>
        <menuitem onclick="sendEmail()" icon="images/icon4.png">Email</menuitem>
    </menu>
</menu>
</body>
</html>

在这里插入图片描述

设计任务列表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function addNewTask() {
	var list   = document.createElement('li');
	list.className = 'task-item';
	list.innerHTML = '<input type="checkbox" name="" value="done">新任务';
	var taskList = document.getElementById('task');
	taskList.appendChild(list);
}
</script>
</head>
<body>
<section id="on-web-app" contextmenu="add_task">
    <header>
        <h3>任务列表</h3>
    </header>
    <ul id="task">
        <li class="task-item"><input type="checkbox" name="" value="done">任务一</li>
        <li class="task-item"><input type="checkbox" name="" value="done">任务二</li>
        <li class="task-item"><input type="checkbox" name="" value="done">任务三</li>
    </ul>
</section>
<menu id="add_task" type="context">
    <menuitem onclick="addNewTask()" icon="images/add.png">添加新任务</menuitem>
</menu>       
</body>
</html>
被涮的小肥羊
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
萌新的Python练习实例100例（七）将一个列表的数据复制到另一个列表中
噢，乖
02-19 3515
题目： 将一个列表的数据复制到另一个列表中 分析： 使用列表[:] 方法： 代码：
python函数调用,循环,列表复制实例
09-16
主要介绍了python函数调用,循环,列表复制实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
python练习——复制一个列表
weixin_45902007的博客
01-14 261
‘’‘Python 练习实例7 题目：将一个列表的数据复制到另一个列表中。 程序分析：使用列表[:]。’’’ #直接使用copy(字典)函数： a=[1,2,3] b=a.copy() print(b) #直接使用列表[:] a=[1,2,3] b=a[:] print(b) 输出： [1, 2, 3] [1, 2, 3] ...
HTML超链接、列表、表格、常用标签补充
最新发布
lvshihao_的博客
05-01 610
概念：所谓自定义列表，就是一个包含。
HTML5列表和超链接（2）
qq_42108313的博客
01-19 937
HTML5列表和超链接 文章目录HTML5列表和超链接4.2 HTML5超链接4.2.1 普通链接、块链接4.2.2 锚点链接、目标链接4.2.3 电子邮件链接、下载链接4.2.4 图像热点、框架链接4.3 项目实战4.3.1 设计导航页面4.3.2 设计九宫格板式4.3.3 设计用户管理界面 4.2 HTML5超链接 4.2.1 普通链接、块链接 普通链接 <a href="https://www.baidu.com/">百度一下</a> <a href="https:/
HTML5的设计列表和超链接
weixin_54081135的博客
11-17 361
一：无序列表 二：有序列表 1.<ol> 的reversed为新增属性，reversed 代表降序，start代表有序列表的起始值，type代表在列表中使用过的标记类型。 3.描述列表 <dl>..</dl> :标识描述列表 <dt>.</dt>:标识词条 <dd>.</dd>：标识解释 4.菜单列表 ...
HTML5应用开发技术-列表与超链接.pptx
03-03
HTML5应用开发技术
JavaScript html5 canvas实现图片上画超链接
10-19
主要为大家详细介绍了JavaScript html5 canvas实现图片上画超链接，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
列表、超链接.xmind
12-06
该思维导图主要对HTML的列表和超链接进行知识小结，包含了几种列表和超链接的定义、组成、格式等，现上传平台，有需要的可自行下载。
HTML超链接传值
01-04
HTML超链接传值,跨页面超链接传值,jquery事件,资源上传
HTML5 SVG超链接上显示描述图片特效
12-12
这是一款HTML5 SVG超链接上显示描述图片特效。该特效的创意是在鼠标悬停到超链接上面的时候，在超链接上显示一副描述图片。
HTML5 列表，图像和超链接
梁甜田的博客
03-15 868
1、列表 1、有序列表&amp;amp;lt;ol&amp;amp;gt;&amp;amp;lt;/ol&amp;amp;gt; 2、无需列表&amp;amp;lt;ul&amp;amp;gt;&amp;amp;lt;/ul&amp;amp;gt; &amp;amp;lt;ol&amp;amp;gt; &amp;amp;lt;li&amp;amp;gt;ROM:128GB&amp;amp;lt;/
HTML中列表标签及超链接的使用
B18325387728的博客
10-08 2880
html中列表标签及超链接的基础使用及注意事项
html学习之三:列表&超链接
人生如棋
03-08 1179
一、列表1.无序列表(Unordered List)格式:          列表项1         列表项2        ……    属性:type，值有circle(空心圆),disc(实心圆),square(实心方块).例:  高等数学  大学英语  数据库  操作系统  数据结构例：  高等数学  大学英语  数据库  操作系统  数据结构2.有序列表(Ordered List
html的超链接,图像以及列表标签
飞狐TN
11-03 1907
前面讲到了html的基本框架,今天我们来看看html的几个特殊的标签 超链接标签: 需要跳转的网址写在引号之内,显示的文字写在两个a标签之间 例如:需要跳转百度一下的网站 点击我跳转百度一下 图片示例: 我们平时见到的网站上的链接大多数都是由a标签组成的,只不过是去除下划线之后的a标签而已,在后面的文章会写出如何为a标签去除下划线 图像标签:,图像标签是一个单标签,它是只有
HTML-列表，表格与超链接标签使用方法
Those who achieve great thing do not stick to trifles
01-19 3528
三、HTML-列表，表格与超链接标签使用方法 练习工具:HBuilder 练习标签:ol,ul,li,table,a, 列表代码 代码分析： ol 为有序列表 可使用type选择排序的样式，默认为123..。ul为无序列表，样式一般有圆点方点等，默认为圆点。li为列表每一项. a标签为超链接标签,其常用属性href为跳转地址。target为跳转方式,有本页跳转和新页跳转。...
web前端学习（三）——HTML 超链接、列表
m0_55637498的博客
12-08 2508
四、超链接（重要） 超链接以<a>开始，以</a>结束 超链接有一个target属性： 可取值： _blank：新窗口 _self：当前窗口（默认） _top：顶级窗口 _parent：父窗口 特点： 1、超链接文字的下面都会出现一条水平线 2、当鼠标移动到超链接文字上面时，会变成小手样式 3、点击超链接之后能跳转到相应网址页面 ...
HTML5 列表和超链接
qq_45902025的博客
02-23 183
HTML5 列表和超链接
html5超链接大作业
09-22
HTML5超链接是用于在网页中创建链接的一种标记语言。它可以将文本、图片、按钮等元素与其他网页或网站相关联，使用户可以通过点击链接来访问其他内容。针对HTML5超链接的大作业，以下是一个可能的示例： 在这个大...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值