网页包含了大量的文字,浏览器必须知道这些文字的编码方法,才能把文字还原出来。
一般情况下,服务器向浏览器发送 HTML 网页文件时,会通过 HTTP 头信息,声明网页的编码方式。
Content-Type: text/html; charset=UTF-8
HTTP 头信息的Content-Type
字段先声明,服务器发送的数据类型是text/html
(即 HTML 网页),然后声明网页的文字编码是UTF-8
。
网页内部也会再用标签,再次声明网页的编码。
网页可以使用不同语言的编码方式,但是最常用的编码是 UTF-8。UTF-8 编码是 Unicode 字符集的一种表达方式。这个字符集的设计目标是包含世界上的所有字符,目前已经收入了十多万个字符。
每个字符有一个 Unicode 号码,称为码点(code point)。如果知道码点,就能查到这是什么字符。举例来说,英文字母a
的码点是十进制的97
(十六进制的61
),汉字“中”的码点是十进制的20013
(十六进制的4e2d
)。
不是每一个 Unicode 字符都能直接在 HTML 语言里面显示:
(1)不是每个 Unicode 字符都可以打印出来,有些没有可打印形式,比如换行符的码点是十进制的10
(十六进制的A
),就没有对应的字面形式。
(2)小于号(<
)和大于号(>
)用来定义 HTML 标签,其他需要用到这两个符号的场合,必须防止它们被解释成标签。
(3)由于 Unicode 字符太多,无法找到一种输入法,可以直接输入所有这些字符。换言之,没有一种键盘,有办法输入所有符号。
(4)网页不允许混合使用多种编码,如果使用 UTF-8 编码的同时,又想插入其他编码的字符,就会很困难。
HTML 为了解决上面这些问题,允许使用 Unicode 码点表示字符,浏览器会自动将码点转成对应的字符。
hex ——十六进制
bin ——二进制
Oct——八进制
字符的码点表示法是N;
(十进制,N
代表码点)或者N;
(十六进制,N
代表码点),比如,字符a
可以写成a
(十进制)或者a
(十六进制),字符中
可以写成中
(十进制)或者中
(十六进制),浏览器会自动转换它们。
hello
十进制
hello
// html实体编码
十六进制
hello
上面代码中,字符可以直接表示,也可以使用十进制码点或十六进制码点表示。
注意,HTML 标签本身不能使用码点表示,否则浏览器会认为这是所要显示的文本内容,而不是标签。比如,一旦写成
<p>
或者<p>
,浏览器就不再认为这是标签了,而会当作文本内容将其显示为。
数字表示法的不方便之处,在于必须知道每个字符的码点,很难记忆。为了能够快速输入,HTML 为一些特殊字符,规定了容易记忆的名字,允许通过名字来表示它们,这称为实体表示法(entity)。
实体的写法是&name;
,其中的name
是字符的名字。下面是其中一些特殊字符,及其对应的实体。
<
:<
>
:>
"
:"
'
:'
&
:&
©
:©
#
:#
§
:§
¥
:¥
$
:$
£
:£
¢
:¢
%
:%
*
:$ast;
@
:@
^
:^
±
:±
空格:
注意,上面最后一个特殊字符是空格,它也有对应的实体表示法。
字符的数字表示法和实体表示法,都可以表示正常情况无法输入的字符,逃脱了浏览器的限制,所以英语里面称为“escape”,中文翻译为“字符的转义”。
HTML 实体编码
Unlcode
URL 是“统一资源定位符”(Uniform Resource Locator)的首字母缩写,中文译为“网址”,表示各种资源的互联网地址。下面就是一个典型的 URL。
https://www.example.com/path/index.html
所谓资源,可以简单理解成各种可以通过互联网访问的文件,比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL,才能在互联网上获取它们。
只要资源可以通过互联网访问,它就必然有对应的 URL。一个 URL 对应一个资源,但是同一个资源可能对应多个 URL。
URL 是互联网的基础。互联网之所以“互联”,就是因为网页可以通过“链接”(link),包含其他 URL。用户只要点击,就可以从一个 URL 跳转到另一个 URL,前往不同的网站。
https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor
协议(scheme)是浏览器请求服务器资源的方法。
互联网支持多种协议,必须指明网址使用哪一种协议,默认是 HTTP 协议。
HTTPS 是 HTTP 的加密版本,出于安全考虑,越来越多的网站使用这个协议。
HTTP 和 HTTPS 的协议名称后面,紧跟着一个冒号和两个斜杠(://
)。其他协议不一定如此,邮件地址协议mailto:
的协议名后面只有一个冒号,比如mailto:[email protected]
。
主机(host)是资源所在的网站名或服务器的名字,又称为域名。
有些主机没有域名,只有 IP 地址,比如192.168.2.15
。这种情况常常出现在局域网。
dns www.xianoupeng.com 缓存有 直接返回 缓存没有 hosts 没有 找网关内置dns 内置根域 tcp/ip 三次握手
request和response过程中的状态码code
HTTP 状态码由三个十进制数字组成,第一个十进制数字定义了状态码的类型。响应分为五类:信息响应(100–199),成功响应(200–299),重定向(300–399),客户端错误(400–499)和服务器错误 (500–599):
分类 | 分类描述 |
---|---|
1** | 信息,服务器收到请求,需要请求者继续执行操作 |
2** | 成功,操作被成功接收并处理 |
3** | 重定向,需要进一步的操作以完成请求:常见在登录界面:login.html |
4** | 客户端错误,请求包含语法错误或无法完成请求 |
5** | 服务器错误,服务器在处理请求的过程中发生了错误 |
HTTP状态码列表:
状态码 | 状态码英文名称 | 中文描述 |
---|---|---|
100 | Continue | 继续。客户端应继续其请求 |
101 | Switching Protocols | 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议,例如,切换到HTTP的新版本协议 |
200 | OK | 请求成功。一般用于GET与POST请求 |
201 | Created | 已创建。成功请求并创建了新的资源 |
202 | Accepted | 已接受。已经接受请求,但未处理完成 |
203 | Non-Authoritative Information | 非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本 |
204 | No Content | 无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档 |
205 | Reset Content | 重置内容。服务器处理成功,用户终端(例如:浏览器)应重置文档视图。可通过此返回码清除浏览器的表单域 |
206 | Partial Content | 部分内容。服务器成功处理了部分GET请求 |
300 | Multiple Choices | 多种选择。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择 |
301 | Moved Permanently | 永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替 |
302 | Found | 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI |
303 | See Other | 查看其它地址。与301类似。使用GET和POST请求查看 |
304 | Not Modified | 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源 |
305 | Use Proxy | 使用代理。所请求的资源必须通过代理访问 |
306 | Unused | 已经被废弃的HTTP状态码 |
307 | Temporary Redirect | 临时重定向。与302类似。使用GET请求重定向 |
400 | Bad Request | 客户端请求的语法错误,服务器无法理解 |
401 | Unauthorized | 请求要求用户的身份认证 |
402 | Payment Required | 保留,将来使用 |
403 | Forbidden | 服务器理解请求客户端的请求,但是拒绝执行此请求 |
404 | Not Found | 服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面 |
405 | Method Not Allowed | 客户端请求中的方法被禁止 |
406 | Not Acceptable | 服务器无法根据客户端请求的内容特性完成请求 |
407 | Proxy Authentication Required | 请求要求代理的身份认证,与401类似,但请求者应当使用代理进行授权 |
408 | Request Time-out | 服务器等待客户端发送的请求时间过长,超时 |
409 | Conflict | 服务器完成客户端的 PUT 请求时可能返回此代码,服务器处理请求时发生了冲突 |
410 | Gone | 客户端请求的资源已经不存在。410不同于404,如果资源以前有现在被永久删除了可使用410代码,网站设计人员可通过301代码指定资源的新位置 |
411 | Length Required | 服务器无法处理客户端发送的不带Content-Length的请求信息 |
412 | Precondition Failed | 客户端请求信息的先决条件错误 |
413 | Request Entity Too Large | 由于请求的实体过大,服务器无法处理,因此拒绝请求。为防止客户端的连续请求,服务器可能会关闭连接。如果只是服务器暂时无法处理,则会包含一个Retry-After的响应信息 |
414 | Request-URI Too Large | 请求的URI过长(URI通常为网址),服务器无法处理 |
415 | Unsupported Media Type | 服务器无法处理请求附带的媒体格式 |
416 | Requested range not satisfiable | 客户端请求的范围无效 |
417 | Expectation Failed | 服务器无法满足Expect的请求头信息 |
500 | Internal Server Error | 服务器内部错误,无法完成请求 |
501 | Not Implemented | 服务器不支持请求的功能,无法完成请求 |
502 | Bad Gateway | 作为网关或者代理工作的服务器尝试执行请求时,从远程服务器接收到了一个无效的响应 |
503 | Service Unavailable | 由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中 |
504 | Gateway Time-out | 充当网关或代理的服务器,未及时从远端服务器获取请求 |
505 | HTTP Version not supported | 服务器不支持请求的HTTP协议的版本,无法完成处理 |
同一个域名下面可能同时包含多个网站,它们之间通过端口(port)区分。“端口”就是一个整数,可以简单理解成,访问者告诉服务器,想要访问哪一个网站。HTTP 协议的默认端口是80,如果省略了这个参数,服务器就会返回80端口的网站。
端口紧跟在域名后面,两者之间使用冒号分隔,比如www.example.com:80
。
http -------80
https------443
ftp----------20/21
tenlet------23
ssh---------22
DNS--------53
dhcp------67 68
smtp(邮件传输协议)--------25
pop3-------110
lapd--------389
mysql------3306
sqlserver(微软)----1443 语言:c#
oracle--------1521
3389——windows远程操作协议端口
redis------nosql------6379
路径(path)是资源在网站的位置。比如,/path/index.html
这个路径,指向网站的/path
子目录下面的网页文件index.html
。
互联网的早期,路径是真实存在的物理位置。现在由于服务器可以模拟这些位置,所以路径只是虚拟位置。
路径可能只包含目录,不包含文件名,比如/foo/
,甚至结尾的斜杠都可以省略。这时,服务器通常会默认跳转到该目录里面的index.html
文件(即等同于请求/foo/index.html
),但也可能有其他的处理(比如列出目录里面的所有文件),这取决于服务器的设置。一般来说,访问www.example.com
这个网址,很可能返回的是网页文件www.example.com/index.html
。
查询参数(parameter)是提供给服务器的额外信息。参数的位置是在路径后面,两者之间使用?
分隔,上例是?key1=value1&key2=value2
。
查询参数可以有一组或多组。每组参数都是键值对(key-value pair)的形式,同时具有键名(key)和键值(value),它们之间使用等号(=
)连接。比如,key1=value
就是一个键值对,key1
是键名,value1
是键值。
多组参数之间使用&
连接,比如key1=value1&key2=value2
。
锚点(anchor)是网页内部的定位点,使用#
加上锚点名称,放在网址的最后,比如#anchor
。浏览器加载页面以后,会自动滚动到锚点所在的位置。
锚点名称通过网页元素的id
属性命名。
URL 的各个组成部分,只能使用以下这些字符。
26个英语字母(包括大写和小写)
10个阿拉伯数字
连词号(-
)
句点(.
)
下划线(_
)
绕过
此外,还有18个字符属于 URL 的保留字符,只能在给定的位置出现。比如,查询参数的开头是问号(?
),也就是说,问号只能出现查询参数的开头,出现在其他位置就是非法的,会导致网址解析错误。网址的其他部分如果要使用这些保留字符,必须使用它们的转义形式。
URL 字符转义的方法是,在这些字符的十六进制 ASCII 码前面加上百分号(%
)。下面是这18个字符及其转义形式。
!
:%21
#
:%23
$
:%24
&
:%26
'
:%27
(
:%28
)
:%29
*
:%2A
+
:%2B
,
:%2C
/
:%2F
:
:%3A
;
:%3B
=
:%3D
?
:%3F
@
:%40
[
:%5B
]
:%5D
举例来说,有一个网页的 URL 是foo?bar.html
,即文件里面包含一个问号,那么需要写成foo%3Fbar.html
。
URL 的合法字符,其实也可以采用这种转义方法,但是不建议使用。比如,字母a
的十六进制 ASCII 码是61
,转义形式后就是%61
。因此,www.apple.com
又可以写成www.%61pple.com
,浏览器一样识别。
值得注意的是,空格的转义形式是%20
。对于那些包含空格的文件名,这个转义是必须的。
既不属于合法字符、也不属于保留字符的其他字符(比如汉字),理论上不需要手动转义,可以直接写在 URL 里面,比如www.example.com/中国.html
,浏览器会自动将它们转义,发给服务器。转义方法是使用这些字符的十六进制 UTF-8 编码,每两位算作一组,然后每组头部添加百分号(%
)。
举例来说,汉字中
的 UTF-8 十六进制编码是e4b8ad
,每两个字符一组,URL 转义后就为%e4%b8%ad
。也就是说,URL 里面凡是有汉字中
的地方,都要写成%e4%b8%ad
。因此,访问www.example.com/中国.html
这个网址,需要写成下面的样子。
www.example.com/%e4%b8%ad%e5%9b%bd.html
上面代码中,中
的转义形式是%e4%b8%ad
,国
是%e5%9b%bd
。
URL 分成两种:绝对 URL 和相对 URL。
绝对 URL 指的是,只靠 URL 本身就能确定资源的位置。这意味着,URL 必须带有资源的完整信息,包含协议、主机、路径等部分。前面的例子都是绝对 URL。
相对 URL 指的是,URL 不包含资源位置的全部信息,必须结合当前网页的位置,才能定位资源。比如,当前网页的 URL 是https://www.example.com/path/index.html
,该网页上面有一个资源,URL 指向a.html
,这个就是相对 URL。因为只知道a.html
,并不能定位资源。浏览器假定,a.html
与当前网址在同一个子目录下面,从而得到绝对 URL https://www.example.com/path/a.html
。
相对 URL 如果以斜杠(/
)开头,就表示网站的根目录。否则,必须以当前目录为起点,推算资源的位置。比如,相对 URL /foo/bar.html
表示网站根目录的子目录foo
,foo/bar.html
表示在当前目录的foo
子目录。
URL 还可以使用两个特殊简写,表示特定位置。
.
:表示当前目录,比如./a.html
(当前目录下的a.html
文件)
..
:表示上级目录,比如../a.html
(上级目录下的a.html
文件)
这两种简写可以多个连用,比如../../
表示上两级目录。
绝对 URL 也可以使用这两个简写,比如www.example.com/./index.html
等同于www.example.com/index.html
,这时.
相当于根目录的当前目录,即根目录本身。
我们知道,计算机内部,所有信息最终都是一个二进制值。每一个二进制位(bit)有0
和1
两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte)。也就是说,一个字节一共可以用来表示256种不同的状态,每一个状态对应一个符号,就是256个符号,从00000000
到11111111
。
上个世纪60年代,美国制定了一套字符编码,对英语字符与二进制位之间的关系,做了统一规定。这被称为 ASCII 码,一直沿用至今。
ASCII 码一共规定了128个字符的编码,比如空格SPACE
是32(二进制00100000
),大写的字母A
是65(二进制01000001
)。这128个符号(包括32个不能打印出来的控制符号),只占用了一个字节的后面7位,最前面的一位统一规定为0
。
英语用128个符号编码就够了,但是用来表示其他语言,128个符号是不够的。比如,在法语中,字母上方有注音符号,它就无法用 ASCII 码表示。于是,一些欧洲国家就决定,利用字节中闲置的最高位编入新的符号。比如,法语中的é
的编码为130(二进制10000010
)。这样一来,这些欧洲国家使用的编码体系,可以表示最多256个符号。
但是,这里又出现了新的问题。不同的国家有不同的字母,因此,哪怕它们都使用256个符号的编码方式,代表的字母却不一样。比如,130在法语编码中代表了é
,在希伯来语编码中却代表了字母Gimel
(ג
),在俄语编码中又会代表另一个符号。但是不管怎样,所有这些编码方式中,0--127表示的符号是一样的,不一样的只是128--255的这一段。
至于亚洲国家的文字,使用的符号就更多了,汉字就多达10万左右。一个字节只能表示256种符号,肯定是不够的,就必须使用多个字节表达一个符号。比如,简体中文常见的编码方式是 GB2312,使用两个字节表示一个汉字,所以理论上最多可以表示 256 x 256 = 65536 个符号。
正如上一节所说,世界上存在着多种编码方式,同一个二进制数字可以被解释成不同的符号。因此,要想打开一个文本文件,就必须知道它的编码方式,否则用错误的编码方式解读,就会出现乱码。为什么电子邮件常常出现乱码?就是因为发信人和收信人使用的编码方式不一样。
可以想象,如果有一种编码,将世界上所有的符号都纳入其中。每一个符号都给予一个独一无二的编码,那么乱码问题就会消失。这就是 Unicode,就像它的名字都表示的,这是一种所有符号的编码。
Unicode 当然是一个很大的集合,现在的规模可以容纳100多万个符号。每个符号的编码都不一样,比如,U+0639
表示阿拉伯字母Ain
,U+0041
表示英语的大写字母A
,U+4E25
表示汉字严
。具体的符号对应表,可以查询unicode.org,或者专门的汉字对应表。
需要注意的是,Unicode 只是一个符号集,它只规定了符号的二进制代码,却没有规定这个二进制代码应该如何存储。
比如,汉字严
的 Unicode 是十六进制数4E25
,转换成二进制数足足有15位(100111000100101
),也就是说,这个符号的表示至少需要2个字节。表示其他更大的符号,可能需要3个字节或者4个字节,甚至更多。
这里就有两个严重的问题,第一个问题是,如何才能区别 Unicode 和 ASCII ?计算机怎么知道三个字节表示一个符号,而不是分别表示三个符号呢?第二个问题是,我们已经知道,英文字母只用一个字节表示就够了,如果 Unicode 统一规定,每个符号用三个或四个字节表示,那么每个英文字母前都必然有二到三个字节是0
,这对于存储来说是极大的浪费,文本文件的大小会因此大出二三倍,这是无法接受的。
它们造成的结果是:1)出现了 Unicode 的多种存储方式,也就是说有许多种不同的二进制格式,可以用来表示 Unicode。2)Unicode 在很长一段时间内无法推广,直到互联网的出现。
互联网的普及,强烈要求出现一种统一的编码方式。UTF-8 就是在互联网上使用最广的一种 Unicode 的实现方式。其他实现方式还包括 UTF-16(字符用两个字节或四个字节表示)和 UTF-32(字符用四个字节表示),不过在互联网上基本不用。重复一遍,这里的关系是,UTF-8 是 Unicode 的实现方式之一。
UTF-8 最大的一个特点,就是它是一种变长的编码方式。它可以使用1~4个字节表示一个符号,根据不同的符号而变化字节长度。
UTF-8 的编码规则很简单,只有二条:
1)对于单字节的符号,字节的第一位设为0
,后面7位为这个符号的 Unicode 码。因此对于英语字母,UTF-8 编码和 ASCII 码是相同的。
2)对于n
字节的符号(n > 1
),第一个字节的前n
位都设为1
,第n + 1
位设为0
,后面字节的前两位一律设为10
。剩下的没有提及的二进制位,全部为这个符号的 Unicode 码。
下表总结了编码规则,字母x
表示可用编码的位。
Unicode符号范围 | UTF-8编码方式 (十六进制) | (二进制) ----------------------+--------------------------------------------- 0000 0000-0000 007F | 0xxxxxxx 0--127 0000 0080-0000 07FF | 110xxxxx 10xxxxxx 128--2047 0000 0800-0000 FFFF | 1110xxxx 10xxxxxx 10xxxxxx 2048--65535 0001 0000-0010 FFFF | 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
跟据上表,解读 UTF-8 编码非常简单。如果一个字节的第一位是0
,则这个字节单独就是一个字符;如果第一位是1
,则连续有多少个1
,就表示当前字符占用多少个字节。
下面,还是以汉字严
为例,演示如何实现 UTF-8 编码。
中——unicode:20013
严
的 Unicode 是4E25
(100111000100101
),根据上表,可以发现4E25
处在第三行的范围内(0000 0800 - 0000 FFFF
),因此严
的 UTF-8 编码需要三个字节,即格式是1110xxxx 10xxxxxx 10xxxxxx
。然后,从严
的最后一个二进制位开始,依次从后向前填入格式中的x
,多出的位补0
。这样就得到了,严
的 UTF-8 编码是11100100 10111000 10100101
,转换成十六进制就是E4B8A5
。
Document
aaa
bbb
<-- :被编码 -->
ccc
ddd
oupeng body>
编码顺序:html编码------>urlcode编码------->unicode
标签用于插入图片。它是单独使用的,没有闭合标签。
上面代码在网页插入一张图片foo.jpg
。src
属性指定图片的网址,上例是相对 URL,表示图片与网页在同一个目录。
默认是一个行内元素,与前后的文字处在同一行。
HelloWorld
上面代码的渲染结果是,文字和图片在同一行显示。
图像默认以原始大小显示。如果图片很大,又与文字处在同一行,那么图片将把当前行的行高撑高,并且图片的底边与文字的底边在同一条水平线上。
上面代码中,图片可以像链接那样点击,点击后会产生跳转。
表单(form)是用户输入信息与网页互动的一种形式。大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单。
表单由一种或多种的小部件组成,比如输入框、按钮、单选框或复选框。这些小部件称为控件(controls)。
1)
标签用来定义一个表单,所有表单内容放到这个容器元素之中。
有以下属性。
accept-charset
:服务器接受的字符编码列表,使用空格分隔,默认与网页编码相同。
action
:服务器接收数据的 URL。
autocomplete
:如果用户没有填写某个控件,浏览器是否可以自动填写该值。它的可能取值分别为off
(不自动填写)和on
(自动填写)。
method
:提交数据的 HTTP 方法,可能的值有post
(表单数据作为 HTTP 数据体发送),get
(表单数据作为 URL 的查询字符串发送),dialog
(表单位于内部使用)。
enctype
:当method
属性等于post
时,该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded
(默认值),multipart/form-data
(文件上传的情况),text/plain
。
name
:表单的名称,应该在网页中是唯一的。注意,如果一个控件没有设置name
属性,那么这个控件的值就不会作为键值对,向服务器发送。
novalidate
:布尔属性,表单提交时是否取消验证。
target
:在哪个窗口展示服务器返回的数据,可能的值有_self
(当前窗口),_blank
(新建窗口),_parent
(父窗口),_top
(顶层窗口),标签的
name
属性(即表单返回结果展示在窗口)。
type="email"
是一个只能输入电子邮箱的文本输入框。表单提交之前,浏览器会自动验证是否符合电子邮箱的格式,如果不符合就会显示提示,无法提交到服务器。
上面代码会生成一个必填的文本框,只能输入后缀为foobar.com
的邮箱地址。
该类型有一个multiple
的布尔属性,一旦设置,就表示该输入框可以输入多个逗号分隔的电子邮箱。
注意,如果同时设置了multiple
属性和required
属性,零个电子邮箱是允许的,也就是该输入框允许为空。
该类型的配套属性如下。
maxlength
:可以输入的最大字符数。
minlength
:可以输入的最少字符数。
multiple
:布尔属性,是否允许输入多个以逗号分隔的电子邮箱。
pattern
:输入必须匹配的正则表达式。
placeholder
:输入为空时的显示文本。
readonly
:布尔属性,该输入框是否只读。
size
:一个非负整数,表示输入框的显示长度为多少个字符。
spellcheck
:是否对输入内容启用拼写检查,可能的值为true
或false
。
type="tel"
是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同,因此浏览器没有默认的验证模式,大多数时候需要自定义验证。
Format: 123-456-7890
上面代码定义了一个只能输入10位电话号码的输入框。
该类型的配套属性如下。
maxlength
:允许的最大字符数。
minlength
:允许的最少字符串。
pattern
:输入内容必须匹配的正则表达式。
placeholder
:输入为空时显示的示例文本。
readonly
:布尔属性,表示该控件的内容是否只读。
size
:一个非负整数,表示该输入框显示宽度为多少个字符。
4)textarea
是一个块级元素,用来生成多行的文本框。
上面代码会生成一个长度为5行,宽度为33个字符的文本框。
该标签有如下属性。
autofocus
:布尔属性,是否自动获得焦点。
cols
:文本框的宽度,单位为字符,默认值为20。
disabled
:布尔属性,是否禁用该控件。
form
:关联表单的id
属性。
maxlength
:允许输入的最大字符数。如果未指定此值,用户可以输入无限数量的字符。
minlength
:允许输入的最小字符数。
name
:控件的名称。
placeholder
:输入为空时显示的提示文本。
readonly
:布尔属性,控件是否为只读。
required
:布尔属性,控件是否为必填。
rows
:文本框的高度,单位为行。
spellcheck
:是否打开浏览器的拼写检查。可能的值有true
(打开),default
(由父元素或网页设置决定),false
(关闭)。
wrap
:输入的文本是否自动换行。可能的值有hard
(浏览器自动插入换行符CR + LF
,使得每行不超过控件的宽度),soft
(输入内容超过宽度时自动换行,但不会加入新的换行符,并且浏览器保证所有换行符都是CR + LR
,这是默认值),off
(关闭自动换行,单行长度超过宽度时,会出现水平滚动条)。
不能解析script标签
标签用于在网页里面嵌入其他网页。
标签生成一个指定区域,在该区域中嵌入其他网页。它是一个容器元素,如果浏览器不支持
,就会显示内部的子元素。
的属性如下。
allowfullscreen
:允许嵌入的网页全屏显示,需要全屏 API 的支持,请参考相关的 JavaScript 教程。
frameborder
:是否绘制边框,0
为不绘制,1
为绘制(默认值)。建议尽量少用这个属性,而是在 CSS 里面设置样式。
src
:嵌入的网页的 URL。
width
:显示区域的宽度。
height
:显示区域的高度。
sandbox
:设置嵌入的网页的权限,详见下文。
importance
:浏览器下载嵌入的网页的优先级,可以设置三个值。high
表示高优先级,low
表示低优先级,auto
表示由浏览器自行决定。
嵌入的网页默认具有正常权限,比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面,你不了解对方会执行什么操作,因此就存在安全风险。为了限制的风险,HTML 提供了
sandbox
属性,允许设置嵌入的网页的权限,等同于提供了一个隔离层,即“沙箱”。
sandbox
可以当作布尔属性使用,表示打开所有限制。
同源 协议相同 host相同 端口相同
sandbox
属性可以设置具体的值,表示逐项打开限制。未设置某一项,就表示不具有该权限。
allow-forms
:允许提交表单。
allow-modals
:允许提示框,即允许执行window.alert()
等会产生弹出提示框的 JavaScript 方法。
allow-popups
:允许嵌入的网页使用window.open()
方法弹出窗口。
allow-popups-to-escape-sandbox
:允许弹出窗口不受沙箱的限制。
allow-orientation-lock
:允许嵌入的网页用脚本锁定屏幕的方向,即横屏或竖屏。
allow-pointer-lock
:允许嵌入的网页使用 Pointer Lock API,锁定鼠标的移动。
allow-presentation
:允许嵌入的网页使用 Presentation API。
allow-same-origin
:不打开该项限制,将使得所有加载的网页都视为跨域。
allow-scripts
:允许嵌入的网页运行脚本(但不创建弹出窗口)。
allow-storage-access-by-user-activation
:sandbox
属性同时设置了这个值和allow-same-origin
的情况下,允许嵌入的第三方网页通过用户发起
document.requestStorageAccess()
请求,经由 Storage Access API 访问父窗口的 Cookie。
allow-top-navigation
:允许嵌入的网页对顶级窗口进行导航。
allow-top-navigation-by-user-activation
:允许嵌入的网页对顶级窗口进行导航,但必须由用户激活。
allow-downloads-without-user-activation
:允许在没有用户激活的情况下,嵌入的网页启动下载。
注意,不要同时设置allow-scripts
和allow-same-origin
属性,这将使得嵌入的网页可以改变或删除sandbox
属性。
指定的网页会立即加载,有时这不是希望的行为。
滚动进入视口以后再加载,这样会比较节省带宽。
loading
属性可以触发网页的懒加载。该属性可以取以下三个值。
auto
:浏览器的默认行为,与不使用loading
属性效果相同。
lazy
:的懒加载,即将滚动进入视口时开始加载。
eager
:立即加载资源,无论在页面上的位置如何。
上面代码会启用的懒加载。
有一点需要注意,如果是隐藏的,则
loading
属性无效,将会立即加载。只要满足以下任一个条件,Chrome 浏览器就会认为是隐藏的。
的宽度和高度为4像素或更小。
样式设为
display: none
或visibility: hidden
。使用定位坐标为负
X
或负Y
,将