html5新增标记元素的内容类型,HTML5新标签与javaScript新方法
HTML5 (0106)
1、文档声明
2、字符编码设置
3、验证(http://validator.w3.org/)
HTML5新增的语义化标签
1、语义化标签:说明页面内容,便于搜索引擎寻找该内容;
优点:根据内容的结构化,选择合适的标签便于开发者阅读和写出更优雅的代码,
同时让浏览器的搜索引擎更好的解析和收录。
定义文章
头部
导航
主要区域
文档中的段落,某一区块
和section类似
底部,页脚
tips:section和aside可以归属为main的子标签
标记(很少用)
进度条(很少用)
该标签具有属性:max,min,value;
表示单元的标题
2、ie8以下的浏览器不识别H5标签
解决方法:引入一个js插件,放在head标签中;
tips:该段代码这样设置只有在IE8内才会识别,其余版本会解析成注释;
表单输入类型
1、效果如下图所示
标题
//下面写表单元素input等
2、input系列新属性
邮箱输入框,会对输入的内容进行自动验证;
type="url"网址输入框,需要加http或https协议名;
type="search"输入框,带有清空内容的按钮;
type="tel"电话号码,在移动端将会自动弹出数字键盘;
type="number"很少用,表示数字,有加减按钮,有max,min,value,step属性;
type="range"很少用,表示滑块,有min,max,step;
type="time"时间,显示时与分,有上下按钮,如下图;
type="datetime-local"本地时间,可以调整年月日时分;
type="date"带有年月日,带有日历选择框,value:xxxx-xx-xx;
type="color"value="#666666",必须是六位十六进制;
type="file"上传文件,加入了multiple属性则可以多文件上传;
3、datalist数据列表
tips:input中用list,datalist用id,二者名称相同即进行关联;
option中存放了关联字,当在input中输入数据时,将会显示关联字;
4、input属性
placeholder="",作为初始显示值;
autofocus自动获取焦点,没有值;
autocomplete="on"自动完成,值为on或off,默认为on;
pattern="[a-z]{3}"指定了输入框的验证方式,其值为正则表达式;
required拥有该属性的input内容不能为空,否则无法提交;
5、新事件
oninput用户输入内容时触发
oninvalid验证不通过时触发
6、新方法
this.setCustomValidity修改验证提示;
多媒体
tips:在source中提供多种格式的资源,多种资源便于兼容不同浏览器。
标签与之类似。
DOM新增属性
获取元素:
document.querySelector();
document.querySelectorAll();
类名操作:
node.classList.add();
node.classList.remove();
node.classList.contains();
node.classList.toggle()
自定义属性
data-*;
data-*-*;
node.dataset.*;
eg:document.querySelector("a").dataset.cont="world";
tips:data-*的属性形式在一些插件使用较多,例如bootstrap;
Review_正则表达式
1、元字符
.除以\n之外的所有单个字符;
\转义字符;
|左右表达式出现一次即true,为了避免歧义需要加();
eg:1a||b32,写成1(a||b)32;
()优先级,分组
2、量词
?某个字符出现0-1次;
+一次或多次;
*0-n次;
{n}n为正整数,出现n次;
{n, }
{n,m}
3、范围
[0-9]
[a-z]
[A-Z](支持连写)
\d数字,digital;
\D非数字;
\s空白字符,space;
\S非空白字符;
\w单词,word;
\W非单词;
^开头;
$结尾;
汉字编码[\u4e00-\u9fa5];
HTML5_JS新方法 (0112)
网络状态监测
window.online用户连接时触发该事件;
window.offline用户断开连接时触发该事件;
文件读取
FileReader对象
//页面结构很简单,一个img用于显示图片,一个file用于上传图片,一个button用来点击;
显示图片
//获取元素
var file=document.querySelector('input');
var button=document.querySelector('button');
var img=document.querySelector('img');
//点击按钮后触发事件
button.οnclick=function(){
var reader=new FileReader();//创建一个fileReader对象;
reader.readAsDataURL(file.files[0]);//获取元素中上传的文件,
//file.files是一个数组,包含了上传的文件的全部信息;
reader.οnlοad=function(){//文件读取完成之后触发事件;
console.log(reader.result);
img.src=reader.result;//读取的内容保存在了reader.result属性里,赋值给img.src;
}
}
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc
视频API
方法:load() 加载;
play() 播放;
pause() 暂停;
属性:currentTime 视频播放的当前进度;
duration:视频的总时间;
事件:
oncanplay: 事件在用户可以开始播放视频/音频(audio/video)时触发;
ontimeupdate:通过该事件来报告当前的播放进度,视频播放时不断的触发;
onended:播放完时触发;
全屏:video.webkitRequestFullScreen();
拖拽事件
分为两种,
第一种是拖拽元素,在元素中添加属性draggable="true",即可成为拖拽元素;
第二种是目标元素;
1、对于拖拽元素
ondrag 应用于拖拽元素,整个拖拽过程都会调用;
ondragstart应用于拖拽元素,当拖拽开始时调用;
ondragleave应用于拖拽元素,当鼠标离开拖拽元素时调用;
ondragend应用于拖拽元素,当拖拽结束时调用;
2、对于目标元素
ondragenter应用于目标元素,当拖拽元素进入时调用;
ondragover应用于目标元素,当停留在目标元素上时调用;
ondrop应用于目标元素,当在目标元素上松开鼠标时调用;
ondragleave应用于目标元素,当鼠标离开目标元素时调用;
Web存储
大致分为三种:cookie、sessionStorage、localStorage;
1、cookie存储;
缺点:存储量较小,仅4K,存储数据时进行了加密,解析复杂;
2、sessionStorage,会话存储,打开一个URL——→关闭页面——→即为一个会话;
生命周期:从打开浏览器开始到关闭浏览器结束;
主要存放一些小容量的临时数据,同一窗口下数据共享;
容量:5M;
3、localStorage,本地存储;
永久存在,除非手动删除;
可以多个窗口共享数据;
容量:20M;
方法:
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
eg:window.sessionStorage.setItem('name','张飞');
window.sessionStorage.clear();
缓存清单CACHE
离线存储,HTML5中我们可以轻松的构建一个离线(无网络状态)应用,
只需要创建一个cache manifest文件。
manifest格式:新建文件,名称为demo.appcache,以下为格式;
CACHE MANIFEST
CACHE:
img1.jpg
#指定我们需要缓存的静态资源,如.css、image、js等
NETWORK:
*
#指定需要在线访问的资源,可使用通配符
FALLBACK:
one.csstwo.css
#当前页面无法访问时退回的页面(回退;后退),
#在这里,找不到one.css将会使用two.css取代;
优势:
1、可配置需要缓存的资源;
2、网络无连接时应用仍然可用;
3、本地读取缓存资源,提升访问速度,增强用户体验;
4、减少请求,缓解服务器负担;
tips:chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存
地理定位
window.navigator.geolocation
navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息;
获取成功时调用的函数,失败时的函数,用options可调整位置信息数据收集方式;
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息;
position.coords.latitude纬度;
position.coords.longitude经度;
speedNaN速度;
accuracy精度,98;
关于视频音频的属性和方法
http://blog.poetries.top/2016/12/30/video-audio/
html5新增标记元素的内容类型,HTML5新标签与javaScript新方法相关推荐
- HTML5 新增结构元素分为主体结构元素和非主体结构元素
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介 ...
- HTML5新增页面元素与属性
1. 结构元素 (1)<header>元素 HTML5中的header元素是一种具有引导和导航作用的结构元素,该元素可以包含所有通常放在页面头部的内容.其基本语法格式如下: <h ...
- ISA Server 2006速战速决实验指南(4)创建元素-内容类型、计划
如果需要限制某种文件,就要创建内容类型.如果需要限制某个时间段,就要创建计划. 一.内容类型 在ISA控制台中,依次展开[阵列]→[ISA_Server],单击[防火墙策略(ISA_Server)], ...
- html5用语义元素做旅游网站,HTML5语义元素
语义元素 article,aside,nav,section,header,footer 上面这些语义元素不会给页面内容造成任何视觉上的改变,它们只是提供html文档的结构,供计算机和开发者读取和阅读 ...
- html5中语义元素的是,在html5中语义元素应用分析
在H5新增加的语义元素,本来是帮助人们更好的理解代码的,但是部分元素却又引起了选择困难,,, HTML5 提供了新的语义元素来明确一个Web页面的不同部分: 在这里让人容易产生困惑的是这个标签元素 标 ...
- html5与交互融媒体内容设计,“HTML5交互融媒体内容设计与制作”赛项
记者:为了参加这次比赛,你做了哪些准备? 学生:为了参加这次比赛,我们从寒假开始就创建了3个主力1个替补的参赛队伍,每天去工作室进行封闭训练,特别是在赛前两周,每天晚上练到九点多,指导老师全程陪我们一 ...
- html5美食与茶页面,内容二 - html5茶艺食品网站模板
易通企业网站系统是九州易通科技开发的中国首套免费提供模板的营销型企业网站管理系统,系统前台生成html.完全符合SEO.同时有在线客服.潜在客户跟踪.便捷的企业网站管理.搜索引擎推广等功能. 九州易通 ...
- HTML5用于定义一篇日志,[网页设计]HTML5之新增的元素
今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...
- html页面主详新增,HTML5 新增元素详解
一.HTML5新增结构元素 之前,我们只能用万能的div标签,并为其设置不同的id如header, footer, sidebar等来分别表达头部,底部或者侧栏等.而现在代码编写者不再需要为id的命名 ...
最新文章
- NYOJ-括号配对问题 技巧性的非栈道法
- 洛谷P3807 【模板】卢卡斯定理exgcd
- 中国计算机学会CCF推荐国际学术会议和期刊目录-计算机图形学与多媒体
- 走过2011---年终总结
- HTTP流媒体播放技术发展以及nginx点播源站
- 随便说说:在ASP.NET应用程序中上传文件
- 【HDU - 1856】 More is better(并查集)(还需要空间优化。。)
- nginx php分离,nginx-php配置动静分离
- linux环境下软件包的安装
- 腾讯往事:微信其实就是第四代 QQ 邮箱
- Webservice检查
- Linux 主要目录速查表
- 一款度盘高速下载工具
- QNAP文件系统不干净,qFinder搜索不到nas,可以ping通
- android 仿微信demo————登录功能实现(服务端)
- 001.学习Python之-设置你的操作系统的环境变量,以便可以轻松进入 Python 环境
- 贵州省发票认证系统服务器地址,贵州省增值税发票综合服务平台登录入口:https://fpdk.guizhou.chinatax.gov.cn...
- web手动进行Form表单提交
- 第七章第三十一题(合并两个有序列表)(Merge two ordered tables)
- 【运营】新品推广方案整理
热门文章
- Mac终于有大动作了!WWDC 2019苹果将公布全新系统
- “10亿赌约”董明珠赢了!格力电器2018年总收入超2000亿
- 史上最奢华AirPods登场 售价直接翻四倍却还算良心
- 真香?小米9价格将上4000元!战斗天使真机长这样...
- 国家邮政局公布一项数据 春节期间快递数量依旧很猛!
- MyBatis-Plus自动填充功能填坑
- redis密码设置、访问权限控制等安全设置
- php mysql 代理_让PHP像C罗一样操作MySQL之ProxySQL
- 深入解析MVVM架构
- number2chinese php,php 数字转换为中文