Html5笔记之第四天

于 2016-12-23 10:49:56 发布
阅读量219 收藏 1
点赞数
分类专栏： 前端 文章标签： html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_little_snail/article/details/53836682
版权

属性值描述
accesskeycharacter规定访问元素的键盘快捷键
classclassname规定元素的类名（用于规定样式表中的类）。
contenteditable
  • true
  • false
规定是否允许用户编辑内容。
contextmenumenu_id规定元素的上下文菜单。
data-yourvaluevalue

创作者定义的属性。

HTML 文档的创作者可以定义他们自己的属性。

必须以 "data-" 开头。

dir
  • ltr
  • rtl
规定元素中内容的文本方向。
draggable
  • true
  • false
  • auto
规定是否允许用户拖动元素。
hiddenhidden规定该元素是无关的。被隐藏的元素不会显示。
idid规定元素的唯一 ID。
item
  • empty
  • url
用于组合元素。
itemprop
  • url
  • group value
用于组合项目。
langlanguage_code规定元素中内容的语言代码。语言代码参考手册。
spellcheck
  • true
  • false
规定是否必须对元素进行拼写或语法检查。
stylestyle_definition规定元素的行内样式。
subjectid规定元素对应的项目。
tabindexnumber规定元素的 tab 键控制次序。
titletext规定有关元素的额外信息。


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

方法二：

<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>













jajajajajajaja1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值