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

在前面的学习中，我们已经知道如何搭建自己的网站，详细可以去看这个专栏 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
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

敲黑板:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述
敲黑板：
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述
敲黑板：
1、我们可以通过设置不同的形状、大小的点击区域，用以触发不同的跳转，如上面我们用了 rect（方形）、circle（原型） 作为不同的点击区域跳转到不同的页面。

相关阅读:
【HTML5高级第一篇】Web存储 - cookie、localStorage、sessionStorage
算法通关村之堆结构（实战训练）经典问题：理解堆的构造、插入、删除过程，查找数组中第K大的元素、堆排序、合并K个有序链表
一篇文章让你搞懂Java顺序表
linux网络编程
PHP中传值与引用的区别
springboot启动报错：Failed to start bean ‘documentationPluginsBootstrapper‘
【Hack The Box】windows练习-- Resolute
Mybatis详解
智慧风电场Web组态集控中心远程监控系统
m基于3GPP-LTE通信网络的认知家庭网络Cognitive-femtocell性能matlab仿真

原文地址：https://blog.csdn.net/weixin_40301728/article/details/125471322