HTML5列表和超链接(1)

HTML5列表和超链接

文章目录

HTML5列表和超链接
- 4.1 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>

几种错误用法

在< ul >最直接插入非< li >内容。（< p >标签放在< ul >标签外或者< li >标签内）

<ul>
	<li>列表项目</li>
	<p>描述内容</p>
</ul>

不规范的列表嵌套（应该将< 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>