html笔记
一.socket开启服务端
import socket phone = socket.socket() phone.bind(('127.0.0.1',9999)) phone.listen(3) while 1: conn,addr = phone.accept() ret = conn.recv(1024) print(ret.decode("utf-8")) send_msg = b'HTTP/1.1 200 ok\r\n\r\n' #发送信息要加上http头 # conn.send(send_msg+"hello".encode("utf-8")) with open("msg.html","rb") as f: msg = f.read() conn.send(send_msg+msg) conn.close() phone.close()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> </body> </html>
二.简单了解
1.标准
<!DOCTYPE html> #标准规范 <html lang="en"> <head> #html头 <meta charset="UTF-8"> #字符编码 <title>Title</title> #页面头部显示内容 </head> <body> </body> </html> Doctype标准 Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 有和无的区别 BackCompat：标准兼容模式未开启（默认），浏览器按照自己的方式解析渲染界面 CSS1Compat：标准兼容模式已经开启，浏览器按照W3C的标准解析渲染界面
2.页面head部
head界面头部 1.界面编码 <meta charset="utf-8"> 2.刷新和跳转 <meta http-equiv="Refresh" content="3;Url=http://www.baidu.com"> 3.关键词 <meta name="keywords" content="汽车，汽车之家，汽车网，汽车报价"/> 4.描述 <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全"/> 5.link标签 <!--css--> <link rel="stylesheet" type="text/css" href="1.css"> <!--icon Title前小图标> <link rel="shortcut icon" href="1.ico">
3.body主体
body界面主体
标签一般分为两种：
内联标签：a,span,select等
块级标签：div,h1,p等
三.主要标签认识
1.div
<!--width和height设置的是内容content的宽高、background-color:设置的是content和padding的颜色，盒子的大小为content的宽高+padding的宽高+border的宽高--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; height: 100px; background-color: rebeccapurple; padding: 20px; border: #8c222c 10px solid; } </style> </head> <body> <div class="div1"></div> </body> </html>
<!--宽高设置为0，border设置大一点，颜色设置3个透明--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 0; height: 0; border-color: red transparent transparent transparent; border-width: 50px; border-style: solid; } </style> </head> <body> <div></div> </body> </html>
2.input
type属性：https://www.runoob.com/tags/att-input-type.html
<form action="http://localhost:8888/index" method="post"> <!-- type:checkbox多选 radio单选 --> <p>用户名:<input type="text" name="username"></p> <p>密码:<input type="password" name="password"></p> <p>爱好： 篮球<input type="checkbox" name="1"> 足球<input type="checkbox" name="1"> </p> <p>性别： 男<input type="radio" name="sex" value="1"> 女<input type="radio" name="sex" value="2"> </p> <p><input type="file"></p> <p><input type="reset"></p> <p><input type="submit"></p> <!--select标签--> <select size="2" name="城市"> <option value="beijing">背景</option> <option value="tianjin">天津</option> <option value="shanghai">上海</option> </select> <select name="城市1"> <optgroup label="中国"> <option value="beijing">北京</option> <option value="tianjin">天津</option> <option value="shanghai">上海</option> </optgroup> <optgroup label="河南"> <option value="beijing">三门峡</option> <option value="tianjin">周口</option> <option value="shanghai">洛阳</option> </optgroup> </select> <!--textarea标签--> <textarea name="textarea" cols="2" rows="4">自我介绍</textarea> <!-- label标签：点击字，input标签获取焦点 两种写法：--> <!-- 写法1 --> <label for="www">姓名</label> <input id="www" type="text"> <!-- 写法2 --> <label>fsd <input type="text"> </label> <!--看演示效果--> <fieldset> <legend>登录吧</legend> <input type="text"> </fieldset> </form> form标签，内含input、select、textarea、label、filedset
3.img标签
<img src="1.jpg" title="美女图片" alt="图片错误"> title指定鼠标放到图片上显示的内容，alt指定图片不存在时的显示信息
4.ul，ol，dl标签
<!-- ul的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块 ol的type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。 --> <body> <!--无序--> <ul> <li>12</li> <li>12</li> <li>12</li> <li>12</li> </ul> <!--有序--> <ol> <li>12</li> <li>12</li> <li>12</li> <li>12</li> </ol> <dl> <dt>第一章</dt> <dd>1</dd> <dd>1</dd> <dd>1</dd> <dd>1</dd> <dt>第二章</dt> <dd>2</dd> <dd>2</dd> <dd>2</dd> <dd>2</dd> </dl> </body>
5.iframe
#首先，我们需要在浏览器进入base界面，在base界面中操作，点击target="right"的a标签，会将a标签触发所渲染的界面添加到iframe标签中，如果不从base界面进入，单独进入从浏览器进入index或index1界面，是看不到效果的，当然，在代码中无论前端后台都可以（此处注意浏览器和代码中的区别） urls.py from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^base/',views.base), url(r'^index/',views.index), url(r'^index1/',views.index1), ] views.py def index(req): return render(req,"index.html") def index1(req1): return render(req,"index1.html") <!---base.html---> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="/index/" target="right">index</a> #target=right,点击此a标签，会将index界面渲染进入name值为right的iframe中 <a href="/index1/" target="right">index1</a> <iframe id="iframe" src="/index/" name="right" width="100%" height="866px" style="margin-left: 100px"> sdfsfsfs </iframe> </body> </html> <!---index.html---> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> woshinibab </body> </html> <!---index1.html---> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> ggggggggggggggggg </body> </html> iframe
6.table单元格
在写的时候尽量加上thead、tbody，如果不写的话浏览器会自动加上tbody。
<!--border：加上边框 cellspcing：各个单元格之间的距离 cellpadding：单元格中文字距离边框的距离--> <table border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>主机名</th> <th>IP</th> <th>详情</th> </tr> </thead> <tbody> <tr> <td>localhost</td> <td>127.0.0.1</td> <td> <a href="test.html">点击</a> </td> </tr> </tbody> </table>
<!--演示全明白--> <table border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>主机名</th> <th>IP</th> <th>详情</th> </tr> </thead> <tbody> <tr> <td>localhost</td> <td>127.0.0.1</td> <td rowspan="2"> <a href="test.html">点击</a> </td> </tr> <tr> <td colspan="2">localhost</td> </tr> </tbody> </table>
