一、HTML超文本传输语言
1.1URL简介
URL全称统一资源定位符,也叫网址
网址组成部分
协议
协议是浏览器请求服务器资源的方法,比如https://
,标识使用HTTPS协议。互联网支持多种协议,但是默认是HTTP协议。而HTTP和HTTPS协议后跟着(://)
。其他协议不一定,比如邮件协议mailto:的后面就是:
。
主机
主机(host)是资源所在的网站名或服务器的名字,又称域名。比如www.baodiu.com。还有些主机没有域名,只有IP地址
端口
同一个域名下面的多个网站通过端口(port)区分,端口紧跟在域名后面比如www.sznoo.com:44。
常用端口
1-65535 端口号范围
ftp 20 21
25 smtp 邮件
53 DNS
67 68 dhcp dhcp 1 discover br 2 offer 3 request 4 ack 5 arp 3次 免费arp
80 http
110 pop3邮局协议
445 共享协议 ms17-010 永恒之蓝 win7
389 ldap 域控制器 Active director ldap 注入
1433 sqlserver
1521 oracle
3306 mysql 关系型
3389 windows远程登陆
6379 redis 非关系型 select 70% update insert delete 30%
路径
路径(path)是资源的网站的位置。比如/path/index.html。
查询参数
查询参数(parameter)是提供给服务器的额外信息。参数位置在路径后面,以?分割,比如/html/index,html/?key=11&pd=213。
锚点
锚点(anchor)是网页内部的定位点,使用#加上锚点名称,比如#anchor。浏览器加载之后,会自动滚动到锚点所在的位置
URL字符
URL字符转义是在这些字符的十六进制ASCII码前加上百分号。
!
:%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
。
1.2 网页元素属性
id
id
属性是元素在网页内的唯一标识符
id
属性的值可以和URL的锚点一起使用,比如,用户访问网址https://foo.com/index.html#bar的时候,浏览器会自动将页面滚动到bar
的位置。
class
class
属性用来对网页元素进行分类。如果不同元素的class
属性值相同,就表示它们是一类的。
元素可以同时具有多个 class,它们之间使用空格分隔。
lang,dir
lang
属性指定网页元素使用的语言。
1.3 字符编码
简介
服务器向浏览器发送 HTML 网页文件时,会通过 HTTP 头信息,声明网页的编码方式。
http Content-Type: text/html; charset=UTF-8
上面代码中,HTTP 头信息的Content-Type
字段先声明,服务器发送的数据类型是text/html
,然后声明网页的文字编码是UTF-8
。
字符的数字表示法
字符的码点表示法是&#N;
(十进制,N
代表码点)或者&#xN;
(十六进制,N
代表码点),比如,字符a
可以写成a
(十进制)或者a
(十六进制),字符中
可以写成中
(十进制)或者中
(十六进制),浏览器会自动转换它们。
HTML 标签本身不能使用码点表示,否则浏览器会认为这是所要显示的文本内容,而不是标签。比如,<p>
一旦写成<p>
或者<p>
,浏览器就不再认为这是标签了,而会当作文本内容将其显示为<p>
。
字符的实体表示法
实体的写法是&name;
,其中的name
是字符的名字。下面是其中一些特殊字符,及其对应的实体。
<
:<
>
:`>"
:"
'
:'
&
:&
©
:©
#
:#
§
:§
¥
:¥
$
:$
£
:£
¢
:¢
%
:%
*
:$ast;
@
:@
^
:^
±
:±
- 空格:
表单标签
表单(form)是用户输入信息与网页互动的一种形式。大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单。
表单由一种或多种的小部件组成,比如输入框、按钮、单选框或复选框。这些小部件称为控件(controls)。
<form>
简介
<form>
标签用来定义一个表单,所有表单内容放到这个容器元素之中。
<form>
<!-- 各种表单控件-->
</form>
上面代码就是表单的基本形式。
下面是一个比较常见的例子。
<form action="https://example.com/api" method="post">
<label for="POST-name">用户名:</label>
<input id="POST-name" type="text" name="user">
<input type="submit" value="提交">
</form>
上面代码就是一个表单,一共包含三个控件:一个<label>
标签,一个文本输入框,一个提交按钮。其中,文本输入框的name
属性是user
,表示将向服务器发送一个键名为user
的键值对,键值就是这个控件的value
属性,等于用户输入的值。
用户在文本输入框里面,输入用户名,比如foobar
,然后点击提交按钮,浏览器就会向服务器https://example.com/api
发送一个 POST 请求,发送user=foobar
这样一段数据。
<form>
有以下属性。
accept-charset
:服务器接受的字符编码列表,使用空格分隔,默认与网页编码相同。action
:服务器接收数据的 URL。autocomplete
:如果用户没有填写某个控件,浏览器是否可以自动填写该值。它的可能取值分别为off
(不自动填写)和on
(自动填写)。method
:提交数据的 HTTP 方法,可能的值有post
(表单数据作为 HTTP 数据体发送),get
(表单数据作为 URL 的查询字符串发送),dialog
(表单位于<dialog>
内部使用)。enctype
:当method
属性等于post
时,该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded
(默认值),multipart/form-data
(文件上传的情况),text/plain
。name
:表单的名称,应该在网页中是唯一的。注意,如果一个控件没有设置name
属性,那么这个控件的值就不会作为键值对,向服务器发送。novalidate
:布尔属性,表单提交时是否取消验证。target
:在哪个窗口展示服务器返回的数据,可能的值有_self
(当前窗口),_blank
(新建窗口),_parent
(父窗口),_top
(顶层窗口),<iframe>
标签的name
属性(即表单返回结果展示在<iframe>
窗口)。
enctype 属性
<form>
表单的enctype
属性,指定了采用 POST 方法提交数据时,浏览器给出的数据的 MIME 类型。该属性可以取以下值。
(1)application/x-www-form-urlencoded
application/x-www-form-urlencoded
是默认类型,控件名和控件值都要转义(空格转为+
号,非数字和非字母转为%HH
的形式,换行转为CR LF),控件名和控件值之间用=
分隔。控件按照出现顺序排列,控件之间用&
分隔。
(2)multipart/form-data
multipart/form-data
主要用于文件上传。这个类型上传大文件时,会将文件分成多块传送,每一块的 HTTP 头信息都有Content-Disposition
属性,值为form-data
,以及一个name
属性,值为控件名。
Content-Disposition: form-data; name="mycontrol"
下面是上传文件的表单。
<form action="https://example.com/api"
enctype="multipart/form-data"
method="post">
用户名:<input type="text" name="submit-name"><br>
文件:<input type="file" name="files"><br>
<input type="submit" value="上传"> <input type="reset" value="清除">
</form>
上面代码中,输入用户名Larry
,选中一个file1.txt
文件,然后点击“上传”。浏览器发送的实际数据如下。
Content-Type: multipart/form-data; boundary=--AaB03x
--AaB03x
Content-Disposition: form-data; name="submit-name"
Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain
... contents of file1.txt ...
--AaB03x--
上面代码中,浏览器将这个表单发成多个数据块。最上面使用Content-Type
字段告诉服务器,数据格式是multipart/form-data
(即多个数据块),每个数据块的分隔标志是--AaB03x
。每个数据块的第一行是Content-Disposition
,其中的name
字段表示这个数据块的控件名,数据体则是该控件的数据值,比如第一个数据块的name
属性是submit-name
控件,数据体是该控件的值Larry
。第二个数据块是控件files
,由于该控件是上传文件,所以还要用filename
属性给出文件名file1.txt
,数据体是file1.txt
的内容。
<fieldset>
,<legend>
<fieldset>
标签是一个块级容器标签,表示控件的集合,用于将一组相关控件组合成一组。
<form>
<fieldset>
<p>年龄:<input type="text" name="age"></p>
<p>性别:<input type="text" name="gender"></p>
</fieldset>
</form>
上面代码中,两个输入框是一组,它们的外面会显示一个方框。
<fieldset>
有以下属性。
disabled
:布尔属性,一旦设置会使得<fieldset>
内部包含的控件都不可用,都变成灰色状态。form
:指定控件组所属的<form>
,它的值等于<form>
的id
属性。name
:该控件组的名称。
<legend>
标签用来设置<fieldset>
控件组的标题,通常是<fieldset>
内部的第一个元素,会嵌入显示在控件组的上边框里面。
<fieldset>
<legend>学生情况登记</legend>
<p>年龄:<input type="text" name="age"></p>
<p>性别:<input type="text" name="gender"></p>
</fieldset>
上面代码中,这个控件组的标题会,嵌入显示在<fieldset>
的上边框。
<label>
<label>
标签是一个行内元素,提供控件的文字说明,帮助用户理解控件的目的。
<label for="user">用户名:</label>
<input type="text" name="user" id="user">
上面代码中,输入框前面会有文字说明“用户名:”。
<label>
的一大优势是增加了控件的可用性。有些控件比较小(比如单选框),不容易点击,那么点击对应的<label>
标签,也能选中该控件。点击<label>
,就相当于控件本身的click
事件。
<label>
的for
属性关联相对应的控件,它的值是对应控件的id
属性。所以,控件最好设置id
属性。
控件也可以放在<label>
之中,这时不需要for
属性和id
属性。
<label>用户名:
<input type="text" name="user">
</label>
<label>
的属性如下。
for
:关联控件的id
属性。form
:关联表单的id
属性。设置了该属性后,<label>
可以放置在页面的任何位置,否则只能放在<form>
内部。
一个控件可以有多个关联的<label>
标签。
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>
上面代码中,<input>
有两个关联的<label>
。
<input>
<input>
标签是一个行内元素,用来接收用户的输入。它是一个单独使用的标签,没有结束标志。
它有多种类型,取决于type
属性的值,默认值是text
,表示一个输入框。
<input>
<!-- 等同于 -->
<input type="text">
上面代码会生成一个单行的输入框,用户可以在里面输入文本。
<input>
的属性非常多,有些属性是某个类型专用的,放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。
autofocus
:布尔属性,是否在页面加载时自动获得焦点。disabled
:布尔属性,是否禁用该控件。一旦设置,该控件将变灰,用户可以看到,但是无法操作。form
:关联表单的id
属性。设置了该属性后,控件可以放置在页面的任何位置,否则只能放在<form>
内部。list
:关联的<datalist>
的id
属性,设置该控件相关的数据列表,详见后文。name
:控件的名称,主要用于向服务器提交数据时,控件键值对的键名。注意,只有设置了name
属性的控件,才会向服务器提交,不设置就不会提交。readonly
:布尔属性,是否为只读。required
:布尔属性,是否为必填。type
:控件类型,详见下文。value
:控件的值。
类型
type
属性决定了<input>
的形式。该属性可以取以下值。
(1)text
type="text"
是普通的文本输入框,用来输入单行文本。如果用户输入换行符,换行符会自动从输入中删除。
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
text
输入框有以下配套属性。
maxlength
:可以输入的最大字符数,值为一个非负整数。minlength
:可以输入的最小字符数,值为一个非负整数,且必须小于maxlength
。pattern
:用户输入必须匹配的正则表达式,比如要求用户输入4个~8个英文字符,可以写成pattern="[a-z]{4,8}"
。如果用户输入不符合要求,浏览器会弹出提示,不会提交表单。placeholder
:输入字段为空时,用于提示的示例值。只要用户没有任何字符,该提示就会出现,否则会消失。readonly
:布尔属性,表示该输入框是只读的,用户只能看,不能输入。size
:表示输入框的显示长度有多少个字符宽,它的值是一个正整数,默认等于20。超过这个数字的字符,必须移动光标才能看到。spellcheck
:是否对用户输入启用拼写检查,可能的值为true
或false
。
(2)search
type="search"
是一个用于搜索的文本输入框,基本等同于type="text"
。某些浏览器会在输入的时候,在输入框的尾部显示一个删除按钮,点击就会删除所有输入,让用户从头开始输入。
下面是一个例子。
<form>
<input type="search" id="mySearch" name="q"
placeholder="输入搜索词……" required>
<input type="submit" value="搜索">
</form>
(3)button
type="button"
是没有默认行为的按钮,通常脚本指定click
事件的监听函数来使用。
<input type="button" value="点击">
建议尽量不使用这个类型,而使用<button>
标签代替,一则语义更清晰,二则<button>
标签内部可以插入图片或其他 HTML 代码。
(4)submit
type="submit"
是表单的提交按钮。用户点击这个按钮,就会把表单提交给服务器。
<input type="submit" value="提交">
如果不指定value
属性,浏览器会在提交按钮上显示默认的文字,通常是Submit
。
该类型有以下配套属性,用来覆盖<form>
标签的相应设置。
formaction
:提交表单数据的服务器 URL。formenctype
:表单数据的编码类型。formmethod
:提交表单使用的 HTTP 方法(get
或post
)。formnovalidate
:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。formtarget
:收到服务器返回的数据后,在哪一个窗口显示。
(5)image
type="image"
表示将一个图像文件作为提交按钮,行为和用法与type="submit"
完全一致。
<input type="image" alt="登陆" src="login-button.png">
上面代码中,图像文件是一个可以点击的按钮,点击后会提交数据到服务器。
该类型有以下配套属性。
alt
:图像无法加载时显示的替代字符串。src
:加载的图像 URL。height
:图像的显示高度,单位为像素。width
:图像的显示宽度,单位为像素。formaction
:提交表单数据的服务器 URL。formenctype
:表单数据的编码类型。formmethod
:提交表单使用的 HTTP 方法(get
或post
)。formnovalidate
:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。formtarget
:收到服务器返回的数据后,在哪一个窗口显示。
用户点击图像按钮提交时,会额外提交两个参数x
和y
到服务器,表示鼠标的点击位置,比如x=52&y=55
。x
是横坐标,y
是纵坐标,都以图像左上角作为原点(0, 0)
。如果图像按钮设置了name
属性,比如name="position"
,那么将以该值作为坐标的前缀,比如position.x=52&position.y=55
。这个功能通常用来地图类型的操作,让服务器知道用户点击了地图的哪个部分。
(6)reset
type="reset"
是一个重置按钮,用户点击以后,所有表格控件重置为初始值。
<input type="reset" value="重置">
如果不设置value
属性,浏览器会在按钮上面加上默认文字,通常是Reset
。
这个控件用处不大,用户点错了还会使得所有已经输入的值都被重置,建议不要使用。
(7)checkbox
type="checkbox"
是复选框,允许选择或取消选择该选项。
<input type="checkbox" id="agreement" name="agreement" checked>
<label for="agreement">是否同意</label>
上面代码会在文字前面,显示一个可以点击的选择框,点击可以选中,再次点击可以取消。上面代码中,checked
属性表示默认选中。
value
属性的默认值是on
。也就是说,如果没有设置value
属性,以上例来说,选中复选框时,会提交agreement=on
。如果没有选中,提交时不会有该项。
多个相关的复选框,可以放在<fieldset>
里面。
<fieldset>
<legend>你的兴趣</legend>
<div>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">编码</label>
</div>
<div>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">音乐</label>
</div>
</fieldset>
上面代码中,如果用户同时选中两个复选框,提交的时候就会有两个name
属性,比如interest=coding&interest=music
。
(8)radio
type="radio"
是单选框,表示一组选择之中,只能选中一项。单选框通常为一个小圆圈,选中时会被填充或突出显示。
<fieldset>
<legend>性别</legend>
<div>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
</div>
<div>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</div>
</fieldset>
上面代码中,性别只能在两个选项之中,选择一项。
注意,多个单选框的name
属性的值,应该都是一致的。提交到服务器的就是选中的那个值。
该类型的配套属性如下。
checked
:布尔属性,表示是否默认选中当前项。value
:用户选中该项时,提交到服务器的值,默认为on
。
(9)email
type="email"
是一个只能输入电子邮箱的文本输入框。表单提交之前,浏览器会自动验证是否符合电子邮箱的格式,如果不符合就会显示提示,无法提交到服务器。
<input type="email" pattern=".+@foobar.com" size="30" required>
上面代码会生成一个必填的文本框,只能输入后缀为foobar.com
的邮箱地址。
该类型有一个multiple
的布尔属性,一旦设置,就表示该输入框可以输入多个逗号分隔的电子邮箱。
<input id="emailAddress" type="email" multiple required>
注意,如果同时设置了multiple
属性和required
属性,零个电子邮箱是允许的,也就是该输入框允许为空。
该类型的配套属性如下。
maxlength
:可以输入的最大字符数。minlength
:可以输入的最少字符数。multiple
:布尔属性,是否允许输入多个以逗号分隔的电子邮箱。pattern
:输入必须匹配的正则表达式。placeholder
:输入为空时的显示文本。readonly
:布尔属性,该输入框是否只读。size
:一个非负整数,表示输入框的显示长度为多少个字符。spellcheck
:是否对输入内容启用拼写检查,可能的值为true
或false
。
该类型还可以搭配<datalist>
标签,提供输入的备选项。
<input type="email" size="40" list="defaultEmails">
<datalist id="defaultEmails">
<option value="jbond007@mi6.defence.gov.uk">
<option value="jbourne@unknown.net">
<option value="nfury@shield.org">
<option value="tony@starkindustries.com">
<option value="hulk@grrrrrrrr.arg">
</datalist>
上面代码中,输入焦点进入输入框以后,会显示一个下拉列表,里面有五个参考项,供用户参考。
(10)password
type="password"
是一个密码输入框。用户的输入会被遮挡,字符通常显示星号(*
)或点(·
)。
<input type="password" id="pass" name="password"
minlength="8" required>
浏览器对该类型输入框的显示,会有所差异。一种常见的处理方法是,用户每输入一个字符,先在输入框里面显示一秒钟,然后再遮挡该字符。
如果用户输入内容包含换行符(U+000A
)和回车符(U+000D
),浏览器会自动将这两个字符过滤掉。
该类型的配套属性如下。
maxlength
:可以输入的最大字符数。minlength
:可以输入的最少字符数。pattern
:输入必须匹配的正则表达式。placeholder
:输入为空时的显示文本。readonly
:布尔属性,该输入框是否只读。size
:一个非负整数,表示输入框的显示长度为多少个字符。autocomplete
:是否允许自动填充,可能的值有on
(允许自动填充)、off
(不允许自动填充)、current-password
(填入当前网站保存的密码)、new-password
(自动生成一个随机密码)。inputmode
:允许用户输入的数据类型,可能的值有none
(不使用系统输入法)、text
(标准文本输入)、decimal
(数字,包含小数)、numeric
(数字0-9)等。
(11)file
type="file"
是一个文件选择框,允许用户选择一个或多个文件,常用于文件上传功能。
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg">
该类型有以下属性。
accept
:允许选择的文件类型,使用逗号分隔,可以使用 MIME 类型(比如image/jpeg
),也可以使用后缀名(比如.doc
),还可以使用audio/*
(任何音频文件)、video/*
(任何视频文件)、image/*
(任何图像文件)等表示法。capture
:用于捕获图像或视频数据的源,可能的值有user
(面向用户的摄像头或麦克风),environment
(外接的摄像头或麦克风)。multiple
:布尔属性,是否允许用户选择多个文件。
(12)hidden
type="hidden"
是一个不显示在页面的控件,用户无法输入它的值,主要用来向服务器传递一些隐藏信息。比如,CSRF 攻击会伪造表单数据,那么使用这个控件,可以为每个表单生成一个独一无二的隐藏编号,防止伪造表单提交。
<input id="prodId" name="prodId" type="hidden" value="xm234jq">
上面这个控件,页面上是看不见的。用户提交表单的时候,浏览器会将prodId=xm234jq
发给服务器。
(13)number
type="number"
是一个数字输入框,只能输入数字。浏览器通常会在输入框的最右侧,显示一个可以点击的上下箭头,点击向上箭头,数字会递增,点击向下箭头,数字会递减。
<input type="number" id="tentacles" name="tentacles"
min="10" max="100">
上面代码指定数字输入框,最小可以输入10,最大可以输入100。
该类型可以接受任何数值,包括小数和整数。可以通过step
属性,限定只接受整数。
该类型有以下配套属性。
max
:允许输入的最大数值。min
:允许输入的最小数值。placeholder
:用户输入为空时,显示的示例值。readonly
:布尔属性,表示该控件是否为只读。step
:点击向上和向下箭头时,数值每次递减的步长值。如果用户输入的值,不符合步长值的设定,浏览器会自动四舍五入到最近似的值。默认的步长值是1
,如果初始的value
属性设为1.5
,那么点击向上箭头得到2.5
,点击向下箭头得到0.5
。
(14)range
type="range"
是一个滑块,用户拖动滑块,选择给定范围之中的一个数值。因为拖动产生的值是不精确的,如果需要精确数值,不建议使用这个控件。常见的例子是调节音量。
<input type="range" id="start" name="volume"
min="0" max="11">
上面代码会产生一个最小值为0
、最大值为11
的滑块区域。用户拖动滑块,选择想要的音量。
该类型的配套属性如下,用法与type="number"
一致。
max
:允许的最大值,默认为100。min
:允许的最小值,默认为0。step
:步长值,默认为1。
value
属性的初始值就是滑块的默认位置。如果没有设置value
属性,滑块默认就会停在最大值和最小值中间。如果max
属性、min
属性、value
属性都没有设置,那么value
属性为50。
该类型与<datalist>
标签配合使用,可以在滑动区域产生刻度。
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="0" label="0%">
<option value="10">
<option value="20">
<option value="30">
<option value="40">
<option value="50" label="50%">
<option value="60">
<option value="70">
<option value="80">
<option value="90">
<option value="100" label="100%">
</datalist>
上面代码会在0~100之间产生11个刻度。其中,0%
、50%
和100%
三个位置会有文字提示,不过浏览器很可能不支持。
注意,浏览器生成的都是水平滑块。如果想要生成垂直滑块,可以使用 CSS 改变滑块区域的方向。
(15)url
type="url"
是一个只能输入网址的文本框。提交表单之前,浏览器会自动检查网址格式是否正确,如果不正确,就会无法提交。
<input type="url" name="url" id="url"
placeholder="https://example.com"
pattern="https://.*" size="30"
required>
上面代码的pattern
属性指定输入的网址只能使用 HTTPS 协议。
注意,该类型规定,不带有协议的网址是无效的,比如foo.com
是无效的,http://foo.com
是有效的。
该类型的配套属性如下。
maxlength
:允许的最大字符数。minlength
:允许的最少字符串。pattern
:输入内容必须匹配的正则表达式。placeholder
:输入为空时显示的示例文本。readonly
:布尔属性,表示该控件的内容是否只读。size
:一个非负整数,表示该输入框显示宽度为多少个字符。spellcheck
:是否启动拼写检查,可能的值为true
(启用)和false
(不启用)。
该类型与<datalist>
标签搭配使用,可以形成下拉列表供用户选择。随着用户不断键入,会缩小显示范围,只显示匹配的备选项。
<input id="myURL" name="myURL" type="url"
list="defaultURLs">
<datalist id="defaultURLs">
<option value="https://developer.mozilla.org/" label="MDN Web Docs">
<option value="http://www.google.com/" label="Google">
<option value="http://www.microsoft.com/" label="Microsoft">
<option value="https://www.mozilla.org/" label="Mozilla">
<option value="http://w3.org/" label="W3C">
</datalist>
上面代码中,<option>
的label
属性表示文本标签,显示在备选下拉框的右侧,网址显示在左侧。
(16)tel
type="tel"
是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同,因此浏览器没有默认的验证模式,大多数时候需要自定义验证。
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<small>Format: 123-456-7890</small>
上面代码定义了一个只能输入10位电话号码的输入框。
该类型的配套属性如下。
maxlength
:允许的最大字符数。minlength
:允许的最少字符串。pattern
:输入内容必须匹配的正则表达式。placeholder
:输入为空时显示的示例文本。readonly
:布尔属性,表示该控件的内容是否只读。size
:一个非负整数,表示该输入框显示宽度为多少个字符。
(17)color
type="color"
是一个选择颜色的控件,它的值一律都是#rrggbb
格式。
<input type="color" id="background" name="background"
value="#e66465">
上面代码在 Chrome 浏览器中,会显示一个#e66465
的色块。点击色块,就会出现一个拾色器,供用户选择颜色。
如果没有指定value
属性的初始值,默认值为#000000
(黑色)。
(18)date
type="date"
是一个只能输入日期的输入框,用户可以输入年月日,但是不能输入时分秒。输入格式是YYYY-MM-DD
。
<input type="date" id="start" name="start"
value="2018-07-22"
min="2018-01-01" max="2018-12-31">
上面代码会显示一个输入框,默认日期是2018年7月22日。用户点击以后,会日期选择器,供用户选择新的日期。
该类型有以下配套属性。
max
:可以允许的最晚日期,格式为yyyy-MM-dd
。min
:可以允许的最早日期,格式为yyyy-MM-dd
。step
:步长值,一个数字,以天为单位。
(19)time
type="time"
是一个只能输入时间的输入框,可以输入时分秒,不能输入年月日。日期格式是24小时制的hh:mm
,如果包括秒数,格式则是hh:mm:ss
。日期选择器的形式则随浏览器不同而不同。
<input type="time" id="appt" name="appt"
min="9:00" max="18:00" required>
<small>营业时间上午9点到下午6点</small>
该类型有以下配套属性。
max
:允许的最晚时间。min
:允许的最早时间。readonly
:布尔属性,表示用户是否不可以编辑时间。step
:步长值,单位为秒。
<input id="appt" type="time" name="appt" step="2">
上面代码中,调节控件的话,时间每次改变的幅度是2秒钟。
(20)month
type="month"
是一个只能输入年份和月份的输入框,格式为YYYY-MM
。
<input type="month" id="start" name="start"
min="2018-03" value="2018-05">
该类型有以下配套属性。
max
:允许的最晚时间,格式为yyyy-MM
。min
:允许的最早时间,格式为yyyy-MM
。readonly
:布尔属性,表示用户是否不可以编辑时间。step
:步长值,单位为月。
(21)week
type="week"
是一个输入一年中第几周的输入框。格式为yyyy-Www
,比如2018-W18
表示2018年第18周。
<input type="week" name="week" id="camp-week"
min="2018-W18" max="2018-W26" required>
该类型有以下配套属性。
max
:允许的最晚时间,格式为yyyy-Www
。min
:允许的最早时间,格式为yyyy-Www
。readonly
:布尔属性,表示用户是否不可以编辑时间。step
:步长值,单位为周。
(22)datetime-local
type="datetime-local"
是一个时间输入框,让用户输入年月日和时分,格式为yyyy-MM-ddThh:mm
。注意,该控件不支持秒。
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
该类型有以下配套属性。
max
:允许的最晚时间,格式为yyyy-MM-ddThh:mm
。min
:允许的最早时间,格式为yyyy-MM-ddThh:mm
。step
:步长值,单位为秒,默认值是60。
<button>
<button>
标签会生成一个可以点击的按钮,没有默认行为,通常需要用type
属性或脚本指定按钮的功能。
<button>点击</button>
上面代码会产生一个按钮,上面的文字就是“点击”。
<button>
内部不仅放置文字,还可以放置图像,这可以形成图像按钮。
<button name="search" type="submit">
<img src="search.gif">搜索
</button>
<button>
具有以下属性。
autofocus
:布尔属性,表示网页加载时,焦点就在这个按钮。网页里面只能有一个元素,具有这个属性。disabled
:布尔属性,表示按钮不可用,会导致按钮变灰,不可点击。name
:按钮的名称(与value
属性配合使用),将以name=value
的形式,随表单一起提交到服务器。value
:按钮的值(与name
属性配合使用),将以name=value
的形式,随表单一起提交到服务器。type
:按钮的类型,可能的值有三种:submit
(点击后将数据提交给服务器),reset
(将所有控件的值重置为初始值),button
(没有默认行为,由脚本指定按钮的行为)。form
:指定按钮关联的<form>
表单,值为<form>
的id
属性。如果省略该属性,默认关联按钮所在父表单。formaction
:数据提交到服务器的目标 URL,会覆盖<form>
元素的action
属性。formenctype
:数据提交到服务器的编码方式,会覆盖<form>
元素的enctype
属性。可能的值有三种:application/x-www-form-urlencoded
(默认值),multipart/form-data
(只用于文件上传),text/plain
。formmethod
:数据提交到服务器使用的 HTTP 方法,会覆盖<form>
元素的method
属性,可能的值为post
或get
。formnovalidate
:布尔属性,数据提交到服务器时关闭本地验证,会覆盖<form>
元素的novalidate
属性。formtarget
:数据提交到服务器后,展示服务器返回数据的窗口,会覆盖<form>
元素的target
属性。可能的值有_self
(当前窗口),_blank
(新的空窗口)、_parent
(父窗口)、_top
(顶层窗口)。
<select>
<select>
标签用于生成一个下拉菜单。
<label for="pet-select">宠物:</label>
<select id="pet-select" name="pet-select">
<option value="">--请选择一项--</option>
<option value="dog">狗</option>
<option value="cat">猫</option>
<option value="others">其他</option>
</select>
上面代码中,<select>
生成一个下拉菜单,菜单标题是“–请选择一项–”,最右侧有一个下拉箭头。点击下拉箭头,会显示三个菜单项,供用户点击选择。
下拉菜单的菜单项由<option>
标签给出,每个<option>
代表可以选择的一个值。选中的<option>
的value
属性,就是<select>
控件发送的服务器的值。
<option>
有一个布尔属性selected
,一旦设置,就表示该项是默认选中的菜单项。
<select name="choice">
<option value="first">First Value</option>
<option value="second" selected>Second Value</option>
<option value="third">Third Value</option>
</select>
上面代码中,第二项Second Value
是默认选中的。页面加载的时候,会直接显示在下拉菜单上。
<select>
有如下属性。
autofocus
:布尔属性,页面加载时是否自动获得焦点。disabled
:布尔属性,是否禁用当前控件。form
:关联表单的id
属性。multiple
:布尔属性,是否可以选择多个菜单项。默认情况下,只能选择一项。一旦设置,多数浏览器会显示一个滚动列表框。用户可能需要按住Shift
或其他功能键,选中多项。name
:控件名。required
:布尔属性,是否为必填控件。size
:设置了multiple
属性时,页面显示时一次可见的行数,其他行需要滚动查看。
<option>
,<optgroup>
<option>
标签用在<select>
、<optgroup>
、<datalist>
里面,表示一个菜单项,参见<select>
的示例。
它有如下属性。
disabled
:布尔属性,是否禁用该项。label
:该项的说明。如果省略,则等于该项的文本内容。selected
:布尔属性,是否为默认值。显然,一组菜单中,只能有一个菜单项设置该属性。value
:该项提交到服务器的值。如果省略,则等于该项的文本内容。
<optgroup>
表示菜单项的分组,通常用在<select>
内部。
<label>宠物:
<select name="pets" multiple size="4">
<optgroup label="四条腿的宠物">
<option value="dog">狗</option>
<option value="cat">猫</option>
</optgroup>
<optgroup label="鸟类">
<option value="parrot">鹦鹉</option>
<option value="thrush">画眉</option>
</optgroup>
</select>
</label>
上面代码中,<select>
是一个下拉菜单,它的内部使用<optgroup>
将菜单项分成两组。每组有自己的标题,会加粗显示,但是用户无法选中。
它的属性如下。
disabled
:布尔设置,是否禁用该组。一旦设置,该组所有的菜单项都不可选。label
:菜单项分组的标题。
<datalist>
<datalist>
标签是一个容器标签,用于为指定控件提供一组相关数据,通常用于生成输入提示。它的内部使用<option>
,生成每个菜单项。
<label for="ice-cream-choice">冰淇淋:</label>
<input type="text" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">
<datalist id="ice-cream-flavors">
<option value="巧克力">
<option value="椰子">
<option value="薄荷">
<option value="草莓">
<option value="香草">
</datalist>
上面代码中,<input>
生成一个文本输入框,用户可以输入文本。<input>
的list
属性指定关联的<datalist>
的id
属性。<datalist>
的数据列表用于输入建议,用户点击输入框的时候,会显示一个下拉菜单,里面是建议的输入项。并且还会自动匹配用户已经输入的字符,缩小可选的范围,比如用户输入“香”,则只会显示“香草”这一项。
注意,<option>
在这里可以不需要闭合标签。
<option>
标签还可以加入label
属性,作为说明文字。Chrome 浏览器会将其显示在value
的下一行。
<datalist id="ide">
<option value="Brackets" label="by Adobe">
<option value="Coda" label="by Panic">
</datalist>
上面代码的渲染结果是,Chrome 浏览器会在下拉列表显示value
值(比如Brackets
),然后在其下方以小字显示label
值(比如by Adobe
)。
<textarea>
<textarea>
是一个块级元素,用来生成多行的文本框。
<textarea id="story" name="story"
rows="5" cols="33">
这是一个很长的故事。
</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
(关闭自动换行,单行长度超过宽度时,会出现水平滚动条)。
<output>
<output>
标签是一个行内元素,用于显示用户操作的结果。
<input type="number" name="a" value="10"> +
<input type="number" name="b" value="10"> =
<output name="result">20</output>
该标签有如下属性。
for
:关联控件的id
属性,表示为该控件的操作结果。form
:关联表单的id
属性。name
:控件的名称。
<progress>
<progress>
标签是一个行内元素,表示任务的完成进度。浏览器通常会将显示为进度条。
<progress id="file" max="100" value="70"> 70% </progress>
该标签有如下属性。
max
:进度条的最大值,应该是一个大于0
的浮点数。默认值为1。value
:进度条的当前值。它必须是0
和max
属性之间的一个有效浮点数。如果省略了max
属性,该值则必须在0
和1
之间。如果省略了value
属性,则进度条会出现滚动,表明正在进行中,无法知道完成的进度。
<meter>
<meter>
标签是一个行内元素,表示指示器,用来显示已知范围内的一个值,很适合用于任务的当前进度、磁盘已用空间、充电量等带有比例性质的场合。浏览器通常会将其显示为一个不会滚动的指示条。
<p>烤箱的当前温度是<meter min="200" max="500"
value="350"> 350 度</meter>。</p>
上面代码会显示一个指示条,左侧表示200
,右侧表示500
,当前位置停留在350
。
注意,<meter>
元素的子元素,正常情况下不会显示。只有在浏览器不支持<meter>
时才会显示。
该标签有如下属性。
min
:范围的下限,必须小于max
属性。如果省略,则默认为0
。max
:范围的上限,必须大于min
属性。如果省略,则默认为1
。value
:当前值,必须在min
属性和max
属性之间。如果省略,则默认为0
。low
:表示“低端”的上限门槛值,必须大于min
属性,小于high
属性和max
属性。如果省略,则等于min
属性。high
:表示“高端”的下限门槛值,必须小于max
属性,大于low
属性和min
属性。如果省略,则等于max
属性。optimum
:指定最佳值,必须在min
属性和max
属性之间。它应该与low
属性和high
属性一起使用,表示最佳范围。如果optimum
小于low
属性,则表示“低端”是最佳范围;如果大于high
属性,则表示“高端”是最佳范围;如果在low
和high
之间,则表示“中间地带”是最佳范围。如果省略,则等于min
和max
的中间值。form
:关联表单的id
属性。
Chrome 浏览器使用三种颜色,表示指示条所处的位置。较好情况时,当前位置为绿色;一般情况时,当前位置为黄色;较差情况时,当前位置为红色。
<meter id="fuel" name="fuel"
min="0" max="100"
low="33" high="66" optimum="80"
value="50">
at 50/100
</meter>
上面代码中,指示条可以分成三段:0 ~ 32,33 ~ 65,66 ~ 100。由于optimum
属性是80
,因此66 ~ 100
是较好情况,33 ~ 65
是一般情况,0 ~ 32
是较差情况。浏览器因此会根据value
属性,将当前位置显示为不同颜色,小于33
时显示红色,大于65
时显示绿色,两者之间显示黄色。
二、NDS
DNS (Domain Name System 的缩写),作用就是根据域名查出IP地址。
查询过程
工具软件dig
可以显示整个查询过程。
$ dig math.stackexchange.com
上面的命令会输出六段信息。
第一段是查询参数和统计。
第二段是查询内容。
上面结果表示,查询域名math.stackexchange.com
的A
记录,A
是address的缩写。
第三段是DNS服务器的答复。
上面结果显示,math.stackexchange.com
有四个A
记录,即四个IP地址。600
是TTL值(Time to live 的缩写),表示缓存时间,即600秒之内不用重新查询。
第四段显示stackexchange.com
的NS记录(Name Server的缩写),即哪些服务器负责管理stackexchange.com
的DNS记录。
上面结果显示stackexchange.com
共有四条NS记录,即四个域名服务器,向其中任一台查询就能知道math.stackexchange.com
的IP地址是什么。
第五段是上面四个域名服务器的IP地址,这是随着前一段一起返回的。
第六段是DNS服务器的一些传输信息。
上面结果显示,本机的DNS服务器是192.168.1.253
,查询端口是53(DNS服务器的默认端口),以及回应长度是305字节。
如果不想看到这么多内容,可以使用+short
参数。
$ dig +short math.stackexchange.com 151.101.129.69 151.101.65.69 151.101.193.69 151.101.1.69
上面命令只返回math.stackexchange.com
对应的4个IP地址(即A
记录)。
DNS服务器
本机一定要知道DNS服务器的IP地址,否则上不了网。通过DNS服务器,才能知道某个域名的IP地址到底是什么。
DNS服务器的IP地址,有可能是动态的,每次上网时由网关分配,这叫做DHCP机制;也有可能是事先指定的固定地址。Linux系统里面,DNS服务器的IP地址保存在/etc/resolv.conf
文件。
上例的DNS服务器是192.168.1.253
,这是一个内网地址。有一些公网的DNS服务器,也可以使用,其中最有名的就是Google的8.8.8.8
和Level 3的4.2.2.2
。
本机只向自己的DNS服务器查询,dig
命令有一个@
参数,显示向其他DNS服务器查询的结果。
$ dig @4.2.2.2 math.stackexchange.com
上面命令指定向DNS服务器4.2.2.2
查询。
域名层级
DNS服务器怎么会知道每个域名的IP地址呢?答案是分级查询。
请仔细看前面的例子,每个域名的尾部都多了一个点。
比如,域名math.stackexchange.com
显示为math.stackexchange.com.
。这不是疏忽,而是所有域名的尾部,实际上都有一个根域名。
举例来说,www.example.com
真正的域名是www.example.com.root
,简写为www.example.com.
。因为,根域名.root
对于所有域名都是一样的,所以平时是省略的。
根域名的下一级,叫做"顶级域名"(top-level domain,缩写为TLD),比如.com
、.net
;再下一级叫做"次级域名"(second-level domain,缩写为SLD),比如www.example.com
里面的.example
,这一级域名是用户可以注册的;再下一级是主机名(host),比如www.example.com
里面的www
,又称为"三级域名",这是用户在自己的域里面为服务器分配的名称,是用户可以任意分配的。
总结一下,域名的层级结构如下。
主机名.次级域名.顶级域名.根域名 # 即 host.sld.tld.root
根域名服务器
DNS服务器根据域名的层级,进行分级查询。
需要明确的是,每一级域名都有自己的NS记录,NS记录指向该级域名的域名服务器。这些服务器知道下一级域名的各种记录。
所谓"分级查询",就是从根域名开始,依次查询每一级域名的NS记录,直到查到最终的IP地址,过程大致如下。
- 从"根域名服务器"查到"顶级域名服务器"的NS记录和A记录(IP地址)
- 从"顶级域名服务器"查到"次级域名服务器"的NS记录和A记录(IP地址)
- 从"次级域名服务器"查出"主机名"的IP地址
仔细看上面的过程,你可能发现了,没有提到DNS服务器怎么知道"根域名服务器"的IP地址。回答是"根域名服务器"的NS记录和IP地址一般是不会变化的,所以内置在DNS服务器里面。
下面是内置的根域名服务器IP地址的一个例子。
上面列表中,列出了根域名(.root
)的三条NS记录A.ROOT-SERVERS.NET
、B.ROOT-SERVERS.NET
和C.ROOT-SERVERS.NET
,以及它们的IP地址(即A
记录)198.41.0.4
、192.228.79.201
、192.33.4.12
。
另外,可以看到所有记录的TTL值是3600000秒,相当于1000小时。也就是说,每1000小时才查询一次根域名服务器的列表。
目前,世界上一共有十三组根域名服务器,从A.ROOT-SERVERS.NET
一直到M.ROOT-SERVERS.NET
。
分级查询的实例
dig
命令的+trace
参数可以显示DNS的整个分级查询过程。
$ dig +trace math.stackexchange.com
上面命令的第一段列出根域名.
的所有NS记录,即所有根域名服务器。
根据内置的根域名服务器IP地址,DNS服务器向所有这些IP地址发出查询请求,询问math.stackexchange.com
的顶级域名服务器com.
的NS记录。最先回复的根域名服务器将被缓存,以后只向这台服务器发请求。
接着是第二段。
上面结果显示.com
域名的13条NS记录,同时返回的还有每一条记录对应的IP地址。
然后,DNS服务器向这些顶级域名服务器发出查询请求,询问math.stackexchange.com
的次级域名stackexchange.com
的NS记录。
上面结果显示stackexchange.com
有四条NS记录,同时返回的还有每一条NS记录对应的IP地址。
然后,DNS服务器向上面这四台NS服务器查询math.stackexchange.com
的主机名。
上面结果显示,math.stackexchange.com
有4条A
记录,即这四个IP地址都可以访问到网站。并且还显示,最先返回结果的NS服务器是ns-463.awsdns-57.com
,IP地址为205.251.193.207
。
NS 记录的查询
dig
命令可以单独查看每一级域名的NS记录。
$ dig ns com $ dig ns stackexchange.com
+short
参数可以显示简化的结果。
$ dig +short ns com $ dig +short ns stackexchange.com
DNS的记录类型
域名与IP之间的对应关系,称为"记录"(record)。根据使用场景,"记录"可以分成不同的类型(type),前面已经看到了有A
记录和NS
记录。www.baidu.com 1.1.1.1
常见的DNS记录类型如下。
(1)
A
:地址记录(Address),返回域名指向的IP地址。(2)
NS
:域名服务器记录(Name Server),返回保存下一级域名信息的服务器地址。该记录只能设置为域名,不能设置为IP地址。(3)
MX
:邮件记录(Mail eXchange),返回接收电子邮件的服务器地址。(4)
CNAME
:规范名称记录(Canonical Name),返回另一个域名,即当前查询的域名是另一个域名的跳转,详见下文。(5)
PTR
:逆向查询记录(Pointer Record),只用于从IP地址查询域名,详见下文。
一般来说,为了服务的安全可靠,至少应该有两条NS
记录,而A
记录和MX
记录也可以有多条,这样就提供了服务的冗余性,防止出现单点失败。
CNAME
记录主要用于域名的内部跳转,为服务器配置提供灵活性,用户感知不到。举例来说,facebook.github.io
这个域名就是一个CNAME
记录。
$ dig facebook.github.io ... ;; ANSWER SECTION: facebook.github.io. 3370 IN CNAME github.map.fastly.net. github.map.fastly.net. 600 IN A 103.245.222.133
上面结果显示,facebook.github.io
的CNAME记录指向github.map.fastly.net
。也就是说,用户查询facebook.github.io
的时候,实际上返回的是github.map.fastly.net
的IP地址。这样的好处是,变更服务器IP地址的时候,只要修改github.map.fastly.net
这个域名就可以了,用户的facebook.github.io
域名不用修改。
由于CNAME
记录就是一个替换,所以域名一旦设置CNAME
记录以后,就不能再设置其他记录了(比如A
记录和MX
记录),这是为了防止产生冲突。举例来说,foo.com
指向bar.com
,而两个域名各有自己的MX
记录,如果两者不一致,就会产生问题。由于顶级域名通常要设置MX
记录,所以一般不允许用户对顶级域名设置CNAME
记录。
PTR
记录用于从IP地址反查域名。dig
命令的-x
参数用于查询PTR
记录。
$ dig -x 192.30.252.153 ... ;; ANSWER SECTION: 153.252.30.192.in-addr.arpa. 3600 IN PTR pages.github.com.
上面结果显示,192.30.252.153
这台服务器的域名是pages.github.com
。
逆向查询的一个应用,是可以防止垃圾邮件,即验证发送邮件的IP地址,是否真的有它所声称的域名。
dig
命令可以查看指定的记录类型。
$ dig a github.com $ dig ns github.com $ dig mx github.com
其他DNS工具
除了dig
,还有一些其他小工具也可以使用。
(1)host 命令
host
命令可以看作dig
命令的简化版本,返回当前请求域名的各种记录。
$ host github.com github.com has address 192.30.252.121 github.com mail is handled by 5 ALT2.ASPMX.L.GOOGLE.COM. github.com mail is handled by 10 ALT4.ASPMX.L.GOOGLE.COM. github.com mail is handled by 10 ALT3.ASPMX.L.GOOGLE.COM. github.com mail is handled by 5 ALT1.ASPMX.L.GOOGLE.COM. github.com mail is handled by 1 ASPMX.L.GOOGLE.COM. $ host facebook.github.com facebook.github.com is an alias for github.map.fastly.net. github.map.fastly.net has address 103.245.222.133
host
命令也可以用于逆向查询,即从IP地址查询域名,等同于dig -x <ip>
。
$ host 192.30.252.153 153.252.30.192.in-addr.arpa domain name pointer pages.github.com.
(2)nslookup 命令
nslookup
命令用于互动式地查询域名记录。
$ nslookup > facebook.github.io Server: 192.168.1.253 Address: 192.168.1.253#53 Non-authoritative answer: facebook.github.io canonical name = github.map.fastly.net. Name: github.map.fastly.net Address: 103.245.222.133 >
(3)whois 命令
whois
命令用来查看域名的注册情况。
$ whois github.com