Html5笔记之第四天
| 属性 | 值 | 描述 |
|---|---|---|
| accesskey | character | 规定访问元素的键盘快捷键 |
| class | classname | 规定元素的类名（用于规定样式表中的类）。 |
| contenteditable |
|
规定是否允许用户编辑内容。 |
| contextmenu | menu_id | 规定元素的上下文菜单。 |
| data-yourvalue | value |
创作者定义的属性。 HTML 文档的创作者可以定义他们自己的属性。 必须以 "data-" 开头。 |
| dir |
|
规定元素中内容的文本方向。 |
| draggable |
|
规定是否允许用户拖动元素。 |
| hidden | hidden | 规定该元素是无关的。被隐藏的元素不会显示。 |
| id | id | 规定元素的唯一 ID。 |
| item |
|
用于组合元素。 |
| itemprop |
|
用于组合项目。 |
| lang | language_code | 规定元素中内容的语言代码。语言代码参考手册。 |
| spellcheck |
|
规定是否必须对元素进行拼写或语法检查。 |
| 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笔记之第四天的更多相关文章
- Deep Learning论文笔记之（四）CNN卷积神经网络推导和实现（转）
Deep Learning论文笔记之(四)CNN卷积神经网络推导和实现 zouxy09@qq.com http://blog.csdn.net/zouxy09 自己平时看了一些论文, ...
- 【Unity Shaders】学习笔记——SurfaceShader（四）用纹理改善漫反射
[Unity Shaders]学习笔记——SurfaceShader(四)用纹理改善漫反射 转载请注明出处:http://www.cnblogs.com/-867259206/p/5603368.ht ...
- python学习笔记--Django入门四 管理站点--二
接上一节 python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...
- VSTO学习笔记（十四）Excel数据透视表与PowerPivot
原文:VSTO学习笔记(十四)Excel数据透视表与PowerPivot 近期公司内部在做一种通用查询报表,方便人力资源分析.统计数据.由于之前公司系统中有一个类似的查询使用Excel数据透视表完成的 ...
- HTML5笔记3——Web Storage和本地数据库
上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...
- Python学习笔记（十四）
Python学习笔记(十四): Json and Pickle模块 shelve模块 1. Json and Pickle模块 之前我们学习过用eval内置方法可以将一个字符串转成python对象,不 ...
- 深度学习课程笔记（十四）深度强化学习 --- Proximal Policy Optimization (PPO)
深度学习课程笔记(十四)深度强化学习 --- Proximal Policy Optimization (PPO) 2018-07-17 16:54:51 Reference: https://b ...
- 【Git 使用笔记】第四部分：git在公司中的开发流程
先声明几个变量 仓管A:主分支,只有master分支仓管B:开发分支,只有各个业务开发分支 仓管B fork 于 A 如下图 为了保证 代码的稳定性,只有 仓管B中的某个分支测试完毕并进行了代码r ...
- python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法
python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...
随机推荐
- ES6模板字面量
前面的话 JS 的字符串相对其他语言来说功能总是有限的,事实上,ES5中一直缺乏许多特性,如多行字符串.字符串格式化.HTML转义等.ES6通过模板字面量的方式进行了填补,模板字面量试着跳出自己JS已 ...
- C++引用形参，函数返回多个值
之前编代码有遇到过想让一个函数返回多个值的情况,low low的我不知道有什么办法,直接使用的全局变量将函数里的值传出去. 今天看书,<C++primer>第五版中文版第189页:使用引用 ...
- 【HTML】谈谈html的meta标签
一.定义&用法 <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头 ...
- HTML5 开发APP
近期在做app,现在项目进行了一段时间,我打算把自己的经验写出来,给自己总结一下也给会用小伙伴看一下.本人前端一枚.我们所以能选的技术就是CSS,HTML,JS了,经过准备我决定用HBuilder 准 ...
- BFC基础分析
W3C官方对于BFC的描述只有3小段,强烈建议想理解BFC的朋友先去看看,链接见文末. 常见的文档流分为:定位流.浮动流.普通流3种.BFC是普通流中的一种. 本文提出3个问题并给出使用BFC来解决这 ...
- Android文件上传与下载
文件上传与下载 文件上传 -- 服务端 以Tomcat为服务器,Android客服端访问Servlet,经Servlet处理逻辑,最终将文件上传,这里就是简单模拟该功能,就将文件上传到本机的D:\\u ...
- React Native 系列(一) -- JS入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- Java获取指定时间的毫秒值的方法
有以下两种方法获取指定时间的毫秒值: 1.Calendar类 先由getInstance获取Calendar对象,然后用clear方法将时间重置为(1970.1.1 00:00:00),接下来用set ...
- PL/SQL 编程（二）游标、存储过程、函数
游标--数据的缓存区 游标:类似集合,可以让用户像操作数组一样操作查询出来的数据集,实质上,它提供了一种从集合性质的结果中提取单条记录的手段. 可以将游标形象的看成一个变动的光标,他实质上是一个指针, ...
- python_正则表达式
re.match函数 re.match 尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,match()就返回none. 函数语法: \[re.match(pattern, strin ...