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>: 底部区域

  1. <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 : 设置当前是多少号

  1. ime: 设置具体的****分

六 音频标签

<audio autoplay controls loop >

 

    对不起,您的浏览器不支持该标签    

    <source src="音频的路径" />

    ............

</audio>

01 利用 audio 标签可以在 html 页面中引入相应的声音资源,但是到目前为止没有哪一种格式的声音是被所有浏览器都支持的。

02 source 标签就是专门用来引入不同格式声音资源的

03 为了兼容低版本浏览器,可以在 audio 中写出相应文字,在不支持audio 标签的浏览器中可以看到这段文字

04 autoplay="autoplay" 设置自动播放 可以缩写为autoplay

05 controls="controls" 调用设备自带播放控件 可以缩写为controls

  1. 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存放的数据在页面关闭之后自动清除再次打开页面时就没了。

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: