码迷,mamicode.com
首页 > Web开发 > 详细

你该知道的 HTML5

时间:2014-05-15 21:00:43      阅读:426      评论:0      收藏:0      [点我收藏+]

标签:style   class   code   c   ext   int   

一、图片和标题语义化

<figure>
    <img src="path/to/image" alt="About image" />
    <figcaption>
        <p>This is an image of something interesting. </p>
    </figcaption>
</figure>

二、本地存储 localStorage

HTML代码:

<ul id="edit" contenteditable="true">
    <li>修改我吧,然后刷新页面看看,^_^</li>
</ul>

JS代码:

var edit = document.getElementById("edit");
edit.onblur = function(){
    localStorage.setItem("tododata", this.innerHTML);
};
if(localStorage.getItem("tododata")){
    edit.innerHTML = localStorage.getItem("tododata");	
}

三、本表单元素的跨越性进步

新增元素和属性

required, from, pattern, placeholder, email, range[min, max, step], url, date, time, datetime, datetime-local, month, week, tel, number, search, --, contentcontenteditableable, contextmenu, data-yourvalue, draggable, item, itemprop, spellcheck, subject

四、正则表达式

重要的pattern属性

<form action="" method="get">
    <label for="username">姓名:</label>
    <input id="username" name="username" type="text" placeholder="4-10个英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus /> 
    <button type="submit">提交</button>
</form>

五、最后常用的新增语义化标签

新增标签

header, hgroup, nav, section, article, details, figure, figcaption, aside, time, mark, audio, video, source, track, bdi, canvas, command, datalist, summary, embed, keygen, meter, output, progress, rp, rt, ruby,

废弃标签

 <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>[删除线]、<strike>[删除线]、<tt>[定义打字机文本]、<u>[下划线文本]; 和 <xmp>[和pre类似];

 



 

 


你该知道的 HTML5,布布扣,bubuko.com

你该知道的 HTML5

标签:style   class   code   c   ext   int   

原文地址:http://www.cnblogs.com/zhangjingjing/p/3729747.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!