美文网首页
HTML链接和HTML替换型元素(整理)

HTML链接和HTML替换型元素(整理)

作者: 维仔_411d | 来源:发表于2019-12-20 17:30 被阅读0次

1. HTML链接

链接是HTML中的一种机制,是HTML文档和其他文档或资源的连接关系。
HTML中链接有两种类型:超链接型标签外部资源链接
a 标签、area标签、link标签

1-1. a 标签

与link标签相同的类型

以下类型的a标签 与对应类型的link语义相同,不同的是 a标签产生的链接会实际显示在网页中,link标签仅仅是元信息
alternate
prev
next
author
help
license
search

a 标签独有的rel

tag 本网页所属的标签
bookmark 到上级章节的链接

辅助的rel

用于提示浏览器或搜索引擎 去做一些处理

nofollow 此链接不会被搜索引擎索引
noopener 此链接打开的网页无法使用opener来获得当前页面的窗口
noreferrer 此链接打开的网页无法使用 referrer来获得当前页面url
opener 打开的网页 可以使用window.opener来访问当前页面的window对象 (a标签的默认行为)
opener

1-2. area 标签

与a标签相比,area不是文本型链接,是区域型链接,它支持的rel类型与a完全一样。
area 需与img和map标签配合使用
例子来自 html 标准:

<p>
  <!-- usemap指定name或id为shapes的map ,map的name和id最好都写上-->
 <img src="shapes.png" usemap="#shapes" alt="area测试图形">
 <map name="shapes">
  <!-- rect 矩形, coords 左上角和右下角坐标-->
  <area shape="rect" coords="25,25,125,125" href="red.html" alt="Red box.">
  <!-- circle 圆形, coords 圆心和半径-->
  <area shape="circle" coords="200,75,50" href="green.html" alt="Green circle.">
 <!-- 不规则图形, coords 图形边缘路径上的各个点,依次连接成此多边形-->
  <area shape="poly" coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle."> 
 </map>
</p>

1-3. link 标签

link标签中的rel属性的值 决定了link标签的类型。

  • 超链接型link标签
    • canonical 提示页面的主URL
    • alternate 提示页面的变形形式
    • prev 前一项
    • next 后一项
    • 其他超链接型
      • author
      • help
      • license
      • search
  • 外部资源型link标签
    • icon
    • stylesheet
    • modulepreload
    • pingback
    • 预处理类link
      • dns-prefetch
      • preconnect
      • prefetch
      • preload
      • prerender

超链接型link标签

一些link标签会生成超链接,这些超链接不会像a标签那样显示在网页中 。
超链接型link标签是一种被动型链接,在用户不操作的情况下,不会被主动下载。
canonical 型link
多个链接都指向一个页面时(搜索引擎访问这类页面时会去掉重复的页面),此link告诉搜索引擎保留哪个url

<link rel="canonical" href="xxx">

alternate 型link
表示页面的变形形式(变形可能是当前页面内容的不同格式、不同语言或为不同设备设计的版本),同城提供给搜索引擎使用。
典型的应用场景是,页面提供rss订阅时,可以用这样的link引入:

<link rel="alternate" type="application/rss+xml" title="RSS" href="xxx">

prev 型link 和 next 型link
告诉搜索引擎或浏览器,页面的前一项和后一项,有助于页面的批量展示。
HTML 标准建议对next型link做预处理。
其他超链接类的link
其他超链接类的link标签都表示一个跟当前文档相关联的信息,可以将这样的link标签视为一种带链接功能的meta标签

<!-- 页面作者 -->
<link rel="author" href="mailto:authormail@xx.com">
<!-- 本页版权信息页 -->
<link rel="license" href="https://xxx/license.html">
<!-- 本页帮助页 -->
<link rel="help" href="https://xxx/help.html">
<!-- 本页搜索页(一般是站内提供搜索时使用) -->
<link rel="search" href="https://xxx/search.html">

外部资源类link标签

外部资源型link标签会主动下载,并且根据rel类型做相应的处理。
icon 型link
多数浏览器会读取icon型link,并将页面icon展示出来。
icon型link是唯一一个外部资源类的元信息link,其他元信息类link都是超链接。
若没有指定这样的link(建议放在head中,若在body中指定 有的浏览器不会识别),多数浏览器会使用域名根目录下的favicon.ico

<!-- tab上的icon -->
<link rel="icon" sizes="360x640" href="./test_icon_2.png">
<!-- ios保存至桌面上时使用的图标 -->
<link rel="apple-touch-icon" href="image/icon-store-on.png">

stylesheet 型link

<!-- 普通的引入外部样式表的用法,type属性可以不写 -->
<link rel="stylesheet" type="text/css" href="xxx.css">
<!-- 为页面创建一份变体样式,部分浏览器,支持从浏览器菜单中切换这些样式 -->
<link rel="alternate stylesheet" title="theme-light-blue" href="xxx2.css"> 

modulepreload 型link
用于预先加载(下载并放入内存,不会执行)一个JavaScript模块,可以保证JS模块不必等到执行时才加载。
tips:这些JS模块何时执行,如何使用呢?
var preloadedScript = document.createElement("script"); preloadedScript.src = "./test/test.js"; document.body.appendChild(preloadedScript);

<link rel="modulepreload" href="a.js">
<link rel="modulepreload" href="b.js">
<script type="module" src="c.js">

pingback 型link
表示本网页被引用时 应使用pingback地址。此机制是一个独立的标准,遵守pingback的协议的网站在引用本页面时会向这个pingback url发送一个消息 (自动引用通知)

预处理 型link
从在浏览器输入网址到看到页面,需要经过dns解析、建立链接、传输数据、加载进内存、渲染等一系列步骤。
预处理类link标签运行我们控制浏览器,提前针对一些资源去做这些操作以提高性能(用的不好 反而会降低性能)

  • dns-prefetch 提前对一个域名做dns查询(这样的link中的href实际只有域名有意义)
  • preconnect 提前对服务器建立tcp链接
  • prefetch 提前取href指定的url的内容
  • preload 提前加载href指定的url
  • prerender 提前渲染href指定的url
    tips:prefetch和preload还有之前的modulepreload有什么区别?

    tips:prerender如何提前渲染?

2. HTML替换型元素

本文章节1中的链接是HTML一种引入文件的方式,还有一种引入文件的方式——替换型元素(把文件的内容引入,替换掉自身位置的一类标签)

2-1 script

script是为数不多的既可以作为替换型标签,又可以不作为替换型标签的元素。
凡是替换型元素,都是用src属性引用文件的,链接型元素是使用href标签。

2-2 img

两种方式,src写图片地址,或data uri

<img src="https://xxx.xxx.com/img/xxx.png">
<img src="data:image/png;base64,xxxxx">

 <img src='data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>'/>

 <img src='data:image/svg+xml;charset=utf8,<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/></svg>' width="100"/>

img标签还有两个重要的属性:srcset和sizes,在不同的屏幕大小和特性下,使用不同的图片源。[1]

<!-- 此规则只是对浏览器的建议,各浏览器选择图片的算法可能有差异。-->
<!-- 
设备dpr为1时,可视区域宽度小于等于600px则使用30px的图片,选择srcset中大于等于30px的最接近的图片,即为small.png;可视区域宽度大于1200px时使用120px的图,找到了large.png;
设备dpr为2时,可视区域宽度小于等于600px则使用30px的图片,选择srcset中大于等于2*30px的最接近的图片,即为middle.png;可视区域宽度大于1200px时使用120px的图,找到了最大的large.png;
-->
<img srcset="small.png 30w, middle.png 60w, large.png 120w" sizes="(max-width:600px) 30px, (max-width:900px) 60px, (max-width:1200px) 90px, 120px" src="default.png" alt="不支持srcset的浏览器会展示src的内容">
<!-- 
设备dpr为1时,使用small.png;设备dpr为2时,使用middle.png;
-->
<img srcset="small.png 1x, middle.png 2x, large.png 3x"  src="default.png" alt="不支持srcset的浏览器会展示src的内容">

srcset提供了根据屏幕条件选取图片的能力,但更好的方法是使用picture

2-3 picture

picture元素的设计与audio和video保持了一致,使用source元素指定图片源,并且支持多个。
此处media属性是media query,与css的@media规则一致

<!-- 基于媒体查询 -->
<picture>
  <source media="(min-width:900px)" srcset="large.png">
  <source media="(min-width:600px)" srcset="middle.png">
  <img src="small.png" alt="不支持picture的浏览器会展示img的内容">
</picture>
<!-- 基于图片格式 -->
<picture>
  <source type="image/vnd.ms-photo" src="img.jxr">
  <source type="image/jp2" src="img.jp2">
  <source type="image/webp" src="img.webp">
  <img src="img.png" alt="新的图片格式某些浏览器可能不支持">
</picture>

2-4 video

<!-- 之前的写法 -->
<video controls="controls" src="video_source.ogg">
<!-- 兼容性高,支持各种视频格式的写法 -->
<video>
  <source src="movie.webm" type="video/webm" >
  <source src="movie.ogg" type="video/ogg" >
  <source src="movie.mp4" type="video/mp4">
  浏览器不支持video标签时显示的内容
</video>

video中还支持一种标签——track,与播放时序相关,最常见的用途是字幕,属性srclang用于指定语言,属性kind (subtitles 字幕、captions 报幕内容、descriptions 视频描述信息、chapters 用于浏览器视频内容、metadata 给代码提供的元信息 普通用户不可见)

2-5 audio

audio标签与picture和video标签一样,用source元素指定源文件

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  <p>You browser does not support audio.</p>
</audio>

2-6 iframe

新标准中,iframe多了sandbox模式和srcdoc属性

<!-- sandbox的值为空时会应用所有的限制 
    srcdoc内容是html,若浏览器不支持则展示src中的内容
-->
<iframe sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;amp;page=1">in my gallery</a>."></iframe>

现在不推荐使用iframe,window.opener、window.parent.document、css的opacity等都可能存在漏洞[2]

参考文章


  1. 响应式图像之srcset和sizes属性

  2. XSS传染基础——JavaScript中的opener、iframe

相关文章

  • HTML链接和HTML替换型元素(整理)

    1. HTML链接 链接是HTML中的一种机制,是HTML文档和其他文档或资源的连接关系。HTML中链接有两种类型...

  • HTML 替换型元素

    替换型元素 替换型元素是引入一个外部资源来进入页面,替换掉自身的位置的一类标签。 script 为数不多的既可以作...

  • HTML头部-10

    HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML 元素 HTML ...

  • 常用HTML标签及属性

    思维导图 思维导图链接 文档结构类型 HTML元素 图像和链接 表格 列表 结构标记 表单 文档结构类型 HTML...

  • HTML知识点总结

    HTML< base>元素 < base>标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有链接标签...

  • HTML区块-15

    HTML 区块元素 HTML 内联元素 HTML 元素 HTML 与元素 实例:

  • HTML:基础(2)元素

    HTML 元素 HTML 文档由 HTML 元素定义。 HTML 元素语法 HTML 元素以开始标签起始 HTML...

  • html 学习第三天

    HTML区块 HTML 可以通过 和 将元素组合起来。 HTML 区块元素 大多数 HTML 元素被定义为块...

  • HTML常用元素及其用法

    整理一下HTML常用元素,方便记忆、复习。 HTML:HyperText Markup Language 超文本...

  • 2018-10-08 jQuery功能概括

    1、html的元素选取; 2、html的元素操作; 3、html dom遍历和修改; 4、html事件操作; 5、...

网友评论

      本文标题:HTML链接和HTML替换型元素(整理)

      本文链接:https://www.haomeiwen.com/subject/kmuenctx.html