几分钟了解前端之——你不知道的HTML5

64 篇文章 0 订阅
64 篇文章 0 订阅

一、HTML5概念

HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。

HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,同时有令人眼花缭乱的css 3,还提供了一些Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,制作webApp,甚至结合Canvas我们可开发网页版游戏。

image

我是一名前端开发程序员,自己整理了一份2019最全面前端学习资料,
从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴:685910553(前端资料分享

二、HTML5新增部分简介

1.新增的结构标签

(1)header(头部) (2)nav(导航) (3)section(主体) (4)aside(侧边栏) (5)article (内容)(6)footer(底部)

作用:与div一样,只是增加了语义性,便于SEO优化。

拓展:SEO优化可以提升网站在搜索引擎中的排名,在前端实际应用中,我们会更多的去运用语义化标签,同时针对一些特殊的字符,我们运用权重高的标签去包裹网站logo。

image

我是一名前端开发程序员,自己整理了一份2019最全面前端学习资料,
从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴:685910553(前端资料分享

2.新增的智能表单

2.1 input表单新增了type属性值:

type="email"限制用户输入必须为Email类型

type="url"限制用户输入必须为URL类型

type="date"自动生成一个日期控件

type="time"同上

type="month"同上

type="week"同上

type="number"限制用户输入必须为数字类型

type="range"产生一个滑动条的表单

type="search"产生一个搜索意义的表单

type="color"生成一个颜色选择表单

智能表单在移动端用的比较多,它会调取手机自身的控件。

image

2.2 表单智能验证

required => 验证表单是否为空,必须配合form表单来使用

pattern => 自定义验证表单规则,匹配正则

invalid => 验证失败的时候触发的事件

dom.setCustomValidity()=> 自定义弹出的内容 参数:string 自定义的内容

image

2.3 表单新属性

placeholder=> 占位文本,体验更加

autofocus => 自动获取焦点 dom.focus()

autocomplete=> 提交一次后下次自动补全 注意:必须提交一次之后,同时必须要有name属性

multiple => 配合file控件实现多选

form => 配合form表单的id值实现关联,在任意位置都可以被提交,但是不建议这么写

image

2.4 智能表单过滤(datalist)

类似于搜索提示,输入一个内容会提示相关联的匹配的提示。它是利用表单的list =“datalist的id值”与datalist这个标签取得联系实现的。

image

2.5 video和audio标签

HTML5中新添了video标签来实现视频的播放而不是借助于flash技术。

属性:autoplay =>视频默认加载完成后播放;controls =>播放的控件

我是一名前端开发程序员,自己整理了一份2019最全面前端学习资料,
从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴:685910553(前端资料分享

image

如果您对这个文章有任何异议,那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思,那么请分享并转发,或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路,越走越远。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值