首页 > 其他 > 详细

H5有哪些新特新???

时间:2019-11-15 00:47:51      阅读:94      评论:0      收藏:0      [点我收藏+]

H5有哪些新特新???

一、H5 新增了语义化标签,比如 article、footer、header、nav、section

  以前布局:使用div+类名 ,但是div对于浏览器来说是没有语义的

    • <div class="header"></div>
    • <div class="nav"></div>
    • <div class="content"></div>
    • <div class="footer"></div>

  h5新增的语义化标签 (可以主要用于移动端)

    • <header>头部标签</header>
    • <nav>导航标签</nav>
    • <article>内容标签</article>
    • <section>块级标签</section>
    • <aside>侧边栏标签</aside>
    • <footer>尾部标签</footer>

  tip:在IE9中需要将会这些元素转换为块级元素 ---> header,nav,article,section,aside,footer{display: block;}

二、用于媒介回放的 video 和 audio 元素

  音频 audio  : <audio src="../media/snow.mp3" controls></audio>

  属性: 

    • controls="controls" 向用户显示音频控件(比如播放/暂停按钮)
    • autoplay="autoplay" 音频在就绪后马上播放 谷歌禁用了这个属性
    • loop="loop" 每当音频结束时重新开始播放
    • muted="muted" 音频输出为静音
    • preload = " auto / metadata / none " 音频是否默认被加载以及如何被加载
    • src = "音频源"

  视频 video  : <video src="../media/video.mp4" controls muted loop autoplay></video>

  属性(和音频大部分雷同,这里列举了不同的属性):

    • height=""  设置视频播放器的高度 
    • muted="muted" 静音时谷歌可以自动播放
    • poster="图片url" 规定视频正在下载时显示的图像,直到用户点击播放按钮。

三、新的表单控件,比如 calendar、date、time、email、url、search

  新增的表单 (主要可用于手机端)

    • type="email" 必须输入Email类型
    • type="url" 必须输入URL类型
    • type="date" 必须输入日期类型
    • type="time" 必须输入时间类型
    • type="month" 必须输入月类型
    • type="week" 必须输入周类型
    • type="number" 必须输入数字类型
    • type="tel" 手机号码
    • type="search" 搜索框
    • type="color" 生成一个颜色选择表单

  新增的表单属性

    • required = "required" 表示该属性值不能为空
    • placeholder = "提示文本(请输入XXX信息)" 表单的提示信息,存在默认值将不显示
    • autofocus = "autofocus" 自动聚焦性,页面加载完成自动聚焦到指定表单
    • autocomplete = "off / on" 表单中存在 name 属性时,且成功提交过的表单数据,默认的autocomplete = "on" 已打开,用户输入过的文本浏览器会给予提示,当 autocomplete = "off" 时就会关闭提示过去输入的文本。
    • multiple = "multiple" 可以多选文件提交 (文件上传时可以用于多选文件)

  

还有用于绘画的 canvas 元素  和 对本地离线存储的更好的支持   两块知识点还未整理哦!ヾ(?°∇°?)??

博客只用于记录自己学习的东西,如有错误感谢留言斧正哦!

 

H5有哪些新特新???

原文:https://www.cnblogs.com/ruiannan/p/11863599.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!