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>
<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>
<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:
FORM s:
<mark></mark>
：需要标记的词或句子
<progress><progress>
定义进度条
<progress max="100"value="76">
<span>76</span>%
</progress>用ｊｓ创建元素，然后样式中display:block:
<script>
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
</script>
<style>
header,nav,footer{display:block}
</style>
FORM s:
新的输入型控件
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); //实现ｂ对ａ的拷贝
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
