6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

html笔记05-列表/图片/链接

2022-04-15 0 43 web前端社区

6.jpg 0 前端程序猿

列表标签

列表是一系列排列好的项目，主要分成两类：有序列表和无序列表。

有序列表是每个列表项前面有编号，呈现出顺序，就像下面这样。

  1. 1. 列表项 A
  2. 2. 列表项 B
  3. 3. 列表项 C

无序列表则是列表项前面没有编号，只有一个列表符号，默认是一个圆点。

  1. · 列表项 A
  2. · 列表项 B
  3. · 列表项 C

ol

<ol>标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签。

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

上面代码会在列表项 A、B、C 前面，分别产生1、2、3的编号。

<ol>标签内部可以嵌套<ol>标签或<ul>标签，形成多级列表。

  1. <ol>
  2.   <li>列表项 A</li>
  3.   <li>列表项 B
  4.     <ol>
  5.       <li>列表项 B1</li>
  6.       <li>列表项 B2</li>
  7.       <li>列表项 B3</li>
  8.     </ol>
  9.   </li>
  10.   <li>列表项 C</li>
  11. </ol>

上面代码中，一个有序列表内部嵌套了另一个有序列表，渲染结果如下。

  1. 1. 列表项 A
  2. 2. 列表项 B
  3.   1. 列表项 B1
  4.   2. 列表项 B2
  5.   3. 列表项 B3
  6. 3. 列表项 C

reversed

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

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

上面代码中，列表项 A、B、C 前面，产生的编号是3、2、1。

start

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

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

上面代码中，列表项 A、B、C 前面，产生的编号是5、6、7。

type

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

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

上面代码中，列表项 A、B、C 前面的编号，分别是英文小写字母a、b、c。

注意，即使编号是字母，start属性也依然使用整数。

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

上面代码中，type属性指定编号采用小写英文字母，start属性等于3，表示从c开始编号。

<ul>

<ul>标签是一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。列表项的顺序无意义时，采用这个标签。

  1. <ul>
  2.   <li>列表项 A</li>
  3.   <li>列表项 B</li>
  4.   <li>列表项 C</li>
  5. </ul>

上面代码的渲染结果是，列表项 A、B、C 前面，分别产生一个实心小圆点，作为列表符号。

<ul>标签内部可以嵌套<ul>或<ol>，形成多级列表。

li

<li>表示列表项，用在<ol>或<ul>容器之中。

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

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

上面代码中，value属性指定第二个列表项的编号是4，因此三个列表项的编号，分别为1、4、5。

dl，dt，dd

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

  1. <dl>
  2.   <dt>CPU</dt>
  3.   <dd>中央处理器</dd>
  5.   <dt>Memory</dt>
  6.   <dd>内存</dd>
  8.   <dt>Hard Disk</dt>
  9.   <dd>硬盘</dd>
  10. </dl>

<dt>和<dd>都是块级元素，<dd>默认会在<dt>下方缩进显示。上面代码的默认渲染结果如下。

  1. CPU
  2.   中央处理器
  4. Memory
  5.   内存
  7. Hard Disk
  8.   硬盘

多个术语（<dt>）对应一个解释（<dd>），或者多个解释（<dd>）对应一个术语（<dt>），都是合法的。

  1. <dl>
  2.   <dt>A</dt>
  3.   <dt>B</dt>
  4.   <dd>C</dd>
  6.   <dt>D</dt>
  7.   <dd>E</dd>
  8.   <dd>F</dd>
  9. </dl>

上面代码中，A和B有共同的解释C，而D有两个解释E和F。

图像标签

img

标签用于插入图片。它是单独使用的，没有闭合标签。 

  1. <img src="test.jpg">

上面代码在网页插入一张图片test.jpg。src属性指定图片的网址，上例是相对 URL，表示图片与网页在同一个目录。

默认是一个行内元素，与前后的文字处在同一行。 

  1. <p>Hello<img src="test.jpg">World</p>

图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。

可以放在标签内部，使得图片变成一个可以点击的链接。

  1. <a href="example.html">
  2.   <img src="test.jpg">
  3. </a>
alt 属性

alt属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。

  1. <img src="test.jpg" alt="示例图片">
width 属性，height 属性

图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。

  1. <img src="test.jpg" width="400" height="300">

注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。

一种特殊情况是，width属性和height属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。如图片大小是 800像素 x 800像素，width属性设置成200，那么浏览器会自动将height设成200。

referrerpolicy

导致的图片加载的 HTTP 请求，默认会带有Referer的头信息。referrerpolicy属性对这个行为进行设置。

crossorigin

有时，图片和网页属于不同的网站，网页加载图片就会导致跨域请求，对方服务器可能要求跨域认证。crossorigin属性用来告诉浏览器，是否采用跨域的形式下载图片，默认是不采用。

简单说，只要打开了这个属性，HTTP 请求的头信息里面，就会加入origin字段，给出请求发出的域名，不打开这个属性就不加。

一旦打开该属性，它可以设为两个值。

  • anonymous：跨域请求不带有用户凭证（通常是 Cookie）。
  • use-credentials：跨域请求带有用户凭证。

下面是一个例子。

  1. <img src="test.jpg" crossorigin="anonymous">

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

  1. <img src="test.jpg" crossorigin>
loading

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

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

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

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

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

figure，figcaption

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

  1. <figure>
  2.   <img src="https://baidu.com/test.jpg">
  3.   <figcaption>示例图片</figcaption>
  4. </figure>

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

  1. <figure>
  2.   <figcaption>JavaScript 代码示例</figcaption>
  3.   <p><code>const test = 'hello';</code></p>
  4. </figure>

超链接标签a

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

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

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

  1. <a href="https://www.baidu.com/">百度</a>

上面代码就定义了一个超级链接。文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到href属性指定的网址。

标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。

  1. <a href="https://www.baidu.com/">
  2.   <img src="https://www.baidu.com/test.jpg">
  3. </a>

href

href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。

锚点如下:

  1. <a href="#demo">示例</a>
  2. ....
  3. <p id="demo">test</p>

上面代码中，href属性的值是#加上锚点名称。点击后，浏览器会自动滚动，停在当前页面里面id=demo锚点所在的位置。

title

title属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。

  1. <a
  2.   href="https://www.baidu.com/"
  3.   title="hello"
  4. >示例</a>。

用户鼠标停留在链接上面，会出现文字提示hello。

target

target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开。

  1. <p><a href="http://test.com" target="test">test</a></p>
  2. <p><a href="http://bar.com" target="test">bar</a></p>

上面代码中，两个链接都在名叫test的窗口打开。首先点击链接test，浏览器发现没有叫做test的窗口，就新建一个窗口，起名为test，在该窗口打开test.com。然后，用户又点击链接bar，由于已经存在test窗口，浏览器就在该窗口打开bar.com，取代里面已经打开的test.com。

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

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

上面代码点击后，浏览器会新建一个窗口，在该窗口打开链接，并且新窗口没有名字。

使用target属性的时候，最好跟rel="noreferrer"一起使用，这样可以避免安全风险。

rel

rel属性说明链接与当前页面的关系。一般不用此属性

  1. <a href="help.html" rel="help">帮助</a>

上面代码的rel属性，说明链接是当前页面的帮助文档。

下面是一些常见的rel属性的值。

  • alternate：当前文档的另一种形式，比如翻译。
  • author：作者链接。
  • bookmark：用作书签的永久地址。
  • external：当前文档的外部参考文档。
  • help：帮助链接。
  • license：许可证链接。
  • next：系列文档的下一篇。
  • nofollow：告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。
  • noreferrer：告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的Referer字段发送出去，这样可以隐藏点击的来源。
  • noopener：告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了安全性。
  • prev：系列文档的上一篇。
  • search：文档的搜索链接。
  • tag：文档的标签链接。

referrerpolicy

referrerpolicy属性用于精确设定点击链接时，浏览器发送 HTTP 头信息的Referer字段的行为。

该属性可以取下面八个值：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。

其中，no-referrer表示不发送Referer字段，same-origin表示同源时才发送Referer字段，origin表示只发送源信息（协议+域名+端口）。

ping

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

download

download属性表明当前链接用于下载，而不是跳转到另一个 URL。在服务器环境才有效果。

  1. <a href="demo.txt" download>下载</a>

上面代码点击后，会出现下载对话框。

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

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

  1. <a
  2.   href="test.exe"
  3.   download="bar.exe"
  4. >点击下载</a>

上面代码中，下载文件的原始文件名是test.rar。点击后，下载对话框提示的文件名是bar.exe。

如果链接点击后，服务器的 HTTP 回应的头信息设置了Content-Disposition字段，并且该字段的值与download属性不一致，那么该字段优先，下载时将显示其设置的文件名。

download属性还有一个用途，就是有些地址不是真实网址，而是数据网址，比如data:开头的网址。这时，download属性可以为虚拟网址指定下载的文件名。

  1. <a href="data:,Hello%2C%20World!">点击</a>

上面链接点击后，会打开一个虚拟网页，上面显示Hello World!。

  1. <a
  2.   href="data:,Hello%2C%20World!"
  3.   download="hello.txt"
  4. >点击</a>

上面链接点击后，下载的hello.txt文件内容就是“Hello, World!”。

邮件链接

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

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

上面代码中，链接就指向邮件地址。点击后，浏览器会打开一个邮件地址，让你可以向contact@baidu.com发送邮件。

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

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

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

  1. <a
  2.   href="mailto:test@bar.com?cc=test@test.com&subject=The%20subject&body=The%20body"
  3. >发送邮件</a>

上面代码中，邮件链接里面不仅包含了邮箱地址，还包含了cc、subject、body等邮件要素。这些要素的值需要经过 URL 转义，比如空格转成%20。

不指定邮箱也是允许的，就像下面这样。这时用户自己在邮件程序里面，填写想要发送的邮箱，通常用于邮件分享网页。

  1. <a href="mailto:">告诉朋友</a>

电话链接

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

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

上面代码在手机中，点击链接会唤起拨号界面，可以直接拨打指定号码。

0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3