HTTP_DNS_FORM表单

一、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>一旦写成<&#112;>或者<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地址，过程大致如下。

1. 从"根域名服务器"查到"顶级域名服务器"的NS记录和A记录（IP地址）
2. 从"顶级域名服务器"查到"次级域名服务器"的NS记录和A记录（IP地址）
3. 从"次级域名服务器"查出"主机名"的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