首个公开草案,测试技术

图片 1

Web测量检验手艺

W3C的CSS工作组近来宣告了CSS Variables的第叁个了解办事草案。万意气风发在体制表中通常利用某些值,能够将其定义为变量,只需改变该变量的值,就能够更新任何样式表,而无需每一个改良每一个样式准则。自从壹玖玖玖年CSS Level 2 Recommendation揭橥以来,Web开辟者社区就建议制订CSS定义变量的标准措施。本草案包括了CSS变量定义的相符约定,并引进了风流洒脱种类顾客自定义的、已知的公家性质作为变量属性,那允许开垦者从当中接收属性名称,并分配值。那使得阅读大型CSS文件进一步便于,因为相同自由的值今后有了适度的名称,编辑那些文件也尤为便于且不易出错,只需退换多个值,就可以行使到全体站点。W3C代表,该专门的学问近日还地处起步阶段,刚刚开始实践,并迎接开辟者提交有关作用和语法上的反馈。CSS Variables草案:

IV. Web测量试验前端技艺

HTML

什么是HTML

HTML全称是超文本标志语言(Hyper Text Markup Language),它是网络络选用最平淡无奇的符号语言。说来讲去,HTML文件正是日常文书

  • HTML标志(又称作标签),并且区别的HTML标识能代表不一样的效应。
  • HTML 是用来说述网页的风姿浪漫种语言。

  • HTML 指的是超文本标识语言 (Hyper Text Markup Language卡塔尔(英语:State of Qatar)

  • HTML 不是风华正茂种编制程序语言,而是生机勃勃种标识语言 (markup language卡塔尔

    标识语言是豆蔻年华套标识标签 (markup tag卡塔尔(قطر‎

  • HTML 使用标记标签来描述网页

  • HTML 文档 = 网页

  • HTML 文书档案描述网页

  • HTML 文书档案包括 HTML 标签和纯文本

  • HTML 文书档案也被叫做网页

  • Web 浏览器的效用是读取 HTML 文书档案,并以网页的格局体现出它们。浏览器不交易会示 HTML 标签,而是使用标签来分解页面包车型的士剧情:

HTML 标签

  • HTML 标志标签平常被叫作 HTML 标签 (HTML tag卡塔尔(英语:State of Qatar)。
  • HTML 标签是由尖括号包围的根本词,比如 <html>
  • HTML 标签日常是成对现身的,举个例子 <b></b>
  • 标签对中的第二个标签是发端标签,第三个标签是实现标签
  • 千帆竞发和甘休标签也被称之为开放标签和关闭标签
<html>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

HTML 历史

HTML的前行历史相比较复杂。因为它其实是太“随便”了,况兼担任解析HTML的浏览器们又太“宽容”了。甚至于到了“写生机勃勃份对的HTML文书档案超轻松,写风华正茂份错的HTML文书档案很难”的水平。而且不一样的浏览器之间又是存在部分数之差距,由此导致HTML给人的痛感相比较散乱。

  • HTML 1.0:1994年四月 由互连网工程职业小组公布
  • HTML 2.0:1995年11月 作为RFC 1866发布
  • HTML 3.2:1999年一月二十二日由W3C组织揭橥,是HTML文书档案第三个被大规模选取的规范。
  • W3C:World Wide Web Consortium,环球网联盟。创制于1993年,是Web技巧领域最具权威和影响力的国际中立性本领标准机构。
  • HTML 4.0:壹玖玖陆年3月十一日 由W3C组织宣布,也是W3C推荐规范。
  • HTML 4.01:一九九六年5月28日有W3C协会发表,是HTML文书档案的另二个关键的和大范围接纳的正规化。
  • XHTML 1.0:公布与2001年十二月12日,是W3C组织推荐标准,后来由此修正,于二〇〇三年一月1日再也发布。
  • 2009年 WHATWG制订并宣布了HTML5专门的学问。

W3C 是什么?

  • W3C 指环球网联盟(World Wide Web Consortium)
  • W3C 创建于1994年10月
  • W3C 由 Tim Berners-Lee 创建
  • W3C 是多少个会员协会
  • W3C 的行事是对 web 进行标准
  • W3C 创立并维护 WWW 标准
  • W3C 规范被堪当 W3C 推荐(W3C Recommendations)

在HTML3.2事情发生以前,HTML的进步颇为混乱,各类软件商家业经济常活动扩张HTML标签,而各种浏览器厂家为了保全最棒的宽容性,总是鼎力扶植各样HTML标签,那就以致了HTML显得极为混乱。

参照他事他说加以考察上面包车型地铁例证

<ol>
    <li> 这是不标准的 HTML 第1行
        <li> 这是不标准的 HTML 第2行
            <li> 这是不标准的 HTML 第3行
                <li> this is the line 4 of the nonstandard HTML
                    <li> this is the line 5 of the nonstandard HTML
                        <li> this is the line 6 of the nonstandard HTML
</ol>

XHTML的全称是扩大的超文本标志语言(eXtensible Hyper Text Markup Language),是更严格、越来越纯粹的HTML代码。W3C制定XHTML的指标就是逐月代替原来的HTML。轻巧说:XHTML就是时尚版本的HTML标准。

参照他事他说加以调查下面包车型客车例子2

<html>

<head>
    <title>混乱的HTML文档</title>

    <body>
        <h1>混乱的HTML文档

XHTML致力于消弭这种不规范,供给HTML文书档案首先必得是黄金时代份XML文书档案。

  • XML文书档案是风姿罗曼蒂克种构造化文书档案,它犹如下4条主干准绳:
  • 成套文书档案有且唯有一个根成分
  • 每种成分都有初步表情和终结标签组成,除非接收空成分语法。
  • 要素与成分之间应当成立嵌套。
  • 要素的习性必须有属性值,况且属性值应该用引号引起来。

一个轻便易行的HTML文件

<html>
    <head>
        <title>我的第一个 HTML 页面</title>
    </head> 
    <body>
        <p>body 元素的内容会显示在浏览器中。</p>
        <p>title 元素的内容会显示在浏览器的标题栏中。</p>
    </body>
</html>

段落

<html>

    <body>
        <p>这是段落。</p>
        <p>这是段落。</p>
        <p>这是段落。</p>
        <p>段落元素由 p 标签定义。</p>
    </body>

</html>

<html>

    <body>

        <p>
        这个段落
        在源代码中
        包含许多行
        但是浏览器
        忽略了它们。
        </p>

        <p>
        这个段落
        在源代码       中
        包含   许多行
        但是      浏览器
        忽略了  它们。
        </p>

        <p>
        段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小,将改变段落中的行数。
        </p>

    </body>
</html>

诗文难题

<html>

    <body>
        <h1>春晓</h1>
        <p>
            春眠不觉晓, 
            处处闻啼鸟。 
            夜来风雨声, 
            花落知多少。
        </p>
        <p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p>
    </body>

</html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>春晓</title>
    </head>

    <body>
        <h1>春晓</h1>
        <p>
            春眠不觉晓,
            <br />处处闻啼鸟。
            <br />夜来风雨声,
            <br />花落知多少。
        </p>
    </body>

</html>

标题

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>标题</title>
    </head>

    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
        <h4>This is heading 4</h4>
        <h5>This is heading 5</h5>
        <h6>This is heading 6</h6>
        <p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
    </body>

</html>

从当中排列的标题

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>标题</title>
    </head>

    <body>
        <h1 align="center">This is heading 1</h1>
        <p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
    </body>

</html>

注释

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>注释</title>
    </head>

    <body>

        <!--这是一段注释。注释不会在浏览器中显示。-->

        <p>这是一段普通的段落。</p>

    </body>

</html>

文本格式

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>文本格式</title>
    </head>

    <body>
        <b>This text is bold</b>
        <br />
        <strong>This text is strong</strong>
        <br />
        <big>This text is big</big>
        <br />
        <em>This text is emphasized</em>
        <br />
        <i>This text is italic</i>
        <br />
        <small>This text is small</small>
        <br /> This text contains
        <sub>subscript</sub>
        <br /> This text contains
        <sup>superscript</sup>
    </body>

</html>

超链接

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>超链接</title>
    </head>

    <body>
        <p>
            <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
        <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
    </body>

</html>

图形超链接

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>超链接</title>
    </head>

    <body>
        <p>
            您也可以使用图像来作链接:
            <a href="/example/html/lastpage.html">
                ![](https://www.baidu.com/img/baidu_jgylogo3.gif)
            </a>
        </p>
    </body>

</html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>超链接</title>
    </head>

    <body>
        <p>
            您也可以使用图像来作链接:
            <a href="https://www.baidu.com" target="_blank">
                ![](https://www.baidu.com/img/baidu_jgylogo3.gif)
            </a>
        </p>
    </body>

</html>

邮件测量试验

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>邮件测试</title>
    </head>

    <body>

    <p>
    这是邮件链接:
    <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&subject=Hello%20again">发送邮件</a>
    </p>

    <p>
    <b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
    </p>

    </body>

</html>

表格

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>表格</title>
    </head>

    <body>
        <table width="400" border="1">
            <tr>
                <th align="left">消费项目....</th>
                <th align="right">一月</th>
                <th align="right">二月</th>
            </tr>
            <tr>
                <td align="left">衣服</td>
                <td align="right">¥241.10</td>
                <td align="right">¥50.20</td>
            </tr>
            <tr>
                <td align="left">化妆品</td>
                <td align="right">¥30.00</td>
                <td align="right">¥44.45</td>
            </tr>
            <tr>
                <td align="left">食物</td>
                <td align="right">¥730.40</td>
                <td align="right">¥650.00</td>
            </tr>
            <tr>
                <th align="left">总计</th>
                <th align="right">¥1001.50</th>
                <th align="right">¥744.65</th>
            </tr>
        </table>
    </body>

</html>

列表

严节列表

    <html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>列表</title>
    </head>

    <body>
        <h4>一个无序列表:</h4>
        <ul>
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
        </ul>
    </body>

</html>

类型标识列表

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>列表</title>
    </head>

    <body>
        <h4>Disc 项目符号列表:</h4>
        <ul type="disc">
            <li>苹果</li>
            <li>香蕉</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ul>
        <h4>Circle 项目符号列表:</h4>
        <ul type="circle">
            <li>苹果</li>
            <li>香蕉</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ul>
        <h4>Square 项目符号列表:</h4>
        <ul type="square">
            <li>苹果</li>
            <li>香蕉</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ul>
    </body>

</html>

稳步列表

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>列表</title>
    </head>

    <body>
        <ol>
            <li>咖啡</li>
            <li>牛奶</li>
            <li>茶</li>
        </ol>
        <ol start="50">
            <li>咖啡</li>
            <li>牛奶</li>
            <li>茶</li>
        </ol>
    </body>

</html>

数字列表

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>列表</title>
    </head>

    <body>
        <h4>数字列表:</h4>
        <ol>
            <li>苹果</li>
            <li>香蕉</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ol>
        <h4>字母列表:</h4>
        <ol type="A">
            <li>苹果</li>
            <li>香蕉</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ol>
        <h4>小写字母列表:</h4>
        <ol type="a">
            <li>苹果</li>
            <li>香蕉</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ol>
        <h4>罗马字母列表:</h4>
        <ol type="I">
            <li>苹果</li>
            <li>香蕉</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ol>
        <h4>小写罗马字母列表:</h4>
        <ol type="i">
            <li>苹果</li>
            <li>香蕉</li>
            <li>柠檬</li>
            <li>桔子</li>
        </ol>
    </body>

</html>

表单

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>表单</title>
    </head>

    <body>
        <form action="/example/html/form_action.asp" method="get">
            <p>用户名:
                <input type="text" name="username" />
            </p>
            <p>密    码:
                <input type="password" name="password" />
            </p>
            <input type="submit" value="登录" />
        </form>
        <p>请单击确认按钮,输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
    </body>

</html>
  • 空格
  • < <
  • > >
  • " "
  • & &

CSS

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets卡塔尔

  • 体制订义如何体现 HTML 元素
  • 体制平常存款和储蓄在体制表中
  • 把体制增添到 HTML 4.0 中,是为着消除内容与表现分离的难点
  • 外表样式表能够大幅度拉长工效
  • 外表样式表平时存款和储蓄在 CSS 文件中
  • 四个样式定义可层叠为意气风发

样式表消除了叁个科学普及的标题

HTML 标签原来被规划为用于定义文书档案内容。通过应用 <h1><p><table> 那样的竹签,HTML 的初衷是抒发“那是标题”、“那是段子”、“那是表格”之类的音信。同一时候文书档案构造由浏览器来形成,而不利用别的的格式化标签。

鉴于二种关键的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和性质(比如字体标签和颜料属性)增加到 HTML 规范中,制造文书档案内容清晰地单独于文书档案展现层的站点变得特别困难。

为了减轻那个难点,环球网缔盟(W3C),那些非营利的规范结盟,担负起了 HTML 标准化的职务,并在 HTML 4.0 之外创立出样式(Style)。

有着的主流浏览器均协理层叠样式表。

体制表一点都不小地进步了工效

体制表定义怎么着展现 HTML 成分,就如 HTML 3.2 的字体标签和颜料属性所起的作用那样。样式平日保存在表面包车型客车 .css 文件中。通过单独编辑三个轻松的 CSS 文书档案,外界体制表让你有力量何况改良站点中有所页面包车型客车结交涉及外国观。

由于允许同偶尔候调节多重页面包车型大巴样式和结构,CSS 能够号称 WEB 设计领域的贰个突破。作为网址开垦者,你可以预知为各样 HTML 成分定义样式,并将之应用于您期待的人身自由多的页面中。如需实行全局的改善,只需轻易地转移样式,然后网站中的全部因素均会自行地换代。

CSS 法规由多个主要的风流倜傥部分组成:选取器,以致一条或多条表明。

selector {declaration1; declaration2; ... declarationN }
h1 {color:red; font-size:14px;}
body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

id选择器:#

类采用器:.

背景色
<!DOCTYPE html>
<html>

    <head>
        <title>背景色</title>
        <style type="text/css">
        body {
            background-color: yellow
        }

        h1 {
            background-color: #00ff00
        }

        h2 {
            background-color: transparent
        }

        p {
            background-color: rgb(250, 0, 255)
        }

        p.no2 {
            background-color: gray;
            padding: 20px;
        }
        </style>
    </head>

    <body>
        <h1>这是标题 1</h1>
        <h2>这是标题 2</h2>
        <p>这是段落</p>
        <p class="no2">这个段落设置了内边距。</p>
    </body>

</html>
文本颜色
<!DOCTYPE html>
<html>

    <head>
        <title>文本颜色</title>
        <style type="text/css">
        body {
            color: red
        }

        h1 {
            color: #00ff00
        }

        p.ex {
            color: rgb(0, 0, 255)
        }
        </style>
    </head>

    <body>
        <h1>这是 heading 1</h1>
        <p>这是一段普通的段落。请注意,该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p>
        <p class="ex">该段落定义了 class="ex"。该段落中的文本是蓝色的。</p>
    </body>

</html>
div布局
<!DOCTYPE html>
<html>
    <head>
        <title>div布局</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <style type="text/css">
        div#container {
            width: 500px
        }       
        div#header {
            background-color: #99bbbb;
        }  
        div#menu {
            background-color: #ffff99;
            height: 200px;
            width: 150px;
            float: left;
        }  
        div#content {
            background-color: #EEEEEE;
            height: 200px;
            width: 350px;
            float: left;
        }

        div#footer {
            background-color: #99bbbb;
            clear: both;
            text-align: center;
        }       
        h1 {
            margin-bottom: 0;
        }       
        h2 {
            margin-bottom: 0;
            font-size: 18px;
        }       
        ul {
            margin: 0;
        }       
        li {
            list-style: none;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>这里是网页的主标题</h1>
            </div>
            <div id="menu">
                <h2>菜单</h2>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>
            </div>
            <div id="content">这里是网页内容</div>
            <div id="footer">这里是网页底部</div>
        </div>
    </body>
</html>

JavaScript

JavaScript 是世界上最风靡的脚本语言。

JavaScript 是归属 web 的言语,它适用于 PC、台式机Computer、平板Computer和移动电话。

JavaScript 被规划为向 HTML 页面扩充人机联作性。

无数 HTML 开辟者都不是技术员,可是 JavaScript 却有着特别轻松的语法。大约各类人都有技能将小的 JavaScript 片段加多到网页中。

JavaScript 是脚本语言

JavaScript 是黄金年代种轻量级的编制程序语言。

JavaScript 是可插入 HTML 页面包车型客车编制程序代码。

JavaScript 插入 HTML 页面后,可由具备的今世浏览器施行。

JavaScript 超级轻松学习。

JavaScript:写入 HTML 输出
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

<!DOCTYPE html>
<html>

    <head>
        <title>JavaScript:写入 HTML 输出</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>

    <body>
        <p>
            JavaScript 能够直接写入 HTML 输出流中:
        </p>
        <script>
        document.write("<h1>This is a heading</h1>");
        document.write("<p>This is a paragraph.</p>");
        </script>
        <p>
            您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
        </p>
    </body>

</html>
JavaScript:对事件作出反应
<button type="button" onclick="alert('Welcome!')">点击这里</button>

<!DOCTYPE html>
<html>

    <head>
        <title>JavaScript:对事件作出反应</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>

    <body>
        <h1>我的第一段 JavaScript</h1>
        <p>
            JavaScript 能够对事件作出反应。比如对按钮的点击:
        </p>
        <button type="button" onclick="alert('Welcome!')">点击这里</button>
    </body>

</html>
JavaScript:改变 HTML 内容
x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

<!DOCTYPE html>
<html>

    <head>
        <title>JavaScript:改变 HTML 内容</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>

    <body>
        <h1>我的第一段 JavaScript</h1>
        <p id="demo">
            JavaScript 能改变 HTML 元素的内容。
        </p>
        <script>
        function myFunction() {
            x = document.getElementById("demo"); // 找到元素
            x.innerHTML = "Hello JavaScript!"; // 改变内容
        }
        </script>
        <button type="button" onclick="myFunction()">点击这里</button>
    </body>

</html>
JavaScript:改变 HTML 样式
x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";  

<!DOCTYPE html>
<html>

    <head>
        <title>JavaScript:改变 HTML 内容</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>

    <body>
        <script>
        function changeImage() {
            element = document.getElementById('myimage')
            if (element.src.match("bulbon")) {
                element.src = "http://www.w3school.com.cn/i/eg_bulboff.gif";
            } else {
                element.src = "http://www.w3school.com.cn/i/eg_bulbon.gif";
            }
        }
        </script>
        ![](http://upload-images.jianshu.io/upload_images/1430016-3b22b80015918326.gif?imageMogr2/auto-orient/strip)
        <p>点击灯泡来点亮或熄灭这盏灯</p>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <title>JavaScript:改变 HTML 内容</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>

    <body>
        <h1>我的第一段 JavaScript</h1>
        <p id="demo">
            JavaScript 能改变 HTML 元素的样式。
        </p>
        <script>
        function myFunction() {
            x = document.getElementById("demo") // 找到元素
            x.style.color = "#ff0000"; // 改变样式
        }
        </script>
        <button type="button" onclick="myFunction()">点击这里</button>
    </body>

</html>
JavaScript:验证输入
if isNaN(x) {alert("Not Numeric")};

<!DOCTYPE html>
<html>

    <head>
        <title>JavaScript:改变 HTML 内容</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>

    <body>
        <h1>我的第一段 JavaScript</h1>
        <p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
        <input id="demo" type="text">
        <script>
        function myFunction() {
            var x = document.getElementById("demo").value;
            if (x == "" || isNaN(x)) {
                alert("Not Numeric");
            }
        }
        </script>
        <button type="button" onclick="myFunction()">点击这里</button>
    </body>

</html>

JSON

JSON:JavaScript 对象表示法(JavaScript Object Notation)。

JSON 是累积和置换文本消息的语法。相近 XML。

JSON 比 XML 越来越小、越来越快,更易剖析。

什么是 JSON ?

  • JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
  • JSON 是轻量级的文书数据交流格式
  • JSON 独立于言语 *
  • JSON 具备本人描述性,更易精晓
  • JSON 使用 JavaScript 语法来说述数据对象,不过 JSON 照旧独立于言语和平台。JSON 深入分析器和 JSON 库扶持广大莫衷一是的编制程序语言。

JSON 语法则则

  • JSON 语法是 JavaScript 对象表示德文法的子集。
  • 数据在称呼/值对中
  • 数码由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

JSON 名称/值对

JSON 数据的书写格式是:名称/值对。

名称/值对蕴含字段名称(在双引号中),前面写贰个冒号,然后是值:

"firstName" : "John"

JSON 值

JSON 值可以是:

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true 或 false)
  • 数组(在方括号中)
  • 目的(在花括号中)
  • null

JSON 对象

JSON 对象在花括号中书写:

对象能够分包多少个称呼/值对:

{ "firstName":"John" , "lastName":"Doe" }

JSON 数组在方括号中书写:

数组可含蓄多少个对象:

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

在上头的例子中,对象 "employees" 是含有多个对象的数组。种种对象表示一条有关有些人(有姓和名)的记录。

V. Web测验服务端技能

PHP基础

PHP 是生机勃勃种创制动态交互作用性站点的强硬的服务器端脚本语言。

PHP 是无需付费的,况且利用大面积。对于像微软 ASP 那样的竞争者来讲,PHP 无疑是另意气风发种高效能的选项。

什么是 PHP?

PHP 是 "PHP Hypertext Preprocessor" 的首字母缩略词

PHP 是风姿浪漫种被大面积运用的开源脚本语言

PHP 脚本在服务器上推行

PHP 未有资本,可供无偿下载和平运动用

PHP 是一门为之侧目的风靡语言!

它强盛到能够成为在互联网上最大的博客系统的为主(WordPress)!

它深邃到能够运作最大的应酬互连网(facebook)!

而它的易用程度足以成为初学者的首要推荐服务器端语言!

什么是 PHP 文件?

PHP 文件能够包涵文本、HTML、CSS 以至 PHP 代码

PHP 代码在服务器上进行,而结果以纯文本重回浏览器

PHP 文件的后缀是 ".php"

PHP 能够做哪些?

PHP 能够转移动态页面内容

PHP 能够创制、打开、读取、写入、删除以至关闭服务器上的文件

PHP 能够接纳表单数据

PHP 能够发送并取回 cookies

PHP 能够增多、删除、校正数据库中的数据

PHP 能够范围客商访问网址中的有个别页面

PHP 可以对数据开展加密

通过 PHP,能够不受限于只输出 HTML。仍然是能够够出口图像、PDF 文件、以致 Flash 影片。也得以出口任何公文,举个例子 XHTML 和 XML。

怎么使用 PHP?

PHP 运转于各个平台(Windows, Linux, Unix, Mac OS X 等等)

PHP 包容大概具备服务器(Apache, IIS 等等)

PHP 扶持三种数据库

PHP 是无需付费的。请从官方 PHP 能源下载:www.php.net

PHP 易于学习,并可连忙地运营在服务器端

本身索要怎么发轫?

如需最初使用 PHP,能够:

使用扶助 PHP 和 MySQL 的 web 主机

在 PC 上安装 web 服务器,然后安装 PHP 和 MySQL。

动用援助 PHP 的 Web 主机

假诺服务器支持 PHP,那么没有必要做别的职业。

风流浪漫旦创建 .php 文件,然后上传到 web 目录中就能够。服务器会自行对它们举行深入分析。

不必编写翻译或安装其余附加的工具。

因为 PHP 是免费的,大多数 web 主机都扶持 PHP。

在 PC 上运行 PHP

然则要是服务器不帮助 PHP,那么必得:

安装 web 服务器

安装 PHP

安装数据库,比方 MySQL

基础 PHP 语法

PHP 脚本可放置于文书档案中的任何地方。

PHP 脚本以 <?php 开头,以 ?> 结尾:

<?php
// 此处是 PHP 代码
?>

<!DOCTYPE html>
<html>

    <head>
        <title>PHP页面</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>

    <body>
        <h1>我的第一张 PHP 页面</h1>
        <?php
    echo "Hello World!";
    ?>
    </body>

</html>

PHP 文件的暗中同意文件扩展名是 ".php"。

PHP 文件日常蕴含 HTML 标签甚至一些 PHP 脚本代码。

PHP 扶助两种注释:
<?php
// 这是单行注释

# 这也是单行注释

/*
这是多行注释块
它横跨了
多行
*/
?>

<!DOCTYPE html>
<html>

<head>
    <title>PHP 支持三种注释</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

<body>
    <?php
// 这是单行注释

# 这也是单行注释

/*
这是多行注释块
它横跨了
多行
*/

echo "Hello World!";
?>
</body>

</html>
PHP 大小写不灵动
<?php
ECHO "Hello World!<br>";
echo "Hello World!<br>";
EcHo "Hello World!<br>";
?>

<!DOCTYPE html>
<html>

<head>
    <title>PHP 大小写不敏感</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

<body>
    <?php
ECHO "Hello World!<br>";
echo "Hello World!<br>";
EcHo "Hello World!<br>";
?>
</body>

</html>
PHP 变量大小写敏感
<?php
$color="red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>

<!DOCTYPE html>
<html>

<head>
    <title>PHP 变量大小写敏感</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

<body>
    <?php
$color="red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>
</body>

</html>

PHP进阶

PHP表单管理

$_GET 是经过 ULX570L 参数字传送递到眼下剧本的变量数组。

$_POST 是通过 HTTP POST 传递到眼下剧本的变量数组。

<!DOCTYPE html>
<html>

<head>
    <title>PHP 表单处理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

<body>
    <form action="welcome.php" method="post">
        Name:
        <input type="text" name="name">
        <br> E-mail:
        <input type="text" name="email">
        <br>
        <input type="submit">
    </form>
</body>

</html>

welcome.php

<html>
<body>

Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>

</body>
</html>
PHP 日期
<?php
echo "今天是 " . date("Y/m/d") . "<br>";
echo "今天是 " . date("Y.m.d") . "<br>";
echo "今天是 " . date("Y-m-d") . "<br>";
echo "今天是 " . date("l");
?>

date(卡塔尔 函数的格式参数是必备的,它们规定何以格式化日期或时刻。

上面列出了有的常用于日期的字符:

d - 代表月里的某天(01-31)

m - 表示月(01-12)

Y - 表示年(四位数)

1 - 表示周里的某天

<!DOCTYPE html>
<html>

<head>
    <title>PHP 日期</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

<body>
    <?php
echo "今天是 " . date("Y/m/d") . "<br>";
echo "今天是 " . date("Y.m.d") . "<br>";
echo "今天是 " . date("Y-m-d") . "<br>";
echo "今天是 " . date("l");
?>
</body>

</html>

VI. Web测量试验数据库技艺

ODBC

ODBC 是风流倜傥种应用程序编制程序接口(Application Programming Interface,API),使大家有本领连接到有个别数据源(举例一个 MS Access 数据库)。

创建 ODBC 连接

通过二个 ODBC 连接,您可以连接到你的网络中的任何Computer上的其他数据库,只要 ODBC 连接是可用的。

那是创建到达 MS Access 数据的 ODBC 连接的办法:

  1. 在调整面板中开拓管理工科具
  2. 双击此中的数额源 (ODBC卡塔尔 Logo
  3. 选择系统 DSN 选项卡
  4. 点击系统 DSN 选项卡中的“增多”按键
  5. 筛选 Microsoft Access Driver。点击实现。
  6. 在下二个分界面,点击“接纳”来稳固数据库。
  7. 为这几个数量库取一个数据源名 (DSN卡塔尔。
  8. 点击鲜明。

连接到 ODBC

odbc_connect(卡塔尔 函数用于连接到 ODBC 数据源。该函数有八个参数:数据源名、顾客名、密码以致可选的指针类型参数。

odbc_exec(卡塔尔(قطر‎ 函数用于施行 SQL 语句。

$conn=odbc_connect('northwind','','');
$sql="SELECT * FROM customers"; 
$rs=odbc_exec($conn,$sql);

<!DOCTYPE html>
<html>

<head>
    <title>PHP ODBC连接 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>

<body>
    <?php
$conn=odbc_connect('northwind','','');
if (!$conn)
  {exit("Connection Failed: " . $conn);}
$sql="SELECT * FROM customers";
$rs=odbc_exec($conn,$sql);
if (!$rs)
  {exit("Error in SQL");}
echo "<table><tr>";
echo "<th>Companyname</th>";
echo "<th>Contactname</th></tr>";
while (odbc_fetch_row($rs))
{
  $compname=odbc_result($rs,"CompanyName");
  $conname=odbc_result($rs,"ContactName");
  echo "<tr><td>$compname</td>";
  echo "<td>$conname</td></tr>";
}
odbc_close($conn);
echo "</table>";
?>
</body>

</html>

PHP连接MySQL

连续几日到叁个 MySQL 数据库

在力所能致访问并拍卖数据库中的数据以前,必需创建达到数据库的连年。

在 PHP 中,这几个职务通过 mysql_connect(卡塔尔国 函数完毕。

mysql_connect(servername,username,password);

<?php
$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("mysql", $con);

$result = mysql_query("SELECT * FROM users");

while($row = mysql_fetch_array($result))
  {
  echo $row['host'] . " " . $row['user'];
  echo "<br />";
  }

mysql_close($con);
?>

<!DOCTYPE html>
<html>

    <head>
        <title>PHP 连接 MySQL </title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>

    <body>
       <?php
$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("mysql", $con);

$result = mysql_query("SELECT * FROM user");
echo "<table border = 1><tr>";
echo "<th>HOST</th>";
echo "<th>USER</th></tr>";
while($row = mysql_fetch_array($result))
  {
echo "<tr><td>".$row['Host']."</td><td>".$row['User']."</td></tr>";
  }
echo "</table>";
mysql_close($con);
?>
    </body>

</html>

冒泡排序

<!DOCTYPE html>
<html>

    <head>
        <title>PHP 连接 MySQL </title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>

    <body>
    <?php
    $arr=array(1,43,54,62,21,66,32,78,36,76,39);  

    function getpao($arr)
    {  
      $len=count($arr);
      //设置一个空数组 用来接收冒出来的泡
      //该层循环控制 需要冒泡的轮数
      for($i=1;$i<$len;$i++)
      { //该层循环用来控制每轮 冒出一个数 需要比较的次数
        for($k=0;$k<$len-$i;$k++)
        {
           if($arr[$k]>$arr[$k+1])
            {
                $tmp=$arr[$k+1];
                $arr[$k+1]=$arr[$k];
                $arr[$k]=$tmp;
            }
        }
      }
      return $arr;
    } 
    echo "原数组";
    print_r($arr);
    //echo "<br />"
    $newArray = getpao($arr);
    echo "新数组";
    print_r($newArray);

    ?>
    </body>

</html>

本文由365bet体育在线官网发布于前端技术,转载请注明出处:首个公开草案,测试技术

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。