Html5笔记之第四天

属性	值	描述
accesskey	character	规定访问元素的键盘快捷键
class	classname	规定元素的类名（用于规定样式表中的类）。
contenteditable	true false	规定是否允许用户编辑内容。
contextmenu	menu_id	规定元素的上下文菜单。
data-yourvalue	value	创作者定义的属性。 HTML 文档的创作者可以定义他们自己的属性。必须以 “data-” 开头。
dir	ltr rtl	规定元素中内容的文本方向。
draggable	true false auto	规定是否允许用户拖动元素。
hidden	hidden	规定该元素是无关的。被隐藏的元素不会显示。
id	id	规定元素的唯一 ID。
item	empty url	用于组合元素。
itemprop	url group value	用于组合项目。
lang	language_code	规定元素中内容的语言代码。语言代码参考手册。
spellcheck	true false	规定是否必须对元素进行拼写或语法检查。
style	style_definition	规定元素的行内样式。
subject	id	规定元素对应的项目。
tabindex	number	规定元素的 tab 键控制次序。
title	text	规定有关元素的额外信息。

标签	描述	4	5
<!–…–>	定义注释。	4	5
<!DOCTYPE>	定义文档类型。	4	5
<a>	定义超链接。	4	5
<abbr>	定义缩写。	4	5
<acronym>	HTML 5 中不支持。定义首字母缩写。	4
<address>	定义地址元素。	4	5
<applet>	HTML 5 中不支持。定义 applet。	4
<area>	定义图像映射中的区域。	4	5
<article>	定义 article。		5
<aside>	定义页面内容之外的内容。		5
<audio>	定义声音内容。		5
<b>	定义粗体文本。	4	5
<base>	定义页面中所有链接的基准 URL。	4	5
<basefont>	HTML 5 中不支持。请使用 CSS 代替。	4
<bdo>	定义文本显示的方向。	4	5
<big>	HTML 5 中不支持。定义大号文本。	4
<blockquote>	定义长的引用。	4	5
<body>	定义 body 元素。	4	5
<br>	插入换行符。	4	5
<button>	定义按钮。	4	5
<canvas>	定义图形。		5
<caption>	定义表格标题。	4	5
<center>	HTML 5 中不支持。定义居中的文本。	4
<cite>	定义引用。	4	5
<code>	定义计算机代码文本。	4	5
<col>	定义表格列的属性。	4	5
<colgroup>	定义表格列的分组。	4	5
<command>	定义命令按钮。		5
<datalist>	定义下拉列表。		5
<dd>	定义定义的描述。	4	5
<del>	定义删除文本。	4	5
<details>	定义元素的细节。		5
<dfn>	定义定义项目。	4	5
<dir>	HTML 5 中不支持。定义目录列表。	4
<div>	定义文档中的一个部分。	4	5
<dl>	定义定义列表。	4	5
<dt>	定义定义的项目。	4	5
<em>	定义强调文本。	4	5
<embed>	定义外部交互内容或插件。		5
<fieldset>	定义 fieldset。	4	5
<figcaption>	定义 figure 元素的标题。		5
<figure>	定义媒介内容的分组，以及它们的标题。		5
<font>	HTML 5 中不支持。	4
<footer>	定义 section 或 page 的页脚。		5
<form>	定义表单。	4	5
<frame>	HTML 5 中不支持。定义子窗口（框架）。	4
<frameset>	HTML 5 中不支持。定义框架的集。	4
<h1> to <h6>	定义标题 1 到标题 6。	4	5
<head>	定义关于文档的信息。	4	5
<header>	定义 section 或 page 的页眉。		5
<hgroup>	定义有关文档中的 section 的信息。		5
<hr>	定义水平线。	4	5
<html>	定义 html 文档。	4	5
<i>	定义斜体文本。	4	5
<iframe>	定义行内的子窗口（框架）。	4	5
<img>	定义图像。	4	5
<input>	定义输入域。	4	5
<ins>	定义插入文本。	4	5
<keygen>	定义生成密钥。		5
<isindex>	HTML 5 中不支持。定义单行的输入域。	4
<kbd>	定义键盘文本。	4	5
<label>	定义表单控件的标注。	4	5
<legend>	定义 fieldset 中的标题。	4	5
<li>	定义列表的项目。	4	5
<link>	定义资源引用。	4	5
<map>	定义图像映射。	4	5
<mark>	定义有记号的文本。		5
<menu>	定义菜单列表。	4	5
<meta>	定义元信息。	4	5
<meter>	定义预定义范围内的度量。		5
<nav>	定义导航链接。		5
<noframes>	HTML 5 中不支持。定义 noframe 部分。	4
<noscript>	定义 noscript 部分。	4	5
<object>	定义嵌入对象。	4	5
<ol>	定义有序列表。	4	5
<optgroup>	定义选项组。	4	5
<option>	定义下拉列表中的选项。	4	5
<output>	定义输出的一些类型。		5
<p>	定义段落。	4	5
<param>	为对象定义参数。	4	5
<pre>	定义预格式化文本。	4	5
<progress>	定义任何类型的任务的进度。		5
<q>	定义短的引用。	4	5
<rp>	定义若浏览器不支持 ruby 元素显示的内容。		5
<rt>	定义 ruby 注释的解释。		5
<ruby>	定义 ruby 注释。		5
<s>	HTML 5 中不支持。定义加删除线的文本。	4
<samp>	定义样本计算机代码。	4	5
<script>	定义脚本。	4	5
<section>	定义 section。		5
<select>	定义可选列表。	4	5
<small>	定义小号文本。	4	5
<source>	定义媒介源。		5
<span>	定义文档中的 section。	4	5
<strike>	HTML 5 中不支持。定义加删除线的文本。	4
<strong>	定义强调文本。	4	5
<style>	定义样式定义。	4	5
<sub>	定义下标文本。	4	5
<summary>	定义 details 元素的标题。		5
<sup>	定义上标文本。	4	5
<table>	定义表格。	4	5
<tbody>	定义表格的主体。	4	5
<td>	定义表格单元。	4	5
<textarea>	定义 textarea。	4	5
<tfoot>	定义表格的脚注。	4	5
<th>	定义表头。	4	5
<thead>	定义表头。	4	5
<time>	定义日期/时间。		5
<title>	定义文档的标题。	4	5
<tr>	定义表格行。	4	5
<tt>	HTML 5 中不支持。定义打字机文本。	4
<u>	HTML 5 中不支持。定义下划线文本。	4
<ul>	定义无序列表。	4	5
<var>	定义变量。	4	5
<video>	定义视频。		5
<xmp>	HTML 5 中不支持。定义预格式文本。	4

标准事件属性
HTML 4 增加了通过事件触发浏览器中行为的能力，比如当用户点击某个元素时启动一段 JavaScript。

如果需要学习更多有关使用这些事件进行编程的内容，请学习我们的 JavaScript 教程和 DHTML 教程。

下面的表格列出了可插入 HTML 5 元素中以定义事件行为的标准事件属性。

Window 事件属性 – Window Event Attributes
表单事件 – Form Events
键盘事件 – Keybord Events
鼠标事件 – Mouse Events
媒介事件 – Media Events

输入校验

方法一：

方法二：

<form action=”add”>
	<input id=”name” name=”name” type=”text” required/><br/>
	<input id=”isbn” name=”isbn” type=”text”
	required pattern=”\d{3}-\d-\d{3}-\d{5}”/><br/>
	<input id=”price” name=”price” type=”number”
	min=”20″ max=”150″ step=”5″/><br/>
	<input type=”submit” value=”提交” onclick=”check();”/>
	</form>
	<script type=”text/javascript”>
	var check = function()
	{
	if(!document.getElementById(“name”).checkValidity())
	{
	document.getElementById(“name”).setCustomValidity(“图书名是必填的！”);
	}
	if(!document.getElementById(“isbn”).checkValidity())
	{
	document.getElementById(“isbn”).setCustomValidity(“图书ISBN必须填写，”
	+ “\n而且必须符合xxx-x-xxx-xxxxx的格式（其中x代表数字）。”);
	}
	if(!document.getElementById(“price”).checkValidity())
	{
	document.getElementById(“price”).setCustomValidity(“图书价格必须填写，”
	+ “\n而且必须在20~150之间，且是5的倍数。”);
	}
	};
	</script>

方法三：自定义输出信息

<form action=”add”>
	生日：<input id=”birth” name=”birth” type=”date”/><br/>
	邮件地址：<input id=”email” name=”email” type=”email”/><br/>
	<input type=”submit” value=”提交” onclick=”return check();”/>
	</form>
	<script type=”text/javascript”>
	var check = function()
	{
	return commonCheck(“birth” , “生日” , “字段必须是有效的日期！”)
	&& commonCheck(“email” , “邮件地址” , “字段必须符合电子邮件的格式！”);
	}
	var commonCheck = function(field , fieldName , tip)
	{
	var targetEle = document.getElementById(field);
	// 如果该字段的值为空
	if (targetEle.value.trim() == “”)
	{
	alert(fieldName + “字段必须填写！”);
	return false;
	}
	// 调用checkValidity()方法执行输入校验
	else if(!targetEle.checkValidity())
	{
	alert(fieldName + tip);
	return false;
	}
	return true;
	}
	</script>

输入校验

个人收藏笔记记录

开通VIP