标签：控件 浏览器 标签 输入框 HTML type 输入 属性
文章目录
格式
基本格式
<!DOCTYPE html>
<html lang="en">
<!--语言-->
<head>
<meta charset="UTF-8">
<!--字符编码-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 多端适应、响应式、自适应-->
<title>Document</title>
</head>
<body>
</body>
</html>
<html lang="en">
<!--向搜索引擎表示该页面是html语言，并且语言为英文网站-->
<!--"lang"的意思就是“language”，语言的意思，而“en”即表示english-->
<html lang="zh">
<!--中文页面，zh即表示中文-->
注释
<!-- -->
块级元素，行内元素
- 所有元素可以分成两大类：块级元素（block）和行内元素（inline）
块级元素
- 默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。
<p>hello</p> <p>world</p>
<!-- p元素是块级元素，浏览器会将内容分成两行显示
行内元素
- 默认与其他元素在同一行，不产生换行
<span>hello</span> <span>world</span>
<!-- span元素是行内元素，浏览器会将两行内容放在一行显示
<a>
- 链接通过
<a>标签表示，用户点击后，浏览器跳转到href属性指定的网址 - 文字下面默认会有下划线，表示这是一个链接
<a href="https://www.baidu.com维基百科</a>
<a href="www.baidu.com">维基百科</a>
<!--这样看似可以，实际是不行的；实际情况中浏览器会进行补全-->
<a>标签内部可以放置
- 文字、段落、图像、多媒体等等
<a href="https://www.example.com/">
<img src="https://www.example.com/foo.jpg">
</a>
<a>标签属性
（1）href
href属性给出链接指向的网址，它的值应该是一个 URL 或者锚点- 锚点：
href属性的值是#加上锚点名称；点击后，浏览器会自动滚动，停在当前页面里面demo锚点所在的位置。
<a href="#demo">锚点示例</a>
（2）target
target属性指定如何展示打开的链接
_self：当前窗口打开，这是默认值。_blank：新窗口打开。
<a href="https://www.example.com" target="_blank">示例链接</a><!--点击后，浏览器会新建一个窗口，在该窗口打开链接，并且新窗口没有名字
<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属性的时候，最好跟rel="noreferrer"一起使用，这样可以避免安全风险
（3）rel
rel属性说明链接与当前页面的关系。
<a href="help.html" rel="help">帮助</a>
属性值
noreferrer：告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的Referer字段发送出去，这样可以隐藏点击的来源
（4）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 文档。
同源
- 如果两个 URL 的 protocol、port 、 host都相同的话，则这两个 URL 是同源
| URL | 结果 | 原因 |
|---|---|---|
http://store.company.com/dir2/other.html | 同源 | 只有路径不同 |
http://store.company.com/dir/inner/another.html | 同源 | 只有路径不同 |
https://store.company.com/secure.html | 失败 | 协议不同 |
http://store.company.com:81/dir/etc.html | 失败 | 端口不同 ( http:// 默认端口是80) |
http://news.company.com/dir/other.html | 失败 | 主机不同 |
<img>
-
<img>标签用于插入图片。它是单独使用的，没有闭合标签 -
默认是一个行内元素
<img src="相对路径/绝对路径">
<p>Hello<img src="foo.jpg">World</p><!-- 上面代码的渲染结果是，文字和图片在同一行显示
img属性
（1）alt 属性
alt属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。
<img src="foo.jpg" alt="示例图片">
（2）onerror属性
- 当图片无法加载时，执行
onerror语句
<img src="foo.jpg" alt="示例图片" one rror="alert(1)">
（3）width 属性，height 属性
- 图片默认以原始大小插入网页，
width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比
<img src="foo.jpg" width="400" height="300">
<form>
简介
<form>标签用来定义一个表单，所有表单内容放到这个容器元素之中
<form> <!-- 各种表单控件--></form>
<form action="https://example.com/api" method="post"> <label for="POST-name">用户名：</label> <!--<label>标签--> <input id="POST-name" type="text" name="user"> <!--文本输入框--> <!--用户在文本输入框里面，输入用户名，比如`foobar`，然后点击提交按钮，浏览器就会向服务器`https://example.com/api`发送一个 POST 请求，发送`user=foobar`这样一段数据--> <input type="submit" value="提交"> <!--提交按钮--> </form>
<form>属性
-
method：提交数据的 HTTP 方法，可能的值有post（表单数据作为 HTTP 数据体发送），get（表单数据作为 URL 的查询字符串发送），dialog（表单位于<dialog>内部使用） -
accept-charset：服务器接受的字符编码列表，使用空格分隔，默认与网页编码相同。 -
action：服务器接收数据的 URL。 -
autocomplete：如果用户没有填写某个控件，浏览器是否可以自动填写该值。它的可能取值分别为off（不自动填写）和on（自动填写） -
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--AaB03xContent-Disposition: form-data; name="submit-name"Larry--AaB03xContent-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的内容。
<input>
简介
-
<input>标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志 -
它有多种类型，取决于
type属性的值，默认值是text，表示一个输入框
<input><!-- 等同于 --><input type="text"><!--上面代码会生成一个单行的输入框，用户可以在里面输入文本-->
-
name：控件的名称，提交时告诉服务器该属性对应的数据名称。注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交 -
value：控件的值 -
autofocus：布尔属性，是否在页面加载时自动获得焦点。 -
disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。 -
form：关联表单的id属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在<form>内部。 -
list：关联的<datalist>的id属性，设置该控件相关的数据列表，详见后文。 -
readonly：布尔属性，是否为只读。 -
required：布尔属性，是否为必填。 -
type：控件类型，详见下文。
类型
type属性决定了<input>的形式。该属性可以取以下值。
1、text
type="text"是普通的文本输入框，用来输入单行文本。如果用户输入换行符，换行符会自动从输入中删除。
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">
text输入框有以下配套属性
maxlength：可以输入的最大字符数，值为一个非负整数minlength：可以输入的最小字符数，值为一个非负整数，且必须小于maxlengthpattern：用户输入必须匹配的正则表达式，比如要求用户输入4个～8个英文字符，可以写成pattern="[a-z]{4,8}"。如果用户输入不符合要求，浏览器会弹出提示，不会提交表单placeholder：输入字段为空时，用于提示的示例值。只要用户没有任何字符，该提示就会出现，否则会消失readonly：布尔属性，表示该输入框是只读的，用户只能看，不能输入size：表示输入框的显示长度有多少个字符宽，它的值是一个正整数，默认等于20。超过这个数字的字符，必须移动光标才能看到。spellcheck：是否对用户输入启用拼写检查，可能的值为true或false
2、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）等。
3、submit
type="submit"是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器
<input type="submit" value="提交">
如果不指定value属性，浏览器会在提交按钮上显示默认的文字，通常是Submit
该类型有以下配套属性，用来覆盖<form>标签的相应设置
formaction：提交表单数据的服务器 URLformenctype：表单数据的编码类型formmethod：提交表单使用的 HTTP 方法（get或post）formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证formtarget：收到服务器返回的数据后，在哪一个窗口显示
4、hidden
-
type="hidden"是一个不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息 -
比如，CSRF 攻击会伪造表单数据，那么使用这个控件，可以为每个表单生成一个独一无二的隐藏编号，防止伪造表单提交
<input id="prodId" name="prodId" type="hidden" value="xm234jq">
上面这个控件，页面上是看不见的。用户提交表单的时候，浏览器会将prodId=xm234jq发给服务器
5、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：一个非负整数，表示该输入框显示宽度为多少个字符。
（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 代码。
（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>
上面代码中，输入焦点进入输入框以后，会显示一个下拉列表，里面有五个参考项，供用户参考。
（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：布尔属性，是否允许用户选择多个文件。
（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。
<script>
<script>用于加载脚本代码，目前主要是加载 JavaScript 代码
<script>console.log('hello world');</script><!--打开控制台会显示-->
- 弹窗事件
<script> alert(直接弹窗，有确定按钮)</script>
<script> prompt(直接弹窗，有输入框、确定按钮和取消按钮)</script>
<script> confirm(直接弹窗，有确定按钮和取消按钮)</script>
<script>也可以加载外部脚本，src属性给出外部脚本的地址
<script src="javascript.js"></script>
type属性给出脚本的类型，默认是 JavaScript 代码，所以可省略。完整的写法其实是下面这样
<script type="text/javascript" src="javascript.js"></script>
<noscript>
<noscript>标签用于浏览器不支持或关闭 JavaScript 时，所要显示的内容
<noscript> 您的浏览器不能执行 JavaScript 语言，页面无法正常显示。</noscript>
<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属性时，页面显示时一次可见的行数，其他行需要滚动查看。
iframe
<iframe>标签用于在网页里面嵌入其他网页。
基本用法
<iframe>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏览器不支持<iframe>，就会显示内部的子元素。
<iframe src="https://www.example.com" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p><a href="https://www.example.com">点击打开嵌入页面</a></p></iframe>
上面的代码在当前网页嵌入https://www.example.com，显示区域的宽度是100%，高度是500像素。如果当前浏览器不支持<iframe>，则会显示一个链接，让用户点击。
浏览器普遍支持<iframe>，所以内部的子元素可以不写。
<iframe>的属性如下。
allowfullscreen：允许嵌入的网页全屏显示，需要全屏 API 的支持，请参考相关的 JavaScript 教程。frameborder：是否绘制边框，0为不绘制，1为绘制（默认值）。建议尽量少用这个属性，而是在 CSS 里面设置样式。src：嵌入的网页的 URL。width：显示区域的宽度。height：显示区域的高度。sandbox：设置嵌入的网页的权限，详见下文。importance：浏览器下载嵌入的网页的优先级，可以设置三个值。high表示高优先级，low表示低优先级，auto表示由浏览器自行决定。name：内嵌窗口的名称，可以用于<a>、<form>、<base>的target属性。referrerpolicy：请求嵌入网页时，HTTP 请求的Referer字段的设置。参见<a>标签的介绍。
sandbox 属性
嵌入的网页默认具有正常权限，比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面，你不了解对方会执行什么操作，因此就存在安全风险。为了限制<iframe>的风险，HTML 提供了sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。
sandbox可以当作布尔属性使用，表示打开所有限制。
<iframe src="https://www.example.com" sandbox></iframe>
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的情况下，允许<iframe>嵌入的第三方网页通过用户发起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 属性
<iframe>指定的网页会立即加载，有时这不是希望的行为。<iframe>滚动进入视口以后再加载，这样会比较节省带宽。
loading属性可以触发<iframe>网页的懒加载。该属性可以取以下三个值。
auto：浏览器的默认行为，与不使用loading属性效果相同。lazy：<iframe>的懒加载，即将滚动进入视口时开始加载。eager：立即加载资源，无论在页面上的位置如何。
<iframe src="https://example.com" loading="lazy"></iframe>
上面代码会启用<iframe>的懒加载。
有一点需要注意，如果<iframe>是隐藏的，则loading属性无效，将会立即加载。只要满足以下任一个条件，Chrome 浏览器就会认为<iframe>是隐藏的。
<iframe>的宽度和高度为4像素或更小。- 样式设为
display: none或visibility: hidden。- 使用定位坐标为负
X或负Y，将<iframe>放置在屏幕外。
<nav>
<nav>标签用于放置页面或文档的导航信息。
<nav> <ol> <li><a href="item-a">商品 A</a></li> <li><a href="item-b">商品 B</a></li> <li>商品 C</li> </ol></nav>
一般来说，<nav>往往放置在<header>里面，不适合放入<footer>。另外，一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航。
<nav>里面通常是列表，但也可以放置其他标签。
其他
邮件链接
- 链接也可以指向一个邮件地址，使用
mailto协议。用户点击后，浏览器会打开本机默认的邮件程序，让用户向指定的地址发送邮件。
<a href="mailto:contact@example.com">联系我们</a>
<link>
<link>标签主要用于将当前网页与相关的外部资源联系起来，通常放在<head>元素里面- 最常见的用途就是加载 CSS 样式表。
<link rel="stylesheet" type="text/css" href="theme.css">
<style>
- 放置内嵌的样式表
- CSS
<del>
- 删除线标签
<del>删除线</del>
<br>
- 换行
标签：控件,浏览器,标签,输入框,HTML,type,输入,属性 来源： https://blog.csdn.net/m0_55778885/article/details/121622630
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。