HTML – 2

By | 10月 20, 2021

1. 列表标签

1.1 <ol> ordered list

<ol>标签是一个有序列表容器(ordered list),会在内部的列表项前面产生数字编号。列表项的顺序有意义时,比如排名,就会采用这个标签。<ol>标签内部可以嵌套<ol>标签或<ul>标签,形成多级列表。

<ol>
  <li>列表项 A</li>
  <li>列表项 B
    <ol>
      <li>列表项 B1</li>
      <li>列表项 B2</li>
      <li>列表项 B3</li>
    </ol>
  </li>
  <li>列表项 C</li>
</ol>
  1. 列表项 A
  2. 列表项 B
    1. 列表项 B1
    2. 列表项 B2
    3. 列表项 B3
  3. 列表项 C

(1)reversed

reversed属性产生倒序的数字列表。

<ol reversed>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>
  1. 列表项 A
  2. 列表项 B
  3. 列表项 C

(2)start

start属性的值是一个整数,表示数字列表的起始编号。

<ol start="5">
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>
  1. 列表项 A
  2. 列表项 B
  3. 列表项 C

(3)type

type属性指定数字编号的样式。目前,浏览器支持以下样式。

  • a:小写字母
  • A:大写字母
  • i:小写罗马数字
  • I:大写罗马数字
  • 1:整数(默认值)
<ol type="a">
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>
  1. 列表项 A
  2. 列表项 B
  3. 列表项 C

1.2 <ul> unordered list

<ul>标签是一个无序列表容器(unordered list),会在内部的列表项前面产生实心小圆点,作为列表符号。列表项的顺序无意义时,采用这个标签。<ul>标签内部可以嵌套<ul><ol>,形成多级列表。

<ul>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ul>
  • 列表项 A
  • 列表项 B
  • 列表项 C

1.3 <li>

<li>表示列表项,用在<ol><ul>容器之中。有序列表<ol>之中,<li>有一个value属性,定义当前列表项的编号,后面列表项会从这个值开始编号。

<ol>
  <li>列表项 A</li>
  <li value="4">列表项 B</li>
  <li>列表项 C</li>
</ol>
  1. 列表项 A
  2. 列表项 B
  3. 列表项 C

1.4 <dl>, <dt>, <dd>

<dl>标签是一个块级元素,表示一组术语的列表(description list)。术语名(description term)由<dt>标签定义,术语解释(description detail)由<dd>标签定义。<dl>常用来定义词汇表。

<dl>
  <dt>CPU</dt>
  <dd>中央处理器</dd>
  <dt>Memory</dt>
  <dd>内存</dd>
  <dt>Hard Disk</dt>
  <dd>硬盘</dd>
</dl>
CPU
中央处理器
Memory
内存
Hard Disk
硬盘

2. 图像标签

2.1 <img>

<img>标签用于插入图片。它是单独使用的,没有闭合标签。默认是一个行内元素,与前后的文字处在同一行。

(1) crossorigin

有时,图片和网页属于不同的网站,网页加载图片就会导致跨域请求,对方服务器可能要求跨域认证。它可以设为两个值:

  • anonymous:跨域请求不带有用户凭证(通常是 Cookie)。
  • use-credentials:跨域请求带有用户凭证。
<img src="foo.jpg" crossorigin="anonymous">

crossorigin属性如果省略值的部分,则等同于anonymous

<img src="foo.jpg" crossorigin>

(2)loading

浏览器的默认行为是,只要解析到<img>标签,就开始加载图片。对于很长的网页,这样做很浪费带宽,因为用户不一定会往下滚动,一直看到网页结束。用户很可能是点开网页,看了一会就关掉了,那些不在视口的图片加载的流量,就都浪费了。

loading属性改变了这个行为,可以指定图片的懒加载,即图片默认不加载,只有即将滚动进入视口,变成用户可见时才会加载,这样就节省了带宽。

loading属性可以取以下三个值:

  • auto:浏览器默认行为,等同于不使用loading属性。
  • lazy:启用懒加载。
  • eager:立即加载资源,无论它在页面上的哪个位置。
<img src="image.png" loading="lazy" alt="…" width="200" height="200">

由于行内图片的懒加载,可能会导致页面布局重排,所以使用这个属性的时候,最好指定图片的高和宽。

2.2 <figure>, <figcaption>

<figure>标签可以理解为一个图像区块,将图像和相关信息封装在一起。<figcaption>是它的可选子元素,表示图像的文本描述,通常用于放置标题,可以出现多个。

<figure>
  <img src="https://github.zhk.me/images/favicon/blue-letter-A.png">
  <figcaption>示例图片</figcaption>
</figure>
示例图片

除了图像,<figure>还可以封装引言、代码、诗歌等等。它等于是一个将主体内容与附加信息,封装在一起的语义容器。

<figure>
  <figcaption>JavaScript 代码示例</figcaption>
  <p><code>const foo = 'hello';</code></p>
</figure>
JavaScript 代码示例

const foo = 'hello';

2.3 响应式图像

网页在不同尺寸的设备上,都能产生良好的显示效果,叫做“响应式设计”(responsive web design)。响应式设计的网页图像,就是“响应式图像”(responsive image)。

响应式图像的解决方案有很多,JavaScript 和 CSS 都可以实现。这里只介绍语义性最好的 HTML 方法,浏览器原生支持。

2.3.1 问题的由来

我们知道,<img>标签用于插入网页图像,所有情况默认插入的都是同一张图像。

<img src="foo.jpg">

上面代码在桌面端和手机上,插入的都是图像文件foo.jpg

这种处理方法固然简单,但是有三大弊端。

(1)体积

一般来说,桌面端显示的是大尺寸的图像,文件体积较大。手机的屏幕较小,只需要小尺寸的图像,可以节省带宽,加速网页渲染。

(2)像素密度

桌面显示器一般是单倍像素密度,而手机的显示屏往往是多倍像素密度,即显示时多个像素合成为一个像素,这种屏幕称为 Retina 屏幕。图像文件很可能在桌面端很清晰,放到手机上会有点模糊,因为图像没有那么高的像素密度,浏览器自动把图像的每个像素复制到周围像素,满足像素密度的要求,导致图像的锐利度有所下降。

(3)视觉风格

桌面显示器的面积较大,图像可以容纳更多细节。手机的屏幕较小,许多细节是看不清的,需要突出重点。

上面两张图片,下方的手机图片经过裁剪以后,更突出图像重点,明显效果更好。

2.3.2 srcset属性

为了解决上面这些问题,HTML 语言提供了一套完整的解决方案。首先,<img>标签引入了srcset属性。

srcset属性用来指定多张图像,适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串,每个部分都是一张图像的 URL,后面接一个空格,然后是像素密度的描述符。请看下面的例子。

<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     src="foo-640w.jpg">

图像 URL 后面的像素密度描述符,格式是像素密度倍数 + 字母x1x表示单倍像素密度,可以省略。浏览器根据当前设备的像素密度,选择需要加载的图像。

如果srcset属性都不满足条件,那么就加载src属性指定的默认图像。

2.3.3 sizes属性

像素密度的适配,只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕,显示不同大小的图像,srcset属性就不够用了,必须搭配sizes属性。

<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="foo-1280.jpg">

第一步: srcset属性列出四张可用的图像,每张图像的 URL 后面是一个空格,再加上宽度描述符。宽度描述符就是图像原始的宽度,加上字符w。上例的四种图片的原始宽度分别为160像素、320像素、640像素和1280像素。

第二步: sizes属性给出了三种屏幕条件,以及对应的图像显示宽度。宽度不超过440像素的设备,图像显示宽度为100%;宽度441像素到900像素的设备,图像显示宽度为33%;宽度900像素以上的设备,图像显示宽度为254px

第三步:  浏览器根据当前设备的宽度,从sizes属性获得图像的显示宽度,然后从srcset属性找出最接近该宽度的图像,进行加载。

假定当前设备的屏幕宽度是480px,浏览器从sizes属性查询得到,图片的显示宽度是33vw(即33%),等于160pxsrcset属性里面,正好有宽度等于160px的图片,于是加载foo-160.jpg

2.4 <picture>

2.4.1 响应式用法

<img>标签的srcset属性和sizes属性分别解决了像素密度和屏幕大小的适配,但如果要同时适配不同像素密度、不同大小的屏幕,就要用到<picture>标签。下面例子中,设备宽度如果不超过500px,就加载竖屏的图像,否则加载横屏的图像。

<picture>是一个容器标签,内部使用<source><img>,指定不同情况下加载的图像。

<picture>
  <source media="(max-width: 500px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 501px)" srcset="cat-horizontal.jpg">
  <img src="cat.jpg" alt="cat">
</picture>

<source>标签,主要使用media属性和srcset属性。

  • media属性给出媒体查询表达式
  • srcset属性就是<img>标签的srcset属性,给出加载的图像文件。

浏览器按照<source>标签出现的顺序,依次判断当前设备是否满足media属性的媒体查询表达式,如果满足就加载srcset属性指定的图片文件。<img>标签是默认情况下加载的图像,用来满足上面所有<source>都不匹配的情况。

下面给出一个例子,同时考虑屏幕尺寸和像素密度的适配。

<picture>
  <source srcset="homepage-person@desktop.png,
                  homepage-person@desktop-2x.png 2x"
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png,
                  homepage-person@tablet-2x.png 2x"
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png,
               homepage-person@mobile-2x.png 2x"
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

2.4.2 图像格式的选择

除了响应式图像,<picture>标签还可以用来选择不同格式的图像。比如,如果当前浏览器支持 Webp 格式,就加载这种格式的图像,否则加载 PNG 图像。

<picture>
  <source type="image/svg+xml" srcset="logo.xml">
  <source type="image/webp" srcset="logo.webp"> 
  <img src="logo.png" alt="ACME Corp">
</picture>

浏览器按照<source>标签出现的顺序,依次检查是否支持type属性指定的图像格式,如果支持就加载图像,并且不再检查后面的<source>标签了。上面例子中,图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。

3. 链接标签

链接(hyperlink)是互联网的核心。它允许用户在页面上,从一个网址跳转到另一个网址,从而把所有资源联系在一起。

URL 是链接指向的地址。链接不仅可以指向另一个网页,也可以指向文本、图像、文件等资源。可以这样说,所有互联网上的资源,都可以通过链接访问。

3.1 <a>

链接通过<a>标签表示,用户点击后,浏览器会跳转到指定的网址。下面就是一个典型的链接。

<a href="https://wikipedia.org/">维基百科</a>

(1)target

target属性的值也可以是以下四个关键字之一。

  • _self:当前窗口打开,这是默认值。
  • _blank:新窗口打开。
  • _parent:上层窗口打开,这通常用于从父窗口打开的子窗口,或者<iframe>里面的链接。如果当前窗口没有上层窗口,这个值等同于_self
  • _top:顶层窗口打开。如果当前窗口就是顶层窗口,这个值等同于_self
<a
  href="https://www.google.com"
  target="_blank"
>示例链接</a>
示例链接

(2)ping

ping属性指定一个网址,用户点击的时候,会向该网址发出一个 POST 请求,通常用于跟踪用户的行为。

(3)download

download属性表明当前链接用于下载,而不是跳转到另一个 URL。

<a href="https://github.zhk.me/images/favicon/blue-letter-A.png" download>下载</a>
下载

如果download属性设置了值,那么这个值就是下载的文件名。

<a
  href="https://github.zhk.me/images/favicon/blue-letter-A.png"
  download="A.png"
>点击下载</a>
点击下载

注意,download属性只在链接与网址同源时,才会生效。也就是说,链接应该与网址属于同一个网站。

P.S.

JIRA里的下载链接是使用rel=”noopener”.

<a href="https://xxx/REPLAY.msg" rel="noopener">Download Email</a>

3.2 邮件链接

链接也可以指向一个邮件地址,使用mailto协议。用户点击后,浏览器会打开本机默认的邮件程序,让用户向指定的地址发送邮件。

<a href="mailto:contact@example.com">联系我们</a>
联系我们

除了邮箱,邮件协议还允许指定其他几个邮件要素。

  • subject:主题
  • cc:抄送
  • bcc:密送
  • body:邮件内容

使用方法是将这些邮件要素,以查询字符串的方式,附加在邮箱地址后面。

<a
  href="mailto:foo@bar.com?cc=abc@126.com&subject=Outing Survey&body=This is email body"
>发送邮件</a>
发送邮件

3.3 电话链接

如果是手机浏览的页面,还可以使用tel协议,创建电话链接。用户点击该链接,会唤起电话,可以进行拨号。

<a href="tel:13312345678">13312345678</a>
13312345678

3.4 <link>

<link>标签主要用于将当前网页与相关的外部资源联系起来,通常放在<head>元素里面。最常见的用途就是加载 CSS 样式表。

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

<link>还可以加载网站的 favicon 图标文件。

<link rel="icon" href="/favicon.ico" type="image/x-icon">

3.4.1 资源的预加载

某些情况下,你需要浏览器预加载某些资源,也就是先把资源缓存下来,等到使用的时候,就不用再从网上下载了,立即就能使用。预处理指令可以做到这一点。预加载主要有下面五种类型。

(1)<link rel="preload">

告诉浏览器尽快下载并缓存资源(如脚本或样式表),该指令优先级较高,浏览器肯定会执行。当加载页面几秒钟后需要该资源时,它会很有用。下载后,浏览器不会对资源执行任何操作,脚本未执行,样式表未应用。它只是缓存,当其他东西需要它时,它立即可用。

<link rel="preload" href="image.png" as="image">
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

as属性指定加载资源的类型,它的值一般有下面几种。

  • “script”
  • “style”
  • “image”
  • “media”
  • “document”

如果不指定as属性,或者它的值是浏览器不认识的,那么浏览器会以较低的优先级下载这个资源。

有时还需要type属性,进一步明确 MIME 类型。

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

(2)<link rel="prefetch">

如果后续的页面需要某个资源,并且希望预加载该资源,以便加速页面渲染。该指令不是强制性的,优先级较低,浏览器不一定会执行。这意味着,浏览器可以不下载该资源,比如连接速度很慢时。

<link rel="prefetch" href="https://www.example.com/">

(3)<link rel="preconnect">

要求浏览器提前与某个域名建立 TCP 连接。当你知道,很快就会请求该域名时,这会很有帮助。

<link rel="preconnect" href="https://www.example.com/">

(4)<link rel="dns-prefetch">

要求浏览器提前执行某个域名的 DNS 解析。

<link rel="dns-prefetch" href="//example.com/">

(5)<link rel="prerender">

要求浏览器加载某个网页,并且提前渲染它。用户点击指向该网页的链接时,就会立即呈现该页面。如果确定用户下一步会访问该页面,这会很有帮助。

<link rel="prerender" href="http://example.com/">

3.4.2 media属性

media属性给出外部资源生效的媒介条件。

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

上面代码中,打印时加载print.css,移动设备访问时(设备宽度小于600像素)加载mobile.css

下面是使用media属性实现条件加载的例子。

<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

上面代码中,如果屏幕宽度在600像素以下,则只加载第一个资源,否则就加载第二个资源。

3.5 <script>

<script>用于加载脚本代码,目前主要是加载 JavaScript 代码。

<script>
console.log('hello world');
</script>

上面代码嵌入网页,会立即执行。

<script>也可以加载外部脚本,src属性给出外部脚本的地址。下面代码会加载javascript.js脚本文件,并执行。

<script src="javascript.js"></script>

type可以设置成module,表示这是一个ES6模块,而不是一个传统脚本。

<script type="module" src="main.js"></script>

一些其它常用的属性:

  • async:该属性指定 JavaScript 代码为异步执行,不是造成阻塞效果,JavaScript 代码默认是同步执行。
  • defer:该属性指定 JavaScript 代码不是立即执行,而是页面解析完成后执行。
  • crossorigin:如果采用这个属性,就会采用跨域的方式加载外部脚本,即 HTTP 请求的头信息会加上origin字段。
  • integrity:给出外部脚本的哈希值,防止脚本被篡改。只有哈希值相符的外部脚本,才会执行。

3.6 <noscript>

<noscript>标签用于浏览器不支持或关闭 JavaScript 时,所要显示的内容。用户关闭 JavaScript 可能是为了节省带宽,以延长手机电池寿命,或者为了防止追踪,保护隐私。

<noscript>
  您的浏览器不能执行 JavaScript 语言,页面无法正常显示。
</noscript>

4. 基于Github Pages创建资源分享网站

很早的时候,要想创建一个网站,分享资源(博客、图片、视频等),这是比较麻烦的事。通常是站长,买一个WEB服务器,通过FTP把网站上传到购买的服务器上。Github Pages则是实时自动把Githu repisitory内容(Markdown格式,或HTML)编译成静态网页,然后deploy到服务器上。我一直用自己的WordPress个人网站,这次写这个教程特地玩了一下Github Pages。

创建过程很简单,跟着官网教程,几步就配置好了。这是我近期弄的一个粗糙网站,绑定了自己的域名:https://github.zhk.me/。网络上很多教程,也出现在Github Pags上,例如本文参考的教程:https://www.wangdoc.com/。以及公司不少同事也在Github Pages建立个人网站。

官网说明 “Published GitHub Pages sites may be no larger than 1 GB. GitHub Pages sites have a soft bandwidth limit of 100GB per month.”。对于普通网站,1GB站点大小限制,100GB的月流量,完全够用了。