iOS梦工厂

iCocos——不战胜自己，何以改变未来！

H5初探

| Comments

H5精华

标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

1：链接

图像标签

相对路径 ../../

绝对路径  https:// http://  ftp://  file://

  • href: 引用 不是必须的

  • src: 引入 必需的

<!--超链接标签  javascript:void(0) -->
<a href="#">我是超链接</a>
<a href="http://baidu.com" target="_blank">百度一下,你就知道</a>


<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" width="200">
<img src="images/img_01.jpg">
2：列表<–列表标签–>

无序：

<ul>
  <li>我是列表1</li>
  <li>我是列表2</li>
  <li>我是列表3</li>
  <li>我是列表4</li>
</ul>

有序：

<Ol>
    <li>我是列表1</li>
    <li>我是列表2</li>
    <li>我是列表3</li>
    <li>我是列表4</li>
</Ol>
3:文章：
<article>

    <header>

    </header>

    <section></section>

    <section></section>

    <footer>

    </footer>

</article>
4：高级:
   <!--进度条-->
   <progress max="100" value="50"></progress>
   <!--音频-->
   <audio src="sources/music.m4a" controls="controls"></audio>
   <!--视频-->
   <video src="sources/BigBuck.m4v" controls="controls"></video>
其他请参考相关文档

CSS3

一:样式

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

1.行内：

<–style=“background-color: red;”–>

<-- 单值属性: 后面只有一个属性值 复合属性: 后面有多个属性值 -->

   <div style="color: purple; font-size: 40px; background-color: yellowgreen;">我是容器div</div>
   <p style="color: blue; font-size: 100px; border:3px solid red;">我是段落</p>
2.页内：
<--
  网站 = N个网页 + 服务器 + 数据库 + ....

-->

<!--
  css遵循的规律:
  1> 就近原则
  2> 叠加原则
-->

    <style>
        div{
            color: chartreuse;
            border: 3px dashed blueviolet;
            font-size: 90px;
        }
    </style> 
</head>
<body>
  <div>我是div</div>
3.外部
    <!--引入-->
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
   <div>哈哈哈哈哈</div>

div{
    color: darkgoldenrod;
    background-color: mediumvioletred;
    font-size: 5px;
}

二：选择器

    /** 标签选择器*/
    div{
        color: red;
    }
    /*类选择器*/
    .test1{
        color: green;
    }
    /*id选择器*/
    #main{
        font-size: 90px;
    }
    /*并列选择器*/
    #main,.test1{
        border: 5px double darkviolet;
    }
    /*复合选择器*/
    p.test2{
       background-color: red;
    }
    /*后代选择器*/
    #first p a{
        font-size: 90px;
    }
    /*伪类*/
    input:focus{
       width: 500px;
       height: 60px;
       font-size: 55px;
       /*去除外边框*/
       outline: none;
    }

    div#main:hover{
       background-color: yellow;
       width: 500px;
       height: 250px;
    }
    /*伪元素*/
    p:first-letter{
        color: goldenrod;
        font-size: 60px;
    }

   <div id="main">bjbjwefbjb</div>
   <div>bjbjwefbjb</div> 
   <p>我是段落</p> 
   <div class="test1">bjbjwefbjb</div>
   <div id="first">
       <p>
           <a href="#">我是超链接</a>
       </p>
   </div>

三：优先级：

    <--
      CSS遵循的规律:
      1.相同级别的选择器: a.就近原则  b.叠加原则
      2.不同选择器:
        important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
      3. 选择器的针对性越强，它的优先级就越高
    -->
其他请参考相关文档

编写 JScript

与其他许多编程语言一样， Microsoft JScript 是用文本方式编写的，并被组织成为语句、由相关的语句集组成的块、以及注释。在一条语句内可以使用变量、比如字符串和数字（称为“文字”）的立即数、以及表达式。

一：语句

JScript 程序是语句的集合。一条 Jscript 语句相当于英语中的一个完整句。Jscript 语句将表达式组合起来，完成一个任务。

一条语句由一个或多个表达式、关键字或者运算符（符号）组成。典型地，一条语句写一行，尽管一条语句可以超过两行或更多行。两条或更多条语句也可以写在同一行上，语句之间用分号“;”隔开。通常，每一新行开始一条新语句。不过显式地终止语句是一个好方法。这是用分号 (;)来实现的，分号是 JScript 语句的终止字符。下面给出 Jscript 语句的两隔示例。

aBird = "Robin"; //将文本“Robin”赋值给变量 aBird
var today = new Date(); // 将今天的日期赋值给变量 today

用大括号（{}）括起来的一组 JScript 语句称为一个语句块。分组到一个语句块中的语句通常可当作单条语句处理。这就是说在 JScript 期望有一条单个语句的大多数地方可以使用语句块。应该注意以 for 和 while 打头的循环语句是例外情况。注意，语句块中的原始语句以分号结束，但语句块本身并不以分号结束。

通常，在函数和条件语句中使用语句块。

注意，Jscript 与 C++ 以及其他某些语言不同，它不认为语句块是一个新的范围；只有函数创建新范围。在下面的示例中，第一条语句开始定义一个函数，该函数包含一个五条语句组成的语句块。语句块后的三条语句没有用大括号括起来；这些语句不是一个语句块，所以就不是函数定义的一部分。

function convert(inches)  {
   feet = inches / 12;  //  这五条语句属于一个语句块。
   miles = feet / 5280;
   nauticalMiles = feet / 6080;
   cm = inches * 2.54;
   meters = inches / 39.37;
}
km = meters / 1000;  //  这三条语句不在语句块内。
kradius = km;
mradius = miles;
二：注释

单行的 JScript 注释以一对正斜杠(//)开始。下面给出一个单行注释的示例。

aGoodIdea = "Comment your code thoroughly.";  //  这是一个单行注释。

多行注释以一个正斜杠加一个星号的组合(/)开始,并以其逆向顺序 (/)结束。

/*
这是一个用来解释前面的代码语句的多行注释。

该语句将一个值赋给 aGoodIdea 变量。
用引号包含的这种值称为一个文字。
文字显式并直接包含信息；
而不是简接地引用信息。
（引号不属于该文字的内容。）
*/

注意 如果您试图将一个多行注释插入到另一个中，JScript 不能按正常的方式解释生成的多行注释。标明嵌入的多行注释结束的 */ 被认为是整个多行注释的结尾。这就意味着嵌入多行注释之后的文本不再被认为是注释；相应地，它将被解释为 JScript 代码，并会产生语法错误。

建议将所有的注释写为单行注释的语句块。这样您以后就能够将大段的代码与多行注释区分开。

//这是另一种多行注释，写成一系列单行注释。

//  在执行完该语句后，可以使用 aGoodIdea 变量的名字来引用其内容，
//  如下一条语句那样，即采用连接操作将字符串文字添加到
//  aGoodIdea 变量，以创建一个新的变量。

var extendedIdea = aGoodIdea + " You never know when you'll have to figure out what it does.";

赋值和相等

JScript 语句中使用等号 (=)给变量赋值：等号是赋值运算符。= 运算符左边的操作项总是一个 Lvalue。Lvalue 可以是：

三：变量，

数组元素， 对象属性。 = 运算符右边的操作项总是一个 Rvalue。Rvalues 可以是任何类型的一个任意值，包括表达式的值。下面给出一个 JScript 赋值语句的示例。

anInteger = 3;

Jscript 编译器解释本语句的意义为：“将 3 赋给变量 anInteger”或“anInteger 的值为 3”。

确定您理解了 = 运算符（赋值）和 == 运算符（相等）的差异。在比较两个值是否相等时，应使用两个等于号 (==)。这些内容将在 控制程序的流程 中详细介绍。

四：表达式

JScript 表达式是指 JScript 解释器能够计算生成值的 JScript “短语”。这个值可以是任何有效的 JScript 类型 — 数字、字符串、对象，等等。最简单的表达式是文字。下面给出 JScript 文字表达式的一些示例。

3.9                       // 数字文字
"Hello!"                  // 字符串文字
false                     // 布尔文字
null                      // 文字空值
{x:1, y:2}                // 对象文字
[1,2,3]                   // 数组文字
function(x){return x*x;}  // 函数文字

更多复杂的表达式中包含变量、函数、函数调用以及其他表达式。可以用运算符将表达式组合，创建复合表达式。运算符可以是：

+  // 加法
-  // 减法
*  // 乘法
/  // 除法

下面给出 JScript 复合表达式的一些示例。

var anExpression = 3 * (4 / 5) + 6;
var aSecondExpression = Math.PI * radius * radius;
var aThirdExpression = aSecondExpression + "%" + anExpression;
var aFourthExpression = "(" + aSecondExpression + ") % (" + anExpression + ")";
其他请参考相关文档
微信号：

clpaial10201119（Q Q：2211523682）

微博WB:

http://weibo.com/u/3288975567?is_hot=1

gitHub：

https://github.com/al1020119

博客

http://al1020119.github.io/

Comments