HTML5新特性

HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签

HTML5是超文本标记语言的第五次重大修改,2014年10月29日标准规范制定完成

特点:

    1. HTML5的设计目的是为了在移动设备上支持多媒体。
    1. HTML5赋予网页更好的意义和结构。
    1. 基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度

新增元素

元素 描述
canvas 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
audio 定义音频内容
video 定义视频(video 或者 movie)
source 定义多媒体资源 <video> 和<audio>
embed 定义嵌入的内容,比如插件
track 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道
datalist 定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值
keygen 规定用于表单的密钥对生成器字段
output 定义不同类型的输出,比如脚本的输出
article 定义页面正文内容
aside 定义页面内容之外的内容
bdi 设置一段文本,使其脱离其父元素的文本方向设置
command 定义命令按钮,比如单选按钮、复选框或按钮
details 用于描述文档或文档某个部分的细节
dialog 定义对话框,比如提示框
summary 标签包含 details 元素的标题
figure 规定独立的流内容(图像、图表、照片、代码等等)
figcaption 定义 <figure> 元素的标题
footer 定义 section 或 document 的页脚
header 定义了文档的头部区域
mark 定义带有记号的文本
meter 定义度量衡。仅用于已知最大和最小值的度量
nav 导航
progress 定义任何类型的任务的进度
ruby 定义 ruby 注释(中文注音或字符)
rt 定义字符(中文注音或字符)的解释或发音
rp 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容
section 定义文档中的节(section、区段)
time 定义日期或时间
wbr 规定在文本中的何处适合添加换行符

兼容老IE
可以使用 html5shiv.js 这个库使得以前版本的浏览器支持html5.

<!--[if lt IE 9]> 
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

input 有哪些新增类型?

  • color 用于指定颜色
  • email 用于编辑email的字段
  • url 用于编辑URL的字段
  • number 用于输入浮点数
  • range 用于输入不精确值,如果未指定相应的属性,控件使用如下缺省值:
    • min:0
    • max:100
    • value:min + (max-min)/2,或者当max小于min时使用min
    • step:1
  • search 用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
  • tel 用于输入电话号码
  • Date Picker
    • date 用于输入日期(年、月、日,不包括时间)
    • month 用于输入年月,不带时区
    • week 用于输入由星期-年组成的日期,不带时区
    • time 用于输入不含时区的时间控件
    • datetime 基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)
    • datetime-local 用于输入日期时间控件,不包含时区。

浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。

image.png
<body>
    <input type='button' onclick='setItems()' value='存值' />
    <input type='button' onclick='getItems()' value='取值' />
    <input type='button' onclick='deleteItem()' value='删除' />
</body>
<script src="js/jquery.min.js"></script>
<script>
    //localStorage存值永久有效
    function setItems(){
        var user = {};
        user.name = 'Adam Li';
        user.age  = 25;
        user.home = 'China';
        localStorage.setItem('userinfo',JSON.stringify(user));
    }
    //localStorage取值
    function getItems(){
        var data = JSON.parse(localStorage.getItem('userinfo'));
        console.log("name:"+data.name+'\r age:'+data.age+"\r home:"+data.home);
    }

    //localStorage删除指定键对应的值
    function deleteItem(){
        localStorage.removeItem('userinfo');
        console.log(localStorage.getItem('userinfo'));
    }
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 9,107评论 22 225
  • 题目1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5...
    饥人谷_Leon阅读 298评论 0 0
  • 1.不管是招聘还是聊天经常能听到 h5开发,它指的是什么?和 HTML5有什么关系? H5 !=HTML5,H5是...
    candy252324阅读 236评论 0 0
  • HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5是最新的H...
    小囧兔阅读 314评论 0 0
  • Ta Kuo: 泽風大過夜晚梦里梦金银,醒来仍不见一文,目下只宜求本分,思想络是空劳神。吉凶論斷上,既然棟樑不正而...
    OnlyIndex阅读 1,123评论 0 1