h5基础知识一
来源:互联网 发布:中国菜刀源码 编辑:程序博客网 时间:2024/03/29 14:29
一、语义标签
HTML5增加了大量更有意义的语义标签,这些语义标签我们可以把他当作块元素来处理,更有利于搜索引擎或辅助设备来理解HTML页面内容。
1、常用的语义标签
标签:nav、header、footer、section、article、aside、progress
语义:导航、头部、结尾、区块、文章、侧边栏、进度条
尽量避免全局使用header、footer、aside等语义标签。
二、表单1、表单类型
类型:email 使用示例:<input type="email"> 含义:输入邮箱格式
tel 使用示例:<input type="tel"> 含义:输入手机号码格式
url 使用示例:<input type="url"> 含义:输入url格式
number 使用示例:<input type="number"> 含义:输入数字格式
datetime 使用示例:<input type="datetime"> 含义:输入邮箱格式
search 使用示例:<input type="search"> 含义:搜索框(体现语义化)
range 使用示例:<input type="range"> 含义:自由拖动滑块
color 使用示例:<input type="color"> 含义: 拾色器
time 使用示例:<input type="time">
date 使用示例:<input type="date">
month 使用示例:<input type="month">
week 使用示例:<input type="week">
2、表单属性
属性
用法
含义
placeholder
<input type="text" placeholder="请输入用户名">
占位符
autofocus
<input type="text" autofocus>
自动获得焦点
multiple
<input type="file" multiple>
多文件上传
autocomplete
<input type="text" autocomplete="off">
自动完成
form
<input type="text" form="某表单ID">
required
<input type="text" required>
必填项
pattern
<input type="text" pattern="\d">
自定义验证
form 我们可以将表单外面的表单项与该表单进行关联,这个样我提交表单的时候,就会提交当前表单外的表单项的数据
<form id="formId">
<input type="text">
<input type="submit">
</form>
<input type="text" form="formId">
3、表单元素
元素
含义
<datalist>
数据列表
<output>
输出结果
<meter>
度量器
<datalist> 下拉选项与input 配合使用
<datalist id="listId"><option></option>
</datalist>
在这个输入框里面引用这个数据列表
<input type="text" list="listId">
<output></output> 不可当做数据提交
<meter value="10" max="200" min="0" low="40" high="80"></meter>表示度量器,不建议用作进度条
<keygen> 生成加密字符串。 keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。 私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的
客户端证书(client certificate)。
4、表单事件
在html5 当中,新增了两个事件,一个是oninput事件,一个是oninvalid事件
oninput 当向输入框输入内容的时候触发。 1:通过键盘输入触发。2:通过赋值粘贴触发。
3:通过js 动态修改不会触发
oninvalid 当验证不通过的时候触发。一般用来修改默认的提示信息。
this.setCustomValidity(“您输入的邮箱地址错误。”);
三、多媒体
1、音频
HTML5通过<audio>标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放。如:autoplay 自动播放
controls 是否显不默认播放控件 loop 循环播放
2、 视频
HTML5通过<video>标签来解决音频播放的问题。
同样,通过附加属性可以更友好的控制视频的播放。如:autoplay 自动播放
controls 是否显示默认播放控件 loop 循环播放
width 设置播放窗口宽度 height 设置播放窗口的高度
<video controls=“controls”>
<source src=".mp4"></source>
<source src=".avi"></source>
<video>
1、document.getElementsByClassName('class') 通过类名获取元素,以伪数组形式存在。
2、document.querySelector('selector') 通过CSS选择器获取元素,符合匹配条件的第1个元素。
3、document.querySelectorAll('selector')通过CSS选择器获取元素,以伪数组形式存在。
4、类名操作
⑴、Node.classList.add('class') 添加class
⑵、Node.classList.remove('class') 移除class
⑶、Node.classList.toggle('class') 切换class,有则移除,无则添加
⑷、Node.classList.contains('class') 检测是否存在class
Node指一个有效的DOM节点,是一个通称。document.querySelector("#xxx")
5、 自定义属性
在HTML5中我们可以自定义属性,其格式如下data-*="",例如
data-info="我是自定义属性",通过Node.dataset['info']我们便可以获取到自定义的属性值。
Node.dataset是以对象形式存在的,当我们为同一个DOM节点指定了多个自定义属性时,Node.dataset则存 储了所有的自定义属性的值。
假设某元素 <div id="demo"data-name="itcast" data-age="10">var demo = document.querySelector('#demo');
①、读取demo.dataset['name'] 或者 demo.dataset['age']
②、设置demo.dataset['name']= 'web developer'
注:当我们如下格式设置时,则需要以驼峰格式才能正确获取
<div data-my-name="itcast"> 这样获取Node.dataset['myName']
五、兼容性 html5 的标记有一个兼容性,我们的这些新的标签,一些低版本的浏览器可能解析不了。
这些语义标签浏览器不认识。
屏蔽掉这兼容性行。
ie8 一下的版本都存在这个兼容性。ie10
我们现在可以用这样的一个软件,这个软件叫做ietester,
这个软件可以模拟ie6,7,8,9.
我们一般情况下,都是导入一个js 文件,这个js 文件是别人已经写好的,拿过来直接使用即可。
- h5基础知识一
- h5基础知识二
- H5基础知识整理
- h5、c3基础知识整理
- h5、c3基础知识整理
- H5---基础知识介绍
- H5基础知识第十二课时(事件)
- H5基础知识第十三课时(JQuery)
- h5和css3基础知识总结
- H5 canvas 笔记 一
- H5笔记(一)
- 《一》基础知识
- 一、基础知识
- 基础知识一
- 基础知识(一)
- 基础知识(一)
- H5基础知识第六课时(CSS)1
- H5基础知识第六课时(CSS)2
- Java源码-简单的剪切板程序
- 【CodeForces 580B】Kefa and Company
- Android多点触摸交互处理
- Codeforces Round #364 (Div. 1) A - As Fast As Possible
- jvm垃圾回收相关优化笔记
- h5基础知识一
- Spring MVC框架简单使用
- 整合SSH框架 (Struts2.x+Spring3.x+hibernate3.x+oracle)
- 函数调用-----压栈的工作原理
- java克隆容器后,容器内的对象相同
- 最大似然估计
- git ignore 相关
- spring mvc 中web.xml配置信息解释
- 上课记录