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

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