前端基础(HTML+CSS+JS)-day12
Posted 青山应回首
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端基础(HTML+CSS+JS)-day12相关的知识,希望对你有一定的参考价值。
写在前面
理想三旬
前言
HTTP协议: 短连接:因为服务器的链接数是有限的。 如果一直维持一个长链接,那么资源会很快就被耗尽; 并且大部分情况下长链接都处在没有使用的情况: 比如你浏览博客园一个博文,只是在看文章,这种情况下链接就被浪费了。 无状态:即服务器端不保存客户端的任何状态。 参考:http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html HTTP协议详解之请求篇 http请求由三部分组成,分别是:请求行、消息报头、请求正文 请求行以一个方法符号开头,以空格分开,后面跟着请求的URI和协议的版本,格式如下: Method Request-URI HTTP-Version CRLF Method表示请求方法; Request-URI是一个统一资源标识符; HTTP-Version表示请求的HTTP协议版本; CRLF表示回车和换行(除了作为结尾的CRLF外,不允许出现单独的CR或LF字符)。 请求方法(所有方法全为大写)有多种,各个方法的解释如下: GET 请求获取Request-URI所标识的资源 POST 在Request-URI所标识的资源后附加新的数据 HEAD 请求获取由Request-URI所标识的资源的响应消息报头 PUT 请求服务器存储一个资源,并用Request-URI作为其标识 DELETE 请求服务器删除Request-URI所标识的资源 TRACE 请求服务器回送收到的请求信息,主要用于测试或诊断 CONNECT 保留将来使用 OPTIONS 请求查询服务器的性能,或者查询与资源相关的选项和需求 应用举例: GET方法:在浏览器的地址栏中输入网址的方式访问网页时, 浏览器采用GET方法向服务器获取资源, eg:GET /form.html HTTP/1.1 (CRLF) POST方法要求被请求服务器接受附在请求后面的数据,常用于提交表单。 eg:POST /reg.jsp HTTP/ (CRLF) Accept:image/gif,image/x-xbit,... (CRLF) ... HOST:www.guet.edu.cn (CRLF) Content-Length:22 (CRLF) Connection:Keep-Alive (CRLF) Cache-Control:no-cache (CRLF) (CRLF) //该CRLF表示消息报头已经结束,在此之前为消息报头 user=jeffrey&pwd=1234 //此行以下为提交的数据 HEAD方法与GET方法几乎是一样的; 对于HEAD请求的回应部分来说,它的HTTP头部中包含的信息与通过GET请求所得到的信息是相同的。 利用这个方法,不必传输整个资源内容,就可以得到Request-URI所标识的资源的信息。 该方法常用于测试超链接的有效性,是否可以访问,以及最近是否更新。 HTTP协议详解之响应篇 在接收和解释请求消息后,服务器返回一个HTTP响应消息。 HTTP响应也是由三个部分组成,分别是:状态行、消息报头、响应正文 1、状态行格式如下:HTTP-Version Status-Code Reason-Phrase CRLF HTTP-Version表示服务器HTTP协议的版本; Status-Code表示服务器发回的响应状态代码; Reason-Phrase表示状态代码的文本描述。 状态代码有三位数字组成,第一个数字定义了响应的类别,且有五种可能取值: 1xx:指示信息--表示请求已接收,继续处理 2xx:成功--表示请求已被成功接收、理解、接受 3xx:重定向--要完成请求必须进行更进一步的操作 4xx:客户端错误--请求有语法错误或请求无法实现 5xx:服务器端错误--服务器未能实现合法的请求 常见状态代码、状态描述、说明: 200 OK //客户端请求成功 400 Bad Request //客户端请求有语法错误,不能被服务器所理解 401 Unauthorized //请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用 403 Forbidden //服务器收到请求,但是拒绝提供服务 404 Not Found //请求资源不存在,eg:输入了错误的URL 500 Internal Server Error //服务器发生不可预期的错误 503 Server Unavailable //服务器当前不能处理客户端的请求,一段时间后可能恢复正常
- 不遵循http协议的response
import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) sock.bind((\'localhost\',8090)) sock.listen(5) while True: print("server is working.....") conn, address = sock.accept() request = conn.recv(1024) print(request.decode(\'utf-8\')) # 只返回一个字符串 conn.sendall(bytes("Hello standby")) conn.close() if __name__ == \'__main__\': main() ---server端崩了--- server is working..... Traceback (most recent call last): File "D:/soft/work/Python_17/day12/coding01.py", line 24, in <module> main() File "D:/soft/work/Python_17/day12/coding01.py", line 18, in main conn.sendall(bytes("Hello standby")) TypeError: string argument without an encoding GET / HTTP/1.1 Host: 127.0.0.1:8090 Connection: keep-alive Cache-Control: max-age=0 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.8
- 遵循http协议的response
import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) sock.bind((\'localhost\',8090)) sock.listen(5) while True: print("server is working.....") conn, address = sock.accept() request = conn.recv(1024) print(request.decode(\'utf-8\')) # 必须按照http协议定义好的规则进行response才可以(有响应头和响应体并且要换行...) conn.sendall(bytes("HTTP/1.1 200 OK\\r\\n\\r\\n<h1>Hello standby</h1>","utf8")) conn.close() if __name__ == \'__main__\': main() ---在浏览器打开:http://127.0.0.1:8090/--- 页面输出结果: Hello standby server端输出结构: server is working..... GET / HTTP/1.1 Host: 127.0.0.1:8090 Connection: keep-alive Cache-Control: max-age=0 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.8 server is working..... GET /favicon.ico HTTP/1.1 Host: 127.0.0.1:8090 Connection: keep-alive Pragma: no-cache Cache-Control: no-cache User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Accept: image/webp,image/apng,image/*,*/*;q=0.8 Referer: http://127.0.0.1:8090/ Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.8 server is working.....
# 把文件的内容读出来作为响应体返回给浏览器 # index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="xxx"> <meta name="description" content="miaosu"> <title>standby</title> </head> <body> <h1>Hello standby666</h1> </body> </html> # 执行文件 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) sock.bind((\'localhost\',8080)) sock.listen(5) while True: print("server is working.....") conn, address = sock.accept() request = conn.recv(1024) print(request.decode(\'utf-8\')) f = open(\'index.html\',mode=\'r\',encoding=\'utf-8\') ret = f.read() conn.sendall(bytes("HTTP/1.1 200 OK\\r\\n\\r\\n{}".format(ret),"utf8")) conn.close() if __name__ == \'__main__\': main() ---结果--- server is working..... GET / HTTP/1.1 Host: 127.0.0.1:8080 Connection: keep-alive Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.8 server is working..... GET /favicon.ico HTTP/1.1 Host: 127.0.0.1:8080 Connection: keep-alive User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Accept: image/webp,image/apng,image/*,*/*;q=0.8 Referer: http://127.0.0.1:8080/ Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.8 server is working.....
一、HTML
参考:http://www.cnblogs.com/yuanchenqi/articles/6835654.html
1.简单介绍
超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。一套规则,浏览器认识的规则; 浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。 但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性) 静态网页文件扩展名:.html 或 .htm;
# HTML格式 <!DOCTYPE html> <html lang="en"> <head> <!--文件头--> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--文件体--> </body> </html>
标签属性 闭合标签 自闭和标签 标签分类 块级标签,自己独占一行,例如 hn(1~6),<p>,<div></div>>... 内联标签,所占大小取决于内容 块级标签可以嵌套块级/内联标签 内联标签只能嵌套内联标签
2.<!DOCTYPE>标签
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。 document.compatMode: BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。 CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。 这个属性会被浏览器识别并使用, 但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat;
3.<head>内常用标签
4.<body>内常用标签
- 基本标签
- div和span标签
- img图形标签
- 超链接标签
- 列表标签(有序、无序、自定义)
- 表格标签
- form表单标签
- input系列标签
- select标签
- textarea多行文本标签
- label标签
- fieldset标签
二、CSS
参考:http://www.cnblogs.com/yuanchenqi/articles/6856399.html
一个页面主最本的元素就是 HTML的标签 css 就是着装和布局 js 所有的动态操作实现动态效果
# a标签不显示下划线 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a { font-size: 100px; text-decoration: none; /*去掉a标签的下划线*/ } a:active { color: mediumvioletred; } </style> </head> <body> <a href="">click</a> </body> </html> # img标签居中显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 100%; height: 650px; /*background-color: wheat;*/ background-image: url("tsl.jpg"); background-repeat: no-repeat; /*background-repeat: repeat-x;*/ /*background-position: 100px 100px;*/ background-position: center center; } </style> </head> <body> <div class="box"> </div> </body> </html>
三、练习
要求:
1.实现一个登陆页面,如下:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ border: 1px solid darkgray; width: 80%; height: 440px; text-align: center; margin: 0 auto; /*background-color: wheat;*/ } #pic1{ margin-top: 20px; margin-left: 140px; margin-bottom: 30px; } .left_box{ float: left; background-color: wheat; margin: 0 auto; height: 440px; width: 50%; } .right_box{ float: right; background-color: darkgray; height: 439px; width: 50%; /*border:1px blue solid;*/ } #pic2{ height: 400px; padding-left: -10px; padding-right: 25px; /*margin: 0 auto;*/ padding-top: 20px; /*vertical-align: middle;*/ } .right_box_inner{ margin-top: 30px; height: 400px; padding-top: 50px; padding-right: 80px; } .right_box_inner > p > .btn1{ background-color: red; border: none; color: white; text-align: center; font-size: 16px; padding: 10px 100px; border-radius: 4px; margin-right: -50px; width: 290px; } .right_box_inner > p > .btn2{ background-color: green; border: none; color: white; text-align: center; font-size: 20px; padding: 10px 2px; margin-right: -500px; width: 120px; margin-top: 5px; } .pass{ margin-top: 30px; margin-bottom: 30px; } .forget_pass{ margin-top: 30px; margin-bottom: 30px; margin-right: 75px; } .right_box_inner > p > input{ width: 270px; border: 1px solid #ccc; padding: 7px 10px; border-radius: 3px; /*css3属性IE不支持*/ /*padding-left:5px;*/ } .right_box_inner > p > input[name=auth_code]{ width: 100px; } .input_3{ padding-right: 185px; } .footer{ text-align: center; color: darkgray; } </style> </head> <body> <img id="pic1" src="img/mll_logo.gif" alt="美乐乐首页图表"> <div class="box"> <div class="left_box"> <a href="http://www.cnblogs.com/standby/" target="_blank"> <img id="pic2" src="img/login_logo.png" alt="发羊财图片" title="点击有惊喜"> </a> </div> <div class="right_box"> <div class="right_box_inner"> <p> <label for="user_name">姓名:</label> <input type="text" name="user_name" id="user_name" placeholder="请输入姓名" size="22"> </p> <p class="pass"> <label for="user_pass">密码:</label> <input type="password" name="user_pass" id="user_pass" placeholder="请输入密码" size="22"> </p> <p class="input_3"> <label for="auth_code">验证码:</label> <input type="text" name="auth_code" id="auth_code"> </p> <p class="forget_pass"> <span> <input type="checkbox" name="auto_login" value="auto_login" checked="checked">自动登录 <a href="http://www.cnblogs.com/standby/" target="_blank">忘记密码?</a> </span> </p> <P> <input class="btn1" type="button" name="btn1" value="登录"> </P> <p> <input class="btn2" type="button" name="btn2" value="免费注册>>"> </p> </div> </div> </div> <div class="footer"> <p> © http://www.cnblogs.com/standby/ ®谢绝转载! </p> </div> </body> </html>
效果:
2.实现一个注册页面,如下:
代码实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ border: 1px solid darkgray; width: 74%; height: 420px; text-align: center; margin: 0 auto; /*background-color: wheat;*/ } .nav { background-color: #53e3a6; text-align: center; line-height: 20px; position: fixed; top: 0; left: 10%; width: 80%; height: 40px; padding-bottom: 10px; z-index: 99; } .nav li a:hover{ background: yellowgreen; } .nav_left > li { display: inline; float: left; margin-left: 150px; } .nav_right { margin-right: 150px; } .nav_right > li { display: inline; float: right; margin-right: 30px; } .pic1 { /*margin-top: 15px;*/ margin-top: 60px; margin-left: 180px; margin-bottom: 15px; } .body_left { float: left; margin: 0 auto; height: 420px; width: 50%; /*background-color: wheat;*/ } .body_between { float: left; width: 15%; height: 420px; /*background-color: yellowgreen;*/ } #hr_line { float: right; margin-top: 50px; width: 1px; height: 320px; background-color: #53e3a6; } .body_right { float: right; margin: 0 auto; height: 420px; width: 35%; /*background-color: #53e3a6;*/ /*border-left: 1px solid darkgray;*/ } .body_left > p > input { width: 270px; border: 1px solid #ccc; padding: 7px 10px; border-radius: 3px; /*css3属性IE不支持*/ /*border-left: 10px solid red;*/ /*padding-left:5px;*/ } .new_register { margin-right: 300px; } .pass1,.pass2 { margin-left: -16px; } .auth_code_input { margin-left: -150px; } #auth_code { width: 120px; } .read_protocal { margin-left: 50px; } .btn1 { width: 290px; height:38px; background-color: red; border: none; color: white; text-align: center; font-size: 16px; border-radius: 4px; margin-right: -70px; } .login_direct { margin-top: 75px; margin-bottom: 20px; } .label_to_login { font-size: 20px; margin-left: -16px; } .btn_login { font-size: 20px; } .footer{ text-align: center; color: darkgray; } </style> </head> <body> <div class="nav"> <ul class="nav_left"> <li><a href="">*收藏本站</a></li> </ul> <ul class="nav_right"> <li><a href="">登录</a></li> <li><a href="">免费注册</a></li> <li><a href="">我的订单</a></li> <li><a href="">VIP会员俱乐部</a></li> <li><a href="">客户服务</a></li> </ul> </div> <div class="pic1"> <a href="http://www.cnblogs.com/standby/" TARGET="_blank"> <img id="pic1" src="img/mll_logo.gif" alt="美乐乐首页图表" title="跳转到首页"> </a> </div> <div class="box"> <div class="body_left"> <h2><label for="user_name" class="new_register">注册新用户</label></h2> <p> <label for="user_name">用户名:</label> <input type="text" name="user_name" id="user_name" placeholder="请输入姓名" size="22"> </p> <p> <label for="user_tel">手机号:</label> <input type="text" name="user_tel" id="user_tel" placeholder="请输入手机号" size="22"> </p> <p class="pass1"> <label for="user_pass1">登录密码:</label> <input type="password" name="user_pass1" id="user_pass1" placeholder="请输入密码" size="22"> </p> <p class="pass2"> <label for="user_pass2">确认密码:</label> <input type="password" name="user_pass2" id="user_pass2" placeholder="请确认密码" size="22"> </p> <p class="auth_code_input"> <label for="auth_code">验证码:</label> <input type="text" name="auth_code" id="auth_code"> </p> <p class="read_protocal"> <span> <input id="check_box" type="checkbox" name="auto_login" value="read_protocal" checked="checked">我已阅读并同意 <a id="readed" href="http://www.cnblogs.com/standby/" target="_blank">《新用户注册协议》</a> </span> </p> <input class="btn1" type="button" name="btn1" value="同意以上协议并注册"> </div> <div class="body_between"> <hr id="hr_line"> </div> <div class="body_right"> <p class="login_direct"> <span> <label class="label_to_login" for="">我已经注册,现在就</label> <a href="http://www.cnblogs.com/standby/" class="btn_login" target="_blank">登录</a> </span> </p> <a href="http://www.cnblogs.com/standby/" TARGET="_blank"> <img id="pic2" src="img/hongbao.jpg" alt="抢红包" title="点击进行红包大战"> </a> </div> </div> <div class="footer"> <p> © http://www.cnblogs.com/standby/ ®谢绝转载! </p> </div> </body> </html>
效果:
以上是关于前端基础(HTML+CSS+JS)-day12的主要内容,如果未能解决你的问题,请参考以下文章