您的位置：首页 > Web前端

菜鸟学前端之遍寻名师

2015-08-25 19:25 429 查看
<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规定通过文件上传来提交的文件的类型。
alignleft
right
top
middle
bottom

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

规定是否使用输入字段的自动完成功能。
autofocusautofocus规定输入字段在页面加载时是否获得焦点。

（不适用于 type="hidden"）
checkedchecked规定此 input 元素首次加载时应当被选中。
disableddisabled当 input 元素加载时禁用此元素。
formformname规定输入字段所属的一个或多个表单。
formactionURL覆盖表单的 action 属性。

（适用于 type="submit" 和 type="image"）
formenctype见注释覆盖表单的 enctype 属性。

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

覆盖表单的 method 属性。

（适用于 type="submit" 和 type="image"）
formnovalidateformnovalidate覆盖表单的 novalidate 属性。

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

覆盖表单的 target 属性。

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

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

规定输入字段的最大值。

请与 "min" 属性配合使用，来创建合法值的范围。
maxlengthnumber规定输入字段中的字符的最大长度。
minnumber
date

规定输入字段的最小值。

请与 "max" 属性配合使用，来创建合法值的范围。
multiplemultiple如果使用该属性，则允许一个以上的值。
namefield_name定义 input 元素的名称。
patternregexp_pattern规定输入字段的值的模式或格式。

例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
placeholdertext规定帮助用户填写输入字段的提示。
readonlyreadonly规定输入字段为只读。
requiredrequired指示输入字段的值是必需的。
sizenumber_of_char定义输入字段的宽度。
srcURL定义以提交按钮形式显示的图像的 URL。
stepnumber规定输入字的的合法数字间隔。
typebutton
checkbox
file
hidden
image
password
radio
reset
submit
text

规定 input 元素的类型。
valuevalue规定 input 元素的值。
widthpixels
%

定义 input 字段的宽度。（适用于 type="image"）
<form>的属性：

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

规定是否启用表单的自动完成功能。
enctype见说明规定在发送表单数据之前如何对其进行编码。
methodget
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" 配合使用。
formmethodget
post

覆盖 form 元素的 method 属性。

注释：该属性与 type="submit" 配合使用。
formnovalidateformnovalidate覆盖 form 元素的 novalidate 属性。

注释：该属性与 type="submit" 配合使用。
formtarget_blank
_self
_parent
_top
framename

覆盖 form 元素的 target 属性。

注释：该属性与 type="submit" 配合使用。
namebutton_name规定按钮的名称。
typebutton
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>的名字标签
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航