HTML5基础知识整理(一)—— 新增标签和属性
来源:互联网 发布:caffe 数据增强 编辑:程序博客网 时间:2024/06/16 18:58
http://www.caniuse.com/#index
语义化标签的由来
http://devfiles.myopera.com/articles/572/idlist-url.htm
语义化标签
<header></header> 页眉
主要用于页面的头部的信息介绍,也可用于板块头部
<footer></footer>页脚
页面的底部 或者 版块底部
<hgroup></hgroup> 页面上的一个标题组合 (在最新的html5.1中已被废除)
一个标题和一个子标题,或者标语的组合
<span style="font-size:18px;"><hgroup> <h1>妙味课堂</h1> <h2>带您进入富有人情味的IT培训</h2></hgroup></span>
<nav></nav> 导航 (包含链接的的一个列表)
<span style="font-size:18px;"><nav><a href=“#”>链接</a><a href=“#”>链接</a></nav><nav> <p><a href=“#”>妙味课堂</a></p> <p><a href=“#”>妙味课堂</a></p></nav></span>
<span style="font-size:18px;"><nav> <h2>妙味精品课程</h2> <ul> <li><a href=“#”>javascript</a></li> <li><a href=“#”>html+css</a></li> </ul></nav></span>
<section> </section> 页面上的版块
用于划分页面上的不同区域,或者划分文章里不同的节
<article></ article > 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂件等。
<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分
aside 的内容应该与 article 的内容相关。
被包含在<article>中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等
在<article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。
<span style="font-size:18px;"><section>页面上的一个区块或者说一个版块</section> <article>主体</article><aside>article的附属信息</aside></span>
<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
<span style="font-size:18px;"><figure> <img src=“****.png”/> <span style="color:#ff0000;">(注意没有alt)</span> <figcaption> ******** © ********</figcaption></figure></span>
<span style="font-size:18px;"><input type="text" list="valList" /><datalist id="valList"> <option value="javascript">javascript</option> <option value="html">html</option> <option value="css">css</option></datalist></span>
<details></details>用于描述文档或文档某个部分的细节
该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容Open 属性默认展开
< summary></summary> details 元素的标题
<span style="font-size:18px;"><details> <summary>妙味课堂</summary> <p>国内将知名的IT培训机构</p></details></span>
点击summary后,details标签中出现open属性,默认为第一个图。
<span style="font-size:18px;"><dialog> <dt>老师</dt> <dd>2+2 等于?</dd> <dt>学生</dt> <dd>4</dd> <dt>老师</dt> <dd>答对了!</dd></dialog></span>
<mark></mark> 需要标记的词或句子
<span style="font-size:18px;"><mark>标记</mark> // 此文字将黄色背景显示</span>
<progress><progress>定义进度条
<time>10:54 2014-1-5</time>
<span style="font-size:18px;"><progress max="100" value="76"> <span>76%</span></progress></span>
<time> 标签不会在任何浏览器中呈现任何特殊效果。
IE6、7、8下的兼容
针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们。方法如下:
在页面的头部加下:
<span style="font-size:18px;"><script> document.createElement(“header”); document.createElement(“nav”); document.createElement(“footer”); ……</script></span>
HTML5语义化标签在IE6-8下,我们用js创建出来之后,他是不会有任何默认样式的甚至是 display,所以在样式表里 要对这些标签定义一下 它默认的display
新的输入型控件
email : 电子邮箱文本框,跟普通的没什么区别
当输入不是邮箱的时候,验证通不过,移动端的键盘会有变化
<span style="font-size:18px;"><input type="email"></span>
tel : 电话号码 没有验证,移动端的键盘会有变化
<span style="font-size:18px;"><input type="tel"></span>
url : 网页的URL 有url验证
<span style="font-size:18px;"><input type="url"></span>
search : 搜索引擎 chrome下输入文字后,会多出一个关闭的X
<span style="font-size:18px;"><input type="search"></span>
range : 特定范围内的数值选择器 min、max、step( 步数 )
<span style="font-size:18px;"><input type="range" max="10" min="0" step="2" value="2" /><input type="submit" /></span>
<span style="font-size:18px;"><input type="number"/><input type="submit" /></span>
color : 颜色选择器 点击会出现颜色选择器
<span style="font-size:18px;"><input type="color"/><input type="submit" /></span>
datetime : 显示完整日期
<span style="font-size:18px;"><p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p></span>
便于搜索引擎搜索。当搜索引擎搜索该网页时,知道这个标签里面的文本是和事件有关的的,不是普通的文本内容。也可用这个标签实现自动更新内部文本、
datetime-local : 显示完整日期,不含时区
<span style="font-size:18px;"><input type="datetime-local" /><input type="submit" /></span>
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月
<span style="font-size:18px;"><form> <input type="month" />月 <input type="week" />周 <input type="date" />日 <input type="time" /> <input type="submit" /></form></span>
新的表单特性和函数
placeholder : 输入框提示信息
<input type="password" value="" placeholder="请输入">
autocomplete : 是否保存用户输入值
默认为on,关闭提示选择off
<input type="text" name="user" autocomplete="on">
autofocus : 指定表单获取输入焦点
<input type="text" name="user" autocomplete="off" autofocus="">
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填,不能为空
<input type="text" required="">
Pattern : 正则验证 pattern="\d{1,5}“
<input type="text" pattern="\d{1,5}">
Formaction 在submit里定义提交地址
<span style="font-size:18px;"><form action="http://www.miaov.com"> <input type="text" /> <input type="password" /> <input type="submit" value="提交" Formaction="http://www.baidu.com" /> <input type="submit" value="保存草稿" Formaction="http://www.qq.com" /></form></span>
表单验证
validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow:验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证 ;setCustomValidity(); 设置自定义验证
可以通过js查看验证状态:
<pre code_snippet_id="473135" snippet_file_name="blog_20140923_28_1463508" name="code" class="html"><pre code_snippet_id="473135" snippet_file_name="blog_20140923_28_1463508" name="code" class="html"><pre name="code" class="html"><script>window.onload=function(){var oText=document.getElementById("text");oText.addEventListener('invalid',fn,false);function fn(){alert(oText.validity.valid);// 是否满足验证
alert(oText.validity.valueMissing);// 用户输入为空的时候 返回true 否则返回false}};</script>
<form action="http://www.miaov.com"><span style="white-space:pre"></span><input type="text" id="text" <span style="color:#cc0000;">required</span> /> <input type="submit" value="提交"/></form>
返回的验证信息根据表单控件要求。
<script>window.onload=function(){var oText=document.getElementById("text");oText.addEventListener('invalid',fn,false);oText.value='123456789012345';function fn(){alert(oText.validity.tooLong);// 用户输入值超过maxLength时候 返回true 否则返回false}};</script>
<form action="#"><input type="text" id="text" maxlength="10" value="" name="user" /> <input type="submit" value="提交"/></form>
Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false)
阻止默认验证:ev.preventDefault()
自定义验证
input.oninput=function(){
if(this.value=="胖子")
this.setCustomValidity("请不要输入胖子");
};
window.onload=function(){var oText=document.getElementById("text");oText.oninput=function(){if(this.value=="胖子"){this.setCustomValidity("请不要输入胖子");}else{this.setCustomValidity("");}};oText.addEventListener('invalid',fn,false);function fn(){alert(oText.validity.customError);// 用户输入值不合符自定义验证的时候 返回true 否则返回false}};
<form action="#">老刘是<input type="text" id="text" /> <input type="submit" value="提交"/></form>
formnovalidate属性 : 关闭验证
<form action="http://www.miaov.com"> <input type="text" required name="user" /> <input type="email" name="email" required /> <input type="submit" value="提交" Formaction="http://www.baidu.com" /> <input type="submit" value="保存草稿" Formaction="http://www.qq.com" <span style="color:#cc0000;">formnovalidate</span> /></form>
点击第一个submit时,会有验证提示,但是点击第二个时就没有验证了。
- HTML5基础知识整理(一)—— 新增标签和属性
- html5新增标签和属性
- HTML5新增标签(一)
- HTML5新增的标签和属性归纳
- HTML5新增的标签和属性归纳
- HTML5--新增的标签、属性和事件
- HTML5新增属性(一)
- HTML5 学习总结(一)——HTML5概要与新增标签
- 如何使用HTML5新增标签(一)
- HTML5 form标签新增属性
- HTML5新增标签及属性
- html5新增标签及属性
- HTML5新增标签及废除标签整理
- html5基础知识——常用标签和新标签
- HTML5初探——新增的表单元素和属性
- html5篇——新增表单元素和表单属性
- HTML5标签整理一
- html5篇——新增文档标签
- Thread状态学习笔记。
- Spring事务配置的五种方式
- [每日练习]C编程实现句子中的单词反转
- 转:Oracle中的rownum不能使用大于>的问题
- 编辑文章 - 博客频道 - CSDN.NET
- HTML5基础知识整理(一)—— 新增标签和属性
- 通过spring的aop统一拦截Exception抛出自定义异常
- cocos2d-x v3.2 FlappyBird 各个类对象具体代码分析(7)
- 黑马程序员——集合类复习
- 愿你找到喜欢的工作,过上理想的生活
- 浅谈磁盘驱动调度——信息优化分布
- php中的urlencode()、urldecode() 的使用方法
- SVN UUID错误
- 竖屏小游戏--喵星战争源码分析【完整】