前端笔记HTML基础（3）----图片和超链接

最新推荐文章于 2023-04-15 10:02:13 发布
最新推荐文章于 2023-04-15 10:02:13 发布
阅读量800 收藏 3
点赞数 1
分类专栏： 前端HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43449246/article/details/117439256
版权

第三个图片和文字点击可以跳转到另一个页面的锚那里
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片和超链接</title>

	</head>
	<body>
		<a href="#html2">目录1</a>
		<br>
		<a href="#html3">目录2</a>
		<br>
		<a href="列表.html#html4" target="_blank">目录3（不同页面）</a>
		<br>
		<a href="mailto:945750315@qq.com">目录4(邮箱链接)</a>
		<br>
		<a href="logo.zip">目录5(下载文件链接)</a>
		<br>
		<img src="logo.jpg"  alt="html快速入门" height="30%" width="40%" />  <!-- 相对路径 -->
		<h2 >html快速入门 </h2>
			
		<img src="D:\360安全浏览器下载\HBuilderX.3.1.13.20210514\HBuilderX\readme/logo.jpg" alt="html快速入门1" height="30%" width="40%"/>  <!-- 绝对路径 -->
		<h2 >html快速入门1 </h2>
		
		<!-- 给图片添加超链接 -->  <!-- laomi.html是站内地址（相对地址） -->
		 <a href="laomi.html" target="_self">   <img src="logo.jpg"  alt="html快速入门2" height="30%" width="40%" /> </a>   
		
		
		<!-- 给文字添加超链接 -->
		<a href="列表.html" target="_blank" title="这是超链接标签的title属性" name="html2"> <h2 >html快速入门2</h2> </a>  <!-- 列表.html是站内地址（相对地址） -->
		<br>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>
		<p>假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话假设这里有一大段话</p>

		
		<!-- 给文字添加超链接 -->
		<a href="列表.html" target="_blank" name="html3"> <h2 >html快速入门3</h2> </a>  <!-- 列表.html是站内地址（相对地址） -->
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		<p>这是另一段话</p>
		
		<br>
	</body>
</html>

<!-- 笔记 -->
<!-- 添加图片格式   <img src="" alt="" height="" width="" >      
1.src可以是相对路径，也可以是绝对路径
2.alt是文字，当图片无法加载的时候，文字会显示出来
3.height和width的单位可以是px或者%

超链接  <a href=""> 内容</a>  href里面填路径，可以是站内路径，也可以是站外路径。 -->
<!-- 超链接的属性：href 、 target、 title、 name  -->
<!-- target 属性 : _self（当前窗口） 、_blank（新建窗口）  、_top 、_parent -->
<!-- title :鼠标移动到该文字时会有一个title提示 -->
<!-- name：用于定义锚，类似于目录的功能 -->
<!-- 
定义锚的步骤：1.定义锚的位置和锚名 2.设置寻找锚的链接
定义锚（同一个页面）的格式：
<a href="#锚名1">目录名字</a>
<a href="#锚名2">目录名字</a>
...
<a href="..." name="锚名1">内容</a>
<a href="..." name="锚名2">内容</a> -->

<!-- 定义锚（不同页面）的格式：
网页1：<a href="网页名称#锚名">目录名字</a>
网页2：<a name="锚名">...</a> -->

<!-- 邮箱链接			<a href="mailto:945750315@qq.com">目录4(邮箱链接)</a> -->
	
<!-- 下载文件链接		<a href="logo.zip">目录5(下载文件链接)</a> -->
一粒程序米
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端学习笔记-黑马程序员
01-09
本篇文章主要介绍了 HTML 基础知识，涵盖了标签的基本概念、HTML 基本结构、文档类型声明、字符集、标签语义、标题标签、段落和换行标签、文本格式化标签、图像标签、路径、超链接标签、注释、特殊字符等内容。...
html css网页制作成品r-paper开发笔记
最新发布
06-12
在IT行业中，HTML和CSS是构建网页的基础技术，它们构成了前端开发的核心部分。"html css网页制作成品r-paper开发笔记"这个标题暗示了一个项目或教程，可能是关于如何使用HTML和CSS来创建一个完整的网页，而"r-paper...
一个图片三个不同超链接
qq_31584315的博客
02-13 413
<div class="ej_01"> <div class="bannerj"> <a class="cx1" href="/Template/zhuanti/youlu/biaodan5_tiaojian.aspx?CityDir=<%=Citys%>&CourseType=二级建造师" target=...
HbuilderX跳转 / 定义快捷键
NeiHan2020的博客
12-16 1万+
跳转/转到定义 HBuilderX拥有强大的跳转功能，如下: 光标跳转 转到行 转到指定行列 转到匹配的括号 跳转到书签 跳转到滚动条信息点 转到定义 转到定义到分栏 ..... 上一个光标位置 在HBuilderX中，Alt+Left(MacOSX:ctrl + -)、点击工具栏上的<, 即可回到上一个光标位置。 转到行 转到行快捷键：ctrl + G 跳转到指定行列 仅支持HBuilderX 2.8.10+ 注意：HBuilderX 3.1.13+版..
Hbuild——打开图片+改变字体+超链接
surymy
07-08 749
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行级标签</title> </head> <body> <img src="img/l-blue.png" alt="蓝灯照片" title="蓝色照片"/&g...
让前端飞：形象理解 Hbuilder、文本标记、超链接、列表、图片、表格
qq_44710986的博客
09-13 1320
**Day19 web前端 主持人探访H大楼 主持人19看到一栋在建的H型大楼**（Hbuilder），他非常好奇这是用来做什么的？所以他拿起话筒走进了这一个神秘的地方。原来这个大楼是用来控制大屏幕显示的。这栋大楼里面个工作人员都穿着双层夹，大部分是两个双胞胎一起工作，哥哥什么也不拿，弟弟左手拿一个盾牌（双标记，头尾<html></html>）。也有的单独一个人出来工作的，像头戴bra的就是一个人出来工作，因为他跑到别人身后，向后面拿个盾牌，后面的人就不敢再排队了（<br/&.
网页基础制作
Lotus4569的博客
01-27 3382
文章目录网页制作准备工作具体内容HBuilderX简单使用注意事项博客写作新闻列表 本文内容为个人整理，如有错误和不足请移步原视频，视频链接在文章末尾 网页制作 准备工作 代码编写工具 HBuilderX-高效极客技巧 浏览器 Chrome浏览器 具体内容 HBuilderX简单使用 1.创建新项目 2.代码完成后 3.模板介绍 注意事项 超文本 写在<>里的文本 写代码时要有代码缩进 当一个标签出现在另一个标签内部时，使用tab键进行缩进 博客写作
斑码教育大前端课堂笔记-html第四天
10-11
通过斑码教育的这份课堂笔记，学习者不仅可以巩固HTML的基础，还能了解到HTML5的新特性，为后续的CSS3和JavaScript学习打下坚实的基础。同时，笔记中包含的案例实践将帮助理论知识更好地转化为实际操作能力，提升...
前端技术HTML基础笔记
06-07
### 前端技术HTML基础知识点 #### 一、网页与HTML概述 - **网页**：构成网站的基本单位，通常以HTML格式呈现。 - **HTML（HyperText Markup Language）**： - 定义：超文本标记语言，专门用于描述网页内容。 - ...
HTML&CSS基础自学笔记---实现静态网页
10-30
HTML和CSS是构建网页的基础，它们分别负责网页的内容结构和样式设计。HTML（HyperText Markup Language）是一种标记语言，用于定义网页的结构和意义。CSS（Cascading Style Sheets）则用于控制网页的布局和视觉效果...
网页添加照片
05-17
网页制作的模拟例子，网页制作中遇到有些解决方法和案例思路。
超链接标签的页面跳转
weixin_59967356的博客
12-21 1387
超链接标签能够实现不同页面的跳转
如何利用 HBuilderX 制作图文混排的网页
热门推荐
听风者i的博客
08-31 1万+
如何利用 HBuilderX 制作图文混排的网页 实践项目： 1、在D盘创建名为web的基本web项目 2、创建一个空白网页文件，命名为gsjj.html 3、网页文件用于介绍公司的基本情况，要求包含标题，正文和图片。...
hbuildx跳转外部链接方法（vue项目中跳转到外部链接方法）
凯哥Java的博客
02-16 1089
直接贴代码： <div @click="goPage('http://www.chao99.top')">点我</div> goPage (url) { window.location.href = url }
html基础入门
m0_46170663的博客
09-15 458
从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径总能找到要连接的文件。告诉浏览器，当前html是使用h5的语法编写的，请用h5的规范解析。代表的是网页的开始与结束，一个页面中，有且只有一对html标签。如果设置的宽高不符合图片本身的宽高比，图片会变形——图片的失真。处理同一行文本有不同样式的时候，不换行，是最简单的行内元素。html定义了很多的属性和值，用来修改元素的样式和状态。不被浏览器解析运行的文本，增强代码的可读性，解释代码。是一个完整的路径，要使用网络资源的时候，用绝对路径。
【千锋Python2205班9.06笔记-day12-Python操作word文档和前端基础学习（1）】
weixin_43600905的博客
09-06 347
【千锋Python2205班9.06笔记-day12-Python操作word文档和前端基础学习（1）】
Web服务应用开发（基于J2EE）超链接基础学习
生活总是来来往往 千万别等来日方长
08-22 1135
超链接(HBuilderX编写) 代码： 超链接基本语法 语法说明 超链接由目的地址、链接标题、打开方式等三部分组成。 1.href （href-Hypertext reference）：链接指向的目标文件。 2.title：指向链接的提示信息。 3.target：指定打开的目标窗口 。有5 种取值： _parent -上一级窗口；_blank-新窗口； _self - 同一窗口，默认值；_top - 整个窗口打开；framename-框架或浮动框架名 超链接路径：绝对路径、相对路径、
点击图片区域链接到另一页面
越努力，越幸运
10-03 916
HTML5超链接和图片基础用法
星如雨落
04-15 9973
超链接可以是一个文本，也可以是一幅图像，您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的某个部分。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一粒程序米

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值