HTML5(H5)新增属性和标签
一 H5的特点
H5就是在之前HTML的版本上新增了一些标签,所以用起来没有太多变化
01 H5的网页骨架非常简洁
02 H5的语法极其松散,很多标签可以省略,也可以只写开始不写结束
03 H5中新增的标签具有很强的语义化,利于网页优化
04 H5是向下兼容的一个版本,在它里面可以书写任意之前用过的HTML标签
05 H5目前并没有达到所有浏览器都支持,从IE9+之后开始部分支持。
Chrome Firefox 这些标准浏览器最新版本基本都支持了
二 H5新增结构标签
01 <header> </header>: 表示头部内容
02 <nav></nav> : 导航标签
03 <section> </section>: 和div 类似,可以表示一个完整的区域
04 <aside></aside> : 侧边栏
05 <article></article> : 文字区域
06 <footer></footer>: 底部区域
-
<time></time> : 时间标签
三 H5新增input 属性
01 placeholder: 代替 value 属性可以实现类似于 focus blur 焦点的事件操作
02 autofocus: 具有该属性的Input 会自动获取到焦点
03 required: 具有该属性的input 为必填项
04 autocomplete: on autocomplete: off 分别表示开启和关闭自动补全功能,该input 必须具有 name 属性。
四 H5新增下拉列表
<input type=”text” list=”id名”>
<datalist id=”名称”>
<option value=”值1″>值</option>
…….
</datalist>
五 H5新增 type 类型
01 email : 验证邮箱格式
02 url : 需要写入完整的网址 例 http://www.baidu.com
03 number: 只能输入数值
04 search : 一般用来做搜索框
05 range : 显示为一个滑块
06 color : 调用当前设备下自带的拾色器
07 datetime-local: 本地的详细时间信息
08 month: 设置当前为一年的第多少个月
09 week :第***周
10 date : 设置当前是多少号
-
ime: 设置具体的****分
六 音频标签
<audio autoplay controls loop >
对不起,您的浏览器不支持该标签
<source src=”音频的路径” />
…………
</audio>
01 利用 audio 标签可以在 html 页面中引入相应的声音资源,但是到目前为止没有哪一种格式的声音是被所有浏览器都支持的。
02 source 标签就是专门用来引入不同格式声音资源的
03 为了兼容低版本浏览器,可以在 audio 中写出相应文字,在不支持audio 标签的浏览器中可以看到这段文字
04 autoplay=”autoplay” 设置自动播放 可以缩写为autoplay
05 controls=”controls” 调用设备自带播放控件 可以缩写为controls
-
loop=”loop” 设置循环播放 可以缩写为loop
七 视频标签
<video autoplay controls loop>
<source src=”视频路径” />
…………..
</video>
01 用法和 audio 极其相似,可以设置宽高属性,和图片差不多,设置一边另一边会自动缩放。
02 onpause 和 onplay 分别是JS中提供给 video标签用监测当前视频是暂停还是播放的二个事件。
八 H5新增的本地存储方案
本地存储是相对于将数据存放在服务器端而言,H5中新增了几种方案可以直接在浏览器本地存放数据。
01 localStorage 和 sessionStorage : 两个全局对象,身上具有 存、取、删数据的操作方法
02 setItem( ‘键名’,’键值’ ) :按着某个名字来存放数据。
03 getItem( ‘键名’ ): 获取某个键名的值
04 removeItem(‘键名’ ):删除某个键名的值
localStorage 和 sessionStorage 存数据的区别就在于 localStorage 存放的数据在页面关闭之后仍然保存在浏览器中,而 sessionStorage存放的数据在页面关闭之后自动清除再次打开页面时就没了。