Python全栈开发之html
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python全栈开发之html相关的知识，希望对你有一定的参考价值。
web服务本质
import socket
socker = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
socker.bind((\'127.0.0.1\',8000))
socker.listen(5)
conn,addr = socker.accept()
from_browser_msg = conn.recv(1024)
print(from_browser_msg)
conn.send(b\'HTTP/1.1 200 ok \\r\\n\\r\\n\')
with open(\'xxx.html\',\'rb\') as f:
data = f.read()
conn.send(data)
HTML是什么
HTML 是用来描述网页的一种语言
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>
创建一个HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
网页跳转代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.cnblogs.com/xiaoqianbook/">小钱</a> </body> </html>
注释
<!-- 注释的内容 -->
Mata标签
- <meta>元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
- <meta>标签位于文档的头部，不包含任何内容。
- <meta>提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
刷新页面
<meta http-equiv="Refresh" content="3"><!-默认3秒刷新页面->
刷新页面跳转
<meta http-equiv="Refresh" content="3;url=http://www.cnblogs.com/xiaoqianbook/"><!-默认3秒刷新页面跳转->
关键词
<meta name="keyword" content="小钱,python">
图标
<link rel="shortcut icon" href="图标的地址">
IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE11;IE=IE8;" />
head内常用标签
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
标签分类:
自闭合标签
<meta charset="UTF-8">
主动闭合标签
<title>小钱</title>
所有标签分为：
块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
标签之间可以嵌套
body标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
空格
> < 添加特殊字符< 相当于 < ,> 相当于 >
& &
¥ ￥
© 版权
® 注册
<a href="http://www.cnblogs.com/xiaoqianbook/">小钱<a></a>
inport属性
input type=\'text\' 文本
input type=\'password\' 密码
input type=\'submit\' 提交按钮
input type=\'button\' 按钮
input type=\'radio\' 单选框 checked="checked" 默认选中 name属性（name相同则互斥）
input type=\'checkbox\' - 复选框 checked="checked"，name属性（批量获取数据）
input type=\'file\' 上传文件 依赖form表单的一个属性 enctype="multipart/form-data"
input type=\'rest\' 重置
<textarea >默认值</textarea> 文本域
属性说明:
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <textarea name="meno" >asdfasdf</textarea> <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select> <input type="text" name="user" /> <p>请选择性别：</p> 男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> Alex：<input type="radio" name="gender" value="3"/> <p>爱好</p> 篮球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 台球：<input type="checkbox" name="favor" value="4" checked="checked"/> 网球：<input type="checkbox" name="favor" value="5" /> <p>技能</p> 学习：<input type="checkbox" name="skill" checked="checked" /> 写字：<input type="checkbox" name="skill"/> <p>上传文件</p> <input type="file" name="fname"/> </div> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form> </body> </html>
a标签
跳转，锚
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height:600px;">第一章的内容</div> <div id="i2" style="height:600px;">第二章的内容</div> <div id="i3" style="height:600px;">第三章的内容</div> <div id="i4" style="height:600px;">第四章的内容</div> </body> </html>
img 标签
src 图片地址
alt 无法加载显示
title 图片说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.cnblogs.com/xiaoqianbook/"> <img src="1.png" alt="美女" title="大美女" height="100px" width="100px"> </a> </body> </html>
列表
ul 无序列表
li
ol 有序列表
li
dl 列表分层
dt
dd
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>小猫</li> <li>小狗</li> <li>小猪</li> </ul> <ol> <li>小猫</li> <li>小狗</li> <li>小猪</li> </ol> <dl> <dt>动物</dt> <dd>小猫</dd> <dt>植物</dt> <dd>小花</dd> </dl> </body> </html>
表格
table标签
thead 表头
tr 行
th 列
tbody 表主体
tr 行
td 列
colspan 去行
rowspan 去列
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头1</th> <th>表头1</th> <th>表头1</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="3">1</td> </tr> <tr> <td rowspan="2">1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> </body> </html>
from
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
select标签
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </form>
label标签
用于点击文件，使得关联的标签获取光标
说明：
- label 元素不会向用户呈现任何特殊效果。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <fieldset> <legend>登陆</legend> <label for = "username">用户名：</Python全栈开发之Git