HTML5列表和超链接（2）_创建一个html文件,包含至少5个列表项,每个列表项都应该是一个超链接。-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42108313/article/details/112793470

HTML5列表和超链接

文章目录

HTML5列表和超链接
- 4.2 HTML5超链接
4.3 项目实战（例子）

4.2 HTML5超链接

4.2.1 普通链接、块链接

< a >标签定义超链接，它用于从一个页面连接到另一个页面。
在这里插入图片描述
普通链接

<a href="https://www.baidu.com/">百度一下</a>
<!--target="_blank" 点这个超链接的时候将会是在新的窗口中打开一个页面。-->
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<a href="https://www.baidu.com/" target="_blank"><img src="images/logo.png" width="300" alt=""/></a>

块链接

<a href="pages.html">
    <h1>标题文本</h1>
    <p>段落文本.</p>
    <p>更多信息</p>
</a>

<a href="pioneer-valley.html">
    <h1>标题文本</h1>
    <img src="images/1.jpg" width="143" height="131" alt="1" />
    <img src=" images/2.jpg" width="202" height="131" alt="2" />
    <p>段落文本</p>
</a>

4.2.2 锚点链接、目标链接

锚点链接
常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p><a href="#p4">查看图片4</a> </p>
<h2>图片1</h2>
<p><img src="images/1.jpg" /></p>
<h2>图片2</h2>
<p><img src="images/2.jpg" /></p>
<h2>图片3</h2>
<p><img src="images/3.jpg" /></p>
<h2 id="p4">图片4</h2>
<p><img src="images/4.jpg" /></p>
<h2>图片5</h2>
<p><img src="images/5.jpg" /></p>
<h2>图片6</h2>
<p><img src="images/6.jpg" /></p>
</body>
</html>

目标链接
链接目标可以是图片、网页、文档、应用程序、脚本等等。

<a href="images/1.jpg">链接到图片</a>
<a href="demo.html">链接到网页</a>
<a href="demo.docx">链接到Word文档</a>

4.2.3 电子邮件链接、下载链接

电子邮件链接
mailto:+电子邮件地址+？+subject=+邮件主题

<a href="mailto:namee@mysite.cn">namee@mysite.cn</a>

下载链接

<a href="images/1.jpg" download >下载图片</a>
<a href="images/1.jpg" >浏览图片</a>

4.2.4 图像热点、框架链接

图像热点
< map >标签定义客户端的图像映射。图像映射是带有可点击区域的图像。
在这里插入图片描述
< area >标签定义图像映射中的区域。

<img src="images/china.jpg" width="618" height="499" border="0" usemap="#Map">
<map name="Map">
    <area shape="circle" coords="221,261,40" href="show.php?name=青海">
    <area shape="poly" coords="411,251,394,267,375,280,395,295,407,299,431,307,436,303,429,284,431,271,426,255" href="show.php?name=河南">
    <area shape="poly" coords="385,336,371,346,370,375,376,385,394,395,403,403,410,397,419,393,426,385,425,359,418,343,399,337" href="show.php?name=湖南">
</map>

框架链接
< iframe > 标签创建包含另一个文档的行内框架。

<iframe src="http://www.baidu.com"></iframe>
<!--用CSS设置比例-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
html, body {
    
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}
iframe {
    
    height: 100%;
    width: 100%;
}
</style>
</head>
<body>
<iframe src="http://www.baidu.com"></iframe>
</body>
</html>

4.3 项目实战（例子）

4.3.1 设计导航页面

在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="viewport" content="width=device-width" />
<meta name="MobileOptimized" content="320" />
<meta name="copyright" content="Copyright &copy; 2013 Sohu.com Inc. All Rights Reserved." />
<meta name="description" content="手机搜狐" />
<meta name="keywords" content="名站" />
<link rel="apple-touch-icon-precomposed" href="images/logo-icon.png" />
<title>名站-手机搜狐</title>
<link rel="stylesheet" href="css/common.css" media="all" />
<link rel="stylesheet" href="css/main.css" media="all" />
</head>
<body>
<header class="hd"> </header>
<main class="tab-content">
    <section class="common_block famous"> </section>
    <div class="nav-urls">
        <ul class="urls">
        </ul