属性 值 描述
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 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>

Html5笔记之第四天的更多相关文章

  1. Deep Learning论文笔记之（四）CNN卷积神经网络推导和实现（转）

    Deep Learning论文笔记之(四)CNN卷积神经网络推导和实现 zouxy09@qq.com http://blog.csdn.net/zouxy09          自己平时看了一些论文, ...

  2. 【Unity Shaders】学习笔记——SurfaceShader（四）用纹理改善漫反射

    [Unity Shaders]学习笔记——SurfaceShader(四)用纹理改善漫反射 转载请注明出处:http://www.cnblogs.com/-867259206/p/5603368.ht ...

  3. python学习笔记--Django入门四 管理站点--二

    接上一节  python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...

  4. VSTO学习笔记（十四）Excel数据透视表与PowerPivot

    原文:VSTO学习笔记(十四)Excel数据透视表与PowerPivot 近期公司内部在做一种通用查询报表,方便人力资源分析.统计数据.由于之前公司系统中有一个类似的查询使用Excel数据透视表完成的 ...

  5. HTML5笔记3——Web Storage和本地数据库

    上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...

  6. Python学习笔记（十四）

    Python学习笔记(十四): Json and Pickle模块 shelve模块 1. Json and Pickle模块 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不 ...

  7. 深度学习课程笔记（十四）深度强化学习 --- Proximal Policy Optimization (PPO)

    深度学习课程笔记(十四)深度强化学习 ---  Proximal Policy Optimization (PPO) 2018-07-17 16:54:51  Reference: https://b ...

  8. 【Git 使用笔记】第四部分：git在公司中的开发流程

    先声明几个变量 仓管A:主分支,只有master分支仓管B:开发分支,只有各个业务开发分支   仓管B fork 于 A 如下图 为了保证 代码的稳定性,只有 仓管B中的某个分支测试完毕并进行了代码r ...

  9. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

随机推荐

  1. 支付宝LR集群压测报告

    支付宝压力测试报告 时间:2016-03-23                                             测试人员:XXX 目录 支付宝压力测试报告 1 目录 1 一   ...

  2. LINUX下的远端主机登入 校园网络注册 网络数据包转发和捕获

    第一部分:LINUX 下的远端主机登入和校园网注册 校园网内目的主机远程管理登入程序 本程序为校园网内远程登入,管理功能,该程序分服务器端和客户端两部分:服务器端为remote_server_udp. ...

  3. 用letsencrypt搭建免费的https网站

    环境:阿里云服务器centos7.3,nignx,letsencrypt做免费的https证书 Let’s Encrypt官网:https://letsencrypt.org/ 1.服务器开放端口:4 ...

  4. cloudstack下libvirtd服务无响应问题

    在cloudstack4.5.2版本下,偶尔出现libvirtd服务无响应的情况,导致virsh命令无法使用,同时伴随cloudstack master丢失该slave主机连接的情况.最初怀疑是lib ...

  5. [COGS 2051] 王者之剑

    Saber大法吼 2051. 王者之剑 ★★★☆   输入文件:Excalibur.in   输出文件:Excalibur.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述 ...

  6. TCP 滑动窗口

    滑动窗口协议 流量控制方法 PUSH 慢启动   隔一个报文段确认"的策略实际就是因为 delayed ack,同时接收到两个待确认的ACK包时,就立即发送确认包.   滑动窗口实例   解 ...

  7. 36. leetcode 415. Add Strings

    415. Add Strings Given two non-negative integers num1 and num2 represented as string, return the sum ...

  8. 【mock.js】后端不来过夜半，闲敲mock落灯花 ——南宋·赵师秀

      mock的由来[假]   赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正值产品上线的紧张时期,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,  赵师秀非常生气 ...

  9. 成为Java顶尖程序员 ，看这11本书就够了（转）

    学习的最好途径就是看书",这是我自己学习并且小有了一定的积累之后的第一体会.个人认为看书有两点好处: 1.能出版出来的书一定是经过反复的思考.雕琢和审核的,因此从专业性的角度来说,一本好书的 ...

  10. grunt+bower依赖管理

    安装bower(必须安装git) npm install bower -g bower按照插件命令 初始化配置 bower init 生成bower.json //如果有bower.json 直接输入 ...