html5手机主页

转载

编程艺术大师 2024-09-10 20:35:01

文章标签 html5手机主页 H5 缓存 html 文章分类 HTML5 移动开发

一个html页，其文本包含三个方面的信息，逻辑，内容，样式。其中逻辑部分决定页面和用户交互的行为，样式部分决定用户界面的视觉表现，内容部分是结构化的文本信息。对于一个以内容为主的页面（区别于富交互应用/webapp）来说，在表现内容的html中，插入表现逻辑的js，显然不是最合理的做法，因为html的语义是进行文本内容和结构定义，这个层面的定义是和逻辑与视觉都无关的。完全可以以更小的耦合进行分解。

HTML/CSS/JAVASCRIPT的分离。
网页的布局方式：标准流(文档流/普通流)排版方式；浮动流排版方式；定位流排版方式；

布局：静态布局；弹性布局；自适应布局；流式布局；响应式布局。

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。

前端经典总结（一）-

前端，web标准- http://www.divcss5.com/w3c/

移动端布局自适应的方法：flexible毫无疑问在移动端自适应上还是很方便的.

> 记事本编写Html的同鞋一定要注意
采用CSS定位属性实现Html中DIV层叠与悬浮- https://www.jb51.net/css/167026.html
<meta charste="utf-8"> 只是告诉浏览器要用utf-8来解释，而文档的编码，是在你保存时的选择决定的。如果保存ANSI
然后用utf-8解释，肯定是乱码。记事本的话，默认保存的文件格式是ANSI。所以在保存的时候要修改为uif-8。

> CSS/H5适配手机屏幕

请求头<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

iPhone X 适配手Q H5 页面通用解决方案-
开发适配手机屏幕的网页注意问题--
CSS3自适配手机屏幕[转]-
web page适配手机屏幕，web页面改适应手机-http://www.2cto.com/kf/201312/267283.html
开发的Webapp如何能够自适应手机屏幕的大小？-
手机web自适应网页设计（html/css控制）-- http://mobile.51cto.com/ahot-409516.htm
解惑好文：移动端H5页面高清多屏适配方案-http://mdsa.51cto.com/art/201507/484215.htm
解惑好文：移动端H5页面高清多屏适配方案（2）-
【移动适配】移动Web怎么做屏幕适配（一）--

1.使用Flexible实现手淘H5页面的终端适配（https:///amfe/article/issues/17）
2.移动端高清、多屏适配方案（http:///article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041）
3.A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）

> h5 UI布局，UI效果
web前端开发之几种布局方式之响应式布局-
页面布局 - Layout- http://www.jianshu.com/p/903392e6ad50#
移动h5自适应布局-
html5和css3项目案例- www.qietu.com
HTML5知识库：

html5下拉刷新和上拉加载更多-
H5列表-

html5获取新闻列表查看详细内容-

H5网页图片的动画效果-
H5动态添加数据-
mui H5 js动态添加不同类型的数据-
H5单页面手势滑屏切换原理- http://www.cnblogs.com/onepixel/p/5300445.html
https:///git-onepixel/guesture 9款惊艳的HTML5/CSS3动画应用赏析-
让你大开眼界的9款HTML5动画特效-

7款精巧实用的HTML5/CSS3应用-

H5项目常见问题及注意事项-
H5研究三：图文混排的实现-

> H5离线缓存
-- H5 缓存机制浅析移动端 Web 加载性能优化- http:///webapp/20151217/14718.html
- H5 应用程序缓存为应用带来三个优势：
离线浏览用户可在应用离线时使用它们
速度已缓存资源加载得更快
减少服务器负载浏览器将只从服务器下载更新过或更改过的资源。

- H5 一共有6种缓存机制，有些是之前已有，有些是 H5 才新加入的:
浏览器缓存机制
Dom Storgage（Web Storage）存储机制
Web SQL Database 存储机制
Application Cache（AppCache）机制
Indexed Database （IndexedDB）
File System API

-- 浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。
另外有两种特殊的情况：
手动刷新页面（F5)，浏览器会直接认为缓存已经过期（可能缓存还没有过期），在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
强制刷新页面（Ctrl+F5)，浏览器会直接忽略本地的缓存（有缓存也会认为本地没有缓存），在请求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），发包向服务重新拉取文件。

完美的缓存机制应该是这样的：
缓存文件没更新，尽可能使用缓存，不用和服务器交互；
缓存文件有更新时，第一时间能使用到新的文件；
缓存的文件要保持完整性，不使用被修改过的缓存文件；
缓存的容量大小要能设置或控制，缓存文件不能因为存储空间限制或过期被清除。
以X5为例，第1、2条不能同时满足，第3、4条都不能满足。

在实际应用中，为了解决 Cache-Control 缓存时长不好设置的问题，以及为了”消灭304“，Web前端采用的方式是：
在要缓存的资源文件名中加上版本号或文件 MD5值字串，如 common.d5d02a02.js，common.v1.js，同时设置 Cache-Control:max-age=31536000，也就是一年。在一年时间内，资源文件如果本地有缓存，就会使用缓存；也就不会有304的回包。

如果资源文件有修改，则更新文件内容，同时修改资源文件名，如 common.v2.js，html页面也会引用新的资源文件名。

-- H5缓存及H5如何写文件，然后跨原生App也能读取？？
HTML5之本地文件系统API - File System API-
使用HTML5 FileSystem API设计离线文件存储-

W3C github- https:///w3c/

W3C issues - https:///w3c/filesystem-api/issues

> H5事件冲突
touch事件的来源:
PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> click -> mouseup三步。
手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。
手机上没有鼠标，但不代表手机不能响应mouse事件（其实是借助touch去触发mouse事件）。有人在PC和手机上对事件做了对比实验，以说明手机对touch事件相应速度快于mouse事件。
移动端h5页面touch事件与点击穿透问题:而由于click事件的滞后性（300ms），在这300ms内上层元素隐藏或消失了，下层同样位置的DOM元素触发了click事件（如果是input框则会触发focus事件），看起来就像点击的target“穿透”到下层去了。

移动H5开发中经常用到滑动效果（页面上移、下移、向左滑动、向右滑动等），浏览器并没有内置swipe事件，可以通过touch事件（touchstart、touchmove和touchend）模拟swipe效果。jquery mobile和zeptojs提供了swipe事件。jquery mobile只有swipeLeft和swipeRight，zeptojs提供了完整的tap和swipe事件。

> H5模板
H5 meta viewport 你真的了解吗？- http://yunkus.com/meta-viewport-usage/
只有20行Javascript代码！手把手教你写一个页面模板引擎- http:///56689/
一些网站后台模板源码分析-
50余款手机 h5页面模版源码-
HTML5页面强力推荐几十套H5手机页面模板源码-
移动端H5开发 Turn.js实现很棒的翻书效果 Turn.js的官方网址: http://www.turnjs.com/
HTML5 有哪些让你惊艳的 demo？- https://www.zhihu.com/question/24398907
基于html5+css3实现的精美聊天界面demo-
网页模板- http://www.ymjihe.com/html
一款简洁的html5个人博客模板- http://www.duanliang920.com/muban/blog/264.html
个人博客模板源码- http://www.yangqq.com/download/div/

-- h5离线缓存和本地存储
HTML5操作本地文件- http://hwaphon.site/?p=396
H5 缓存机制浅析移动端 Web 加载性能优化- http:///webapp/20151217/14718.html
HTML 5 Web 存储与应用缓存-
利用H5本地存储localStorage、sessionStorage-
Web移动端使用localStorage缓存Js和css文件-

-- H5的6种缓存机制：
1.浏览器缓存机制
2.Dom Storgage（Web Storage）存储机制
3.Web SQL Database 存储机制
4.Application Cache（AppCache）机制
5.Indexed Database （IndexedDB）
6.File System API

-- 另外有两种特殊的情况：
1.手动刷新页面（F5)，浏览器会直接认为缓存已经过期（可能缓存还没有过期），在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
2.强制刷新页面（Ctrl+F5)，浏览器会直接忽略本地的缓存（有缓存也会认为本地没有缓存），在请求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），发包向服务重新拉取文件。

浏览器的缓存机制还不是非常完美的缓存机制。完美的缓存机制应该是这样的：
1.缓存文件没更新，尽可能使用缓存，不用和服务器交互；
2.缓存文件有更新时，第一时间能使用到新的文件；
3.缓存的文件要保持完整性，不使用被修改过的缓存文件；
4.缓存的容量大小要能设置或控制，缓存文件不能因为存储空间限制或过期被清除。

DOM Storage 分为 sessionStorage 和 localStorage。localStorage 对象和 sessionStorage 对象使用方法基本相同，它们的区别在于作用的范围不同。sessionStorage 用来存储与页面相关的数据，它在页面关闭后无法使用。而 localStorage 则持久存在，在页面关闭后也可以使用。
AppCache 的原理有两个关键点：manifest 属性和 manifest 文件。

-- WebView load js
Android WebView加载本地html并实现Java与JS交互-
webview javascript 注入方法-

> H5,H5 SVG绘制线条与三角形？
1500套HTML5模版分享-
HTML5 UTF-8 中文乱码的解决方法- http://www.jb51.net/html5/117758.html
html5（ H5学习之旅）-
html引入css文件和js文件方式-
最近测试html5页面，发现默认都允许用户缩放页面，或者在屏幕双击放大或缩小。即相当于这样设置
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />
如果要禁止此情形，修改相应参数即可。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

在html中include一个文件内容的几种方法-
jquery鼠标放上去显示悬浮层即弹出定位的div层- http://www.jb51.net/article/49386.htm
鼠标悬停控制下拉框的显示和隐藏-
a标签的属性，选择未访问、已访问、悬浮和活动链接，并设置它们的样式：
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}
-- H5页面的引用路径配置：
绝对路径： /项目名/fun_css/dropload.css
相对路径： ../fun_css/dropload.css

HTML中使用cookie保存登录账户-
html 页面之间跳转和传值-
关于多个html标签单击事件的实现细节-
JS控制HTML元素的显示和隐藏-

> WebView中设置参数
// 修改UserAgent使得web端正确判断
String ua = webview.getSettings().getUserAgentString();
webview.getSettings().setUserAgentString(ua+"; HFWSH /"+appversion);
// 修改ua使得web端正确判断
String ua = webView.getSettings().getUserAgentString();
webView.getSettings().setUserAgentString(ua.replace("Android", "HFWSH_USER Android"));
WebSettings webSettings = webView.getSettings();
webSettings.setAppCacheEnabled(true);
webSettings.setBlockNetworkImage(false);
webSettings.setAllowFileAccess(true); // 设置允许访问文件数据
webSettings.setLoadsImagesAutomatically(true);
webSettings.setDefaultTextEncodingName("utf-8"); // 设置编码
webSettings.setDatabaseEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setJavaScriptEnabled(true); // 支持js互调
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 允许js弹出窗口
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDomStorageEnabled(true);
//设置域名
webView.getSettings().setUserAgentString("domain");