html
符合 HTML 语法标准的网页，应该满足下面的基本结构。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
不管多么复杂的网页，都是从上面这个基本结构衍生出来的。
前面说过，HTML 代码的缩进和换行，对于浏览器不产生作用。所以，上面的代码完全可以写成一行，渲染结果不变。上面这样分行写，只是为了提高可读性。
下面就依次介绍，这个基本结构的主要标签。它们构成了网页的骨架。
<!doctype>
网页的第一个标签通常是<!doctype>，表示文档类型，告诉浏览器如何解析网页。
一般来说，只要像下面这样，简单声明doctype为html即可。浏览器就会按照 HTML 5 的规则处理网页。
<!doctype html>
有时，该标签采用完全大写的形式，以便区别于正常的 HTML 标签。因为<!doctype>本质上不是标签，更像一个处理指令。
<!DOCTYPE html>
<html>
<html>标签是网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。
该标签的lang属性，表示网页内容默认的语言。
<html lang="zh-CN">
上面代码表示，网页是中文内容。如果是英文内容，zh-CN要改成en。更详细的介绍，参见《元素的属性》一章。
<head>
<head>标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。
<!doctype html>
<html>
<head>
<title>网页标题</title>
</head>
</html>
<head>是<html>的第一个子元素。如果网页不包含<head>，浏览器会自动创建一个。
<head>的子元素一般有下面七个，后文会一一介绍。
<meta>：设置网页的元数据。<link>：连接外部样式表。<title>：设置网页标题。<style>：放置内嵌的样式表。<script>：引入脚本。<noscript>：浏览器不支持脚本时，所要显示的内容。<base>：设置网页内部相对 URL 的计算基准。
<meta>
<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在<head>内容的最前面。
不管什么样的网页，一般都可以放置以下两个<meta>标签。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
</head>
上面例子中，第一个<meta>标签表示网页采用 UTF-8 格式编码，第二个<meta>标签表示网页在手机端可以自动缩放。
<meta>标签有五个属性，下面依次介绍。
（1）charset 属性
<meta>标签的charset属性，用来指定网页的编码方式。该属性非常重要，如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。
<meta charset="utf-8">
上面代码声明，网页为 UTF-8 编码。虽然开发者可以使用其他的编码方式，但正确的做法几乎总是应该采用 UTF-8。
注意，这里声明的编码方式，应该与网页实际的编码方式一致，即声明了utf-8，网页就应该使用 UTF-8 编码保存。如果这里声明了utf-8，实际却是使用另一种编码（比如 GB2312），并不会导致浏览器的自动转码，网页可能会显示为乱码。
（2）name 属性，content 属性
<meta>标签的name属性表示元数据的名字，content属性表示元数据的值。它们合在一起使用，就可以为网页指定一项元数据。
<head>
<meta name="description" content="HTML 语言入门">
<meta name="keywords" content="HTML,教程">
<meta name="author" content="张三">
</head>
上面代码包含了三个元数据：description是网页内容的描述，keywords是网页内容的关键字，author是网页作者。
元数据有很多种，大部分涉及浏览器内部工作机制，或者特定的使用场景，这里就不一一介绍了。下面是一些例子。
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="Application Name">
<meta name="generator" content="program">
<meta name="subject" content="your document's subject">
<meta name="referrer" content="no-referrer">
（3）http-equiv 属性，content 属性
<meta>标签的http-equiv属性用来覆盖 HTTP 回应的头信息字段，content属性是对应的字段内容。这两个属性与 HTTP 协议相关，属于高级用法，这里就不详细介绍了。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
上面代码可以覆盖 HTTP 回应的Content-Security-Policy字段。
下面是另一些例子。
<meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8">
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="30;URL='http://website.com'">
<title>
<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。
<head>
<title>网页标题</title>
</head>
搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响，应该精心安排，反映网页的主题。
<title>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。
<body>
<body>标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。它是<html>的第二个子元素，紧跟在<head>后面。
<html>
<head>
<title>网页标题</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
<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!”。
<img>
<img>标签用于插入图片。它是单独使用的，没有闭合标签。
<img src="foo.jpg">
上面代码在网页插入一张图片foo.jpg。src属性指定图片的网址，上例是相对 URL，表示图片与网页在同一个目录。
<img>默认是一个行内元素，与前后的文字处在同一行。
<p>Hello<img src="foo.jpg">World</p>
上面代码的渲染结果是，文字和图片在同一行显示。
图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。
<img>可以放在<a>标签内部，使得图片变成一个可以点击的链接。
<a href="example.html">
<img src="foo.jpg">
</a>
上面代码中，图片可以像链接那样点击，点击后会产生跳转。
（1）alt 属性
alt属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。
<img src="foo.jpg" alt="示例图片">
上面代码中，alt是图片的说明。图片下载失败时，浏览器会在图片位置，显示文字“示例图片”。
（2）width 属性，height 属性
图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。
<img src="foo.jpg" width="400" height="300">
上面代码中，width属性指定图片显示的宽度为400像素，height属性指定显示高度为300像素。
注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。
一种特殊情况是，width属性和height属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。举例来说，图片大小是 800像素 x 800像素，width属性设置成200，那么浏览器会自动将height设成200。
（3）srcset，sizes
详见下文的《响应式图像》部分。
（4）referrerpolicy
<img>导致的图片加载的 HTTP 请求，默认会带有Referer的头信息。referrerpolicy属性对这个行为进行设置。
（5）crossorigin
有时，图片和网页属于不同的网站，网页加载图片就会导致跨域请求，对方服务器可能要求跨域认证。crossorigin属性用来告诉浏览器，是否采用跨域的形式下载图片，默认是不采用。
简单说，只要打开了这个属性，HTTP 请求的头信息里面，就会加入origin字段，给出请求发出的域名，不打开这个属性就不加。
一旦打开该属性，它可以设为两个值。
anonymous：跨域请求不带有用户凭证（通常是 Cookie）。use-credentials：跨域请求带有用户凭证。
下面是一个例子。
<img src="foo.jpg" crossorigin="anonymous">
crossorigin属性如果省略值的部分，则等同于anonymous。
<img src="foo.jpg" crossorigin>
（6）loading
浏览器的默认行为是，只要解析到<img>标签，就开始加载图片。对于很长的网页，这样做很浪费带宽，因为用户不一定会往下滚动，一直看到网页结束。用户很可能是点开网页，看了一会就关掉了，那些不在视口的图片加载的流量，就都浪费了。
loading属性改变了这个行为，可以指定图片的懒加载，即图片默认不加载，只有即将滚动进入视口，变成用户可见时才会加载，这样就节省了带宽。
loading属性可以取以下三个值。
auto：浏览器默认行为，等同于不使用loading属性。lazy：启用懒加载。eager：立即加载资源，无论它在页面上的哪个位置。
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。
表单标签
<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>窗口）。
<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时显示绿色，两者之间显示黄色。
练习
<!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>
<style>
p {
/* border:10px solid red; */ /*设置实线框边的粗细大小为10px 颜色 为 红色*/
width: 300px; /*设置宽度*/
height: 100px; /*设置高度*/
color: green; /*字体颜色*/
background-color: blue; /*背景颜色*/
font-size:10px; /*设置字体大小*/
}
</style>
<body>
<div>
<p style="display: inline; color: aqua;">hello security</p><p style="display: inline;">1111111</p>
<span></span>
</div>
<!-- action提交地址 -->
<!-- 以post形式提交表单 账号密码 -->
<form action="" method="post">
<input type="text" name="user" id="">
<input type="password" name="passwd" id="">
<input type="submit" value="提交">
</form>
</body>
</html>
最后
以上就是潇洒猎豹最近收集整理的关于安全基础&&HTML5html的全部内容，更多相关安全基础&&HTML5html内容请搜索靠谱客的其他文章。
发表评论 取消回复