HTML5新标签及用法

标签: HTML5 新特性 语义化 标签
46人阅读 评论(0) 收藏 举报
分类:

感谢:来自 知乎脚本之家简书:GarenWang大前端 的文章。

语义化的好处

去掉样式能让页面结构呈现清晰。普通人容易读
屏幕阅读器会按标记“读”你的网页。屏幕容易读
有益于SEO。爬虫容易读
便于团队开发和维护。程序猿容易读

H5是什么?


  • h5指的是一系列技术做的移动端ppt,主要技术有:

  • 1.页面素材加载技术,使用使用createJS之中的preloadJS(现成的库)
  • 2.音乐加载播放技术,createJS中同样有soundJS可以实现(又是它)
  • 3.可以滑动的页面,这不就是ppt吗?用了swiper.js这个Jquery插件(又是库)
  • 4.可以随意涂抹修改,使用canvas叠加层,canvas是HTML5标准里面的标签。这不是ppt吗?
  • 5.有动态的文字和图片,常见的是使用了css3或者直接使用js动画,这不是ppt吗?
  • 6.可以填表报名,使用最基本的表单
  • 7.可以支持分享自定义的文案和图片

HTML5是什么?

  • HTML5是一系列的HTML标准

doctype声明

<!DOCTYPE html>

常见结构标签

article:页面上结构完整并且内容独立 例如文章
aside:非正文内容, 例如广告 侧边栏
section:文档中的节,例如小说中的一章
header:文章的头部,通常是一些引导导航信息
footer:定义section或document的页脚
nav:定义显示导航链接
canvas:画布
video:视频流
audio:音频流
source:定义媒介资源(video,audio)
progress:进度条,max 进度最大值,value为当前值
details:描述文档某个部分细节,可以折叠
summary:默认显示的details元素的标题,details包含summary
mark:标记需要突出显示的文本,markdown也可以用哦。
command:命令按钮,如单选按钮,复选框,按钮。

localStorage


  • localStorage对象可以将数据长期保存在客户端,除非人为清除。

  • 1.存储:localStorage.setItem(key,value)如果key存在时,更新value
  • 2.获取 localStorage.getItem(key)如果key不存在返回null
  • 3.删除 localStorage.removeItem(key)一旦删除,key对应的数据将会全部删除
  • 4.全部清除 localStorage.clear() 使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
  • 注意:localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M。

IE低版本兼容

  • 使用html5shiv可以解决ie低版本不兼容的问题,只需要在head中加上,当版本低于IE9时,浏览器会加载html5.js脚本,使得支持html5的新功能。一定要是head部分因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)。
    <head>
      <!--[if lt IE 9]>
      <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'>
      </script>
      <![endif]-->
    </head>

input的新成员

color,date,month,tel,time,week
email 用于检测是否为email格式
number 用于应该包含数值的输入域,可以设定对输入值的限定
range 用于定义一个滑动条,表示范围min, max, step
search 用于搜索,比如站点搜索或 Google 搜索
url 输入网址

表单新增属性

placeholder:输入框提示信息
autofocus:指定表单获取输入焦点
required:必填字段
pattern:正则验证


form:规定输入域所属的一个或多个表单(form属性所以用表单的id)
formaction:重写表单的action属性
formmethod:重写表单的method属性
autocomplete:on/off,是否自动补全之前提交的数据,以用于下一次输入建议

新增表单验证

novalidate:表单取消验证
formnovalidate:submit元素取消验证
setCustomValidity:自定义验证信息

查看评论

Html5 CSS3新标签解释及用法

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p...
  • cometwo
  • cometwo
  • 2016-03-26 10:50:39
  • 2135

Html5 中的新特性,及每种标签的使用

$(function () { // canvas 绘图 var c = document.getElementById("myCanvas"); ...
  • u013214705
  • u013214705
  • 2016-12-30 15:14:57
  • 599

HTML5新增的标签及其功能说明

:表示页面中的一个内容区块,如章节、页眉、页脚、或者页面的其他部分。可以和、等元素结合起来使用,表示文档结构 :表示页面中一块与上下文不相关的独立内容,如一篇文章 :表示元素内容之外的并与元素内容相关...
  • Herro09
  • Herro09
  • 2016-11-05 15:29:43
  • 548

HTML5新增标签最有用的总结

HTML5新增标签:概要1. HTML5 简介: (HTML5 是目前-2017年来说,是最新的一代HTML标准)2. HTML5 一些新的规则: 新特性应该基于 HTML、CSS、DOM 以及...
  • AndyNikolas
  • AndyNikolas
  • 2017-02-06 16:50:47
  • 6993

浅谈HTML5新标签的浏览器兼容问题

HTML5 现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加 ① 新特性: 1)绘画 2)用于媒介回放的和 3)本地离线存储长期存储数据,浏览器关闭后数据不丢失 4)的数...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-02-28 11:37:45
  • 3034

HTML5 新增结构标签(元素)

本着学习并记录的态度,把看过的记录记录,为自己回顾用,和新人踩坑用。 注意:h5新标签用兼容性问题,不过现代浏览器基本可以不用考虑这个兼容性了。 HTML5新增主结构元素和非主结构元素...
  • u010427666
  • u010427666
  • 2016-10-16 23:38:03
  • 612

HTML5新增的标签和属性归纳

收集总结的HTML5的新特性,基本除了IE9以下都可以使用。 HTML5语法 大部分延续了html的语法 不同之处:开头的 字符编码变得简洁, 不区分大小写...
  • garvisjack
  • garvisjack
  • 2017-01-27 11:21:24
  • 10213

怎么处理HTML5的新标签对IE浏览器兼容问题?

方法一: IE6~IE8支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。 ...
  • wangweiscsdn
  • wangweiscsdn
  • 2017-06-13 11:18:00
  • 532

用HTML5新标签构建页面

用HTML5新标签构建页面
  • Dong_PT
  • Dong_PT
  • 2016-03-22 00:42:41
  • 804
    个人资料
    持之以恒
    等级:
    访问量: 7万+
    积分: 1592
    排名: 3万+