python_day12 html/CSS
HTML知识
import socket sock=socket.socket() sock.bind(("127.0.0.1",8800)) sock.listen(5) while True: print('waiting....') conn,addr=sock.accept() res=conn.recv(1024) print(res) with open("day12.html") as f: data=f.read() conn.send(("HTTP/1.1 201 OK \r\n\r\n %s"%data).encode('utf-8')) conn.close() sock.close()
客户端浏览器输入：127.0.0.1:8800 HTTP:建立在TCP协议上 HTTP协议：请求协议 浏览器------>server 响应协议 server----->浏览器 数据包格式：请求首行、头、\r\n\r\n、数据 HTTP/1.1 201 OK HEADERS \r\n\r\n data 例如： with open("index.html",encoding="utf-8") as f: res=f.read() conn.send(("HTTP/1.1 201 OK \r\n\r\n %s"%res).encode('utf-8')) index.html 闭合标签 <img src="图片链接" title='egon'> html：是有一组组标签构成的文件 标签分为两类：block(块级标签)-----自己独占一行 inline（内联标签）-------------按内容划分 因浏览器性质不同，建议爬虫用火狐，分析用谷歌 标签嵌套: 块级标签 可以嵌套内联，块级 内联标签 只能嵌套内联
HTML文件的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html
常用标签 <!DOCTYPE>标签 作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 <head>内常用标签 <meta>标签 (1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的"> (2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 <meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 非meta标签 <title>oldboy</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script> <body>内常用标签 基本标签（块级标签和内联标签） <hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 特殊字符：< >；"；©® <div>和<span> <div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现. <span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现. 图形标签: <img> src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.) 超链接标签(锚标签): <a> </a> URL地址由4部分组成 第1部分：为协议：http://、ftp://等 第2部分：为站点地址：可以是域名或IP地址 第3部分：为页面在站点中的目录：stu 第4部分：为页面名称，例如 index.html 各部分之间用“/”符号隔开。 <a href="" target="_blank" >click</a> href属性指定目标网页地址。该地址可以有几种类型： 绝对 URL - 指向另一个站点（比如 href="http://www.jd.com） 相对 URL - 指当前站点中确切的路径（href="index.htm"） 锚 URL - 指向页面中的锚（href="#top"）
<h1>hello</h1> <a href="http://www.cnblogs.com/yuanchenqi/articles/6835654.html">click</a> <img src="http://img1.imgtn.bdimg.com/it/u=3144465310,4114570573&fm=27&gp=0.jpg" title="egon"> style可以在任何标签中加，属性=属性值。 style="background-color: aqua" <h1 style="background-color: aqua">hello</h1> <ul><li>111</li></ul> <ol><li>222</li></ol> <dl> <dt>河北省</dt> <dd>保定</dd> <dd>邯郸</dd> </dl> 表格 <table> <tr> <td>111</td> <td>222</td> 生成1行2列表 </tr> </table> <table border="1px"></table> 边框线设置 <table cellpadding="5px" cellspacing="2px"></table> 单元格内距离即内边距设置 单元格与边框距离即外边距设置 <td rowspan="2"></td> 独占两行 <td colspan="2"></td> 独占两列 表单标签form:与server端交互 <form action="127.0.0.1:8800/path" method="get"> <p>姓名：<input type="text" name="username"></p> <p>密码：<input type="password" name="passwd" placeholder="username"></p> placeholder提醒功能 <p><input type="submit" value="提交"></p> </form> URL：IP+Port+Patch+data只要有？后面的为传输数据 127.0.0.1:8800/blog/addBlog?a=1&b=3 <p>性别：<input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="0">女</p> <p>爱好：<input type="checkbox" name="hobby" value="football" checked="checked">足球 <input type="checkbox" name="hobby" value="basketball">蓝球 <input type="checkbox" name="hobby" value="doubleball">双色球 </p> <p>头像：<input type="file"></p> 有上传文件类型时form必须加enctype <form action="127.0.0.1:8080" enctype="multipart/form-data"></form> <p><input type="reset" name="" id=""></p> <p><input type="button" value="按钮" onclick="alert(12345)"></p> <p><input type="hidden" name="key" value="v1"></p> <p>省份：<select name="province" size="3" mutiple="multiple" id=""> <option value="河北省">河北省</option> <option value="河南省" selected="selected">河南省</option> </select></p> size=3默认显示3个 selected设置默认，属性名=属性值时，可简写selected。 <p><textarea name="个人简介" id="1" cols="30" rows="10"></textarea></p> <p><label for="c1">姓名</label></p>
CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> CSS的引入方式： CSS、JS的共同特性：1、查找标签 选择器 2、操作标签 <style> /*方式1、按标签名字选择*/ p{ color: red; } /*方式2、按ID属性选择*/ #c1 { font-size: 40px; } /*方式3、按class属性选择*/ .c2 { background-color: blue; } /*方式4、* 所有标签 */ * { font-size: 50px; } </style> </head> <body> <p style="color: red">hello</p> <p class="c2">hello1</p> <p id="c1">hello2</p> <p class="c2">hello2</p> <p>hello3</p> 组合选择器： <style> /*1、后代迭代器：子子代代都变*/ .outer p { color: antiquewhite; } /*2、子代选择器*/ .outer > p { background-color: red; } /*3、多元素选择器*/ .outer,#c3{ background-color: blue; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> CSS属性分析 <style> div{ width: 300px; height: 300px; background-color: antiquewhite; } span{ width: 300px; height: 300px; background-color: blueviolet; } </style> 块级标签：可以设置长宽的 内联标签：设置长宽无效 文本居中 <style> div { text-align: center; /*文本水平居中*/ /*text-align: justify;*/ /*两端对齐*/ overflow: hidden; line-height: 300px; /*文本垂直居中*/ } .btn{ width: 600px; height: 200px; background-color: darkgray; color: wheat; font-size: 40px; text-align: center; /*line-height: 90px;*/ } </style> 背景属性 <style> .c1{ width: 100%; height: 60px; background-color: aqua; color: red; font-size: 30px; text-align: center; line-height: 90px; /*background-image: url("4e6a572etw1diy87cauhbj.jpg");*/ /*background-repeat: repeat-x;*/ /*!*x轴填满*!*/ /*background-position: center;*/ background: url("4e6a572etw1diy87cauhbj.jpg") no-repeat center; } </style> 边框属性 <style> .c2{ width: 200px; height: 200px; background-color: red; border-style: solid; border-width: 10px; border-color: blue; /*border:solid 10px blue;*/ border-radius: 20%; } </style> 内边距、外边距 padding/margin <style> .c3{ width:300px; height: 300px; background-color: red; border: solid 10px blue; padding: 50px; margin: 20px; } </style> </head> <body> <!--<div class="outer">--> <!--<p>P</p>--> <!--</div>--> <!--<p>P</p>--> <!--<p id="c3">P</p>--> <!--<span>span</span>--> <!--<p class="btn">btn</p>--> <!--<img src="4e6a572etw1diy87cauhbj.jpg" alt="图片">--> <div class="c3"> yuan </div> </body> </html>
