H5C301

标题H5C301

1、html5

h5最新版本。所有主流浏览器都支持h5。但仅ie9及以上支持h5

改变了用户与文档的交互方式:多媒体

新增了其他的特性:语义,本地存储,网页多媒体

抛弃了不合理的标签

html:xt +tab键生成过渡html4文档

html:4s 严格的html4文档

2、语义化标签

1)语义特性

新增的标签可在w3c网站上查看

2)语义标签:div来说,语义性不强,在h5当中:

H5C301

相当于有语义的div标签 。但要注意,在ie9中会将这所有的语义标签解析为行内元素。若要兼容ie更低的版本,则:

解决方式有:自行创建相关标签,但也要注意创建的都是行内元素

H5C301

引入第三方js插件:html5shiv.min.js

3)表单新增的type属性:

除了既有的text,checkbox等属性,又新增的许多新属性

w3c网址也有。

H5C301

1)邮箱:type="email"
用户提交时将验证邮箱格式
2)电话:type="tel"
并不会实现电话的校验,为了能在移动端自动打开数字键盘,只能在移动端查看效果
3)网址:type="url"
会进行网址格式校验,网址必须合法
必须包含http://
4) 数量:number,附加使用min和max属性可以设定范围
将出现上下箭头
5)商品名:search,会进行搜索并在文本框右侧将出现删除按钮
6)范围:range,同样有max和Min属性
将形成拖动条
7)颜色拾取 color
可以选择颜色
8)时间:time
将出现上下箭头设定时间
9)日期:date/datetime/datetime-local
大多数浏览器都不支持datetime,仅safari支持

4)表单新增的其他属性

以下属性均设置在input标签内
1)输入提示占位:placeholder="文本"
2)自动获取焦点:autofocus
3)输入记忆:autocomplete on打开 off关闭
前提是相关信息必须成功提交过并且当前Input有name属性才行
4)必须输入:required
5)正则验证:pattern="正则表达式"
6)multiple:选择上传 多个文件或者允许键入多个文本,如邮箱,默认以逗号分隔
7)form属性:form="id"; id是给某一form标签设定的Id属性值,这样在表外设置该form标签时,该Input标签内容将一并被提交

5)表单新增元素之datalist

既可以通过箭头选择,又可以自己输入

可通过datalist创建选项列表

H5C301

注意图中阐述的步骤,其中option可以变为单标签

若用到了网址,必须加http://

6)表单新增元素值keygen和output

H5C301

H5C301

7)新增表单事件

①oninput:监听当前指定元素内容的改变,一旦改变,将触发该事件

与onkeyup较为相似,但onkeyup不会对鼠标粘贴操作进行响应

,以及对快捷键的响应也不尽相同

②oninvalid:当验证不通过时触发,如pattern属性的正则匹配

可修改提示信息:

H5C301

8)进度条

<progress></progress>
有两个属性。max:最大值 value:当前进度值
<meter></meter>
度量器

H5C301

fieldset legend 标签

设置border时浏览器默认给予内浮雕的样式,此时只需要设置border:none之后再设置border属性即可

H5C301

3、音频与视频

<audio>音频标签,利用controls属性调出面板
背景音乐:autoplay属性 loop:循环播放
<audio src="">
<video>视频标签
也要上述audio的相关属性。除此之外还有
width:宽度
height:高度
poster:当视频没有完全下载,或者用户还未对待你家播放时,显示的画面,默认显示第一帧
值为图片的路径
设置宽高时,一般情况下时等比缩放,若同时设置宽高,视频并不会设置为给定值
支持视频格式问题:不是所有视频格式浏览器都支持
使用属性source,我们将准备多个格式的视频文件,让浏览器自行选择

H5C301

4、html5获取dom元素

新增的两个方法:

获取第一个li标签:

之前我们可以通过document.getElementsByTagName()返回数组

来做

document.querySelector(“选择器名”)

如果获取的元素不止一个,将返回满足条件

H5C301

document.querySelectorAll()

获取满足条件的所有元素

5、HTML5操作元素类样式

1)classList:当前元素所有的样式列表/数组

2)add():为元素添加指定名称的样式,但一次只能添加一个样式

参数是样式名

3)remove(‘样式名’);移除指定的样式名,不是移除class属性

4)toggle:切换元素的样式

H5C301

H5C301

className 属性设置或返回元素的 class 属性。

classList.item也可以获取元素的样式

6、自定义属性

H5C301

上一篇:Swift 之Protocol在cocoa中的使用范例搜集(一)


下一篇:[Android]使用RecyclerView替代ListView(二)