属性 值 描述
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. 一步一步学Vue（五）

    本篇是是vue路由的开篇,会以一个简单的demo对vue-router进行一个介绍,主要覆盖以下几个常用场景: 1.路由跳转 2.嵌套路由 3.路由参数 1.Vue-Router 一般来说,路由定义就 ...

  2. (转)java.util.Scanner应用详解

    java.util.Scanner应用详解   java.util.Scanner是Java5的新特征,主要功能是简化文本扫描.这个类最实用的地方表现在获取控制台输入,其他的功能都很鸡肋,尽管Java ...

  3. 阿里聚安全移动安全专家分享：APP渠道推广作弊攻防那些事儿

    移动互联网高速发展,要保持APP持续并且高速增长所需的成本也越来越高.美团网CEO在今年的一次公开会议上讲到:"2017年对移动互联网公司来说是非常恐的.".主要表现在三个方面,手 ...

  4. Java之IO流补充

    IO流例子 package com.hanqi.maya.util; import java.io.BufferedReader; import java.io.BufferedWriter; imp ...

  5. 【原创】07. ajax请求，解决sendRedirect 无效

    介绍: 后台基于旧代码用的Filter验证,若 Session过期,则跳转登陆页面 前台框架:EasyUI 问题: 最初后台验证不通过: 1 httpServletResponse.sendRedir ...

  6. Java编写的日历，输入年月，输出这个月的日期与星期

    import java.util.Scanner; public class rili { public static void main(String[] args) { for (int g = ...

  7. ABP+AdminLTE+Bootstrap Table权限管理系统第十节--AdminLTE模板菜单处理

    上节我们把布局页,也有的临时的菜单,但是菜单不是应该动态加载的么?,所以我们这节来写菜单.首先我们看一下AdminLTE源码里面的菜单以及结构. <aside class="main- ...

  8. HashMap 源码解读

    HashMap在JDK1.7和1.8中有了很大的改变,空闲时间对HashMap做了一点点的研究. HashMap是一种数组和链表结合的数据结构,我们每次new一个HashMap时,都会构造出一个长度为 ...

  9. VS2013+MFC串口控件的简单上位机

    因为做东西,正好用到这里.所以就上传了文件分享一下. 利用VS带的MFC库,用起来还是比较方便的.空间的程序构架都是自动生成的,具体的程序自己加进去就行. 里面有整个的工程 还带有一个生成的EXE文件 ...

  10. React Native 系列(七) -- ListView

    前言 本系列是基于React Native版本号0.44.3写的.几乎所有的App都使用了ListView这种组件,这篇文章将学习RN中ListView的平铺样式和分组样式. ListView平铺样式 ...