安全基础&&HTML5

html

符合 HTML 语法标准的网页,应该满足下面的基本结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
</html>

不管多么复杂的网页,都是从上面这个基本结构衍生出来的。

前面说过,HTML 代码的缩进和换行,对于浏览器不产生作用。所以,上面的代码完全可以写成一行,渲染结果不变。上面这样分行写,只是为了提高可读性。

下面就依次介绍,这个基本结构的主要标签。它们构成了网页的骨架。

<!doctype>

网页的第一个标签通常是<!doctype>,表示文档类型,告诉浏览器如何解析网页。

一般来说,只要像下面这样,简单声明doctypehtml即可。浏览器就会按照 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-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-urlsame-originstrict-originstrict-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.jpgsrc属性指定图片的网址,上例是相对 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:是否对用户输入启用拼写检查,可能的值为truefalse

(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 方法(getpost)。
  • 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 方法(getpost)。
  • formnovalidate:一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证。
  • formtarget:收到服务器返回的数据后,在哪一个窗口显示。

用户点击图像按钮提交时,会额外提交两个参数xy到服务器,表示鼠标的点击位置,比如x=52&y=55x是横坐标,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:是否对输入内容启用拼写检查,可能的值为truefalse

该类型还可以搭配<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属性,可能的值为postget
  • 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:进度条的当前值。它必须是0max属性之间的一个有效浮点数。如果省略了max属性,该值则必须在01之间。如果省略了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属性,则表示“高端”是最佳范围;如果在lowhigh之间,则表示“中间地带”是最佳范围。如果省略,则等于minmax的中间值。
  • 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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值