Netherspite

链接是HTML文档和其他文档或者资源的连接关系，在HTML中，链接分为超链接性标签和外部资源链接。替换型元素是另一种引入文件的方式。

链接

链接有a标签、area标签和link标签。

link标签可以生成超链接，也可以生成外部资源链接。link标签的链接类型通过rel区分。

link生成的超链接不会显示在网页中，对于多数浏览器都不产生作用，是一种被动型链接。但是能够被搜索引擎和一些浏览器插件识别。比如页面RSS的link标签能够被浏览器的RSS订阅插件识别，提示用户当前页面可以RSS订阅。

canonical

在网站中常常有多个URL指向同一个页面，搜索引擎访问这类页面会去掉重复的页面，rel是canonical的link会提示页面它的主URL。

alternate

rel是alternate的link提示页面它的变形形式，变形的意思是当前页面真多不同的格式、语言或者设备有不同的版本。典型的场景是页面提供RSS订阅时用这样的link来引入。除了搜索引擎外，很多浏览器插件也能识别。

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

prev和next

rel为prev和next的link会告诉浏览器或搜索引擎它的前一项或后一项，有助于页面的批量展示，比如分页浏览或图片展示的场景，每个页面都是序列的一项。

其他

  • rel=”author”，链接到本页面的作者，一般是mailto协议
  • rel=”help”，链接到本页面的帮助页
  • rel=”license”，链接到本页面的版权信息页
  • rel=”search”，链接到本页面的搜索页面，一般是站内提供搜索时使用

link生成的外部资源链接会实际下载这些外部资源，并做出处理，比如常见的link引入样式表。

icon

这类链接表示页面的icon，多数浏览器会读取icon型link并展示出来。若没有icon型link多数浏览器会使用根域名目录下的favicon.ico。只有icon型link有有效的sizes属性，HTML标准允许一个页面出现多个icon型link，并用sizes指定它适合的icon尺寸。

导航到一个网站需要经过DNS查询域名、建立连接、传输数据、加载进内存和渲染等一系列的步骤，预处理类link标签允许我们控制浏览器，提前针对一些资源去做这些操作，以提高性能。

  • dns-prefetch型link对一个域名作DNS查询，其href实际上只有域名有意义
  • preconnect型link提前对一个服务器建立tcp连接
  • prefetch型link提前取href指定url的内容
  • preload型link提前加载href指定的url
  • prerender型link提前渲染href指定的url。

modulepreload

modulepreload型link是预先将一个JavaScript的模块下载并放入内存，可以保证JS模块不必等到执行时才加载。

stylesheet

type属性必须为text/css，或者可以不写type属性。

<link rel="stylesheet" href="xxx.css" type="text/css">

pingback

pingback型的link表示本网页被引用时，应该使用的pingback地址。

a

a标签是anchor的缩写，其充当了链接和锚点的角色，当其有href属性时是链接，有name时，是链接的目标。a也可以有rel属性，alternate、author、help、license、prev、next和search与link表现一致，除此之外，a还有其他的rel类型：

  • tag，表示本网页所属的标签
  • bookmark，到上级章节的链接
  • nofollow，此链接不会被搜索引擎索引
  • noopener，此链接打开的网页无法使用 opener 来获得当前页面的窗口
  • noreferrer，此链接打开的网页无法使用 referrer 来获得当前页面的 url
  • opener，打开的网页可以使用 window.opener 来访问当前页面的 window 对象，这是 a 标签的默认行为。

area

area与a十分相似，不同之处在于它不是文本型的链接，而是区域型的链接。其支持的rel与a完全一样。area 必须跟 img 和 map 标签配合使用。

它的shape支持三种类型：

  • 圆形：circle或circ，coords支持三个值，分别表示中心点的x, y坐标和圆形半径r
  • 矩形：rect或rectangle，coords支持四个值，分别表示两个对角顶点x1, y1和x2, y2
  • 多边形：poly或polygon，coords至少六个值，表示多边形的各个顶点。

下面的例子展示了在图片上画热区并产生链接。

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>

替换型元素

替换型元素是把文件内容引入，替换掉自身位置的一类标签。

script

script既可作为替换型标签，又可以不作为替换型标签。

<script type="text/javascript">
console.log("Hello world!");
</script>

<script type="text/javascript" src="my.js"></script>

替换型元素都是使用src属性来引用文件，链接型元素是使用href属性。

img

img元素必须有src属性。如果不想引入独立文件，可以使用data uri，做到了和内联相同的结果。

<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>'/>

width和height属性可以指定图片的宽高，指定其中一个时会进行等比例缩放。alt属性是对图片的描述，适用于视障用户，规定在图像无法显示时的替代文本。

srcset与sizes

srcset和sizes属性在不同的屏幕大小和特性下，使用不同的图片源。

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcset以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由指向图像的URL和宽度描述符或像素密度描述符组成。宽度描述符时正整数，紧跟w符号。该整数宽度除以sizes属性给出的资源大小来计算得到有效的像素密度，即换算成像素密度描述符。像素密度描述符是正浮点数，紧跟x符号。如果没有指定源描述符，默认为1x。重复的描述符或者混用宽度和像素密度描述符会导致该值无效。

sizes表示资源大小的、以逗号分隔的一个或多个字符串，每一个资源大小包括一个媒体条件和资源尺寸的值。

当使用w描述符时，src属性会被忽略，当匹配了媒体条件(max-width:320px)时，图像将宽280px，否则宽800px。

picture

picture元素可以根据屏幕的条件为其中的img元素提供不同的源。picture使用source元素来指定图片源，并且支持多个，media属性是媒体查询，与CSS中@media规则一致。

<picture>
	<source srcset="image-wide.png" media="(min-width: 600px)">
  <img src="image-narrow.png">
</picture>

video

video早期与img类似，用src引入，现在与picture一样，提倡使用source元素来制定。type属性用于区分源文件的使用场景。

<video controls="controls" src="movie.ogg"></video>

<video controls="controls">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  You brower does not support video.
</video>

track

video标签还支持track标签，最常见的用途是字幕。track标签中必须使用srclang来指定语言。

kind属性包括：

  • subtitles：字幕，补充性说明
  • captions：报幕内容，包含演职员表等元信息，适合听障人士或者静音播放了解音频内容
  • descriptions：视频描述信息
  • chapters：用于浏览器视频内容
  • metadata：给代码提供的元信息

audio

audio也可以使用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>

iframe

移动端的iframe受到了很多限制，无法制定大小，里面的内容会被完全平铺到父级页面上。其也是各种安全问题的重灾区。不推荐使用。


 上一页

CSS

 评论