webview,html，css,javascript,html5与html的区别，原生和H5混合开发

深碍√TFBOYSˉ_ 2023-07-24 02:09 2阅读 0赞

[webview学习：https://developer.android.google.cn/guide/webapps/webview][webview_https_developer.android.google.cn_guide_webapps_webview]

XML 指可扩展标记语言（e**X**tensible **M**arkup **L**anguage）。

XML 被设计用来传输和存储数据。

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

### HTML5主要的新特性： ###

语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。简单来说就是程序猿更方便跟浏览器沟通。

本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，因为可以将一些常用、不常更新的内容存储在本地。

设备兼容特性 (Class: DEVICE ACCESS)

HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

连接特性（Class: CONNECTIVITY）

HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助实现服务器将数据“推送”到客户端的功能。更有效的连接工作效率，可以实现基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流。

网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能。

三维、图形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，视觉效果将大大增强，在线3D网游就是最典型的例子。

性能与集成特性（Class: Performance & Integration）

HTML5会通过XMLHttpRequest2等技术，帮助Web应用和网站在多样化的环境中更快速的工作。最直观的就是加载会更快。

## ##

### html，css,javascript, ###

html是标记语言，主要是用于建立复网页的骨架，是结构层，可以理解成建制房子的钢筋水泥  
CSS 主要是设置html骨架元素的样式，百比如位置、颜色等等，是表现层，可以理解成装修房子，粉刷什么的；度  
javascript是编程语言(java 脚本)，用于实现网页的知功能，完成一些交互等等道，属于行为层。

**html5与html的区别1：文档声明的区别**

html**：**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "</code></p> <p><code>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</code></p> <p><code>&lt;</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

html5：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

从上面可以看出，在文档声明上，html有很长的一段代码，不容易记住，而html5却不同，只有简简单单的声明，这也方便人们的记忆。

**html5与html的区别2：结构语义**

html中没有结构语义化标签，我们通常都是这样来命名的<id="header">.这样表示网站的头部。

html5在html的基础上删除了一些过时的标签，新增了一些语义化的标签，比如：<header><articale><footer>，让我们在开发网站时，不在需要用<div>标记来标注网页的这些部分。

**html5与html的区别3：网页效果**

html无法实现一些好看的网页效果，或者说要很复杂的代码才可以实现。

html5中新增的canvas、svg、video标签、audio标签，让以前根本不能通过html实现的网页效果，或者需要借助flash、复杂的js才能实现的效果现在用简单的html5就能实现。

**html5与html的区别4：面向对象**

html5是第五代html标准，主要面向移动领域。

html及html5前期版本都是基于pc端的。

**三、总结**

其实，对于html和html5的区别，简而言之也就是多了一些东西，少了一些东西，html与html5中更多的区别还是需要你在学习中自己去慢慢发现

### 原生和H5混合开发（h5只是一种规范，是html的新版本罢了）； ###

越来越多的商业项目使用了Android原生控件与WebView进行混合开发，用WebView加载html界面，

需要本地[Java][]代码与HTML中的[JavaScript][]进行交互，Android也对交互做了很好的封装

也就是Android与HTML+JS的交互。

那就要说说为什么要这个东西，为什么不直接原生啊；

**优势**

1、H5的跨平台优势，大大提高了用户体验，无需下载，只需要点开就可以观看，不需要换设备、不需要下载后占据内存，简化流程。在传播的效率上也得到了很大的提升，可以通过微信平台的朋友圈、微信群、公众号等渠道得到了最大化的曝光，收获爆火的热度和话题度。

2、互动性强，视觉效果佳，用户的感官体验好，可以提高流量转化，加快获客的效率和速度。从技术角度上看，实现了多元的视觉特效，丰富了页面表现形式，轻松抓住用户们的视线，收获越来越高的关注度。

3、制作成本低，传播成本低，维护成本低，总体上而言，性价比非常高。现在的主流是直接通过市面上的H5工具制作出活动页面，有了模板和专业的编辑器存在之后，（Dreamweaver）H5制作的难度也大大降低，就算是新手也可以完成简单的H5制作，在成本方面也大幅度减少。传播过程则是在微信平台上进行，主要还是靠用户们的自发传播，宣传成本的比例无限缩减。

4、H5营销的数据统计方便，能够实时反馈营销宣传数据，根本市场反应作出后续的宣传计划。不同渠道的营销活动无法全面统计出严谨的数据，H5营销在这方面更胜一筹。

**劣势**

1、H5营销是基于微信这个平台，需要按照微信审核规则作出具体的活动方案调整，有着很大的局限性。虽然有可能营造出一个朋友圈爆款，也有可能被微信限制甚至屏蔽，这对正在进行宣传的营销活动是一种致命的打击。

2、本身H5的技术还有着不完善，不完美的用户体验也很容易打击用户，造成留存不高，转化不高的情景。

3、随着H5的火热，市场中所存在着的作品同质化现象十分严重，而且各种营销功能都被开发出来，很难有新意，出现刷屏H5作品的难度越来越高。

4、一般来说，点进H5作品一次就不会点击第二次，主要是本身里面所包含的内容少，很难留住用户，除了少数能留下深刻的影响，基本上都是看过即忘，而且接受信息的渠道越来越多，很难保证在大量的信息冲击下，能够留下一点印象。

**再说说Android 和h5；**

**我们加载h5界面可以把h5 界面放在网络服务器上，加载就是下拉新的代码，我们的应用本身不用升级，这样实现了界面和应用逻辑处理的脱离。比如1024这种重大的节日换个背景界面庆祝一下。**

**但是弊端就是，下载缓慢造成应用卡顿啊，用户要直接卸载。**

[webview_https_developer.android.google.cn_guide_webapps_webview]: https://developer.android.google.cn/guide/webapps/webview
[Java]: https://link.jianshu.com/?t=http://lib.csdn.net/base/javase
[JavaScript]: https://link.jianshu.com/?t=http://lib.csdn.net/base/javascript