网页开发从无到有——html前端学习（一）

最新推荐文章于 2024-05-23 10:23:41 发布

在逆境中蜕变

最新推荐文章于 2024-05-23 10:23:41 发布

阅读量193

点赞数

分类专栏： Web前端/后端文章标签：前端 html 学习

本文链接：https://blog.csdn.net/weixin_40301728/article/details/125471322

版权

Web前端/后端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在前面的学习中，我们已经知道如何搭建自己的网站，详细可以去看这个专栏 Web前端/后端，现在我们尝试去给我们的博客增加一些不同的控件

一、链接

1、页面之间的跳转

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
	<a href="6web.html">可以跳转到另一个页面</a>
    <br>
	<a href="6web.html"><img loading="lazy" src="https://www.runoob.com/try/demo_source/logo.png"/></a>
</body>
</html>

在这里插入图片描述

敲黑板:
1、链接里可以放相对路径，也可以放绝对路径
2、src关键字里的图片不仅可以放本地路径，也可以放网上的图片路径！

2、段落之间的跳转

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第三个页面</title>
</head>
<body>
    <a href="#C4">跳转到章节7</a>
    <a href="#image">跳转到图片</a>
    <h1>章节1</h1>
    <hr>
    <!-- 注释怎么这么麻烦 -->
    <h2>章节2</h2>
    <p>是跳转过来的！</p>
    <h3>章节3</h3>
    <p>是跳转过来的！</p>
    <a id="image"><img loading="lazy" src="破晓.jpg" alt="Big Boat" width="1100" height="672"/></a>
    <h5>章节4</h5>
    <p>是跳转过来的！</p>
    <h6>章节5</h6>
    <p>是跳转过来的！</p>
    <h7>章节6</h7>
    <p>是跳转过来的！</p>
    <h4><a id="C4">章节7</a></h4>
    <p>是跳转过来的！</p>
    <a href="htmlShow.html" target="_top">点击这里!</a>
</body>
</html>

在这里插入图片描述
敲黑板：
1、我们在放图片的时候，为了防止图片加载失败，可以在里面添加属性关键字 alt=，用以加载失败时候的提示
2、href不仅可以用以页面之间跳转，还可以用于长页面段落的跳转，如上图的**#C4**，可以跳转到对应id控件上
3、href中可以添加关键字 target，用以表示跳转到页面的何处，例如此处的_top，还有以下几种类型

target=“_blank”:在新窗口中浏览新的页面。
target=“_self”:在同一个窗口打开新的页面。
target=“_parent”:在父窗口中打开新的页面。（页面中使用框架才有用）
target=“_top” :以整个浏览器作为窗口显示新页面。（突破了页面框架的限制）

3、链接的点击区域

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片区域跳转不同链接</title>
</head>
<body>
    <p>点击不同的区域有不同的效果</p>
    <img src="破晓.jpg" width="550" height="336" alt="破晓" usemap="#navmap">
    <map name="navmap">
        <area shape="rect" coords="0,0,116,336" alt="区域1" href="area1.html">
        <area shape="circle" coords="200,58,58" alt="区域2" href="area2.html">
        <area shape="circle" coords="300,58,40" alt="区域3" href="area3.html">
    </map>
</body>
</html>