html5 学习
HTML5新特性的浏览器支持情况查询：http://www.caniuse.com/#index
页面结构以及宽松的语法规范
新增标签：
<header></header>
<hgroup></hgroup>
<footer></footer>
页面结构以及宽松的语法规范
<!doctype html> <meta charset=“utf-8”/>
新增标签：
<header></header>
<hgroup></hgroup>
<hgroup> <h1>主标题</h1> <h2>副标题</h2> </hgroup><nav></nav>
<footer></footer>
<section> <section>：页面上的版块
新的选择器：<article></ article >：用来在页面中表示一套结构完整且独立的内容部分
<aside></ aside> ：元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
<figure> < figure > ：用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption>： figure的子元素 用于对figure的内容 进行说明
<figcaption> <figcaption>： figure的子元素 用于对figure的内容 进行说明
<figure> <img src=“miaov.png”/> //(注意没有alt) <figcaption>文字说明</figcaption> </figure>
<time></time>：用来表现时间或日期
<p> 每天早上 <time>9:00</time> 开始营业。 </p> <p> 在<time datetime="2014-01-01">元旦</time> 那天。 </p><datalist></datalist>：选项列表。与text文本框配合使用
<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></details>：用于描述文档或文档某个部分的细节
< summary></summary>： details元素的标题
<details> <summary>妙味课堂</summary> <p>国内将知名的IT培训机构</p> </details>
<address></address>：定义文章 或页面作者的详细联系信息
用ｊｓ创建元素，然后样式中display:block:
FORMs:
<mark></mark>：需要标记的词或句子
<progress><progress>定义进度条
<progress max="100"value="76">
<span>76</span>%
</progress>针对IE6-8这些不支持HTML5语义化标签的浏览器解决办法：用ｊｓ创建元素，然后样式中display:block:
<script>
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
</script>
<style>
header,nav,footer{display:block}
</style>
FORMs:
新的输入型控件
email :
电子邮箱文本框，跟普通的没什么区别
–当输入不是邮箱的时候，验证通不过
–移动端的键盘会有变化
tel :
电话号码
url :
网页的URL
search :
搜索引擎
–chrome下输入文字后，会多出一个关闭的X
range :
特定范围内的数值选择器
–min、max、step(步数
)
number : 只能包含数字的输入框
color : 颜色选择器
datetime :
显示完整日期
datetime-local :
显示完整日期，不含时区
time : 显示时间，不含时区
date : 显示日期
week : 显示周
month : 显示月
新的表单特性
placeholder : 输入框提示信息
–例子 : 微博的密码框提示
autocomplete :
是否保存用户输入值
–默认为on，关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist :
为输入框构造一个选择列表
–list值为datalist标签的id
required : 此项必填，不能为空
Pattern: 正则验证 pattern="\d{1,5}“
Formaction在submit里定义提交地址
querySelector：选择满足条件的第一个元素。
querySelectorAll：选择满足条件的一组元素。
getElementsByClassName：根据class选择元素，参数为元素的class名。
新的Selectors API不仅更方便，而且也更高效，推荐使用。
例如：页面上有一个表格，获取鼠标悬浮下的单元格：
window.JSON新方法:
新的Selectors API不仅更方便，而且也更高效，推荐使用。
例如：页面上有一个表格，获取鼠标悬浮下的单元格：
var hovered=document.querySelector("td:hover");classList：
–length:
class的长度
–add()
: 添加class方法
–remove()
: 删除class方法
–toggle():
切换class方法
元素的classList属性返回的是一个{}对象－类数组。window.JSON新方法:
JSON.parse():把字符串转成json（字符串中的属性要严格的加上引号）
JSON.stringify()
:把json转化成字符串（解析完的字符串会自动加上引号）
JSON.parse()和eval()的区别：
eval()能解析任意的字符串，JSON.parse()只能解析ｊｓｏｎ格式的字符串，且字符串中的属性要严格的加上引号。所以JSON.parse()安全性会更高，更适用。
应用：克隆新对象，之前我们利用ｊｓ克隆一个对象时候，需要考虑深拷贝和浅拷贝，这里就不再需要区分：
JSON.parse()和eval()的区别：
eval()能解析任意的字符串，JSON.parse()只能解析ｊｓｏｎ格式的字符串，且字符串中的属性要严格的加上引号。所以JSON.parse()安全性会更高，更适用。
应用：克隆新对象，之前我们利用ｊｓ克隆一个对象时候，需要考虑深拷贝和浅拷贝，这里就不再需要区分：
var a={"m":{"n":"hello"}};
var aStr=JSON.stringify(a) ;
var b=JSON.parse(aStr); //实现ｂ对ａ的拷贝支持低版本的浏览器：到http://www.json.org/下载json2.js，引入到页面即可。
勤于总结 乐于分享
