JS基础知识

表单标签

表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。

表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。

<form>

简介

`标签用来定义一个表单，所有表单内容放到这个容器元素之中。

<form>
  <!-- 各种表单控件-->
</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 属性

`表单的`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属性，值为控件名。

<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"。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。

（3）button

type="button"是没有默认行为的按钮，通常脚本指定click事件的监听函数来使用。

<input type="button" value="点击">

建议尽量不使用这个类型，而使用<button>标签代替，一则语义更清晰，二则<button>标签内部可以插入图片或其他 HTML 代码。

（4）submit

type="submit"是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。

如果不指定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>里面。

（8）radio

type="radio"是单选框，表示一组选择之中，只能选中一项。单选框通常为一个小圆圈，选中时会被填充或突出显示。

（9）email

type="email"是一个只能输入电子邮箱的文本输入框。表单提交之前，浏览器会自动验证是否符合电子邮箱的格式，如果不符合就会显示提示，无法提交到服务器。

该类型的配套属性如下。

• maxlength：可以输入的最大字符数。
• minlength：可以输入的最少字符数。
• multiple：布尔属性，是否允许输入多个以逗号分隔的电子邮箱。
• pattern：输入必须匹配的正则表达式。
• placeholder：输入为空时的显示文本。
• readonly：布尔属性，该输入框是否只读。
• size：一个非负整数，表示输入框的显示长度为多少个字符。
• spellcheck：是否对输入内容启用拼写检查，可能的值为true或false。

该类型还可以搭配<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>标签配合使用，可以在滑动区域产生刻度。

（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>标签搭配使用，可以形成下拉列表供用户选择。随着用户不断键入，会缩小显示范围，只显示匹配的备选项。

（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格式。

（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>内部。

它的属性如下。

• 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 浏览器使用三种颜色，表示指示条所处的位置。较好情况时，当前位置为绿色；一般情况时，当前位置为黄色；较差情况时，当前位置为红色。

URL 简介

概述

URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。下面就是一个典型的 URL。

https://www.example.com/path/index.html

所谓资源，可以简单理解成各种可以通过互联网访问的文件，比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL，才能在互联网上获取它们。

只要资源可以通过互联网访问，它就必然有对应的 URL。一个 URL 对应一个资源，但是同一个资源可能对应多个 URL。

URL 是互联网的基础。互联网之所以“互联”，就是因为网页可以通过“链接”（link），包含其他 URL。用户只要点击，就可以从一个 URL 跳转到另一个 URL，前往不同的网站。

网址的组成部分

URL 由多个部分组成。下面是一个比较复杂的 URL，实际的 URL 通常不会有这么多部分。

https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor

我们看看，这个 URL 的各个部分。

协议

协议（scheme）是浏览器请求服务器资源的方法，上例是https://的部分，表示使用 HTTPS 协议。

互联网支持多种协议，必须指明网址使用哪一种协议，默认是 HTTP 协议。也就是说，如果省略协议，直接在浏览器地址栏输入www.example.com，那么浏览器默认会访问http://www.example.com。HTTPS 是 HTTP 的加密版本，出于安全考虑，越来越多的网站使用这个协议。

HTTP 和 HTTPS 的协议名称后面，紧跟着一个冒号和两个斜杠（://）。其他协议不一定如此，邮件地址协议mailto:的协议名后面只有一个冒号，比如mailto:foo@example.com。

主机

主机（host）是资源所在的网站名或服务器的名字，又称为域名。上例的主机是www.example.com。

有些主机没有域名，只有 IP 地址，比如192.168.2.15。这种情况常常出现在局域网。

端口

同一个域名下面可能同时包含多个网站，它们之间通过端口（port）区分。“端口”就是一个整数，可以简单理解成，访问者告诉服务器，想要访问哪一个网站。HTTP 协议的默认端口是80，如果省略了这个参数，服务器就会返回80端口的网站。

端口紧跟在域名后面，两者之间使用冒号分隔，比如www.example.com:80。

路径

路径（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 字符

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 指的是，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，这时.相当于根目录的当前目录，即根目录本身。

<base>

<base>标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个<base>标签，而且只能放在<head>里面。它是单独使用的标签，没有闭合标签，下面是一个例子。

<head>
<base href="https://www.example.com/files/" target="_blank">
</head>

<base>标签的href属性给出计算的基准网址，target属性给出如何打开链接的说明（参见《链接》一章）。已知计算基准是https://www.example.com/files/，那么相对 URL foo.html，就可以转成绝对 URL https://www.example.com/files/foo.html。

注意，<base>标签必须至少具有href属性或target属性之一。

<base href="http://foo.com/app/">
<base target="_blank">

一旦设置了<base>，就对整个网页都有效。如果要改变某个链接的行为，只能用绝对链接替代相对链接。尤其需要注意锚点，这时锚点也是针对<base>计算的，而不是针对当前网页的 URL。

链接标签

链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。

URL 是链接指向的地址。链接不仅可以指向另一个网页，也可以指向文本、图像、文件等资源。可以这样说，所有互联网上的资源，都可以通过链接访问。

<a>

链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。

<a href="https://wikipedia.org/">维基百科</a>

上面代码就定义了一个超级链接。浏览器显示“维基百科”，文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到href属性指定的网址。

<a>标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。

<a href="https://www.example.com/">
  <img src="https://www.example.com/foo.jpg">
</a>

上面代码中，<a>标签内部就是一个图像。用户点击图像，就会跳转到指定网址。

<a>标签有如下属性。

（1）href

href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。

上文已经给出了完整 URL 的例子，下面是锚点的例子。

<a href="#demo">示例</a>

上面代码中，href属性的值是#加上锚点名称。点击后，浏览器会自动滚动，停在当前页面里面demo锚点所在的位置。

（2）hreflang

hreflang属性给出链接指向的网址所使用的语言，纯粹是提示性的，没有实际功能。

<a
  href="https://www.example.com"
  hreflang="en"
>示例网址</a>

上面代码表明，href属性指向的网址的语言是英语。

该属性的值跟通用属性lang一样，语言代码可以参考《属性》一章的lang属性的介绍。

（3）title

title属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。

<a
  href="https://www.example.com/"
  title="hello"
>示例</a>。

上面代码中，用户鼠标停留在链接上面，会出现文字提示hello。

（4）target

target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开。

<p><a href="http://foo.com" target="test">foo</a></p>
<p><a href="http://bar.com" target="test">bar</a></p>

上面代码中，两个链接都在名叫test的窗口打开。首先点击链接foo，浏览器发现没有叫做test的窗口，就新建一个窗口，起名为test，在该窗口打开foo.com。然后，用户又点击链接bar，由于已经存在test窗口，浏览器就在该窗口打开bar.com，取代里面已经打开的foo.com。

target属性的值也可以是以下四个关键字之一。

• _self：当前窗口打开，这是默认值。
• _blank：新窗口打开。
• _parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。
• _top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。

<a
  href="https://www.example.com"
  target="_blank"
>示例链接</a>

上面代码点击后，浏览器会新建一个窗口，在该窗口打开链接，并且新窗口没有名字。

注意，使用target属性的时候，最好跟rel="noreferrer"一起使用，这样可以避免安全风险。

（5）rel

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：文档的标签链接。

（6）referrerpolicy

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表示只发送源信息（协议+域名+端口）。其他几项的解释，请查阅 HTTP 文档。

（7）ping

ping属性指定一个网址，用户点击的时候，会向该网址发出一个 POST 请求，通常用于跟踪用户的行为。

（8）type

type属性给出链接 URL 的 MIME 类型，比如到底是网页，还是图像或文件。它也是纯粹提示性的属性，没有实际功能。

<a
  href="smile.jpg"
  type="image/jpeg"
>示例图片</a>

上面代码中，type属性提示这是一张图片。

（9）download

download属性表明当前链接用于下载，而不是跳转到另一个 URL。

<a href="demo.txt" download>下载</a>

上面代码点击后，会出现下载对话框。

注意，download属性只在链接与网址同源时，才会生效。也就是说，链接应该与网址属于同一个网站。

如果download属性设置了值，那么这个值就是下载的文件名。

<a
  href="foo.exe"
  download="bar.exe"
>点击下载</a>

上面代码中，下载文件的原始文件名是foo.exe。点击后，下载对话框提示的文件名是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@example.com">联系我们</a>

上面代码中，链接就指向邮件地址。点击后，浏览器会打开一个邮件地址，让你可以向contact@example.com发送邮件。

除了邮箱，邮件协议还允许指定其他几个邮件要素。

• subject：主题
• cc：抄送
• bcc：密送
• body：邮件内容

使用方法是将这些邮件要素，以查询字符串的方式，附加在邮箱地址后面。

<a
  href="mailto:foo@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>

上面代码在手机中，点击链接会唤起拨号界面，可以直接拨打指定号码。

<link>

基本用法

<link>标签主要用于将当前网页与相关的外部资源联系起来，通常放在<head>元素里面。最常见的用途就是加载 CSS 样式表。

<link rel="stylesheet" type="text/css" href="theme.css">

上面代码为网页加载样式表theme.css。

除了默认样式表，网页还可以加载替代样式表，即默认不生效、需要用户手动切换的样式表。

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

上面代码中，default.css是默认样式表，默认就会生效。fancy.css和basic.css是替换样式表（rel="alternate stylesheet"），默认不生效。title属性在这里是必需的，用来在浏览器菜单里面列出这些样式表的名字，供用户选择，以替代默认样式表。

<link>还可以加载网站的 favicon 图标文件。

<link rel="icon" href="/favicon.ico" type="image/x-icon">

手机访问时，网站通常需要提供不同分辨率的图标文件。

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">

上面代码指定 iPhone 设备需要的114像素和72像素的图标。

<link>也用于提供文档的相关链接，比如下面是给出文档的 RSS Feed 地址。

<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">

rel 属性

rel属性表示外部资源与当前文档之间的关系，是<link>标签的必需属性。它可以但不限于取以下值。

• alternate：文档的另一种表现形式的链接，比如打印版。
• author：文档作者的链接。
• dns-prefetch：要求浏览器提前执行指定网址的 DNS 查询。
• help：帮助文档的链接。
• icon：加载文档的图标文件。
• license：许可证链接。
• next：系列文档下一篇的链接。
• pingback：接收当前文档 pingback 请求的网址。
• preconnect：要求浏览器提前与给定服务器，建立 HTTP 连接。
• prefetch：要求浏览器提前下载并缓存指定资源，供下一个页面使用。它的优先级较低，浏览器可以不下载。
• preload：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。它的优先级较高，浏览器必须立即下载。
• prerender：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。
• prev：表示当前文档是系列文档的一篇，这里给出上一篇文档的链接。
• search：提供当前网页的搜索链接。
• stylesheet：加载一张样式表。

下面是一些示例。

<!-- 作者信息 -->
<link rel="author" href="humans.txt">

<!-- 版权信息 -->
<link rel="license" href="copyright.html">

<!-- 另一个语言的版本 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- 联系方式 -->
<link rel="me" href="https://google.com/profiles/someone" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- 历史资料 -->
<link rel="archives" href="http://example.com/archives/">

<!-- 目录 -->
<link rel="index" href="http://example.com/article/">

<!-- 导航 -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

资源的预加载

某些情况下，你需要浏览器预加载某些资源，也就是先把资源缓存下来，等到使用的时候，就不用再从网上下载了，立即就能使用。预处理指令可以做到这一点。

预加载主要有下面五种类型。

（1）<link rel="preload">

<link rel="preload">告诉浏览器尽快下载并缓存资源（如脚本或样式表），该指令优先级较高，浏览器肯定会执行。当加载页面几秒钟后需要该资源时，它会很有用。下载后，浏览器不会对资源执行任何操作，脚本未执行，样式表未应用。它只是缓存，当其他东西需要它时，它立即可用。

<link rel="preload" href="image.png" as="image">

rel="preload"除了优先级较高，还有两个优点：一是允许指定预加载资源的类型，二是允许onload事件的回调函数。下面是rel="preload"配合as属性，告诉浏览器预处理资源的类型，以便正确处理。

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

上面代码要求浏览器提前下载并缓存style.css和main.js。

as属性指定加载资源的类型，它的值一般有下面几种。

• “script”
• “style”
• “image”
• “media”
• “document”

如果不指定as属性，或者它的值是浏览器不认识的，那么浏览器会以较低的优先级下载这个资源。

有时还需要type属性，进一步明确 MIME 类型。

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

上面代码要求浏览器提前下载视频文件，并且说明这是 MP4 编码。

下面是预下载字体文件的例子。

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

注意，所有预下载的资源，只是下载到浏览器的缓存，并没有执行。如果希望资源预下载后立刻执行，可以参考下面的写法。

<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">

上面代码中，onload指定的回调函数会在脚本下载完成后执行，立即插入页面。

（2）<link rel="prefetch">

<link rel="prefetch">的使用场合是，如果后续的页面需要某个资源，并且希望预加载该资源，以便加速页面渲染。该指令不是强制性的，优先级较低，浏览器不一定会执行。这意味着，浏览器可以不下载该资源，比如连接速度很慢时。

<link rel="prefetch" href="https://www.example.com/">

（3）<link rel="preconnect">

<link rel="preconnect">要求浏览器提前与某个域名建立 TCP 连接。当你知道，很快就会请求该域名时，这会很有帮助。

<link rel="preconnect" href="https://www.example.com/">

（4）<link rel="dns-prefetch">

<link rel="dns-prefetch">要求浏览器提前执行某个域名的 DNS 解析。

<link rel="dns-prefetch" href="//example.com/">

（5）<link rel="prerender">

<link rel="prerender">要求浏览器加载某个网页，并且提前渲染它。用户点击指向该网页的链接时，就会立即呈现该页面。如果确定用户下一步会访问该页面，这会很有帮助。

<link rel="prerender" href="http://example.com/">

media 属性

media属性给出外部资源生效的媒介条件。

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

上面代码中，打印时加载print.css，移动设备访问时（设备宽度小于600像素）加载mobile.css。

下面是使用media属性实现条件加载的例子。

<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

上面代码中，如果屏幕宽度在600像素以下，则只加载第一个资源，否则就加载第二个资源。

其他属性

<link>标签的其他属性如下。

• crossorigin：加载外部资源的跨域设置。
• href：外部资源的网址。
• referrerpolicy：加载时Referer头信息字段的处理方法。
• as：rel="preload"或rel="prefetch"时，设置外部资源的类型。
• type：外部资源的 MIME 类型，目前仅用于rel="preload"或rel="prefetch"的情况。
• title：加载样式表时，用来标识样式表的名称。
• sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。

<script>

<script>用于加载脚本代码，目前主要是加载 JavaScript 代码。

<script>
console.log('hello world');
</script>

上面代码嵌入网页，会立即执行。

<script>也可以加载外部脚本，src属性给出外部脚本的地址。

<script src="javascript.js"></script>

上面代码会加载javascript.js脚本文件，并执行。

type属性给出脚本的类型，默认是 JavaScript 代码，所以可省略。完整的写法其实是下面这样。

<script type="text/javascript" src="javascript.js"></script>

type属性也可以设成module，表示这是一个 ES6 模块，不是传统脚本。

<script type="module" src="main.js"></script>

对于那些不支持 ES6 模块的浏览器，可以设置nomodule属性。支持 ES6 模块的浏览器，会不加载指定的脚本。这个属性通常与type="module"配合使用，作为老式浏览器的回退方案。

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

<script>还有下面一些其他属性，大部分跟 JavaScript 语言有关，可以参考相关的 JavaScript 教程。

• async：该属性指定 JavaScript 代码为异步执行，不是造成阻塞效果，JavaScript 代码默认是同步执行。
• defer：该属性指定 JavaScript 代码不是立即执行，而是页面解析完成后执行。
• crossorigin：如果采用这个属性，就会采用跨域的方式加载外部脚本，即 HTTP 请求的头信息会加上origin字段。
• integrity：给出外部脚本的哈希值，防止脚本被篡改。只有哈希值相符的外部脚本，才会执行。
• nonce：一个密码随机数，由服务器在 HTTP 头信息里面给出，每次加载脚本都不一样。它相当于给出了内嵌脚本的白名单，只有在白名单内的脚本才能执行。
• referrerpolicy：HTTP 请求的Referer字段的处理方法。

<noscript>

<noscript>标签用于浏览器不支持或关闭 JavaScript 时，所要显示的内容。用户关闭 JavaScript 可能是为了节省带宽，以延长手机电池寿命，或者为了防止追踪，保护隐私。

<noscript>
  您的浏览器不能执行 JavaScript 语言，页面无法正常显示。
</noscript>