h5新增属性和方法

发布时间:2020-05-10 06:48:44 作者:outsider96
来源:网络 阅读:914

1.header
header 标签定义文档或者文档的一部分区域的页眉。一般作为介绍内容或者导航链接栏的容器。
在一个文档中,可以定义多个 <header> 元素。
注:<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

2.nav
nav定义页面中导航链接部分(传统导航条、腾讯新闻、侧边栏导航、内页导航、百度百科、翻页操作)注:并不一定是视觉上的导航,只要是多链接区域,都可以使用

3.article
<article> 标签定义独立的内容。内容本身必须是有意义的且必须是独立于文档的其余部分。如:论坛帖子、博客文章、新闻故事、评论

4.aside
<aside> 标签定义 <article> 标签外的内容。应该与附近的内容相关。

5.section
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。标示文档的结构

6.footer
<footer> 标签定义文档或者文档的一部分区域的页脚。如:文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中,您可以定义多个 <footer> 元素。

7.figure
定义一段独立的流内容,一般是文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题。
figure是一种元素的组合,带有可选标题。用来表示网页上一块独立内容。
figcaption表示figure的标题。从属于figure,并且,figure中只能放置一个figcaption
注:有默认的边距或填充值

8.hgroup
表示定义文件中一个区块的相关信息,一般用作放置标题标签的容器。

9.dialog
<dialog> 标签定义一个对话框、确认框或窗口
注:目前,只有 Chrome 和 Safari 6 支持 <dialog> 标签。

新增多媒体元素
(1)video元素
 --在HTML5中专门用来播放网络上的视频或者电影。
(2)audio元素
 --在HTML5中专门用来播放网络上的音频。
3)canvas

表示图形,比如图标和其他图像。这个元素本身没有行为,仅提供一块画布,但它把一个绘图API展现给客户端js,以使脚本能够把想绘制的东西绘制到这块画布上

<canvas id=“myCanvas” width=“200” height=“200”> </canvas>

新增的表单元素
1.Datalist
datalist提供一个事先定义好的列表,通过id与input关联,当在input内输入时就会有自动完成的功能,用户将会看见一个下拉列表供其选择。
2.output
表示不同类型的输出,比如脚本的输出
注:表单中有应用

新增的input类型
1.email:专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交。但它不检查email地址是否存在。提交时可以为空,除非加上了required属性。
具有multiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。
2.url:专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的,则不允许提交。
例:<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>

  1. number 和 range
    number 类型是专门用来输入数字的,并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值,min 是允许的最小值,step 是间隔。设置了这些属性后,如果手动填入的数字不符合这些属性条件,将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似,也有 max、min 和 step 属性,在 Opera 中,可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值,但可以使用 output 输出当前值。
  2. datetime 和 datetime-local
    datetime 类型是用来输入 UTC 日期和时间的文本框,而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。
  3. month 和 week month 类型是月份选择器,它的值为:年-月,如:2012-01;week 类型是周选择器,它的值为:年-W周数,如:2011-W02。
  4. search
    search 类型的是用来输入搜索关键词的文本框,它与 text 类型在功能都没有太大区别,只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中,当用户输入内容时,输入框右侧会有一个“×”按钮,单击该按钮,将清空输入框内的内容,使用非常方便。
    7.color
    color 类型用来选取颜色,它提供了一个颜色选取器,值为 16 进制符号,如:#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。
    8.output元素: 定义不同类型的输出,如计算结果的输出,或脚本的输出。
    注:必须从属于某个表单。即,必须将它书写在表单内部,或对它添加form属性。

HTML 5 不但新增加了表单元素、表单类型,还增加了一些表单属性,同时使用的话,能更好的提高率开发者的工作效率,同时也提高了用户的操作体验。

1、自动验证

1)、required
可以应用在大多数输入元素上,在提交时如果元素内容为空白,则不允许提交,同时显示提示文字。

2)、
将属性值pattern设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。

例:<input  type=“text” pattern = “[0-9][A-Z]{3}”placeholder=‘输入内容:一个数与三个大写字母’>

3)placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。

4)autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得鼠标焦点,一个页面只能有一个。

5)autocomplete 属性规定输入字段是否应该启用自动完成功能。属性值=on/off
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。使用时表单元素必须有name属性;(历史记录功能)
注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
提示:在某些浏览器中,您可能需要手动启用自动完成功能。
6)、 min、max、step:为包含数字或日期的 input 类型规定限定(约束)
max: 最大值
min: 最小值
step: 数字间隔

例:<input type="number“ min="0" max="10" step="3" />
7)取消验证
可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证
8)Multiple:可以输入一个或多个值,每个值之间用逗号分开;如果要获取其中的值在用split获取;
例:<input type=“email” multiple/>
还可以应用于file

推荐阅读:
  1. HTML5 新增表单属性
  2. h5新增标签、css3新增属性

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

新增 方法 新增属性

上一篇:kafka-web-console 连接Mysql数据库的表和数据信息

下一篇:你真的会解决代码合并冲突么?

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》