w3school关于标签的解析
http://www.w3school.com.cn/tags/
一、body
属性 | 值 | 描述 |
---|---|---|
link | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用。请使用样式取代它。规定文档中未访问链接的默认颜色。 |
alink | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用。请使用样式取代它。规定文档中活动链接(active link)的的颜色。 |
vlink | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用。请使用样式取代它。规定文档中已被访问链接的颜色。 |
background | URL | 不赞成使用。请使用样式取代它。规定文档的背景图像。 |
bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用。请使用样式取代它。规定文档的背景颜色。 |
text | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用。请使用样式取代它。规定文档中所有文本的颜色。 |
二、换行标签<br>
换行标签是个单标签,也叫空标签,不包含任和内容,在 html 文件中的任何位置只要使用了<br>
标 签,当文件显示在浏览器中时,该标签之后的内容将显示下一行。
三、换段落标签<p>
属性 | 值 | 描述 |
---|---|---|
align | left、center、right、justify | 在 HTML 4.01 中,不赞成使用 p 元素的 align 属性;在 XHTML 1.0 Strict DTD 中,不支持 p 元素的 align 属性。请使用 CSS 代替。CSS 语法:<p style="text-align:right">
|
justify:对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中),即使每行左右两边顶到边,英文的时候才看得出效果。
四、居中对齐标签<center>
在 HTML 4.01 中,center 元素不被赞成使用。在 XHTML 1.0 Strict DTD 中,center 元素不被支持。
注释:请使用 CSS 样式来居中文本!
五、引文标签 (缩排标签)<blockquote>
<blockquote>
标签定义块引用。<blockquote>
与 </blockquote>
之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
六、水平分隔线标签<hr>
属性 | 值 | 描述 |
---|---|---|
align | left、center、right | 不赞成使用。 请使用样式取代它。规定 hr 元素的对齐方式。 |
noshade | noshade | 不赞成使用。 请使用样式取代它。规定 hr 元素的颜色呈现为纯色。 |
size | pixels | 不赞成使用。 请使用样式取代它。规定 hr 元素的高度(厚度)。默认2像素 |
width | pixels、% | 不赞成使用。 请使用样式取代它。规定 hr 元素的宽度。默认100% |
color | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用。 请使用样式取代它。规定 hr 元素的颜色。 |
七、署名标签<address>
- <address> 标签定义文档或文章的作者/拥有者的联系信息。
- 如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。
- 如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
- <address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
提示和注释
- <address> 标签不应该用于描述通讯地址,除非它是联系信息的一部分。
- <address> 元素通常连同其他信息被包含在 <footer> 元素中。
HTML 4.01 与 HTML5 之间的差异
HTML 4.01 不支持 <article>
标签,因此在 HTML 4.01 中,<address>
标签始终定义文档作者/拥有者的联系信息。
八、原样显示文字标签<pre>
- pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
-
<pre>
标签的一个常见应用就是用来表示计算机的源代码。 - 可以导致段落断开的标签(例如标题、
<p>
、<address>
)绝不能包含在<pre>
所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。 - pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分割线。当把其他标签(比如
<a>
标签)放到<pre>
块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。
提示和注释
- 制表符(tab)在 <pre> 标签定义的块当中可以起到应有的作用,每个制表符占据 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格,可以确保文本正确的水平位置。
- 如果您希望使用 <pre> 标签来定义计算机源代码,比如 HTML 源代码,请使用符号实体来表示特殊字符,比如 "<" 代表 "<",">" 代表 ">","&" 代表 "&"。
九、特殊字符
在 HTML 文档中,有些字符没办法直接显示出来,例如?. 使用特殊字符可以将键盘上没有的字符表达 出来,而有些 HTML 文档的特殊字符在键盘上虽然可以得到,但浏览器在解析 HTML 文当时会报错,例如 "<"等,为防止代码混淆,必须用一些代码来表示它们。这些代码叫做符号实体
十、标题文字标签 <h1> 到 <h6>
<h1> 定义最大的标题。<h6> 定义最小的标题。
属性 | 值 | 描述 |
---|---|---|
align | left、center、right | 不赞成使用。 请使用样式取代它。规定标题中文本的排列。 |
十二、文字格式控制标签<FONT>
属性 | 值 | 描述 |
---|---|---|
color | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用。 请使用样式取代它。规定文本的颜色。 |
face | font_family | 不赞成使用。 请使用样式取代它。规定文本的字体。 |
size | number | 不赞成使用。 请使用样式取代它。规定文本的大小。 |
提示和注释
请使用样式(代替
<font>
)来定义文本的字体、颜色和大小
十三、特定文字样式标签
标签 | 用法 | 描述 |
---|---|---|
<b> | 规定粗体文本 | 根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。也能够使用 CSS“font-weight”属性来设置粗体文本。 |
<i> | 显示斜体文本效果 | 无 |
<u> | 定义下划线文本 | 在 HTML 4.01 中,u 元素是不被推荐使用的.请尽量避免为文本加下划线 - 用户会把它混淆为一个超链接!无 |
<em> | 把文本定义为强调的内容。 | 无 |
<strong> | 把文本定义为语气更强的强调的内容。 | 无 |
<cite> | 定义引用。 | 可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。 |
<code> | 定义计算机代码文本。 | 无 |
<small> | 呈现小号字体效果 | 无 |
<big> | 呈现大号字体效果 | 无 |
<samp> | 定义样本文本。 | 无 |
<kbd> | 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 | 无 |
<var> | 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 | 无 |
<dfn> | 定义一个定义项目。 | 无 |
<sup> |
定义上标文本 | 无 |
<sub> |
定义下标文本 | 无 |
十四、列表相关
列表中可以嵌套另一个列表
标签 | 属性 | 描述 |
---|---|---|
<li> | type、value | 定义列表项目,可用在有序列表 (<ol>) 和无序列表 (<ul>) 中 |
<ul> | compact、type | 定义无序列表 |
<ol> | compact、reversed、start、type | 定义有序列表。在 HTML 4.01 中,ol 元素的 "compact"、"start" 以及 "type" 属性是不被赞成使用的。 |
<dir> | compact | 定义目录列表 |
<dl> | 定义了定义列表 | |
<dt> | 定义了定义列表中的项目 | |
<dd> | 在定义列表中定义条目的定义部分 | |
<menu> | label、type | 目前所有主流浏览器都不支持 |
属性注释
type:disc(实心圆)、circle(空心圆)、square(小方块)、1(数字)、A(大写英文字母)、a(小写英文字母)、I(大写罗马数字符号)、i(小写罗马数字符号)
compact:任何主流浏览器都不支持compact属性
value:规定列表项目的数字
start:规定有序列表的起始值,值的类型为number
reversed:规定列表顺序为降序。值就是reversed
十五、插入图片标签<img>
属性 | 值 | 描述 |
---|---|---|
alt | text | 规定图像的替代文本 |
src | URL | 规定图像的URL |
align | top、bottom、middle、left、right | 不推荐使用。规定如何根据周围的文本来排列图像。 |
border | pixels | 不推荐使用。定义图像周围的边框。 |
height | pixels、% | 定义图像的高度。通常只设为图片的真实大小以免失真,改变图片大小 最好用图像工具. |
hspace | pixels | 不推荐使用。定义图像左侧和右侧的空白。 |
ismap | URL | 将图像定义为服务器端图像映射。当用户在 ismap 图像上单击了某处时,浏览器会自动把鼠标的 x、y 位置(相对于图像的左上角)发送到服务器端。特殊的服务器端软件可以根据这些坐标来做出响应。 |
longdesc | URL | 指向包含长的图像描述文档的 URL。 |
usemap | #mapname | 将图像定义为客户器端图像映射。# + 要使用的 <map> 元素的 name 或 id 属性 |
vspace | pixels | 不推荐使用。定义图像顶部和底部的空白。 |
width | pixels、% | 设置图像的宽度。通常只设为图片的真实大小以免失真,改变图片大小 最好用图像工具. |
dynsrc | URL | 指定 avi 文件所在路径 |
loop | number | 设定 avi 文件循环次数 |
loopdelay | 设定 avi 文件循环延迟 | |
start | fileopen、mouseover | 设定文件播放方式网页打开时即播放、当鼠标滑到 avi 文件时播放 |
lowsrc | URL | 设定低分辨率图片,若所加入的是一张很大的图片,可先显 示图片。 |
usemap属性详细解析
usemap 属性提供了一种“客户端”的图像映射机制,有效地消除了服务器端对鼠标坐标的处理,以及由此带来的网络延迟问题。通过特殊的 <map> 和 <area> 标签,HTML 创作者可以提供一个描述 usemap 图像中超链接敏感区域坐标的映射,这个映射同时包含相应的超链接 URL。usemap 属性的值是一个 URL,它指向特殊的 <map> 区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为,包括加载和显示另外一个文档。
我们举例说明一下,下面这段源代码将一个 100x100 像素的图像 map.gif 映射为 4 个区域,当用户单击其中某一个区域时,将被链接到不同的文档中。请注意,在这个 <img> 标签中,我们已经有效地包含了对 ismap 图像映射的处理功能,这样,那些使用不具有 usemap 处理功能的浏览器用户,就可以通过另外一中途径,即服务器端机制来处理图像映射:<a href="/example/map"> <img src="/i/map.gif" ismap="ismap" usemap="#map" /> </a> <map name="map"> <area coords="0,0,49,49" href="link1.html"> <area coords="50,0,99,49" href="link2.html"> <area coords="0,50,49,99" href="link3.html"> <area coords="50,50,99,99" href="link4.html"> </map>
十六、超链接<a>
定义超链接,用于从一张页面链接到另一张页面。
属性 | 值 | 描述 |
---|---|---|
charset | char_encoding | HTML5中不支持规定被链接文档的字符集。 |
coords | coordinates | HTML5中不支持规定链接的坐标。 |
download | filename | 规定被下载的超链接目标在下载后的名称。 |
href | URL | 规定链接指向的页面的 URL。 |
hreflang | language_code | 规定被链接文档的语言。主流的浏览器几乎都不支持 hreflang 属性。 |
media | media_query | 规定被链接文档是为何种媒介/设备优化的。 |
name | section_name | HTML5中不支持规定锚的名称 |
rel | text | 规定当前文档与被链接文档之间的关系。 |
rev | text | HTML5中不支持规定被链接文档与当前文档之间的关系。 |
shape | default、rect、circle、poly | HTML5中不支持规定链接的形状。 |
target | _blank、_parent、_self、_top、framename | 规定在何处打开链接文档。 |
type | MIME type | 规定被链接文档的的 MIME 类型。该属性是 HTML5 中 a 元素的新属性。 |
如果不使用 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性。
属性详细解析
- href属性:
- 绝对 URL - 指向另一个站点
- 相对 URL - 指向站点内的某个文件
- 锚 URL - 指向页面中的锚(href="#top")
- shape属性:
default:规定全部区域
rect:定义矩形区域
circle:定义圆形
poly:定义多边形区域
- target属性:
_blank:在新窗口中打开被链接文档
_self:默认。在相同的框架中打开被链接文档。
_parent :在父框架集中打开被链接文档。
_top:在整个窗口中打开被链接文档。
framename:在指定的框架中打开被链接文档。
-
name属性使用实例
1、发送E-main
参数列表
参数 | 含义 |
---|---|
to | 收信人 |
suject | 主题 |
cc | 抄送 |
bcc | 暗抄送 |
body | 内容 |
参数传递方式同页面之间传递值一样,可以使用查询字符串,也可以用form
querystring方式:
<a href="mailto:sample@163.com?subject=test&cc=sample@hotmail.com&body=use mailto sample">send mail</a>
form方式:
<form name='sendmail' action='mailto:sample@163.com'>
<input name='cc' type='text' value='sample@hotmail.com'>
<input name='subject' type='text' value='test'>
<input name='body' type='text' value='use mailto sample'>
</form>
两种方式同样传递所有参数。
用鼠标单击一下该超级连接的话,浏览器会自动调用系统默认的邮件客户端程序,同时按照设定好的变量值,如subject、cc等,在邮件客户端中自动填入设定好的值。
如果要将邮件发送到多个邮箱,可以使用分号";"隔开,如下所示:
<a href="mailto:sample@163.com;abc@qq.com?subject=test&cc=sample@hotmail.com&body=use mailto sample">send mail</a>
如果想使邮件内容(变量body对应的变量值)换行,则直接加上<br>
标签,如下所示:
<a href="mailto:sample@163.com?subject=test&cc=sample@hotmail.com&body=use<br>mailto sample">send mail</a>
2、ftp
格式:ftp://帐号:密码@FTP网址
eg.
帐号:wangfei
密码:88888888
FTP网址为:www.iefans.net
<a href="ftp://wangfei:88888888@www.wangfei.net"> 王飞FTP</a>
3、图像的超链接
<a href="http://baidu.com">
<img src="http://img0.imgtn.bdimg.com/it/u=2472221060,3111898232&fm=26&gp=0.jpg">
</a>
4、点播音乐
<a href="http://www.luyin.com/upload/beibeixiongtongzhuang0821013.mp3">音乐</a>
十七、表格<table>
相关标签 | 描述 |
---|---|
<caption> | 定义表格的标题。在表格中也可以不用此 标签。 |
<th> | 定义表头单元格。表格中的文字将以粗体 显示,在表格中也可以不用此标签,<th> 标签必须放在<tr> 标签内 |
<tr> | 定义一行标签,一组行标签内可以建立多 组由<td> 或<th> 标签所定义的单元格 |
<td> | 定义单元格标签,一组<td> 标签将将建 立一个单元格,<td> 标签必须放在<tr> 标签内 |
<caption>属性 | 值 | 描述 |
---|---|---|
align | left、right、top、bottom | 不赞成使用。请使用样式取而代之。分别固定规定标题在表格的左、右、上、下 |
注释 :除了 Firefox,其他主流浏览器都无法正确地支持 align 属性。
所有主流浏览器都支持 "top" 和 "bottom" 值。Chrome 和 Safari 不支持 "left" 和 "right"。Internet Explorer 和 Opera 只能对 caption 内部的文本(而不是整个 caption 元素)进行对齐。
<table>属性 | 值 | 描述 |
---|---|---|
align | left、center、right | 不赞成使用请使用样式代替。规定表格相对周围元素的对齐方式。 |
bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用请使用样式代替。规定表格的背景颜色。 |
border | pixels | 规定表格边框的宽度。 |
bordercolor | rgb(x,x,x)、#xxxxxx、colorname | 表格边框颜色。当 border>=1 时起作用 |
bordercolorlight | rgb(x,x,x)、#xxxxxx、colorname | 表格边框明亮部分颜色。当 border>=1 时起作用 |
bordercolordark | rgb(x,x,x)、#xxxxxx、colorname | 表格边框昏暗部分颜色。当 border>=1 时起作用 |
cellpadding | pixels、% | 规定单元边沿与其内容之间的空白。 |
cellspacing | pixels、% | 规定单元格之间的空白。 |
frame | void、above、below、hsides、lhs、rhs、vsides、box、border | 规定外侧边框的哪个部分是可见的。从实用角度出发,最好不要规定 frame,而是使用 CSS 来添加。除了 Internet Explorer,其他浏览器都支持 frame 属性。 |
rules | none、groups、rows、cols、all | 规定内侧边框的哪个部分是可见的。 |
summary | text | 规定表格的摘要。该属性不会对普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。 |
width | pixels、% | 规定表格的宽度。 |
height | pixels、% | 规定表格的高度。 |
<tr>属性 | 值 | 描述 |
---|---|---|
height | number | 行高 |
align | left、center、right、justify、char | 定义表格行的对齐方式。 |
bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用请使用样式代替。规定表格行的背景颜色。 |
char | character | 几乎没有浏览器支持规定根据哪个字符来进行文本对齐 |
charoff | number | 规定第一个对齐字符的偏移量,和char属性配合使用 |
valign | top、middle、bottom、baseline | 规定表格行中内容的垂直对齐方式 |
<td>/<th>属性 | 值 | 描述 |
---|---|---|
align | left、center、right、justify、char | 规定单元格内容的水平对齐方式。 |
valign | top、middle、bottom、baseline | 规定单元格内容的垂直排列方式 |
axis | category_name | 对单元进行分类。 |
bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 不赞成使用请使用样式代替。规定单元格的背景颜色。 |
colspan | number | 规定单元格可横跨的列数。 |
rowspan | number | 规定单元格可横跨的行数。 |
height/width | pixels、% | 不赞成使用请使用样式代替。规定表格单元格的高度和宽度,会影响对应行和列的高度。 |
scope | col、colgroup、row、rowgroup | 定义将表头数据与单元数据相关联的方法。 |
nowrap | nowrap | 不赞成使用请使用样式取而代之。规定单元格中的内容是否折行。 |
<td>/<th>的scope属性
- col 规定单元格是列的表头。
- row 规定单元格是行的表头。
- colgroup 规定单元格是列组的表头。
- rowgroup 规定单元格是行组的表头。
表格的分组
- 按行分组
html 文档的表格按行分组是由表头标签<thead>、表格主体标签<tbody>和尾注标签<tfoot>三个 部分组成的。<tbody>标签用于规定表格主体部分的元素,可出现多次。
<thead>/<tbody>/<tfoot>属性 值 描述 align left、center、right、justify、char 规定元素内的单元格内容的水平对齐方式。只有 Internet Explorer 和 Opera 支持 align 属性。 valign top、middle、bottom、baseline 规定元素内的单元格内容的垂直排列方式。只有 Internet Explorer 和 Opera 支持 valign 属性。 提示
在默认情况下<thead>、<tbody>、<tfoot>元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。
- 按列分组
html 使用<colgroup>标签来将表格按列分组。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。
属性 值 描述 span number 规定列组相应横跨的列数 width pixels、%、relative_length 规定列组合中列的宽度
表格的嵌套
十八、插入多媒体文件<embed>
<embed> 标签是 HTML 5 中的新标签。
属性 | 值 | 描述 |
---|---|---|
height | pixels | 设置嵌入内容的高度 |
width | pixels | 设置嵌入内容的宽度 |
src | url | 嵌入内容的url |
type | MIME_type | 定义嵌入内容的类型 |
十九、多视图窗口框架<frameset>
<frameset> 可定义一个框架集。它被用来组织多个窗口(框架)。<frameset>内可以嵌套<frameset>。
html 页面的文档体标签<body>被框架集标签 <frameset>所取代,然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口的页面属性。Frame 子框架的 src 属性的 URL 值指定了一个 html 文件(这个文件必须事先做好)地址,地址路径可使用绝对路径或相对路径,这个文件将载入相应的窗口中。
<frameset> 标签有一个必需的属性:要么是 rows,要么是 cols,这取决于您的选择,它们定义了文档窗口中框架或嵌套的框架集的行或列的大小及数目。
这两个属性都接受用引号括起来并用逗号分开的值列表,这些数值指定了框架的绝对(像素点)或相对(百分比或其余空间)宽度(对列而言),或者绝对或相对高度(对行而言)。这些属性值的数目决定了浏览器将会在文档窗口中显示多少行或列的框架。
属性 | 值 | 描述 |
---|---|---|
cols | pixels、%、* | 定义框架中列的数目和尺寸 |
rows | pixels、%、* | 定义框架集中行的数目和尺寸 |
border
注释:
您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过,如果您需要为不支持框架的浏览器添加一个 <noframes> 标签,请务必将此标签放置在 <body></body> 标签中!
<noframes>的使用
<frameset>实例
二十、子窗口<frame>
<frame> 标签定义 frameset 中的一个特定的窗口(框架)。
属性 | 值 | 描述 |
---|---|---|
frameborder | 0、1 | 规定是否显示框架周围的边框。出于实用性方面的原因,最好不用设置该属性,请使用 CSS 来应用边框样式和颜色 |
longdesc | url | 规定一个包含有关框架内容的长描述的页面。 |
marginheight | pixels | 定义框架的上方和下方的边距。 |
marginwidth | pixels | 定义框架的左侧和右侧的边距。 |
name | name | 规定框架的名称。 |
noresize | noresize | 规定无法调整框架的大小。 |
scrolling | yes、no、auto | 规定是否在框架中显示滚动条。 |
scr | url | 规定在框架中显示的文档的 URL。 |
二十一、浮动窗口<iframe>
属性 | 值 | 描述 |
---|---|---|
align | left、right、top、middle、bottom | 不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。 |
frameborder | 1、0 | 规定是否显示框架周围的边框 |
height | pixels、% | 规定ifram的高度 |
width | pixels、% | 规定ifram的宽度 |
longdesc | url | 规定一个页面,该页面包含有关iframe的较长描述 |
marginheight | pixels | 定义iframe的顶部和底部边距 |
marginwidht | pixels | 定义iframe的左侧和右侧的边距 |
name | frame_name | 规定iframe的名称。 |
sandbox | “” 、 allow-forms、allow-same-origin、allow-scripts、allow-top-navigation | 启用一系列对<iframe>中内容的额外限制。 |
scrolling | yes、no、auto | 规定是否在iframe中显示滚动条 |
seamless | seamless | 规定<iframe>看上去是否包含文档的一部分。IE和firefox不支持该属性 |
src | url | 规定iframe中显示的文档url。 |
srcdoc | HTML_code | 规定<iframe>中显示的页面的html内容。 |
二十二、表单<form>
- <form> 标签用于为用户输入创建 HTML 表单。
- 表单能够包含input、menus、textarea、fieldset、legend和label元素
- 表单用于向服务器传输数据
属性 | 值 | 描述 |
---|---|---|
accept | MIME_type | HTML5中不支持 |
accept-charset | charset_list | 规定服务器可处理的表单数据字符集。 |
action | url | 规定当提交表单时向何处发送表达数据。 |
autocomplete | on、off | 规定是否用表单的自动完成功能 |
enctype | 规定在发送表单数据之前如何对其进行编码 | |
method | get、post | 规定用于发送form-data的HTTP方法 |
name | form_name | 规定表单的名称,name 属性提供了一种在脚本中引用表单的方法。 |
novalidate | novalidate | 如果使用该属性,则提交表单时不尽兴验证。 |
target | _blank、_self、_parent、_top、_framename | 规定在何处打开actionURL。 |
enctype 属性可能的值:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
二十三、<input>
- <input> 标签用于搜集用户信息。
- 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
- 请使用label元素为某个表单控件定义标签
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
属性 | 值 | 描述 |
---|---|---|
accept | mime_type | 规定通过文件上传来提交的文件的类型。只能与 <input type="file"> 配合使用。请避免使用该属性。应该在服务器端验证文件上传。 |
align | left、right、top、middle、bottom | 不赞成使用。规定图像输入的对齐方式。只能与 <input type="image"> 配合使用 |
alt | text | 定义图像输入的替代文本 |
autocomplete | on、off | 规定是否使用输入字段的自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 |
autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点(不适用于type=“hidden”) |
checked | checked | 规定此input元素首次加载时应当被选中。与 <input type="checkbox"> 或 <input type="radio"> 配合使用。 |
disabled | disabled | 当input元素加载时禁止用此元素 |
form | formname | 规定输入字段所属一个或多个表单。form 属性的值必须是其所属表单的 id。如需引用一个以上的表单,请使用空格分隔的列表。 |
formaction | url | 覆盖表单的action属性。(适用于type=“submit”和type=“image”) |
formenctype | 覆盖表单的enctype属性。(适用于 type=“submit”和type=“image”) | |
formmethod | get、post | 覆盖表单的method属性。(适用于 type=“submit”和type=“image”) |
formnovalidate | formnovalidate | 覆盖表单的novalidate属性。如果使用该属性,则提交表单的时候不验证。 |
formtarget | _blank、_self、_parent、_top、_framename | 覆盖表单的target属性。(适用于 type=“submit”和type=“image”) |
height | pixels、% | 定义input字段的高度。(适用于type=“image”) |
list | datalist-id | 引用包含输入字段的预定义选项的datalist。 |
max | number、date | 规定输入字段的最大值。请与“min”属性配合使用,来创建合法值的范围 |
maxlength | number | 规定输入字段中的字符的最大长度 |
min | number、date | 规定输入字段的最小值。请与“max”属性配合使用,来创建合法值的范围 |
multiple | multiple | 如果使用该属性,则允许一个以上的值。 |
name | field_name | 定义input元素的名称。用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 |
pattern | regexp_pattern | 规定输入字段的值的模式或者格式。例如pattern=“[0-9]"表示输入值必须试0与9之间的数字。使用的是正则表达式。请使用标准的 "title" 属性来描述模式,当提交的时候,检测到输入不符合格式会提示“title”文字 |
placeholder | text | 规定帮助用户填写输入字段的提示 |
readonly | readonly | 规定输入字段为只读。属性可与 <input type="text"> 或 <input type="password"> 配合使用。可以 使用JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。 |
required | required | 规定输入字段的值是必须的 |
size | number_of_char | 定义输入字段的宽度。对于 <input type="text"> 和 <input type="password">,size 属性定义的是可见的字符数。而对于其他类型,size 属性定义的是以像素为单位的输入字段宽度。具体效果为调节输入框长度。由于 size 属性是一个可视化的设计属性,推荐您使用 CSS (<input style="width:100px" />)来代替它。 |
src | url | 定义以提交按钮形式显示的图像的url。只能与 <input type="image"> 配合使用。 |
step | number | 规定输入字的合法数字间隔 |
type | button、checkbox、file、hidden、image、password、radio、reset、submit、text | 规定input元素的类型 |
value | value | 规定input元素的值 |
width | pixels、% | 定义input字段的宽度。(适用于type=“image”) |