Abstract: 对第三周学习内容的总结。

1. HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--<!DOCTYPE html>声明为HTML5文档-->
<!--HTML超文本标记语言-->
<!--HTML文档也叫做web页面-->
<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>
            标题
        </h1>
        <p>
            段落
        </p>
    </body>
</html>

文本域、密码字段和提交按钮

1
2
3
4
5
<form name="input" action="htmlFormAction.php" method="get">
    Name: <input type="text" name="name"><br>
    Password: <input type="password" name="password">
 	<input type="submit"value="Submit">   
</form>

单选按钮

1
2
3
4
<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
</form>

复选框

1
2
3
4
<form>
    <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have acar
</form>

附：HTML速查列表

​ HTML参考手册

  • HTML测验

    测试网址：HTML测验

    1. 产生粗体字的HTML标签是<b>。

    2. 电子邮件链接：<a href="mailto:xxx@yyy">。

    3. 产生下拉列表的是<select>。

      1
      2
      3
      4
      5
      6
      7
      8
      <form action="">
          <select name="cars">
          	<option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="fiat">Fiat</option>
              <option value="audi" selected> Audi</option>
          </select>
      </form>

    4. XML和HTML的区别：HTML不要求标记的嵌套，配对等，不要求标记间具有一定的顺序，而XML则是严格要求嵌套，配对。

    5. DOM代表文档对象模型，DTD是文档类型定义。

    6. div标签的作用是：按逻辑划分页面文档。

    7. meta标签作用用于：存储与浏览器和搜索引擎相关的信息。

    8. 对于HTML中的框架(Iframe/frameset)如何指定屏幕的其余部分：使用*。

    9. 当前文档和链接文档之间的关系是使用属性rel指定的。

    10. target的默认属性值在HTML中为_self

    11. HTML标记用于定义图像映射中的可单击区域是<area>

2. CSS

  • 选择器

    CSS中id选择器以"#"来定义，类选择器以"."来定义。

  • 插入样式表三种方法

    • 外部样式表

      1
      2
      3
      <head>
          <link rel="stylesheet" type="text/css" href="mystyle.css">
      </head>

    • 内部样式表

      1
      2
      3
      4
      5
      6
      7
      <head>
      <style>
          hr {color: sienna;} 
          p {margin-left: 20px;}
          body{background-img: url("images/back40.gif");}
      </style>
      </head>

    • 内联样式

      1
      2
      3
      <p style="color:sienna; margin-left:20px">
      	段落    
      </p>

      优先级：内联 > 内部 > 外联

  • CSS测试

    测试网址：CSS测试

    1. 外部样式表正确引用的方法：

      1
      <link rel="stylesheet" type="text/css" href="mystyle.css">
      1. HTML文档中，引用外部样式表正确位置是在<head>部分。
      2. backgroud-color属性可用于改变背景颜色，color可改变某个元素的文本颜色。
      3. 测试二中实例
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      /*粗体*/
      p {font-weight: bold}
      /*超链接无下划线*/
      a {text-decoration: none}
      /*文本以大写字母开头*/
      text-transform: capitalize
      /*改变元素字体*/
      font-family
      /*边框上10 下5 左20 右1*/
      /*上右下左*/
      border-widrh: 10 1 5 20
      /*产生带有正方形标记的项目列表*/
      list-style-type: square
      1. 测试三—五中实例
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      /*使用CSS3创建圆角*/
      border-radius: 30px;
      /*CSS3中元素添加阴影*/
      box-shadow: 10px 10px 5px grey;
      /*使用CSS3强制换行*/
      word-wrap: break-word;
      /*CSS用于盒子居中*/
      margin: 0 auto;
      /*盒子内内联元素居中*/
      text-align: center;
      /*CSS中导入样式表正确语法*/
      @import url(css/example.css);

3. JavaScript

​ HTML定义网页内容，CSS描述网页布局，JS介绍网页行为

  • JavaScript用法

    1
    2
    3
    <script>
    	alert("My First JavaScript");
    </script>

  • JavaScript输出

    1
    2
    3
    4
    5
    6
    7
    8
    <!--弹出警告框-->
    window.alert()
    <!--将内容写到HTML文档中-->
    document.write()
    <!--写入到HTML元素-->
    innerHTML
    <!--写入到浏览器的控制台-->
    console.log()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //单行注释
    /*
    多行
    注释
    */
    //JavaScript使用关键字var定义变量
    var x, length
    x = 5
    length = 6
    //JavaScript对大小写是敏感的

  • JavaScript事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <html>
        <head>
            <meta charset="utf-8">
            <title>JavaScript事件</title>
        </head>
        <body>
            <button onclick="getElementById('demo').innerHTML=Date()">
                现在时间
            </button>
            <p id="demo">
            </p>
        </body>
    </html>

    ​ 常见的HTML事件

    事件 描述
    onchange HTML元素改变
    onclick 用户点击HTML元素
    onmouseover 用户在一个HTML元素上移动鼠标
    onmouseout 用户从一个HTML元素上移开鼠标
    onkeydown 用户按下键盘按键
    onload 浏览器已完成页面的加载

  • JavaScript HTML DOM

    1. 改变HTML
    1
    2
    3
    4
    5
    6
    //修改时间
    document.write(Date());
    //修改HTML内容
    document.getElementById("id").innerHTML="new text";
    //改变HTML属性
    document.getElementById("id").attribute="new attribute";

    1. 改变CSS

      1
      2
      //改变HTML样式
      document.getElementById(id).style.property="new style"
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <!--使用事件修改HTML样式-->
      <html>
          <body>
              <h1 id='id1'>
                  标题
              </h1>
              <button type="button" onclick="document.getElementById('id1').style.color='red'">
                 点我！点我！！ 
              </button>
          </body>
      </html>
      1. EventListener
      1
      2
      3
      4
      element.addEventListener(event, function, useCapture)
      //第一个参数是事件的类型（"click"和"mousedown"）
      //第二个参数是事件触发后调用的函数
      //第三个参数是布尔值用于描述事件是冒泡还是捕获，该参数可选
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      <html>
          <head>
              <meta charset="utf-8">
              <title>EventListener</title>
          </head>
          <body>
              <p>
                  使用addEventListener()方法在用户点击按钮时执行函数
              </p>
              <button id="myBtn">
                	点我！
              </button>
              <script>
              	document.getElementById('myBtn').addEventListener("click", myFunction);
                  function myFunction(){
                      alert("Hello World!");
                  }
              </script>
          </body>
      </html>
      1. 创建新的HTML元素-appendChild()
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <html>
          <head>
              <title>创建新元素</title>
          </head>
          <body>
              <div id="div1">
                  <p id="p1">
                      第一个段落
                  </p>
                  <p id="p2">
                      第二个段落
                  </p>
              </div>
              <script>
              	var para=document.createElement("p");
                  var node=document.createTextNode("第三个段落")
                  para.appendChile(node);
                  
                  var element=document.getElementById("div1");
                  var chile=document.getElementById("p1");
                  element.appendChild(para, child);
              </script>
          </body>
      </html>

  • BOM

    常用函数

    函数 作用
    window.open()/close() 打开新窗口/关闭当前串口
    window.moveTo() 移动当前窗口
    window.resizeTo() 调整当前窗口的尺寸
    location.hostname web主机的域名
    location.pathname 当前页面的路径和文件名
    location.port web主机的端口（80/443）
    location.protocol web协议
    location.href 当前页面的URL
    loaction.assign() 加载新文档

    更多BOM函数请访问BOM

  • JavaScript测试

    测试网址

    1. 外部脚本不能包含<script>标签。

    2. 如何在浏览器的状态栏放入一条消息？

      1
      window.status="put your message here"

    3. 预测以下JavaScript输出

      1
      2
      3
      4
      <script type="text/javascript">
      	a = 8 + "8";
       	document.write(a);
      </script>

      88。

    4. JavaScript中没有float/integer/double等数据类型。

    5. JavaScript的.length属性用于计算任意字符串中的字符数。

    6. trim()方法用于删除字符串开头和结尾的空格。

4. PHP

  • PHP变量

    以$符号开始，必须以字母和下划线开始，变量名只能包含字母数字字符以及下划线。

    Note: 变量名是区分大小写的

  • echo和print语句

    echo可以输出一个或多个字符串，输出速度比print快

    print只允许输出一个字符串，返回值总为1

  • EOF使用说明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <?php
    $name="变量会被解析";
    $a=<<<EOF
    $name<br><a>html格式会被解析</a></br>双引号和HTML格式外的其他内容都不会被解析   
    "双引号外所有被排列好的格式都会被保留"
    "但是双引号内会保留转义符的转移效果，比如table:\t和换行:\n下一行"
    EOF;
    echo $a;
    ?>

  • PHP三种工作模式

工作模式 特点
CLI模式 命令行运行模式
CGI模式 通过CGI接口从HTTP服务器取得输入，然后把运行的结果通过CGI接口交给HTTP服务器，而HTTP服务器把结果送给浏览器
module模式 LAMP体系最常用的工作方式，php被编译为apache一个内置模块，启动时加载，当有一个php请求过来时，直接在httpd进程完成php解释运行，将结果返回。