首页 > 代码库 > 你该知道的 HTML5
你该知道的 HTML5
一、图片和标题语义化
<figure> <img src="http://www.mamicode.com/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类似];
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。