6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

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

2022-04-15 0 41 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>
  4. <dt>Memory</dt>
  5. <dd>内存</dd>
  6. <dt>Hard Disk</dt>
  7. <dd>硬盘</dd>
  8. </dl>

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

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

多个术语(<dt>)对应一个解释(<dd>),或者多个解释(<dd>)对应一个术语(<dt>),都是合法的。

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

上面代码中,AB有共同的解释C,而D有两个解释EF

图像标签

img

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

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

上面代码在网页插入一张图片test.jpgsrc属性指定图片的网址,上例是相对 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-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-urlsame-originstrict-originstrict-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>

上面代码中,邮件链接里面不仅包含了邮箱地址,还包含了ccsubjectbody等邮件要素。这些要素的值需要经过 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