还没用markdown编辑器写过,测试下。
查看HTML5新特性的浏览器支持情况:
http://www.caniuse.com/#index
1. HTML5语义化标签
兼容:IE8以上。(其他浏览器支持情况可到上述网页查看)
解决IE6-8:
一、document.createElement("标签名")
;
(我自己用这个方法在为Firefox下测试了一些标签,貌似有些没成功,下次换台电脑再测试。)
二、引入html5shiv.js
<header>
页眉
<hgroup>
页面上的一个标题组合 一个标题和一个子标题,或者标语的组合
<nav>
导航 (包含链接的的一个列表)
<footer>
页脚 页面的底部 或者 版块底部
<section>
页面上的版块,用于划分页面上的不同区域,或者划分文章里不同的节
<article>
用来在页面中表示一套结构完整且独立的内容部分,比如博客评论部分。
<aside>
元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分。
● aside 的内容应该与 article 的内容相关。
<time>
用来表现时间或日期
<datalist>
选项列表。与 input 元素配合使用,来定义 input 可能的值。
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
<details>
与<summary>
一起用,用于描述文档或文档某个部分的细节 该元素用于摘录引用等,该与页面的主要内容区分开的其他内容
● Open 属性默认展开
<details>
<summary>妙味课堂</summary>
<p>国内将知名的IT培训机构</p>
</details>
<dialog>
定义一段对话
<dialog>
<dt>学生A</dt>
<dd>吃饭没?</dd>
<dt>学生B</dt>
<dd>没</dd>
<dt>学生A</dt>
<dd>要不一起?</dd>
</dialog>
<address>
定义文章 或页面作者的详细联系信息
<mark>
需要标记的词或句子
<keygen>
给表单添加一个公钥
<form action="#" method="get">
用户: <input type="text" name="usr_name" />
公钥: <keygen name="security" />
<input type="submit" />
</form>
<progress>
定义进度条 用span
放置不支持标签的显示内容
注:以上标签都是有闭合标签的。
2.表单
● 新增各种控件
email
: 电子邮箱文本框,当输入不是邮箱的时候验证通不过,移动端的键盘会有变化
tel
: 电话号码
url
: 网页的URL
search
: 搜索引擎,chrome下输入文字后,会多出一个关闭的X
range
: 特定范围内的数值选择器
min
、max
、step
( 步数 )
number
: 只能包含数字的输入框
color
: 颜色选择器
datetime
: 显示完整日期 (兼容:FF,Safari,IE不支持)
datetime-local
: 显示完整日期,不含时区 (兼容:FF,Safari,IE不支持)
time
: 显示时间,不含时区 (兼容:FF,Safari,IE不支持)
date
: 显示日期 (兼容:FF,Safari,IE不支持)
week
: 显示周 (兼容:FF,Safari,IE不支持)
month
: 显示月 (兼容:FF,Safari,IE不支持)
● 新的表单特性和函数
placeholder
: 输入框提示信息
autocomplete
: 是否保存用户输入值。默认为on,关闭提示选择off,完全支持的只有Opera41以上
autofocus
: 指定表单获取输入焦点
list
和datalist
: 为输入框构造一个选择列表
● list值为datalist标签的id
required
: 此项必填,不能为空
Pattern
: 正则验证 例: pattern=”\d{1,5}“
Formaction
在submit
里定义提交地址
●表单验证
validity对象
,通过下面的valid
可以查看验证是否通过,如果八种验证都返回false则validity返回true,一种验证失败返回false
Invalid事件
: 验证反馈
input.addEventListener('invalid',fn,false)
阻止默认验证:ev.preventDefault()
formnovalidate
属性 : 关闭验证,当需要暂时保存到草稿箱时
用法:元素.addEventListener("invalid",fn1,false);
ev.preventDefault()
八个事件:
valueMissing
: 输入值为空时
typeMismatch
: 控件值与预期类型不匹配
patternMismatch
: 输入值不满足pattern正则
tooLong
: 超过maxLength最大限制
rangeUnderflow
: 验证的range最小值
rangeOverflow
:验证的range最大值
rangeUnderflow
、rangeOverflow
二者其实用处不是很大,目前支持的浏览器根本不容许小于最小值,或大于最大值。
stepMismatch
: 验证range 的当前值 是否符合min、max及step的规则
customError
不符合自定义验证
setCustomValidity()
; 自定义验证
例:
<script>
//第一个
var oText1 = document.getElementById('text1');
oText1.addEventListener('invalid',fn,false);
function fn(ev){
alert(this.validity.typeMismatch);
ev.preventDefault();
}
// 第二个
//自定义事件
var oText = document.getElementById('text');
oText.oninput = function(){
if(this.value == 'nagi'){
this.setCustomValidity('取个其它名字吧~');
}else{
this.setCustomValidity(''); //否则验证通过
}
}
</script>
<form id="form">
<input id="text1" type="email" required />
<input type="submit" value="提交" />
<input type="submit" formaction="http://www.baidu.com" value="保存到草稿箱" formnovalidate />
</form>
<form>
<input id="text" type="text" autocomplete="on" />
<input type="submit" value="提交" />
</form>
3.延迟加载JS
当js文件过大、过多时就会影响到页面的加载,这时就需要延迟加载JS文件。主要有两种:
defer
: 延迟加载,会按顺序执行,在onload执行前被触发(相当于把JS文件放在body结束前)
async
: 异步加载,加载完就触发,但不能保证顺序,所以如果有相互依赖的JS文件时,不推荐使用。
兼容:Labjs库
测试结束…
另:附上从张大大那里找来的一篇文章。
http://www.zhangxinxu.com/wordpress/?p=1544