HTML5超链接和图片基础用法

news2024/11/14 11:25:40

一、HTML5 超链接(链接)

超链接可以是一个文本,也可以是一幅图像,您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

1.我们通过使用 a标签在 HTML 中创建链接。

有两种使用 a标签的方式:

  • 通过使用 href 属性 - 创建指向另一个文档的链接
  • 通过target属性:用来指定超链接打开的位置,可选值
  • 通过使用 id 属性 - 创建文档内的书签
1.HTML 链接 -href 属性和target属性

通过target属性:可选值有:

​ _self默认值,在当前页面中打开超链接;

_blank在一个新的页面中打开超链接;

<a href="http://www.datutusuibi.com/" target="_blank">大土土随笔</a>

test.html完整代码如下:

在这里插入图片描述

运行效果如下图:

在这里插入图片描述

2.HTML 链接 - id 属性

id 属性规定锚(anchor)的名称。

您可以使用 id 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示,它对读者是不可见的。

当使用命名锚时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法:

<a id="label">锚(显示在页面上的文本)</a>

**提示:**锚的名称可以是任何你喜欢的名字。

**提示:**您可以使用name 属性来替代id 属性,命名锚同样有效。

实例:

test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
	</head>
	
	<body>
		<p> <font size="3" color="red">个人博客</font></p>
		
		<a href="http://www.datutusuibi.com/" target="_blank">大土土随笔</a>
		
		<hr />
		
		<p>
		<a href="#bottom">跳转到底部</a>
		</p>
		
		<p>
		<a href="#C4">查看 Chapter 4 满江红</a>
		</p>
		
		<hr />
		
		<h2>Chapter 1   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter 2   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter 3   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2><a id="C4">Chapter 4 满江红</a></h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter5   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter 6   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter 7   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter 8   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter 9   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter 10   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter 11   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter 12   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<h2>Chapter 13   满江红</h2>
		<p>怒发冲冠,凭栏处、潇潇雨歇。抬望眼、仰天长啸,壮怀激烈。三十功名尘与土,八千里路云和月。莫等闲、白了少年头,空悲切。
		靖康耻,犹未雪。臣子恨,何时灭。驾长车,踏破贺兰山缺。壮志饥餐胡虏肉,笑谈渴饮匈奴血。待从头、收拾旧山河,朝天阙。</p>
		
		<hr />
		
		<p>
		<a id="bottom" href="#">回到顶部</a>
		</p>
		
	</body>
</html>

运行效果如下:

在这里插入图片描述

二、HTML5 相对路径

当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径,相对路径都会使用.或…开头

./

…/

  • ./表示当前文件所在的目录,在这里当前页面是test.html
  • ./就等于test.html所在的目录

test.html

在这里插入图片描述

运行效果:

在这里插入图片描述

三、HTML5 图片

图片标签用于向当前页面中引入一个外部图片。使用img标签来引入外部图片,img标签是一个自结束标签。img这种元素属于替换元素(块和行内元素一键,具有两种元素的特点)。

src属性指定的是外部图片的路径(路径规则和超链接是一样的)。

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当浏览器无法载入图像时,替换文本属性可告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

width图片的宽度(单位是像素)

height图片的高度(单位是像素)

宽度和高度中如果只修改了一个,则另外一个会等比例缩放。

注意:一般情况下,不建议修改图片大小,需要多大的图片就裁剪多大,但是在移动端,经常需要对图片进行缩放(大图缩小)。

图片的格式:

jpeg(jpg):支持的颜色比较丰富,不支持透明效果,不支持动图,一般用来显示图片。

gif:支持的颜色比较少,支持简单透明,支持动图,一般用来显示颜色单一的图片,动图。

png:支持的颜色丰富,支持复杂透明,不支持动图。一般用来显示颜色丰富,复杂透明图片(专为网页而生)。

webp:这种格式是谷歌新推出的专门用来表示网页中的一种图片格式,它具备其他图片格式的所有优点,而且文件还特别的小。它的缺点是兼容性不好。

图片使用原则:效果一样,用小的;效果不一样,用效果好的。

<img src="./img/2023-04-14_HTML5_06.jpg" alt="日落" width="200">

在这里插入图片描述

运行效果如下:

在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/448469.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MATLAB | MATLAB配色不够用,近2000款配色来啦

MATLAB绘图配色不够多&#xff1f;很多python\R语言绘图包都会带着好几套配色方案&#xff0c;比如很常见的ggsci绘图包就自带45套离散配色&#xff0c;于是本工具收集了常见55个绘图包中的离散配色&#xff0c;制作出了这个包含了1967套配色的离散配色包slanCL。 基本使用 以…

机器学习(二):线性回归之梯度下降法

文章目录 专栏导读1、梯度下降法原理2、梯度下降法原理代码实现3、sklearn内置模块实现专栏导读 ✍ 作者简介:i阿极,CSDN Python领域新星创作者,专注于分享python领域知识。 ✍ 本文录入于《机器学习案例》,本专栏精选了经典的机器学习算法进行讲解,针对大学生、初级数据分…

CleanMyMac4.13最新免费mac电脑系统优化软件

CleanMyMac免费mac下载版是一款简单实用的PC清洁管理工具&#xff0c;电脑刚装完系统的时候运行速度超级快&#xff0c;随着时间的推移&#xff0c;你会发现越来越慢&#xff0c;经常会反应卡顿&#xff0c;越来越多的垃圾文件占用了你的磁盘空间&#xff0c;各种过时的日志&am…

数组题目总结 -- 前缀和数组

目录 一. 区域和检索 - 数组不可变1. 思路和代码I. 博主的做法&#xff1a;II. 东哥的做法&#xff1a; 2. 总结 二. 二维区域和检索 - 矩阵不可变1. 思路和代码I. 博主的做法&#xff1a;II. 东哥的做法&#xff1a; 2. 总结 一. 区域和检索 - 数组不可变 题目链接&#xff1…

【方法一:二分+字符串哈希 优化】【dp——取不取问题-背包】最长公共子串【上海交通大学考研机试题】

最长公共子串 二分方法字符串哈希的复习字符串哈希 如何理解 二分代码 dp方法字符串str1中以第i个字符为结尾的子串 与字符串str2中以第i个字符为结尾的子串的连续公共子串 二维一维优化 二分方法 由于这个题是要求求子串&#xff0c;而子串是连续的一段&#xff0c;所以用二分…

在微信小程序中怎么使用vant框架?

目录标题 首先介绍什么是vant一、第一步&#xff0c;打开我们小程序项目目录&#xff0c;找到所在的位置&#xff0c;打开终端二、对项目进行初始化三、进行安装依赖1、通过npm安装vant/weapp2、安装miniprogram 四、修改app.json五、修改project.config.json六、然后构建npm 需…

使用Word的一些技巧记录

本文主要用于记录书写毕业论文时&#xff0c;遇到的Word的使用技巧。 设置样式及多级列表 每个学校必然会对论文中的字体、字号、行间距提出要求&#xff0c;设置Word中样式解决此问题。 例如&#xff0c;本校的格式要求为&#xff1a; 正文中的一级标题&#xff08;章目&a…

【C#】GridControl动态更换DataSource,查询数据异常处理

系列文章 【C#】单号生成器&#xff08;编号规则、固定字符、流水号、产生业务单号&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/129129787 【C#】日期范围生成器&#xff08;开始日期、结束日期&#xff09; 本文链接&#xff1a;h…

适应大、中、小型医院的手术麻醉临床信息管理系统源码

手术麻醉管理系统是一款专门用于医院手术麻醉管理的软件系统&#xff0c;它可以帮助医院和医生更好地管理手术麻醉过程&#xff0c;提高手术麻醉的质量和安全性。本文将介绍手术麻醉管理系统的实现、功能概述、主要功能、系统设置、麻醉管理、术中记录、苏醒室记录、PCA实施及管…

【微服务笔记20】微服务组件之Nacos配置中心基础环境搭建、配置持久化、动态刷新配置

这篇文章&#xff0c;主要介绍微服务组件之Nacos配置中心基础环境搭建、配置持久化、动态刷新配置。 目录 一、搭建Nacos配置中心环境 1.1、Nacos配置中心介绍 1.2、搭建Nacos配置中心客户端 &#xff08;1&#xff09;引入依赖 &#xff08;2&#xff09;添加配置信息 &…

图书管理系统的开发与设计(论文+源码)_kaic

摘 要 随着科学技术的快速发展&#xff0c;尤其是计算机技术的突飞猛进&#xff0c;计算机技术普及到日常生活、学习生活的方方面面。由此想到学校的相对于传统的图书管理系统&#xff0c;帮助到学校的读者和学校的图书管理员的系统。提升图书管工作人员的效率&#xff0c;满足…

【C++类和对象】类和对象(中):构造函数 {六个默认成员函数;构造函数的概念及特性;编译器自动生成的构造函数;默认构造函数}

一、类的六个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器…

Pytorch深度学习笔记(六)用pytorch实现线性回归

目录 1.数据准备 2.设计模型 3.构造损失函数和优化器 4.训练周期&#xff08;前馈—>反馈—>更新&#xff09; 课程推荐&#xff1a;05.用PyTorch实现线性回归_哔哩哔哩_bilibili 线性通常是指变量之间保持等比例的关系&#xff0c;从图形上来看&#xff0c;变量之间…

为什么要学习微服务?

文章目录 1.认识微服务1.1微服务由来1.2为什么需要微服务&#xff1f; 2.两种架构2.1.单体架构2.2.分布式架构 3.微服务的特点4.SpringCloud5.总结最后说一句 1.认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为…

类和对象(上篇)

类和对象----上篇 &#x1f506;面向过程和面向对象的初步认识&#x1f506;类的引入&#x1f506;类的定义&#x1f506;类的访问限定符及封装访问限定符封装 &#x1f506;类的作用域&#x1f506;类的实例化&#x1f506;类的对象大小的计算如何计算一个类的大小结构体内存对…

15天学习MySQL计划(多表联查)第四天

15天学习MySQL计划&#xff08;多表联查&#xff09;第四天 1.多表查询 1.1概述 ​ 指从多张表中查询数据 ​ 在项目开发中&#xff0c;在进行数据库表结构设计时&#xff0c;会根据业务需求及业务模块之间的关系&#xff0c;分析并设计表结构&#xff0c;由于业务之间相互…

【HCIP】Huawei设备下IPV4IPV6共存实验

目录 方法一、普通的GRE将V6基于V4通讯 方法二、6to4的tunnel 方法三、双栈 方法一、普通的GRE将V6基于V4通讯 //方法一和方法二的前提&#xff0c;搭个简单的V4网络就行 [r1]int g0/0/0 [r1-GigabitEthernet0/0/0]ip address 12.1.1.1 24 [r1]router id 1.1.1.1 [r1-Gigabi…

Spring Security 05 密码加密

目录 DelegatingPasswordEncoder 使用 PasswordEncoder 密码加密实战 密码自动升级 实际密码比较是由PasswordEncoder完成的&#xff0c;因此只需要使用PasswordEncoder 不同实现就可以实现不同方式加密。 public interface PasswordEncoder {// 进行明文加密String encod…

如何搭建自己的博客网站(手把手教你搭建免费个人博客网站)

没有前言直接开始正文&#xff0c;搭建一个博客需要服务器&#xff0c;域名&#xff0c;博客程序。 博客程序常用的有wordpress&#xff0c;z-blog&#xff0c;typecho等等&#xff0c;其中wordpress和z-blog最为简单&#xff0c;typecho需要一定的技术含量&#xff0c;这里暂…

使用NPOI做Excel简单报表

文章目录 前言初版表格&#xff0c;单元格的合并进阶表格&#xff0c;单元格美化小结 前言 前面介绍了NPOI单元格样式的使用、单元格合并&#xff0c;以及NPOI提供的颜色。现在用上前面的一些知识点&#xff0c;做一个测试结果表格。 1、 介绍NPOI 的颜色卡、名称以及索引 ht…