web – chenpaopao

一套代码运行多端，一端所见即多端所见

滴滴开发github：https://github.com/didi/chameleon

支持平台：web、微信小程序、支付宝小程序、百度小程序、android(weex)、ios(weex)、qq 小程序、字节跳动小程序、快应用、持续更新中

一端所见即多端所见——多端高度一致，无需关注各端文档。

基于多态协议不影响各端差异化灵活性

代码示例

<template>
  <view>
    <text>{{title}}</text><text>{{reversedTitle}}</text>
  </view>
</template>

<script>
class Index  {
  data = {
    title: "chameleon"
  }
  computed = {
    reversedTitle: function () {
      return this.title.split('').reverse().join('')
    }
  }
  mounted() {}
  destroyed() {}
}
export default new Index();
</script>

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，同样道理，chameleon 中采用的是 CML + CMSS + JS。

JS语法用于处理页面的逻辑层，与普通网页编程相比，本项目目标定义标准 MVVM 框架，拥有完整的生命周期，watch，computed，数据双向绑定等优秀的特性，能够快速提高开发速度、降低维护成本。

CML（Chameleon Markup Language）用于描述页面的结构，我们知道 HTML 是有一套标准的语义化标签，例如文本是<span> 按钮是<button>。CML 同样具有一套标准的标签，我们将标签定义为组件，CML 为用户提供了一系列组件。同时 CML 中还支持模板语法，例如条件渲染、列表渲染，数据绑定等等。同时，CML 支持使用类 VUE 语法，让你更快入手。

CMSS(Chameleon Style Sheets)用于描述 CML 页面结构的样式语言，其具有大部分 CSS 的特性，并且还可以支持各种 css 的预处语言less stylus。

CML 采用与 Vue 一致的组件化方案、单文件组织方式、生命周期，同时数据响应能力对齐 Vue，数据管理能力对齐 Vuex，非常方便开发者上手、维护。

通过以上对于开发语言的介绍，相信你看到只要是有过网页编程知识的人都可以快速的上手chameleon的开发。

在学习前端过程中，对于head标签内部的内容没有进行深入的了解过，今天来总结一下。

head里可以放这些标签：

<head>元素包含了所有的头部标签元素，在head中你可以插入脚本（scripts）,样式文件（CSS）,及各种meta信息，可以添加到头部区域的元素为

<title> 定义网页的标题(浏览器工具栏标题，搜素引擎结果页面标题，收藏夹标题)

<base> 可以用来统一设置当前页面上的超链接的跳转方式使用了 <base> 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。

在平常的使用中，一般利用vscode插件自动生成html框架，因此基本很少去编写meta标签。自动生成的meta标签：

 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

重点：meta标签

meta 元素往往不会引起用户的注意，但是meta对整个网页有影响，会对网页能否被搜索引擎检索，和在搜索中的排名起着关键性的作用。


                 <meta http-equiv=" " name=" " content=" ">

meta有个必须的属性content用于表示需要设置的项的值。

meta存在两个非必须的属性http-equiv和name, 用于表示要设置的项。

比如<meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests”>,设置的项是Content-Security-Policy设置的值是upgrade-insecure-requests

1. http-equiv 属性

http-equiv一般设置的都是与http请求头相关的信息，设置的值会关联到http头部。也就是说浏览器在请求服务器获取html的时候，服务器会将html中设置的meta放在响应头中返回给浏览器。常见的类型比如content-type, expires, refresh, set-cookie, window-target, charset， pragma等等。

1.1 http-equiv 属性类型：content-type

比如：<meta http-equiv=”content-type” content=”text/html charset=utf8″>可以用来声明文档类型，设置字符集，content-type几乎所有的属性都可以在meta中进行设置。这样设置浏览器的头信息就会包含:content-type: text/html charset=utf8

1.2 expires

用于设置浏览器的过期时间, 其实就是响应头中的expires属性。

<meta http-equiv="expires" content="31 Dec 2021"> expires:31 Dec 2008

1.3 refresh

该种设定表示5秒自动刷新并且跳转到指定的网页。如果不设置url的值那么浏览器则刷新本网页。<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com">

1.4 window-target

强制页面在当前窗口以独立页面显示, 可以防止别人在框架中调用自己的页面。

<meta http-equiv="window-target" content="_top >

1.5 pragma

禁止浏览器从本地计算机的缓存中访问页面的内容

<meta http-equiv="pragma" content="no-cache">

2. name 属性

name属性主要用于描述网页，与对应的content中的内容主要是便于搜索引擎查找信息和分类信息用的, 用法与http-equiv相同，name设置属性名，content设置属性值。

1. author

author用来标注网页的作者<meta name="author" content="aaa@mail.abc.com">

2. description

description用来告诉搜素引擎当前网页的主要内容，是关于网站的一段描述信息。<meta name="description" content="这是我的HTML">

3. keywords

keywords设置网页的关键字，来告诉浏览器关键字是什么。是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。<meta name="keywords" content="Hello world">

4. generator

表示当前html是用什么工具编写生成的，并没有实际作用，一般是编辑器自动创建的。<meta name="generator" content="vscode">

5. revised

指定页面的最新版本<meta name="revised" content="V2，2015/10/1">

6. robots

告诉搜索引擎机器人抓取哪些页面，all / none / index / noindex / follow / nofollow。<meta name="robots" content="all"> all：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询；index：文件将被检索；follow：页面上的链接可以被查询；noindex：文件将不被检索，但页面上的链接可以被查询；nofollow：文件将不被检索，页面上的链接可以被查询。

3. scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 head 标签的 profile 属性指定的概况文件中进行了定义。html5不支持该属性。

5. base 标签

base标签定义了文档的基础url地址，在文档中所有的相对地址形式的url都是相对于这里定义的url而言的。为页面上的链接规定默认地址或目标。

base标签包含的属性。

1. href

href是必选属性，指定了文档的基础url地址。例如，如果希望将文档的基础URL定义为https：//www.abc.com，则可以使用如下语句：<base href=”http://www.abc.com”>如果文档的超链接指向welcom.html,则它实际上指向的是如下url地址：https://www.abc.com/welocme.html。

2. target

定义了当文档中的链接点击后的打开方式_blank，_self，_parrent，_top。

6. link 标签

link用于引入外部样式表，在html的头部可以包含任意数量的link，link标签有以下常用属性。<link type="text/css" rel="stylesheet" href="github-markdown.css">

1. type

定义包含的文档类型，例如text/css

2. rel

定义html文档和所要包含资源之间的链接关系，可能的值有很多，最为常用的是stylesheet，用于包含一个固定首选样式的表单。

3. href

表示指向被包含资源的url地址

7. style 标签

编写内部样式表的标签。<style> body { background: #f3f5f9; }</style>

8. script 标签

加载javascript脚本的标签。加载的脚本会被默认执行。默认情况下当浏览器解析到script标签的时候会停止html的解析而开始加载script代码并且执行。<script src="script.js"></script>

1. type

指示脚本的MIME类型。<script type="text/javascript">

2. async

规定异步执行脚本，仅适用于通过src引入的外部脚本。设置的async属性的script加载不会影响后面html的解析，加载是与文档解析同时发生的。加载完成后立即执行。执行过程会停止html文档解析。<script async src="script.js"></script>

3. charset

规定在外部脚本文件中使用的字符编码。<script type="text/javascript" src="script.js" charset="UTF-8"></script>

4. defer

规定是否对脚本执行进行延迟，直到页面加载为止。设置了defer属性的script不会阻止后面html的解析，加载与解析是共同进行的，但是script的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。<script defer src="script.js"></script>

5. language

规定脚本语言，与“type“`功能类似，不建议使用该字段。

6. src

外部脚本的地址。<script src="script.js"></script>

9. bgsound

网站背景音乐。<bgsound src="music.mp4" autostart="true" loop="5">

1. src

表示背景音乐的url值。

2. autostart

是否自动播放ture自动播放，false不播放，默认为false。

3. loop

是否重复播放，值为数字或者infinite，表示重复具体次或无限次。

分类： web

chameleon

JavaScript的作用

meta 标签

重点：meta标签

1. http-equiv 属性

1.1 http-equiv 属性类型：content-type

1.2 expires

1.3 refresh

1.4 window-target

1.5 pragma

2. name 属性

1. author

2. description

3. keywords

4. generator

5. revised

6. robots

3. scheme 属性

5. base 标签

1. href

2. target

6. link 标签

1. type

2. rel

3. href

7. style 标签

8. script 标签

1. type

2. async

3. charset

4. defer

5. language

6. src

9. bgsound

1. src

2. autostart

3. loop