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