2022-04-15 0 43 web前端社区
列表是一系列排列好的项目,主要分成两类:有序列表和无序列表。
有序列表是每个列表项前面有编号,呈现出顺序,就像下面这样。
1. 列表项 A
2. 列表项 B
3. 列表项 C
无序列表则是列表项前面没有编号,只有一个列表符号,默认是一个圆点。
· 列表项 A
· 列表项 B
· 列表项 C
<ol>
标签是一个有序列表容器(ordered list),会在内部的列表项前面产生数字编号。列表项的顺序有意义时,比如排名,就会采用这个标签。
<ol>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码会在列表项 A、B、C 前面,分别产生1、2、3的编号。
<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
reversed
属性产生倒序的数字列表。
<ol reversed>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,列表项 A、B、C 前面,产生的编号是3、2、1。
start
属性的值是一个整数,表示数字列表的起始编号。
<ol start="5">
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,列表项 A、B、C 前面,产生的编号是5、6、7。
type
属性指定数字编号的样式。目前,浏览器支持以下样式。
a
:小写字母A
:大写字母i
:小写罗马数字I
:大写罗马数字1
:整数(默认值)
<ol type="a">
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,列表项 A、B、C 前面的编号,分别是英文小写字母a、b、c。
注意,即使编号是字母,start
属性也依然使用整数。
<ol type="a" start="3">
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,type
属性指定编号采用小写英文字母,start
属性等于3
,表示从c
开始编号。
<ul>
<ul>
标签是一个无序列表容器(unordered list),会在内部的列表项前面产生实心小圆点,作为列表符号。列表项的顺序无意义时,采用这个标签。
<ul>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
</ul>
上面代码的渲染结果是,列表项 A、B、C 前面,分别产生一个实心小圆点,作为列表符号。
<ul>
标签内部可以嵌套<ul>
或<ol>
,形成多级列表。
<li>
表示列表项,用在<ol>
或<ul>
容器之中。
有序列表<ol>
之中,<li>
有一个value
属性,定义当前列表项的编号,后面列表项会从这个值开始编号。
<ol>
<li>列表项 A</li>
<li value="4">列表项 B</li>
<li>列表项 C</li>
</ol>
上面代码中,value
属性指定第二个列表项的编号是4
,因此三个列表项的编号,分别为1、4、5。
<dl>
标签是一个块级元素,表示一组术语的列表。术语名由<dt>
标签定义,术语解释由<dd>
标签定义。<dl>
常用来定义词汇表。
<dl>
<dt>CPU</dt>
<dd>中央处理器</dd>
<dt>Memory</dt>
<dd>内存</dd>
<dt>Hard Disk</dt>
<dd>硬盘</dd>
</dl>
<dt>
和<dd>
都是块级元素,<dd>
默认会在<dt>
下方缩进显示。上面代码的默认渲染结果如下。
CPU
中央处理器
Memory
内存
Hard Disk
硬盘
多个术语(<dt>
)对应一个解释(<dd>
),或者多个解释(<dd>
)对应一个术语(<dt>
),都是合法的。
<dl>
<dt>A</dt>
<dt>B</dt>
<dd>C</dd>
<dt>D</dt>
<dd>E</dd>
<dd>F</dd>
</dl>
上面代码中,A
和B
有共同的解释C
,而D
有两个解释E
和F
。
标签用于插入图片。它是单独使用的,没有闭合标签。
<img src="test.jpg">
上面代码在网页插入一张图片test.jpg
。src
属性指定图片的网址,上例是相对 URL,表示图片与网页在同一个目录。
默认是一个行内元素,与前后的文字处在同一行。
<p>Hello<img src="test.jpg">World</p>
图像默认以原始大小显示。如果图片很大,又与文字处在同一行,那么图片将把当前行的行高撑高,并且图片的底边与文字的底边在同一条水平线上。
<a href="example.html">
<img src="test.jpg">
</a>
alt
属性用来设定图片的文字说明。图片不显示时(比如下载失败,或用户关闭图片加载),图片的位置上会显示该文本。
<img src="test.jpg" alt="示例图片">
图片默认以原始大小插入网页,width
属性和height
属性可以指定图片显示时的宽度和高度,单位是像素或百分比。
<img src="test.jpg" width="400" height="300">
注意,一旦设置了这两个属性,浏览器会在网页中预先留出这个大小的空间,不管图片有没有加载成功。不过,由于图片的显示大小可以用 CSS 设置,所以不建议使用这两个属性。
一种特殊情况是,width
属性和height
属性只设置了一个,另一个没有设置。这时,浏览器会根据图片的原始大小,自动设置对应比例的图片宽度或高度。如图片大小是 800像素 x 800像素,width
属性设置成200,那么浏览器会自动将height
设成200。
导致的图片加载的 HTTP 请求,默认会带有Referer的头信息。referrerpolicy属性对这个行为进行设置。
有时,图片和网页属于不同的网站,网页加载图片就会导致跨域请求,对方服务器可能要求跨域认证。crossorigin
属性用来告诉浏览器,是否采用跨域的形式下载图片,默认是不采用。
简单说,只要打开了这个属性,HTTP 请求的头信息里面,就会加入origin
字段,给出请求发出的域名,不打开这个属性就不加。
一旦打开该属性,它可以设为两个值。
anonymous
:跨域请求不带有用户凭证(通常是 Cookie)。use-credentials
:跨域请求带有用户凭证。下面是一个例子。
<img src="test.jpg" crossorigin="anonymous">
crossorigin
属性如果省略值的部分,则等同于anonymous
。
<img src="test.jpg" crossorigin>
浏览器的默认行为是,只要解析到<img>
标签,就开始加载图片。对于很长的网页,这样做很浪费带宽,因为用户不一定会往下滚动,一直看到网页结束。用户很可能是点开网页,看了一会就关掉了,那些不在视口的图片加载的流量,就都浪费了。
loading
属性改变了这个行为,可以指定图片的懒加载,即图片默认不加载,只有即将滚动进入视口,变成用户可见时才会加载,这样就节省了带宽。
loading
属性可以取以下三个值。
auto
:浏览器默认行为,等同于不使用loading
属性。lazy
:启用懒加载。eager
:立即加载资源,无论它在页面上的哪个位置。
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
由于行内图片的懒加载,可能会导致页面布局重排,所以使用这个属性的时候,最好指定图片的高和宽。
<figure>
<img src="https://baidu.com/test.jpg">
<figcaption>示例图片</figcaption>
</figure>
除了图像,<figure>
还可以封装引言、代码、诗歌等等。它等于是一个将主体内容与附加信息,封装在一起的语义容器。
<figure>
<figcaption>JavaScript 代码示例</figcaption>
<p><code>const test = 'hello';</code></p>
</figure>
链接(hyperlink)是互联网的核心。它允许用户在页面上,从一个网址跳转到另一个网址,从而把所有资源联系在一起。
URL 是链接指向的地址。链接不仅可以指向另一个网页,也可以指向文本、图像、文件等资源。可以这样说,所有互联网上的资源,都可以通过链接访问。
链接通过<a>
标签表示,用户点击后,浏览器会跳转到指定的网址。下面就是一个典型的链接。
<a href="https://www.baidu.com/">百度</a>
上面代码就定义了一个超级链接。文字下面默认会有下划线,表示这是一个链接。用户点击后,浏览器跳转到href
属性指定的网址。
标签内部不仅可以放置文字,也可以放置其他元素,比如段落、图像、多媒体等等。
<a href="https://www.baidu.com/">
<img src="https://www.baidu.com/test.jpg">
</a>
href
属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。
锚点如下:
<a href="#demo">示例</a>
....
<p id="demo">test</p>
上面代码中,href
属性的值是#
加上锚点名称。点击后,浏览器会自动滚动,停在当前页面里面id=demo
锚点所在的位置。
title
属性给出链接的说明信息。鼠标悬停在链接上方时,浏览器会将这个属性的值,以提示块的形式显示出来。
<a
href="https://www.baidu.com/"
title="hello"
>示例</a>。
用户鼠标停留在链接上面,会出现文字提示hello
。
target
属性指定如何展示打开的链接。它可以是在指定的窗口打开,也可以在<iframe>
里面打开。
<p><a href="http://test.com" target="test">test</a></p>
<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
。
<a
href="https://www.baidu.com"
target="_blank"
>示例链接</a>
上面代码点击后,浏览器会新建一个窗口,在该窗口打开链接,并且新窗口没有名字。
使用
target
属性的时候,最好跟rel="noreferrer"
一起使用,这样可以避免安全风险。
rel
属性说明链接与当前页面的关系。一般不用此属性
<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
属性用于精确设定点击链接时,浏览器发送 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
属性指定一个网址,用户点击的时候,会向该网址发出一个 POST 请求,通常用于跟踪用户的行为。
download
属性表明当前链接用于下载,而不是跳转到另一个 URL。在服务器环境才有效果。
<a href="demo.txt" download>下载</a>
上面代码点击后,会出现下载对话框。
注意,download
属性只在链接与网址同源时,才会生效。也就是说,链接应该与网址属于同一个网站。
如果download
属性设置了值,那么这个值就是下载的文件名。
<a
href="test.exe"
download="bar.exe"
>点击下载</a>
上面代码中,下载文件的原始文件名是test.rar
。点击后,下载对话框提示的文件名是bar.exe
。
如果链接点击后,服务器的 HTTP 回应的头信息设置了
Content-Disposition
字段,并且该字段的值与download
属性不一致,那么该字段优先,下载时将显示其设置的文件名。
download
属性还有一个用途,就是有些地址不是真实网址,而是数据网址,比如data:
开头的网址。这时,download
属性可以为虚拟网址指定下载的文件名。
<a href="data:,Hello%2C%20World!">点击</a>
上面链接点击后,会打开一个虚拟网页,上面显示Hello World!
。
<a
href="data:,Hello%2C%20World!"
download="hello.txt"
>点击</a>
上面链接点击后,下载的hello.txt
文件内容就是“Hello, World!”。
链接也可以指向一个邮件地址,使用mailto
协议。用户点击后,浏览器会打开本机默认的邮件程序,让用户向指定的地址发送邮件。
<a href="mailto:contact@baidu.com">联系我们</a>
上面代码中,链接就指向邮件地址。点击后,浏览器会打开一个邮件地址,让你可以向contact@baidu.com
发送邮件。
除了邮箱,邮件协议还允许指定其他几个邮件要素。
subject
:主题cc
:抄送bcc
:密送body
:邮件内容使用方法是将这些邮件要素,以查询字符串的方式,附加在邮箱地址后面。
<a
href="mailto:test@bar.com?cc=test@test.com&subject=The%20subject&body=The%20body"
>发送邮件</a>
上面代码中,邮件链接里面不仅包含了邮箱地址,还包含了cc
、subject
、body
等邮件要素。这些要素的值需要经过 URL 转义,比如空格转成%20
。
不指定邮箱也是允许的,就像下面这样。这时用户自己在邮件程序里面,填写想要发送的邮箱,通常用于邮件分享网页。
<a href="mailto:">告诉朋友</a>
如果是手机浏览的页面,还可以使用tel
协议,创建电话链接。用户点击该链接,会唤起电话,可以进行拨号。
<a href="tel:13312345678">13312345678</a>
上面代码在手机中,点击链接会唤起拨号界面,可以直接拨打指定号码。
Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3