属性 值 描述
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. Druid 详细介绍

    文章来自阿里巴巴 Druid是一个JDBC组件,它包括三部分:  DruidDriver 代理Driver,能够提供基于Filter-Chain模式的插件体系. DruidDataSource 高效可 ...

  2. runtime实现对象存储型数据库——LHDB

    前言 最近在GitHub上看了一份关于基于runtime封装的对象存储型数据库的开源代码,觉得非常值得分享记录一下,在IOS中对数据库的操作一般通过CoreData和SQLite,CoreData 虽 ...

  3. matlab图片清晰度调整

    打开.fig文件后: 1.首先设置窗口中的文字大小和相关的图例 2.然后将窗口缩小到要在word中或者ppt中展示图片的大小(避免图片缩小减少清晰度) 3.调整横纵坐标说明,使得布局合理 4.点击Ei ...

  4. 电脑装windows与Centos双系统时引导问题

    (本文对电脑如何装windows系统和centos系统不进行详细赘述.) 电脑装双系统时,首先要安装windows系统,在硬盘中划分一块空闲的分区,用来安装centos系统(可以借助"软碟通 ...

  5. Java 方法（变量）修饰符的使用顺序

    1:访问权限标识:public  private  protected  (default) 2:static 静态  :abstract  抽象方法/类 3:final  常量:[可选,不能和abs ...

  6. 蓝桥杯比赛javaB组练习《牌型种数》

    牌型种数 小明被劫持到X赌城,被迫与其他3人玩牌.一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张.这时,小明脑子里突然冒出一个问题:如果不考虑花色,只考虑点数,也不考虑自己得到的牌 ...

  7. 解决 lispbox macOS 不兼容问题

    误打误撞,解决了很重要的入门级问题,简要记录下. lispbox 官网末尾说目前暂不兼容 10.4 以上系统: TODO: Compile on Mac OS X 10.4, for compatab ...

  8. 读取txt文件加DevExpress之进度条progressBarControl

    进度条使用 主要掌握下边几个命令, //水平进度条 progressBarControlH.Properties.Minimum = 0;//1:设置最大数量,比如读取txt文件内容,先要查出行数,然 ...

  9. suffix tree

    文章出处:http://www.cnblogs.com/snowberg/archive/2011/10/21/2468588.html   3   What is a Suffix Tree Suf ...

  10. [STM32F429-DISCO-HAL]4.Uart 的使用

    今天来学习一下最常用的外设之一USART. 首先是硬件的连接,我们需要至少三根线,GND,TX,RX.参阅datasheet.默认的USART1_TX和USART1_RX的引脚如下图 关于HAL dr ...