Web课堂笔记

Web课堂笔记

第一周

html部分

<div class="container">
        <h1>hello everyBody!h1>
        <div class="login" >
            <form action="src/php/loginCheck.php" method="get" id="form" name="form">
                <input type="text" placeholder="请输入用户名" name="userName" id="userName">
                <input type="password" placeholder="请输入密码" name="userPwd" id="userPwd">
                <input type="button" value="登录" id="btnLogin">
                <div class="error">div>
            form>
            <div class="image">
                <img src="static/img/dog.jpg" alt="login-img">
            div>
        div>
    div>

元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息

[action] 处理表单提交的 URL

[method]

浏览器使用这种 [HTTP]方式来提交 表单。可能的值有：

• post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
• get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 ‘?’ 作为分隔符，[没有副作用]时使用这个方法。

链接CSS 使用了 href 属性设置外部资源的路径，并设置 rel 属性的值为“stylesheet”(样式表)。rel 表示“关系 (relationship) ，该属性定义了所链接的资源与当前文档的关系

<link rel="stylesheet" href="CSS/style.css">

CSS部分

input{
  display: block;/*就能把input改成块状标记 一行只有一个 div*/
  margin: 10px 0px 0px 0px;/*上右下左*/
  width: 100%;/*width属性是有继承性的*/
  height: 35px;
}

float设置浮动，把form放在左边，image放在右边

设置浮动的效果如上图所示，login的边框直接成一条线了

此时要在login中设置overflow:hidden

div.login{
    border: 3px solid orange;
    overflow: hidden;
}

/* 属性选择器 */
input[type="button"]{
    color: white;
    background: blue;
    border: none;/*阴影效果消失*/
}

color设置字体颜色，background设置背景色

border:none使边框的阴影效果消失，效果如下图

php部分

//get返回的是键值对
//键名就是在html中的name值
    $name=$_GET['userName'];
    $pwd=$_GET['userPwd'];
    if($name=="jjhjjh" && $pwd="123456"){
        print("登录成功");
    }
    else{
        print("登录失败");
        print("重返登录");
    }
?>

• PHP 脚本以 结束：

• 通过 PHP，有两种在浏览器输出文本的基础指令：echo 和 print。

PHP 变量规则：

• 变量以 $ 符号开始，后面跟着变量的名称
• 变量名必须以字母或者下划线字符开始
• 变量名只能包含字母、数字以及下划线（A-z、0-9 和 _ ）
• 变量名不能包含空格
• 变量名是区分大小写的（$y 和 $Y 是两个不同的变量）

PHP 语句和 PHP 变量都是区分大小写的

第二周

B/S工作原理

B/S（Brower/Server,浏览器/服务器）模式又称B/S结构，是Web兴起后的一种网络结构模式。Web浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用；客户机上只需要安装一个浏览器，服务器上安装SQL Server, Oracle, MySql等数据库；浏览器通过Web Server同数据库进行数据交互。

B/S架构采取浏览器请求，服务器响应的工作模式。

用户可以通过浏览器去访问Internet上由Web服务器产生的文本、数据、图片、动画、视频点播和声音等信息；

而每一个Web服务器又可以通过各种方式与数据库服务器连接，大量的数据实际存放在数据库服务器中；

从Web服务器上下载程序到本地来执行，在下载过程中若遇到与数据库有关的指令，由Web服务器交给数据库服务器来解释执行，并返回给Web服务器，Web服务器又返回给用户。在这种结构中，将许许多多的网连接到一块，形成一个巨大的网，即全球网。而各个企业可以在此结构的基础上建立自己的Internet。

http协议

• HTTP（HyperText Transfer Protocol）即超文本传输协议，是万维网（World Wide Web）的基础协议。详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。

• HTTP是一个应用层协议，由请求和响应构成，是一个标准的客户端服务器模型。HTTP是一个无状态的协议。

• HTTP默认的端口号为80，HTTPS的端口号为443。

协议的状态是指下一次传输可以“记住”这次传输信息的能力。
http是不会为了下一次连接而维护这次连接所传输的信息,为了保证服务器内存。
比如客户获得一张网页之后关闭浏览器，然后再一次启动浏览器，再登陆该网站，但是服务器并不知道客户关闭了一次浏览器。由于Web服务器要面对很多浏览器的并发访问，为了提高Web服务器对并发访问的处理能力，在设计HTTP协议时规定Web服务器发送HTTP应答报文和文档时，不保存发出请求的Web浏览器进程的任何状态信息。这有可能出现一个浏览器在短短几秒之内两次访问同一对象时，服务器进程不会因为已经给它发过应答报文而不接受第二期服务请求。由于Web服务器不保存发送请求的Web浏览器进程的任何信息，因HTTP协议属于无状态协议（Stateless Protocol）。

http请求行，相应行等等

参考资料

(31条消息) 通俗易懂。HTTP请求行、请求头、请求体、响应行、响应头、响应体详解_响应行响应头响应体_来老铁干了这碗代码的博客-CSDN博客

http发展HTTP 的发展 - HTTP | MDN (mozilla.org)

块标记

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。并且块级元素容器可以容纳多个嵌套的块级标签或者行内标签。常见的块元素有 < h 1 >   < h 6 > 、 < p > 、 < d i v > 、 < u l > 、 < o l > 、 < l i >

~

、

、

、

、
、
1. <h1> <h6>、<p>、<div>、<ul>、<ol>、<li>等，其中$<div>$
2. 标签，每个标签都在其 data-cid 属性中存储了对应元素的 id 属性值，并在标签内拼接了该元素的 user 和 content 属性值。

   第十周

   mysqli_stmt_bind_param

   $sql="update  panels set panel_likeit_nums=? where panel_id=?";
   $stmt=mysqli_prepare($conn,$sql);
   mysqli_stmt_bind_param($stmt,"ii",$likeitNums,$id);//如果有多个参数，types每个参数都要有
   mysqli_stmt_execute($stmt);
   mysqli_stmt_close($stmt);
   

   mysqli_stmt_bind_param第二个参数types

   A string that contains one or more characters which specify the types for the corresponding bind variables:

   Character	Description
   i	corresponding variable has type int
   d	corresponding variable has type float
   s	corresponding variable has type string
   b	corresponding variable is a blob and will be sent in packets

   第十一周

   session

   指的是服务器为每个会话（Session）分配的一块内存空间，用于保存用户在网站中进行的操作信息。主要功能是维护用户状态，跟踪用户行为等。

   在 PHP 中，可以通过以下方式创建、存储和获取 Session 数据：

   1. session_start() 函数：启动一个新的 Session 或者回复先前的 Session。该函数必须在任何输出之前调用。
   2. $_SESSION 全局变量：用于存储和获取 Session 数据。例如，可以通过下面的代码向 Session 中存储用户数据：

   // 启动一个新的 Session
   session_start();
   
   // 存储数据到 Session
   $_SESSION['username'] = 'exampleuser';
   $_SESSION['email'] = '[email protected]';
   

   1. session_destroy() 函数：销毁一个正在运行的 Session，并删除所有已存储的 Session 数据。

      php复制代码// 销毁当前正在运行的 Session 
      session_destroy();
      

   2. 取回 Session 数据：可以通过访问 $_SESSION 全局变量来取出 Session 数据，例如：

      php复制代码// 获取 Session 中保存的用户名并打印出来
      echo "用户名：" . $_SESSION['username'];
      

   第十二周

   考前复习

   • JavaScript既能工作在客户端又能工作在服务端
   • HTTP 协议工作在应用层

   URL（Uniform Resource Locator）是互联网上标识资源位置、提供访问方式的一种机制，它的表现形式可以分为以下四个部分：

   1. 协议（Protocol） 协议是客户端和服务器之间通信的规则集，包括 HTTP、HTTPS、FTP 等，它们用于解释如何进行数据传输。
   2. 域名（Domain Name） 域名是将 IP 地址变得人性化的标识符。例如，百度的域名是 www.baidu.com，而不是 IP 地址 220.181.38.148。域名通过 DNS 解析器来转换成 IP 地址，以便计算机可以定位所需资源的位置。
   3. 路径（Path） 路径是指定 URL 所需资源的位置，可以是文件夹、文件或者 API 接口等。
   4. 查询参数（Query Parameters） 查询参数是在 URL 中添加的额外信息，以 ? 开始，并使用 & 分隔多个参数。查询参数通常被用于我们在搜索引擎查询时，向服务器传递特定的搜索条件，相关示例：https://www.google.com/search?q=java&oq=java

   下面是一个完整的URL示例：

   复制代码https://www.example.com/products/category1/product1?id=123&color=red
   

   其中，

   • https 表示协议；
   • www.example.com 是域名；
   • /products/category1/product1 是路径；
   • ?id=123&color=red 是两个查询参数。

   获取json数据

   $.get(_this.loginSettings.dataUrl,'',function(res){
               console.log(res);//get会把json转成数组了，log出来是数组
               let isPass=res[0].code;
               let data=res[0].data;
               if(isPass){
                   handler(data);
               }else{
                   _this.dispError(_this.loginSettings.errors.loginError);
               }
           });
   

   $.getJSON("data/questions.json", function(data) {
   
           refAns = data[0].ans;
   
           $("#content").text(data[0].content);
           $(".option-content").eq(0).text(data[0].optionA);
           $(".option-content").eq(1).text(data[0].optionB);
           $(".option-content").eq(2).text(data[0].optionC);
           $(".option-content").eq(3).text(data[0].optionD);
           $(".option-content").eq(4).text(data[0].optionE);
           $(".option-content").eq(5).text(data[0].optionF);
           $(".value").eq(0).text(data[0].ans);
           $(".value").eq(1).text(data[0].keyConcept);
           $(".value").eq(2).text(data[0].level);
   
           $(".buttons").hide();
           $(".option-item input").on("click", onOptionClick);
   
       });