h5页面

H5新特性之语义化标签

由 心不动则不痛 提交于 2020-03-01 10:44:23
H5 新特性之语义化标签 一、 什么是语义化 标签有了自己的含义，通过标签就能判断内容语义 。 二、 语义化的好处 1、html结构清晰，代码可读性较好，便于团队维护和开发 2、 更有利于搜索引擎或辅助设备理解 html页面内容 ， 搜索引擎可以根据标签语言确定上下文和权重关系 三、 H5常用的语义化标签 <section>用于对网站和页面内容分块，划分单独的模块区域 <article>独立的文章展示 <aside>页面中的附属侧边信息 <header>：定义页 面或内容的头部区域 <footer>：定义页 面或内容的底部区域 <nav>：定义 页面 导航 <figure>表示一个独立的内容 <figurecaption>表示<figure>的标题（必须写在<figure>的内部，一般放在<figure>的第一位或者最后一位，最多只有一个） <main>表示页面的主体内容（一个页面只能使用一次） <hgroup> 表示对网页或区段的标题进行组合 ， 通常对 h1~h6进行分组 <time>：定义日期和时间 <mark> 用来突出显示文本 ,默认情况下背景为黄色 <dialog>类似于微信对化框（默认display：none 加open才显示 ，有默认定位和默认边框） <embed>标记定义外部的可交互的内容和插件 <progress></progress>代表一个任务完成的进度

H5新增特性之语义化标签

由 痞子三分冷 提交于 2020-02-29 15:20:11
H5新增特性之语义化标签 　　语义化标签顾名思义标签有自己的含义，浏览器或者程序员一看就知道是什么。 在 HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。 一、根据页面的结构。 　　 section元素 表示页面中的一个区块 　　article元素 表示一块与上下文无关的独立的内容 　　aside元素 在article之外的，与article内容相关的辅助信息 　　header元素 表示页面中一个内容区块或整个页面的标题 　　footer元素 表示页面中一个内容区块或整个页面的脚注 　　nav元素 表示页面中导航链接部分 　　hgroup标题的一个分组 二、媒体元素组合 　　 figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置) 　　　　<figure>和 <figcaption>：<figure>为父元素，用于图片的外层，其子元素<figcaption>用来对内容进行说明。 　　embed 标记定义外部的可交互的内容或插件 比如flash 三、time时间 　　 <time

IE9以下版本兼容h5标签

由 我的梦境 提交于 2020-02-28 17:00:58
随着html5(后面用h5代表)标签越来越广泛的使用，IE9以下（IE6-IE8）不识别h5标签的问题让人很是烦恼。 在火狐和chrome之类的浏览器中，遇到不认识的标签，只要给个display:block属性，就能让这个元素成为一个类似div的元素，但是到IE上就很恶心了，它不认识就是不认识，你在html和css里添加什么它都不理你。 没什么什么问题是万能的程序猿解决不了的，其实要让IE识别一个自定义的标签(IE认为h5的标签是陌生的，不合法的) html5--html5shiv.js插件下载 https://github.com/aFarkas/html5shiv/releases css3--selectivizr-min.js 插件下载 http://selectivizr.com/ 以上两个插件常在项目中运用较多。在html页面中的<head>标签里面插入下载好的js文件，页面就可以正常添加html5元素了，css3样式 来源： https://www.cnblogs.com/web-wjg/p/7245767.html

h5移动端聊天室|仿微信界面聊天室|h5多人聊天室

由 ℡╲_俬逩灬. 提交于 2020-02-26 17:57:22
今年的FIFA世界杯甚是精彩，最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室，该h5聊天室采用750px全新伸缩flex布局，以及使用rem响应式配合fontsize.js，页面弹窗则是使用自己开发的 wcPop.js插件 ；编辑器部分由原先的单一表情新增为动图表情，实现了消息、表情发送 | 大图、视频效果预览 | 仿微信红包、打赏等微交互功能。 案例截图： // ...滚动聊天区底部 function wchat_ToBottom(){ //$(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0); $(".wc__slimscroll2").slimscroll({ scrollBy: $("#J__chatMsgList").height(), height: 'auto' }); } // ...表情、选择区切换 $(".wc__editor-panel").on("click", ".btn", function(){ var that = $(this); $(".wc__choose-panel").show(); if (that.hasClass("btn-emotion")) { $(".wc__choose-panel .wrap-emotion"

jsBridge遇到的坑2 （h5页面加载js文件过多，jsBridge无效）

由 孤者浪人 提交于 2020-02-21 06:52:41
问题： Android 食用JsbridgeWebView与h5进行交互，h5注册JsBridge，在调用时bridge时有时候为空 分析： JsBridgeWebView通过BridgeWebViewClient 进行代理 ，注入 WebViewJavascriptBridge.js文件 查看源码发现注入jsBridge的js文件是在 WebViewClient的 onPageFinished回调中 设置log日志 可以发现，当页面复杂度较高时，h5一直处于加载中，并没有回调 onPageFinished 方法 百度一下发现，这种情况还是很多的 https://blog.csdn.net/weixin_34107955/article/details/88000222?utm_source=distribute.pc_relevant.none-task 但是我这里将复杂的h5链接替换为http://www.baidu.com ,很顺利的回调了 onPageFinished 猜测 h5页面复杂度较高，加载了很多js文件，页面一直处于加载中，所以页面不算 加载完成 解决方案： 因为我这里是使用的 setWebChromeClient 去显示和隐藏加载进度，发现 无论页面多卡段 onProgressChanged中 newsProgress是有回调100进度数值数据的

h5 离线缓存机制-manifest

由 爱⌒轻易说出口 提交于 2020-02-16 03:18:53
转自：http://www.cnblogs.com/kangaoxiaoshi/p/5100276.html 什么是Manifest： 其实Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。 Manifest 的特点： 离线浏览：即当网络断开时，可以继续访问你的页面。 访问速度快：将文件缓存到本地，不需每次都从网络上请求。 稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。 Manifest的使用： html新增了一个manifest属性，可以用来指定当前页面的manifest文件。 创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，然后给index.html的html标签添加如下属性即可： <html lang="en" manifest="index.manifest"> 或 <html manifest = "http://www.example.com/index.manifest" > 1、manifest 的引入可以使绝对路径也可以是相对路径，如果你使用的是绝对路径，你的manifest文件必须和你的站点挂在同一个域名下。 2、manifest文件你可以保存为任意的扩展名

H5离线缓存机制-manifest

由 為{幸葍}努か 提交于 2020-02-16 03:18:30
摘自： http://www.cnblogs.com/kangaoxiaoshi/p/5100276.html 另外相关文章：http://yanhaijing.com/html/2014/12/28/html5-manifest/ 简介：Manifest 其实就是web应用的一种缓存机制，主要用于现在webapp应用中，它是浏览器自己的一种机制，随着移动互联网时代的到来，网络可靠性降低，如果我们已经将需要的文件缓存下下来，一旦网络无法访问，也能继续访问。 而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。 先来看下我们公司实际项目中的使用情况。（阿里淘点点也使用了manifest） 第一次加载时：整体请求是392KB耗时1.82s 当本地做了manifest缓存后：大小变成了2.6KB，请求时间缩短为757ms，这大大提高了用户的体验和节约了用户的流量。 但是Manifest不是W3C标准的机制，使用过程中会或多或少遇见一些坑，但总体还是利大于弊，我们公司项目和淘点点都使用了Manifest。下面的截图显示各浏览器对Manifest的支持情况。 什么是Manifest： 其实Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时

H5测试方法

由 删除回忆录丶 提交于 2020-02-12 12:32:20
一 功能测试 1 关注页面请求：请求数据是否正确，相应是否正确，是否有重复请求，造成流量浪费，响应速度变慢 2 关注application cache:cokkie值是否正确，清除cokkie后表现是否正常，获取数据失败是否有重试机制（可按f12，在application-cokkie下查看） 3 session失效机制：session失效，功能业务是否正常 4 返回逻辑：页面返回和浏览器自带返回功能：返回是否友好，是否出现死循环，返回后刷新页面请求 5 页面刷新：刷新时的请求链接是否正确 6 图片适配：是否根据不同屏幕和分辨率做适配，是否低端机不加载高清图动画 7 是否增加转场动画：loading图等，增加用户体验 8 隐私模式：不存cokkie，功能是否正常 9 接口异常：接口异常时给出友好提示 10： 接口相应慢时：loading图案在数据出来后消失 11： 输入框校验：黑洞词汇，特殊字符处理等 12： 弱网降级处理：弱网是否加载高清图，网络状态差，有友好提示不闪退 13：网络切换：是否影响功能正常 14：横竖屏切换，界面布局不乱 15：滑动定位：手指焦点是否准确 16：浮层类界面：拖动是否穿透 17：文件导入：导入数据异常，导入格式不对，重复导入数据，新建文本导入是否正常，有异常提示 18：文件导出：导出格式，数据，是否符合预期 二 适配测试 1：机型适配（根据市场占有比例

h5离线缓存

由 依然范特西╮ 提交于 2020-02-10 11:06:07
离线存储可以将站点的一些文件存储在本地，它是浏览器自己的一种机制，将需要的文件缓存下来 在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件 在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。 资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。 HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源；把需要离线存储在本地的文件列在一个manifest配置文件中 什么是Manifest： Manifest（清单）是一个简单的文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。 Manifest 的特点： 离线浏览：即当网络断开时，可以继续访问你的页面。 访问速度快：将文件缓存到本地，不需每次都从网络上请求。 稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。 manifest属性，可以用来指定当前页面的manifest文件。 创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个cache

OC与JS的交互（iOS与H5混编）

由 给你一囗甜甜゛ 提交于 2020-02-10 07:05:47
大神总结WKWebView的坑： https://mp.weixin.qq.com/s/rhYKLIbXOsUJC_n6dt9UfA 在开发过程中，经常会出现需要iOS移动端与H5混编的使用场景。 iOS中加载html网页， 可以使用UIWebView或WKWebView. 本篇博客将介绍两种控件使用过程中如何实现OC与JS的交互。 UIWebView delegate 协议方法 //网页即将开始加载 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; //网页开始加载 - (void)webViewDidStartLoad:(UIWebView *)webView; //网页加载完成 - (void)webViewDidFinishLoad:(UIWebView *)webView; //网页加载失败 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error; //UIWebView自带了一个方法, 可以直接调用JS代码(转化为string类型的js代码)
订阅 h5页面