你该知道的 HTML5

一、图片和标题语义化

<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,古老的榕树,5-wow.com