一.web概述

@jimbo 2016-07-03T06:18:28.000000Z 字数 5248 阅读 898

什么是web？
B/S,C/S,集中式区别
HTTP协议(请求，响应包)
请求（Request）：客户端向服务器发送的http请求
响应（Require）：服务器针对客户端发送的请求做的http响应
B/S框架

二.web基础html

1. 网页实现登录框，登录密码的html代码


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- 这段代码可以解决中文乱码问题 -->
    </head>
    <body>
        <form method="post" action="http://127.0.0.1:8008/login.php">
        用户名：
        <input type="text" name="username"/>
        </br></br> <!-- 换行 一个br标签代表一个换行 -->
        密　码：
        <input type="password" name="password">
        </br></br>
        <button type="submit">登录</button>
        </form>
    </body>
</html>

效果预览：

扩展：注册页面，要求有用户名和密码，密码输入两次，且要校验两次密码是否一致


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- 这段代码可以解决中文乱码问题 -->
        <script type="text/javascript">
            function check(event) {
                var password = document.getElementById("password").value;
                var passwordRe = document.getElementById("passwordRe").value;
                if (password == passwordRe) {
                    document.getElementById("passwordRe").style.backgroundColor = 'green';
                    document.getElementById("result").innerHTML = '密码正确';
                    document.getElementById("register").disable = true;
                    return true;
                } else {
                    document.getElementById("passwordRe").style.backgroundColor = 'red';
                    document.getElementById("result").innerHTML = '密码不一致';
                    document.getElementById("register").disable = false;
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <form method="post" action="http://127.0.0.1:8008/login.php">
        昵　　称：
        <input type="text" name="username"/>
        </br></br> <!-- 换行 一个br标签代表一个换行 -->
        密　　码：
        <input type="password" name="password" id = "password">
        </br></br>
        重复密码：
        <input type="password" name="passwordRe" id = "passwordRe" oninput="check(event)">
        <p id = "result"></p>
        </br></br>
        <button type="submit" id = "register">注册</button>
        </form>
    </body>
</html>

效果预览：

form，就是html表单，用于收集用户的各种输入，包括文本，单选框，复选框等等都可以通过form表单来实现。
- form中的method属性：表示向服务器提交输入信息的方式，一般为post或者get方式。区别：post提交的时候输入的内容会被写在http请求的body体中，get提交的时候输入的内容会被写在提交的url中。例如上面的代码当以get方式提交的时候，url会被拼接成"http://127.0.0.1:8008/login.php?name=lyr&password=hellolyr"
- form中的action属性：表示提交的地址

input type的种类：
- text：文本域
- password：密码域
- 复选框：checkbox
- 单选按钮：radio
- 按钮：button

扩展：下拉框

<html>
    <body>
        <form>
            <select name="cars">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
            </select>
        </form>
    </body>
</html>

一个完整安全可靠地登录表单,可不看

2. 常见标签

meta标签是对网站发展非常重要的标签，它可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等.

meta标签分两大部分：HTTP-EQUIV和NAME变量。
详见这个页面一楼的回答
link:链接一个外部样式表.
p:标识一个段落
a:链接
img:图片

<!-- 插入一张图片 -->
<img src="图片的地址"/>

<!--（2）的实例代码： -->
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../html/csstest1.css" >
    </head>
    <body>
        <h1>我通过外部样式表进行格式化。</h1>
        <p>我也一样！</p>
        </body>
</html>

3.跑马灯效果代码

<marquee behavior=scroll>hello lyr</marquee>

三 CSS

<html>
    <head>
        <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>

四 JavaScript

1.什么是JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

2. 如何在html中使用JavaScript

在html页面上直接用这个标签来包裹你的js代码
在html页面上通过引用
<script src="scripts/test.js" type="text/javascript"></script>

注：JavaScript脚本可以插入到页面的任意位置，只要保证在调用之前就定义或者引入即可。

例如这样：

<script type="text/javascript">
    function hello() {
        // body...
        document.write('hello lyr');
    }
</script>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <script type="text/javascript">hello();</script>
    </body>
</html>

实例代码1：

<html>
    <head>
        <script type="text/javascript" language="javascript">
            document.write('hello hyr');
        </script>
    <head>
</html>

实例代码2：

<html>
    <head>
        <script src="js文件的路径" type="text/javascript" language="javascript"></script>
    </head>
</html>

3.JavaScript的语法

详细见W3School
1. 语句：在JavaScript中使用";"来表示语句的结束。例如alert('hello lyr');,但是";"并不是必须的，不加";"也是正确的。
2. 注释："//"是单行注释，"/* ---- */"是多行注释。和崔佳佳一样。
3. 变量：JavaScript是一种弱类型的语言，即在定义变量的时候不区分类型，统一使用var关键字来定义。var aInt = 1; var bString = 'hello lyr'; var cBool = true; var dFloat = 3.14159;。其实，JavaScript中也可以不定义直接使用，比如a = 1;也是正确的。
4. 数据类型：包括：字符串、数字、布尔、数组、对象、Null、Undefined 关于undefined点击这里查看
5. 函数：使用function functionName(argument1, argument2, ...) {}定义函数，和c++不一样的地方是不需要添加返回值类型，至于函数中有没有返回值，返回值类型是什么都可以自己确定。
6. 运算符：和c++一样
7. if...else和for，while，switch等结构都是一样的。
8. JavaScript的对象：一共有三种方式，构造器方式和c++很像，另外两种看起来很怪，知道能那么用就好了。

<！-- 第一种：创建直接的实例 -->
<script>
    var person = new Object();
    person.name = 'lyr';
    person.sex = 'bady';
    person.age = 8;
    // 上面的代码就已经定义好了一个对象
    // 可以这样调用
    decument.write('姓名：' + person.name + ',性别' + person.sex + ",年龄" + person.age + '岁');
</script>
/*
执行结果是：
姓名：lyr，性别：bady，年龄：8岁
*/

<!-- 第二种：替代语法（使用对象 literals） -->
<script>
    person = {name:'lyr',sex:'bady',age:8};
</script>

<!-- 第三种：构造器 -->
<script>
    // 构造器函数名第一个字母最好大写，显得专业
    function Person(name, sex, age) {
        this.name = name;
        this.sex = age;
        this.age = age;
    }
    personOne = Person('lyr', 'bay', 8);
</script>

*关于JavaScript对象中的方法

4.判断一个字符串是否是小数

首先我们要判断这个字符串是否是一个数值类型的，然后去判断是否含有小数点。

<script>
    function isSmallNumber(str) {
        if (!isNaN(str)) {
        // isNaN()函数判断是否是非数值，当为数值型字符串的时候返回false，为非数值字符串的时候返回true
            if (str.match('.') != null) {
                // match函数去匹配字符串中是否有"."，有则返回"."，没有则返回null
                return ture;
            }
        } 
        return false;
    }
    var a = 123.1;
    var b = 521;
    document.write(isSmallNumber(a));
    document.write(isSmallNumber(b));
</script>
/*
结果输出：
true
false
*/

5.函数eval

他要考这种东西他还是人么。。。
说明在这里

6.document原型

通俗说就是通过document对象来找到html中的标签
详细见这里

<html>
<head>
    <script type="text/javascript">
        decument.getElementById("pOne").innerHTML = "hello";
        decument.getElementsByTagName("p")[0].innerHTML = "lyr";
    </script>
</head>
<body>
    <p id="pOne">
    </p>
</body>
</html>