h5是啥，，简单讲

Posted 2023-05-12

h5是什么

参考技术A 先科普一下，HTML5并不是一项技术，而是一个标准。
标准的意思就是：学生准则手册。你可以按照准则做，甚至可以超出准则更加严格的要求自己，也可以不按照准则来，但是会被老师训斥小伙伴讨厌，别人都不找你玩，就像IE6一样。
那HTML5这些标准浏览器厂商到底姿持不姿持呢？这要看他们各自的尿性了。像chrome这种不仅在很多标准上支持的非常好，还积极上进很多地方超出了标准，支持一些标准中还是草案的部分。
所以其实要么我们是作为理论派讨论HTML5标准，要么是作为实践派讨论HTML5标准在某浏览器的应用。但是实际上我们在说到H5的时候，并不是指标准，也不是指标准的应用，而是一个硬生生造出来的奇怪概念合集，所以我是旗帜鲜明的反对这个称呼的。
最近一年的时间，我主要靠这个东西养家（并没有家）糊口。所以我是懂得甲方打电话过来询问，“你是不是会做H5开发？”的时候，我知道他们要的是那种可以在朋友圈分享的，看起来很酷炫的小页面，他们实际要的东西拆开来看大概包括以下技术点;
1. 页面素材预加载技术，可以使用createJS之中的preloadJS。我没有看preloadJS的源码，不过预加载并不是HTML5标准中更新的方法。
2. 音乐加载播放技术，createJS中同样有soundJS可以实现，而且这部分说起来确实是HTML5标准支持的内容，在上个时代并没有audio这样的标签。
3.可以滑动的页面，大多数是用了swiper.js这个Jquery插件，也有一些是手写的swipe，比较拙劣的手写版页面是不会跟手滑动的，其中touchstart等四个touch系列的事件是HTML5标准中的事件
4.可以涂抹擦除，多半是canvas叠加层，canvas是HTML5标准里面的标签，是代表了先进生产力的标签。
5.有动态的文字和图片，常见的是使用了css3或者直接使用js动画。很多时候提到HTML5多半还会带上CSS3，而CSS的分级又是另外的一个问题了，在不同的项目标准上，CSS会独立定级，以后应该不会有CSS4这个东西，所以大家也不用担心在H5以后又冒出来了C4（不过真是想用C4炸死那些每天把H5挂在嘴上的人）
6.可以填表报名，这是最基本的表单，是有网页以来就有的东西。
7.可以支持分享自定义的文案和图片，这个是用到了微信的jssdk，和HTML标准半毛钱关系都没有。
8.还有其他我想起来再补充的。
所以我们在谈论H5的时候，实际上是一个解决方案，一个看起来酷炫的移动端onepage网站的解决方案。而这个解决方案不仅包含了HTML5新增的audio标签，canvas，拖拽特性，本地存储，websocket通信，同时也包括了盒模型，包括绝对定位，包括一切前端的基本知识。
有学弟来问我说，学长我想学H5，应该从哪里开始？
我说HTML5新增特性在W3C上都可以查得到的。
学弟说，不，我想学的是H5，想做H5的页面。
于是我猜测他所指的就是上面论述的这种酷炫小页面，我就说，那你要先学习HTML，包括HTML5的新标准和之前的全部标准，然后学CSS以及CSS3，了解它们在浏览器的实现情况，原生JS了解一点就可以，大多的操作可以用Jquery，了解常用的几个Jquery插件的用法，应该就差不多了。如果想要做更酷炫的的，学一下egret或者cocos2d更好。如果要优化加载速度，还要学一下grunt一类的自动化工具。微信的sdk有很多坑，至少nodejs或者php一类的后端语言要会一点。
学弟说，那这不就是前端了么？我只是想学H5啊。
所以你看，当我们对一个概念的内涵无法统一的时候，我们根本不知道彼此之间在谈论的是什么。
”H5“本应是一个技术合集，却被意会成了一项技术，变成可以在质上而不是量上描述的概念。
对于营销来说，我们只要讲我们可以做H5或者不能做，这种定性的描述就够了。但是对于技术上，这是定量的事情，只能在具体某个技术项上是否，无法对这个本不存在的概念说是否。
就比如我遇到过有甲方说，我们之前找了一个人做H5，做的还不错，但是这个case他又说做不了，我也搞不懂H5和H5之间也有那么大差别吗？我只能笑笑和他说，世界这么大，各种各样的H5都是有的。
这就是为什么我反对H5，因为这个名词和它表示的内涵是严重不符的，这让我们难以沟通，让营销人和技术人之间产生误解，让浑水摸鱼的培训师们赚的盆满钵满，让技术新人不踏踏实实的学习技术。 参考技术B 楼上回答的相当于手机版PPT，什么叫手机版的PPT？PPT能让你玩游戏还是能让你填写资料提交数据至服务器？
不懂不要瞎回答好不？
H5是HTML5的简称，作为手机端网页，作用主要是与页游和广告相关，将重点内容都归纳到1个H5页面中方便于阅读者打开后一目了然。
而H5游戏指的是HTML网页游戏，也就是我们PC端里俗称的页游。
还有个小写的h5是DW网页建设中的标题标签<h5>标题内容</h5>，不知道你所提的是HTML5手机端Web网页还是DW里的标题标签。追问

是这个微信商城里面的 H5吗

追答

你这是应聘电商客服呀，商城管理系统一般操作不难的，但凡做过网店的都知道后台怎么个操作法，上下架货物、接收货单、接收评论、商品管理等等。H5管理后台操作也不难，一般客服的权限只会接收客户发送的数据，审核或记录客户发来的信息。
至于企业H5推广运营方法这项，你可以去网上参考一下一些H5制作公司的推广方案，学习了解一下。

追问

谢谢你

所以人家问我你知道h5是什么吗？？？？我这样回答他，是商城管理就行了吗？？

本回答被提问者采纳 参考技术C 您好，epub360 是一款专业H5制作工具，大量基础功能可使用，支持手势触发、摇一摇、拖拽交互、碰撞检测、重力感应、关联控制，一镜到底，全景360，画中画，画板，您可以尝试一下。 参考技术D 相当于用于微信朋友圈或者私聊的ppt

使用社交身份验证限制访问静态网站的最简单方法是啥

【中文标题】使用社交身份验证限制访问静态网站的最简单方法是啥

【英文标题】：What is the simplest way to restrict access to a static website using social auth使用社交身份验证限制访问静态网站的最简单方法是什么

【发布时间】：2018-11-21 09:17:13

【问题描述】：

我有一个由 html/css/javascript 文件组成的静态网站。该网站会自动生成并经常更新。

我想让用户使用 Google Sign-in/openID Connect 进行身份验证，然后通过 gmail 地址白名单控制访问，而不是使用用户名/密码（基本身份验证）授权访问网站。

最简单的设置方法是什么？

【参考方案1】：

向任何静态网站添加身份验证或门控内容的另一种方法： 1）首先加载一个静态容器页面（页眉、页脚）并使用Auth0、firebase、okta等实现用户认证js代码。

2) 当用户成功登录后，进行 ajax api 调用，传递该身份验证 access_token 以检索敏感内容。

3) 使用 js 在站点中加载/附加敏感内容。

当然，必须有一个服务器/无服务器函数来监听该 ajax api 调用，对其进行身份验证并将内容发送回浏览器。

这称为客户端身份验证。

更多信息：https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/

【参考方案2】：

我最终使用了oauth2_proxy，这正是我想要的。

我配置为执行以下操作：

oauth2_proxy 监听 0.0.0.0:443 当用户连接时，会启动 Google 登录流程 登录后，它会根据白名单验证用户的电子邮件地址 成功验证后，oauth2_proxy 将请求代理到在 127.0.0.1:8080 上侦听的上游 nginx 服务器

【参考方案3】：

最好的方法是使用 Firebase 身份验证！ 查看https://firebase.google.com/docs/auth/

您可以通过这种方式检查用户是否经过身份验证。

<script type="text/javascript">

        function initApp() 
          // Listening for auth state changes.
          // [START authstatelistener]
          firebase.auth().onAuthStateChanged(function (user) 
            if (user) 
              //User is signed in.
                  if (!emailVerified) 
              //Additional check for email verification
              
             else 
              // User is signed out.
            
          );
          // [END authstatelistener]
        
        window.onload = function () 
          initApp();
        ;
      </script>

【讨论】：

嗨 Rahul，我考虑过 Firebase 身份验证，但遇到了一些困难。我创建了一个firebase项目，启用了谷歌登录方法，创建了一个登录页面，并使用我的谷歌帐户成功登录。但由于您无法使用 Firebase 托管配置规则（请参阅***.com/questions/48753740/…），因此剩下的唯一选择是使用 Firebase 存储。似乎没有办法使用 Firebase 存储为由多个文件和相对链接组成的静态网站提供服务。有什么想法吗？

也可以在这里查看：***.com/questions/27212004/…

好吧，您可以动态检查用户是否登录到 firebase 或未使用 Javascript 中的某些 firebase 函数。取决于您可以显示内容或选择在未通过身份验证时隐藏它们（您可以使用任何前端框架来阻止显示内容，而不仅仅是设置 display:none）

@catanman 检查更新的答案，看看你是否明白我想说的。

我最终找到了一个不需要任何代码的更简单的解决方案。