html5--新增的标签及input类型

一、html的新特性

1.新的语义元素：比如<header>,<footer>,<article>,<section>

2.新的表单控件，比如数字、日期、时间、日历和谱块

3.全国大的图像支持（比如<canvas>和<svg>）

4.强大的多媒体支持（比如<video>和<audio>）

5.强大的api,比如用本地存储取代cookie

二、新增标签

1.header 定义section或page的页眉（页面顶部，文档的头部区域）（项目中最顶部的地方）

2.nav 定义一个导航链接（相当于是导航栏模块）

3.aside定义页面内容之外的内容（侧边栏）

4.footer 定义section或page的页脚（页面底部）

5.article 定义文章

6.section 定义文档中的一块区域

下边是html5和前版本的对比。

三、新增的输入类型(老浏览器不支持会默认为text)

1.email:直接用的时候和输入框差不多，但是当我们在form中使用的时候，在提交的时候，如果在email框中的个是不是一个邮箱地址的话会提示错误（可以用来校验，在后边可以通过正则表达式进行校验）

   <form action="">email:<input type="email"><input type="submit"></form>

2.url:与email类似，也是在form种提交时会校验输入框的内容是不是一个网址（包含协议头）

   <form action="">url: <input type="url"><input type="submit">

3.color（相当于是一个调色卡）

   color:<input type="color">

4.date 日期

   date:<input type="date">

5.time 输入时间

   time: <input type="time">

6.range 进度条（有一个属性 step指定每次滑动的步长）

   range: <input type="range" step="10">

7.search 搜索框（输入框可以输入内容，右边有清空键）

   search: <input type="search">

8.number 数字框（具有加一减一可以指定最大最小值以及增加及减少的数值（step）当输入的不是有效值的时候会先变为有效值）

   number <input type="number" max="15" min="-11" step="2">

9.tel（在手机端自动唤起小键盘 maxlength输入最大长度）

10.file (提交文件的输入框)（accept属性用来限制我们选中文件的类型例子：image/png(选中image图片类型但是必须是png格式)）

11.输入框：datalist..option（需要和数额u狂进行绑定）（用来数据提示）

       <input type="text" list="list1"><datalist id="list1"><option value="1111"></option><option value="1122"></option><option value="1133"></option><option value="1123"></option><option value="12222"></option><option value="33333"></option></datalist>

当有同名的时候在option中添加属性label进行区别（但是并不会作为值填入输入框）

html5--新增的标签及input类型相关推荐

HTML5新增的标签属性以及它们的用法
HTML5新增了一些标签,但它们并不像我们想象的那样陌生,它们只是更加符合我们的思维方式,更人性化.按照以往的布局方式,我们要划分页面结构时都是使用的div,例如<div class=" ...
详解html5新增的标签与css3中伪类和伪元素
html5 / css3 基础篇(第一篇) 回顾是的,你没看错!今天是一个全新的开始,今天这一讲我们就要开始h5和c3了,html 和 css的基础篇我们都告一段落了.html一共两篇,css走过了 ...
HTML5新增相关标签的和属性
总结一下今天学习的h5新增标签和属性今天一共学了流.图标.响应式图像.音频视频.列表.h5超链接定义流: 流表示图表.照片.图形.插图.代码片段等独立的内容.在 h5之前没有专门去实现的这个目的的 ...
HTML5新增的标签语义标签,HTML5新增的语义化标签解析
HTML5 新增了许多语义化标签语义化好处:便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 作用 : 1.为了在没有CSS的情况下,页面也能呈现出很好地内容结构.代码结构:为 ...
HTML5新增音频标签（HTML5）
HTML5新增音频标签(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...
HTML5新增视频标签（HTML5）
HTML5新增视频标签(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...
html5新增标记元素的内容类型,HTML5新标签与javaScript新方法
HTML5 (0106) 1.文档声明 2.字符编码设置 3.验证(http://validator.w3.org/) HTML5新增的语义化标签 1.语义化标签:说明页面内容,便于搜索引擎寻找该内容 ...
html5新增的标签是什么,HTML5新增标签及含义解释
HTML 5提供的一些新的标签用法,让我们来看一下有哪些新增的标签,以及它们和HTML 4的区别. header元素表示一个区域或整个区域的头部区域. nav元素表示导航部分 article元素表示一 ...
去除html标签 linux,HTML5新增的标签和废除的标签
HTML5新增的结构标签 section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面的其他部分.可以和h1. h2--等元素结合起来使用,表示文档结构.例:HTML5中--;HTML4中 ...

html5--新增的标签及input类型

html5--新增的标签及input类型相关推荐

最新文章

热门文章