前端入门知识——HTML5

h5新增标签
HTML5新结构标签
h5新增的主要语义化标签如下:

1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚

PC端兼容h5的新标签的方法,在页面中引入以下js文件:

h5新增标签示例




    
    Document


    

HTML5 音频和视频
html5增加了audio和video标签,提供了在页面上插入音频和视频的标准方法。

audio标签
支持格式:ogg、wav、mp3

对应属性:
1、autoplay 自动播放
2、controls 显示播放器
3、loop 循环播放
4、preload 预加载
5、muted 静音

举例:






source标签的作用是提供多个媒体文件地址,如果一个地址的文件不兼容,就使用下一个地址。

video标签
支持格式:ogg、mp4、webM

属性:
1、width
2、height
3、Poster

可选第三方播放器:
1、cyberplayer
2、tencentPlayer
3、youkuplayer

HTML5 新增表单控件
新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索





















新增常用表单控件属性:
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词

h5新增表单控件属性示例




    
    Document


    

    


最后,给大家推荐一个前端学习进阶内推交流圈子(前端资料分享),不管你在地球哪个方位,
不管你参加工作几年都欢迎你的入驻!(会定期免费提供一些收藏的免费学习书籍资料以及整理好的面试题和答案文档!)

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

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

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

你可能感兴趣的:(HTML5,SEO,HTML,科技,web前端,程序员,css3,框架,css,JavaScript,资讯,编程,程序员,编程,web前端,资讯,科技)