HTML链接、图片、转义字符的学习

已于 2024-05-20 13:50:11 修改
阅读量906 收藏 6
点赞数 11
文章标签： html 学习 前端
于 2024-05-20 13:42:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53598426/article/details/139062521
版权

1.链接

（1）<a>定义一个链接（锚标签）
（2）知识点：
  • href属性
  • target属性
  • 资源定位

（2.1）href属性
规定链接的目标 URL, 有四个取值 。

  • 网络地址（绝对路径）
  • 本地地址（相对路径）
  • #回到顶部
  • #aa回到一个id="aa"的元素位置

（2.2）target属性
定在何处打开目标 URL。仅在 href 属性存在时使用。常用取值

  • _self 在本页面中打开(默认)
  • _blank在新的页面中打开

（2.3）资源定位
从当前文件触发, 访问别的文件或者图片时需要资源定位。
1.相对路径

  • ./ 表示当前目录, 很多时候./可以省略, ./demo.html 可以写成 demo.html, 个人不建议省略
  • ../ 表示上一级目录, 以此类推, ../../ 表示上上级目录

2.绝对路径

  • 搞清楚根目录在那里
  • 相对路径
    img src="../img/abc.png" alt="">
  • 绝对路径
    <img src="/img/abc.png" alt="">
（3）页面ABCD间以及锚点的跳转
  • A页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A页面</title>
</head>
<body>
       <h1>这里是A页面</h1>
       <h2>1.绝对路径</h2>
       <a href="file:///D:/deng%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/%E9%A1%B5%E9%9D%A2%E9%93%BE%E6%8E%A5%E8%B7%B3%E8%BD%AC/B%E9%A1%B5%E9%9D%A2.html">去B页面</a>
       <a href="file:///D:/deng%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/%E9%A1%B5%E9%9D%A2%E9%93%BE%E6%8E%A5%E8%B7%B3%E8%BD%AC/C%E9%A1%B5%E9%9D%A2/C%E9%A1%B5%E9%9D%A2.html">去C页面</a>
       <a href="file:///D:/deng%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/%E9%A1%B5%E9%9D%A2%E9%93%BE%E6%8E%A5%E8%B7%B3%E8%BD%AC/C%E9%A1%B5%E9%9D%A2/D%E9%A1%B5%E9%9D%A2/D%E9%A1%B5%E9%9D%A2.html">去D页面</a>
       <!-- 链接到互联网的一个地址 (绝对路径)-->
       <a href="https://www.baidu.com/">百度 </a>
       <hr>
       <h2>2.相对路径</h2>
       <!-- 注：./往下找，../往上一级找，../../往上两级找 -->
       <a href="./B页面.html" target="_blank">去B页面</a> <!--target属性：1._self在本页面中打开(默认) 2._blank在新的页面中打开-->
       <a href="./C页面/C页面.html">去C页面</a>
       <a href="./C页面/D页面/D页面.html">去D页面</a>
       <a href="../锚点/demo1.html#bbb">去锚点demo1的bbb处</a>

</body>
</html>
  • B页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B页面</title>
</head>
<body>
    <h1>这里是B页面</h1>
    <h2>相对路径</h2>
    <a href="./A 页面.html">去A页面</a>
    <a href="./C页面/C页面.html">去C页面</a>
    <a href="./C页面/D页面/D页面.html">去D页面</a>
</body>
</html>
  • C页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>C页面</title>
</head>
<body>
    <h1>这里是C页面</h1>
    <h2>相对路径</h2>
    <a href="../A 页面.html">去A页面</a>
    <a href="../B页面.html">去B页面</a>
    <a href="./D页面/D页面.html">去D页面</a>
</body>
</html>
  • D页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D页面</title>
</head>
<body>
    <h1>这里是D页面</h1>
    <h2>相对路径</h2>
    <a href="../../A 页面.html">去A页面</a>  <!-- 上两级页面 -->
    <a href="../../B页面.html">去B页面</a>   <!-- 上两级页面 -->
    <a href="../C页面.html">去C页面</a>      <!-- 上一级页面 -->
</body>
</html>
  • 锚点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <p>
        <a href="#aa">aa</a>
        <a href="#bbb">bbb</a>
        <a href="#cc">cc</a>
    </p>


   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p id="aa">aaaaaaaaaaaa</p>
   <a href="#">返回顶部</a>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p id="bbb">bbbbbbbbb</p>
   <a href="#">返回顶部</a>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p id="cc">cccccccccccc</p>
   <a href="#">返回顶部</a>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
   <p>xxxxxx</p>
    <a href="#">返回顶部</a>
</body>
</html>

2.图片

（1）<img>定义图片
（2）alt 图片不显示时的替代文本
（3）src 要显示图片的 URL，src属性的值可以是本地图片,网络图片,或者是base64格式的文本
（4）常见的图片格式有png, jpeg, jpg, gif, webp, base64
（5）图片压缩，通过工具转换成webp格式

演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image</title>
</head>
<body>
      <!-- 1.本地图片 -->
      <img src="../image/image2.jpg" alt="图片加载失败" title="风景图片"  width="1000" height="1000">   <!-- src为链接地址，alt为图片加载不出来显示的文字，title为光标停留图片处显示的文字 -->
      <hr>
      <!-- 2.网络图片 -->
      <img src="https://img2.baidu.com/it/u=2285421992,2919257556&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=759" alt="图片加载失败" title="风景图片">
      <hr>
      <!-- 3.图片跳转 -->
     <a href="https://www.baidu.com/"> 
        <img src="../image/image3.webp" alt="图片加载失败" title="风景图片" href="../页面链接跳转/A 页面.html"> 
     </a>
      <hr>
      <!-- base64 -->
      <img src="data:image/webp;base64,UklGRmJGAABXRUJQVlA4IFZGAABQSQGdASp6AVsBPm0uk0YkIqGmLFOsUMANiWRt/IDEaXxCgfiHa6GMT/xvzC9prjPtn96fg/197VfCXtDzsukP/B/kPzW+Xf/U9an67/7fuFfrX+wfX98xv7Zft/7vn/g9cH+D9QT+w/7HrfPQu8u72f/3T/c72qf//2f/PTxk2a/nv3ryi/4TP/8B4Jdlbtv4DT/O0jwK8Q/4LXfzwn/j++nrD/cf/N++B6zjZWAxDpMtxX2+4kVR22B09a3/h/L10VuvGFNC7XqI31v6c3mlHrbuGfBo+V31ZACkbPSDAgq7d8pheswZZrp3+Hfpx25M1oB3SVsOFbyeHkbGSrxUibEfK2lx3wSANjV8KiR+YCCY2+zKwmE6gdnNbMsnrb6ELrqd5bq8lfWM+ZaS26It+9qG5FsKmyoZe6JsbYDr7LUEZ4Ij+GyAWXgQhLb/aHJt5wM5bIOwnAsNecyuGj4GAqpuhZY/gv
     " alt="">
</body>
</html>

3.转义字符

显示结果描述实体名称实体编号
空格 &nbsp;&#160;
<小于号&lt; &#60;
>大于号&gt;&#62;
¥元（yen）&yen;&#165;

其它转义字符

演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        小于号&lt;
    </div>
    <div>
        大于号&gt;
    </div>
    <p>aaaaaaaaaa&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bbbbbbbbbbbbb</p>
    <div>
        人民币&yen;
    </div>
</body>
</html>
deng_hongbin
关注
  • 11
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html转义字符<>,html转义字符
weixin_39522698的博客
05-30 1200
public static String toHTMLString(String in) {StringBuffer out = new StringBuffer();for (int i = 0; in != null && i < in.length(); i++) {char c = in.charAt(i);if (c == '\'')out.append("'");...
html特殊乘转义字符,HTML特殊转义字符列表
weixin_42566121的博客
06-01 513
HTML特殊转义字符列表最常用的字符实体显示　　　　说明实体名称实体编号空格　　　　 < 　　　 小于　　　　 <　　　　　　 <>　　　　　 大于　　　　 >　　　　　　>&　　　　　 &符号　　　　&　　　　　&"　　　　　　双引号　　　 "　　　　　"©　　　　　 版权　　　　 ©　　　　 ...
HTML转义字符大全
俊墨客
10-25 7088
为什么要用转义字符串？ HTML中<，>，&等有特殊含义（<，>，用于链接签，&用于转义），不能直接使用。这些符号是不显示在我们最终看到的网页里的，那如果我们希望在网页中显示这些符号，该怎么办呢？ 这就要说到HTML转义字符串（Escape Sequence）了。 转义字符串（Escape Sequence）也称字符实体(Character Entity)。...
nodejs html 转义字符,链接处理转义字符(%3A%2F)
weixin_39561004的博客
05-31 1870
链接处理转义字符body{text-align: center;}textarea{width: 60%;height:180px;border: 2px solid #ccc;display: block;margin: 10% auto 0;padding: 0.5em;outline: none;box-shadow: 0;transition: border-color .15s ease...
html参数转义字符,Html转义字符 & 获得请求参数
weixin_36115475的博客
06-03 553
获得请求参数的js:Request = {QueryString : function(item){var svalue = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));return svalue ? svalue[1] : svalue;}}alert(Request....
html空格字符转义存入数据库,HTML中多种空格转义字符
weixin_29824417的博客
05-31 3747
记录一下,空格的转义字符分为如下几种: 1. &160#;不断行的空白(1个字符宽度) 2.  &8194#;半个空白(1个字符宽度) 3.  &8195#;一个空白(2个字符宽度) 4.  &8201#;窄空白(小于1个字符宽度) 平时一般用的是但是在中文中也许有时候更适合用 …java路径中的空格问题 1. URLTest.class.getResource...
html的 转义,html字符转义
weixin_35715402的博客
07-08 605
javascript 字符转义汇总在开发中经常遇到需要字符转义的,我将一一把遇到的转义列举出来 1.今天中午做项目的时候遇到一个字符串链接的问题,需要链接的的是一个函数的参数 时间字符串:"2014-04-08 16:37: ...MySql concat与字符转义mysql函数之四:concat() mysql 多个字段拼接 - duanxz - 博客园https://www.cnblogs.c...
html 去除转义字符,怎么去除爬下来的网站中的一些转义字符串
weixin_30444625的博客
05-31 531
from bs4 import BeautifulSoupimport reimport urllib.request, urllib.errordef first(baseurl):return getData(baseurl)findLink = re.compile(r'', re.S)findTttle = re.compile(r'(.?)', re.S)findContant1 = r...
HTML简介及转义字符大全
hdxx2022的博客
10-26 1969
一、html简介1、html是什么Html是用来描述网页的一种语言。(1)HTML 指的是超文本标记语言 (Hyper Text Markup Language)(2)HTML 不是一种编程语言，而是一种标记语言(markup language,标记语言是一套标记标签(markup tag));
最常用的HTML转义字符 Escape Sequence
01-21
这就要说到HTML转义字符串（Escape Sequence）了。 转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示...
HTML & XML 转义字符
02-28
HTML中<, >，&等有特殊含义，(前两个字符用于链接签...　XML转义字符 　不合法的XML字符必须被替换为相应的实体。 　如果在XML文档中使用类似"的字符, 那么解析器将会出现错误，因为解析器会认为这是一个新元素的开始
常用HTML转义字符
03-25
NULL 博文链接：https://windchill9.iteye.com/blog/1163279
HTML 转义字符串
07-29
NULL 博文链接：https://javapub.iteye.com/blog/803160
HTML跨年烟花
热门推荐
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~
html实现粘贴excel数据，在页面表格中复制
最新发布
weixin_43805439的博客
06-13 485
Html table 实现Excel多格粘贴
HTML--给网站添加已运行时间的统计
IT利刃出鞘的博客
06-13 207
本文介绍怎么给自己网站添加已经运行了多长时间。
【html】如何利用HTML+CSS制作自己的印章
weixin_56334307的博客
06-10 688
大家有没有尝试过用HTML和CSS制作自己的印章.首先印章圆形的边框。
HTML 颜色名
xyq2024的博客
06-12 601
HTML 颜色名是一组预定义的颜色，可以在 HTML 和 CSS 中使用。这些颜色名易于记忆，方便开发者快速选择和使用。本文将详细介绍 HTML 颜色名，包括它们的用途、优点以及如何在网页设计中使用它们。
使用转义字符输出正确的网址
05-11
要输出正确的网址，需要使用转义字符来避免被解释为 HTML 标签。例如，要输出网址 www.example.com，可以使用以下代码： ``` <a href="http://www.example.com">http://www.example.com</a> ``` 在这个例子中，`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

deng_hongbin

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

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

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

打赏作者

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

抵扣说明：

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

余额充值