菜鸟学前端之遍寻名师

来源：互联网发布：淘宝收藏量有什么用编辑：程序博客网时间：2024/05/18 02:40

<abbr>:缩写，与title连用

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

<b>:字体加粗

<big>：大号

<small>：小号

<i>：斜体

<tt>:等宽

<bdi>:允许您设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。与dir一同使用

也就是说与dir的文本设置方向可以相反，进行单独处理

<bdo>:bdo 元素可覆盖默认的文本方向，与dir属性一同使用

<blockquote> ：<blockquote>与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。与cite=“URL”属性使用，指明来源

以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。

我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。

<em>把文本定义为强调的内容。<strong>把文本定义为语气更强的强调的内容。<dfn>定义一个定义项目。<code>定义计算机代码文本。<samp>定义样本文本。<kbd>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。<var>定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。<cite>定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

<del>：定义删除文本，一般显示为划线，可与cite属性（链接说明为什么删除）和datatime属性（说明何时删除）

<ins>：定义新插入文本，一般显示为下划线，其余同上

<mark>：突出显示文本，与上述不同，一般显示为阴影填充

<meter>：

<meter value="3" min="0" max="10">十分之三</meter><meter value="0.6">60%</meter>

<pre>：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子：

<pre><html><head>  <script type="text/javascript" src="loadxmldoc.js"></script></head><body>  <script type="text/javascript">    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");    document.write("xmlDoc is loaded, ready for use");  </script></body></html></pre>

在上面的代码中，<pre> 标签中的特殊符号被转换为符号实体，比如 "<" 代表 "<"，">" 代表 ">"。另外，请注意蓝色的代码，我们在 <pre> 标签中使用了链接，也就是 <a> 标签。上面这段代码的显示效果如下：

<html><head>  <script type="text/javascript" src="loadxmldoc.js"></script></head><body>  <script type="text/javascript">    xmlDoc=loadXMLDoc("books.xml");    document.write("xmlDoc is loaded, ready for use");  </script></body></html>

<input>：看名字就知道与客户输入有关，当然你看了<form>标签

<form>：创建表单，表单就是表，可以这么理解

<form action="form_action.asp" method="get">  First name: <input type="text" name="fname" />  Last name: <input type="text" name="lname" />  <input type="submit" value="Submit" /></form>

当然，网页一定有客户输入，所以其属性还蛮多的：

属性值描述acceptmime_type规定通过文件上传来提交的文件的类型。align

left
right
top
middle
bottom

不赞成使用。规定图像输入的对齐方式。alttext定义图像输入的替代文本。autocomplete

规定是否使用输入字段的自动完成功能。autofocusautofocus

规定输入字段在页面加载时是否获得焦点。

（不适用于 type="hidden"）

checkedchecked规定此 input 元素首次加载时应当被选中。disableddisabled当 input 元素加载时禁用此元素。formformname规定输入字段所属的一个或多个表单。formactionURL

覆盖表单的 action 属性。

（适用于 type="submit" 和 type="image"）

formenctype见注释

覆盖表单的 enctype 属性。

（适用于 type="submit" 和 type="image"）

formmethod

get
post

覆盖表单的 method 属性。

（适用于 type="submit" 和 type="image"）

formnovalidateformnovalidate

覆盖表单的 novalidate 属性。

如果使用该属性，则提交表单时不进行验证。

formtarget

_blank
_self
_parent
_top
framename

覆盖表单的 target 属性。

（适用于 type="submit" 和 type="image"）

height

pixels
%

定义 input 字段的高度。（适用于 type="image"）listdatalist-id引用包含输入字段的预定义选项的 datalist 。max

number
date

规定输入字段的最大值。

请与 "min" 属性配合使用，来创建合法值的范围。

maxlengthnumber规定输入字段中的字符的最大长度。min

number
date

规定输入字段的最小值。

请与 "max" 属性配合使用，来创建合法值的范围。

multiplemultiple如果使用该属性，则允许一个以上的值。namefield_name定义 input 元素的名称。patternregexp_pattern

规定输入字段的值的模式或格式。

例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。

placeholdertext规定帮助用户填写输入字段的提示。readonlyreadonly规定输入字段为只读。requiredrequired指示输入字段的值是必需的。sizenumber_of_char定义输入字段的宽度。srcURL定义以提交按钮形式显示的图像的 URL。stepnumber规定输入字的的合法数字间隔。type

button
checkbox
file
hidden
image
password
radio
reset
submit
text

规定 input 元素的类型。valuevalue规定 input 元素的值。width

pixels
%

定义 input 字段的宽度。（适用于 type="image"）

<form>的属性：

属性值描述acceptMIME_typeHTML 5 中不支持。accept-charsetcharset_list规定服务器可处理的表单数据字符集。actionURL规定当提交表单时向何处发送表单数据。autocomplete

规定是否启用表单的自动完成功能。enctype见说明规定在发送表单数据之前如何对其进行编码。method

get
post

规定用于发送 form-data 的 HTTP 方法。nameform_name规定表单的名称。novalidatenovalidate如果使用该属性，则提交表单时不进行验证。target

_blank
_self
_parent
_top
framename

规定在何处打开 action URL。

<button>：定义一个按钮，你可能说，我用<input>的type=button，不一样的嘛。<button>标签内可以定义好多东西，图像也可以，比<input>强大

<button type="button">Click Me!</button>

属性值描述autofocusautofocus规定当页面加载时按钮应当自动地获得焦点。disableddisabled规定应该禁用该按钮。formform_name规定按钮属于一个或多个表单。formactionurl

覆盖 form 元素的 action 属性。

注释：该属性与 type="submit" 配合使用。

formenctype见注释

覆盖 form 元素的 enctype 属性。

注释：该属性与 type="submit" 配合使用。

formmethod

get
post

覆盖 form 元素的 method 属性。

注释：该属性与 type="submit" 配合使用。

formnovalidateformnovalidate

覆盖 form 元素的 novalidate 属性。

注释：该属性与 type="submit" 配合使用。

formtarget

_blank
_self
_parent
_top
framename

覆盖 form 元素的 target 属性。

注释：该属性与 type="submit" 配合使用。

namebutton_name规定按钮的名称。type

button
reset
submit

规定按钮的类型。valuetext规定按钮的初始值。可由脚本进行修改。

<selet>：创建多选项

<select>  <option value ="volvo">Volvo</option>  <option value ="saab">Saab</option>  <option value="opel">Opel</option>  <option value="audi">Audi</option></select>

属性值描述autofocusautofocus规定在页面加载后文本区域自动获得焦点。disableddisabled规定禁用该下拉列表。formform_id规定文本区域所属的一个或多个表单。multiplemultiple规定可选择多个选项。namename规定下拉列表的名称。requiredrequired规定文本区域是必填的。sizenumber规定下拉列表中可见选项的数目。

<option>：定义刚才下拉列表的一个选项的

disableddisabled规定此选项应在首次加载时被禁用。labeltext定义当使用 <optgroup> 时所使用的标注。selectedselected规定选项（在首次显示在列表中时）表现为选中状态。valuetext定义送往服务器的选项值。

<optgroup>：看名字就知道，是把<option>分类显示

<select>  <optgroup label="Swedish Cars">    <option value ="volvo">Volvo</option>    <option value ="saab">Saab</option>  </optgroup>  <optgroup label="German Cars">    <option value ="mercedes">Mercedes</option>    <option value ="audi">Audi</option>  </optgroup></select>

必需的属性

属性值描述labeltext为选项组规定描述。

可选的属性

属性值描述disableddisabled规定禁用该选项组。

<label>：为<input>服务，相当给出一个标记，如果触发就怎样怎样

<form>  <label for="male">Male</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">Female</label>  <input type="radio" name="sex" id="female" /></form>

属性值描述forid规定 label 绑定到哪个表单元素。formformid规定 label 字段所属的一个或多个表单。

<fieldset>：就是对<input>进行一个区域划分

<form>  <fieldset>    <legend>health information</legend>    height: <input type="text" />    weight: <input type="text" />  </fieldset></form>

属性值描述disableddisabled规定应该禁用 fieldset。formform_id规定 fieldset 所属的一个或多个表单。namevalue规定 fieldset 的名称。

<legend>：就是<fieldset>的名字标签

0 0