H5新特性

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 元素  和 对本地离线存储的更好的支持   两块知识点还未整理哦!ヾ(◍°∇°◍)ノ゙

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

 

posted @ 2019-11-14 23:39  哈喽小伙  阅读(392)  评论(0编辑  收藏  举报