22个常见HTML5新特性

分享到:

1,新DOCTYPE

还在使用那个讨厌的的标准doctype?试试下面这个

<!DOCTYPE HTML >

2. <figure>标签(图元素)

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

3. small重新定义

不久前,我使用了<small>标签来创建与logo相关的副标题。但是在HTML5中重新定义了<small>标签,使之更能表现语义化,在<small>的字号都会变小,想想如果这个标签用于网站的底部的版权信息还是个不错的做法。

4. 去掉了javascriptCSS标签的type属性

在HTML5中,不再需要type属性了,因为这显得有点多余,去掉之后可以让代码更为简洁。

<link href="path/to/stylesheet.css">
<script src="path/to/script.js"></script>

5. 是否使用双引号

<h6 id="someId"> Start the reactor.  </h6>

6. 使网页内容可以编辑

<h6 contenteditable="true">Break mechanical cab <span>driver</span></h6>

7. 电子邮件输入框

HMTL5中新增了一个输入框的电子邮件属性,可以检测输入的内容是否符合电子邮件的书写格式,功能越来越强大了吧,在HTML5之前只能依靠JS来检测。虽然内置的表单验证功能很快就会成为现实,但这个属性很多浏览器都还不支持,只会当作普通的文本输入框来处理。

<form method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email">
<button> Submit Form </button>
</form>

8. 占位符

<input name="email" placeholder="doug@givethesepeopleair.com" type="email">

9. 本地存储

HTML5的本地存储功能,可以让现代浏览器“记住”我们输入的,就算浏览器关闭和刷新也不会受影响。虽然这个功能有些浏览器不支持,但是IE8, Safari 4, 还有 Firefox 3.5还是支持这个功能的,你可以测试下。

22 个常见的HTML5技巧和实际应用
昵    称:
验证码:

相关文档:

  • HTML5属性运用
    HTML5 接触移动端,或专注于支持HTML5浏览器进行前端开发的工作者都不会陌生,这个已经普及很广,对于我专注于PC端开发的人来说,觉...
  • HTML、CSS --chrome书签整理
    1、http://www.w3cplus.com/blog/104.html CSS三栏布局——中间固定两边自适应宽度 2、http://www.topcss.org/?p=94 负值之美:负值在页面布局中的...
  • 让IE(IE6/IE7/IE8)支持HTML5标签
    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用...
  • html5(一)
    HTML5三个基本特色:结构、样式、功能。 <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><!--编码格式--><metaname="descr...
  • SpringMVC 整合 shiro mybatis hibernate html5
    A代码生成器(开发利器);B阿里数据库连接池druid;C安全权限框架shiro 此系统为springmvc+mybaits3.2版本,提供maven的pom.xml文件,另免费赠送hibernate...
  • HTML5+JS 《五子飞》游戏实现(六)鼠标响应与多重选择
    上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的。另外因为是网页游戏,所以一...
  • 学习html5标签代码
    <datalistid="url_list"><optionlabel="W3School"value="http://www.W3School.com.cn"/><optionlabel="Google"value="http://www.google.com"/&g...
  • HTML5七大优势“逼宫”APP
    HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来几年,HTML5将颠覆原生App世界。 跨平台: 在多屏年代,开发者的痛苦指数...
  • HTML5 touche vents drag to move & AF actionsheet by longTap
    $('img').on("touchstart",function(E){ //E.preventDefault();E.stopPropagation(); varel=this;varme=$(this);$("#tip").text("intouchstart"); vart=E.touch...
  • [转]浅析天猫H5站点
    前言 我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿、艺龙、同程等与携程的移动站点竞品分析,竞品分析...
  • Html5 Input 标签类型
    HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。本章全面介绍这些新的输入类型:email,url,number,range,Date pickers (date, month, week, time, datetime, datetime-local),search,color...
  • 寻开发兼职岗位/接私单/8年PHP开发经验 5年C# 3年JAVA
    项目 SEE365远程摄像头WEB管理系统(PHP和C控件) 中联POS网控通讯服务端和终端(C#/C++/PHP) 对大数据处理和分布式云端处理有丰富的架构经验...
  • Html5的等学习
    看了w3c感觉是说明文档,没有详细的说明,然后就去看其他的 html5其实就是在html的基础上做了一些改变,感觉html5的推广还是需要时间的...
  • 移动手机平台的HTML5前端优化指南
    对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台...
  • Hyhyhy – 专业的 HTML5 演示文稿工具
    Hyhyhy是创建好看的HTML5演示文档的工具。它具备很多的特点:支持Markdown,嵌套幻灯片,数学排版,兼容性,语法高亮,使用JavascriptAPI,...
  • HTML5系列文章(二)
    HTML5新增的表单控件 开文之前先备注一下我了解到的提高可访问性的两个小技巧: 为lable标签写上for属性,for属性用于引用与其相关联的...
  • [Javascript] Drawing Paths
    <!DOCTYPEhtml> <html> <head> <metaname="description"content="HTML5CanvasGraphicsandAnimationVideo1"/> <metacharset="utf-8"...
  • HTML5的FileAPI实现文件的读取及超大文件的上传
    HTML5的FileAPI实现文件的读取及超大文件的上传 2015-02-04 一、FileAPI实现本地文件的信息读取 <html>     <head>     &l...
  • Javascript history pushState onpopstate方法做AJAX SEO
    参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history https://developer.mozilla.org/zh-CN/docs/Mozilla_event_reference/...
  • HTML5版的String Avoider小游戏
    HTML5版的StringAvoider小游戏http://www.newgrounds.com/portal/view/300760蛮简单也蛮考验耐心,从游戏起始点移动鼠标到终点位置,鼠标移动过程绘制...