HTML
2018-10-25 本文已影响0人
Snackk
遵循的htt协议
HTTP/1.1 200 OK\r\n\r\n
在浏览器端输入 URl：127.0.0.1:9090进行访问
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
import socket
sk = socket.socket()
sk.bind(('127.0.0.1',9090))
sk.listen()
while 1:
conn,addr = sk.accept()
ret = conn.recv(1024)
print(ret)
# 或conn.send(b'HTTP/1.1 200 OK\r\ncontent-type: text/html; charset=utf-8\r\n\r\n')
conn.send(b"HTTP/1.1 200 OK\r\n\r\n ")
with open(r'C:\Users\Administrator\PycharmProjects\Snack\Python\PY练习\练习.py','rb') as f:
conn.send(f.read())
conn.close()
sk.close()
URL：统一资源定位符
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
HTML
- 超文本标记语言
- 浏览器可识别的规则，标记语言（兼容性问题）
- 网页文件的扩展名：.html或.htm
- HTML是一种标记语言（markup language），它不是一种编程语言。
1. CS --> BS架构
2. Web的原理
浏览器地址栏输入URL
--> 浏览器往服务端发消息
--> 服务端接收消息
--> 服务端回消息（从文件中读取数据）
--> 浏览器收到消息(按照一个约定好的规则展示出来)
HTML文档结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
1.<!DOCTYPE html>声明为HTML5文档
2.<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素
3.<head>、</head>定义了HTML文档的开头部分。包含了文档的元（meta）数据。
4.<title>、</title>定义了网页标题，在浏览器标题栏显示。
5.<body>、</body>之间的文本是可见的网页主体内容。
6.中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
html标签格式
1.尖括号包围的关键字
2.HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。
3.部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
4.标签里面可以有若干属性，也可以不带属性。
标签的语法：
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
几个很重要的属性：
id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）
HTML注释：
<!--注释内容-->
<!DOCTYPE> 标签：
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
head内常用标签：
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息
Meta标签介绍：
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
<meta>元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。
<head>
<meta lang="zh-CN">
<title>骑士计划！改变世界，从西丽开始！</title>
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset="UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!--刷新2秒后跳转到指定网站，没有URl就是两秒刷新一次-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--搜素引擎优化-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> # 关键字搜素
<meta name="description" content="老男孩教育Python学院"> # 描述网站信息
</head>
body内常用标签：
id：html文档中唯一
a:链接可点击href="URL"
<body>
<!-- 这就是注释 -->
<h1 s1="hao" style="color: red">Hello world!</h1>
<a id="a1" href="https://www.luffycity.com">路飞学城</a>
<a id="a2" href="https://www.jd.com">jd.com</a>
<!--<a href="https://www.sogo.com">sogo.com</a>-->
</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>
特殊字符
空格
HTML中把连续的空格和换行都解析成一个空格，不存在缩进的问题
> >
< <
& &
¥ ¥
版权 ©
注册 ®
div标签和span标签
div: 独占一行，块级标签
块级标签：
自己独占一行！
p
h1~h6
hr
div
span：不换行，行内标签
行内标签（内联标签）：
默认都在一行显示！
b、i、u、s
span
1.div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
2.span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签。
标签支持嵌套
1. 块级标签可以包含内联标签
2. p标签不能包含p标签和div标签
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签：超链接标签
从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
href属性指定目标网页地址。该地址可以有几种类型：
1.绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
2.相对URL - 指当前站点中确切的路径（href="index.htm"）
3.锚URL - 指向页面中的锚（href="#top"）
<a href="#p1">点我</a>
<div style="height: 1000px"></div>
<p id="p1">大海啊，全是水。</p>
<div style="height: 1000px"></div>
target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
列表
1.无序列表
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
代码
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
2.有序列表
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
start：从哪个位置开始，默认从第一个
代码
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
3.标题列表
dt：标题
dd：内容-缩进
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
代码
<body>
<table border="1" cellpadding="10" cellspacing="5">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">金老板</td>
</tr>
<tr>
<td>2</td>
<td>景女神</td>
<td rowspan="2">喝茶</td>
</tr>
<tr>
<td>3</td>
<td>娜扎</td>
</tr>
</tbody>
</table>
</body>
form标签
1. 展示给用户看的标签
2. 获取用户输入的标签
form标签（表单标签）
3.表单还可以包含textarea、select、fieldset和 label标签。
表单属性
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
input
1. 根据type类型划分
1. text
2. password
3. email
4. date
5. radio --> 单选
6. checkbox --> 多选
7. button --> 普通按钮，多用于使用JS代码绑定事件
8. submit --> 提交
9. reset --> 重置
10. file --> 上传文件
属性说明:
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用
select标签
1. select标签内部包含的是option，需要配置value属性
默认选中：selected="selected"
2. 多选
multiple
属性说明：
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> 标签为 input 元素定义标注（标记）。
1.label 元素不会向用户呈现任何特殊效果。
2.<label> 标签的 for 属性值应当与相关元素的 id 属性值相同
代码
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
textarea多行文本
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
代码
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
总代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
<p>
<label for="i1">用户名：</label>
<input id="i1" type="text" name="username">
</p>
<p>
<label>密码：
<input type="password" name="pwd">
</label>
</p>
<p>
邮箱：
<input disabled type="email" name="email">
</p>
<p>出生日期：
<input type="date" name="birthday">
</p>
<p>
头像：
<input type="file" name="avatar">
</p>
<p>
隐藏的输入框：
<input type="hidden">
</p>
<p>性别：
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</p>
<p>
爱好：
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="doublecolorball">双色球
</p>
<label for="s1">城市</label>
<select id="s1" name="city1">
<option value="010">北京</option>
<option value="021">上海</option>
<option value="020">广州</option>
<option value="0755" selected="selected">深圳</option>
</select>
<select name="city2" multiple="multiple">
<option value="010">北京</option>
<option value="021">上海</option>
<option value="020">广州</option>
<option value="0755" selected="selected">深圳</option>
</select>
<p>
个人简介：
<textarea name="info" cols="60" rows="40">
</textarea>
</p>
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
{"name属性的值": 用户填写的内容}
</body>
</html>
注意事项：
1. 所有放在form标签中获取用户输入的标签，必须要有name属性
2. form标签有action属性和method属性
1. action：控制往哪里提交数据
2. method：控制用什么方式提交
3. 上传文件需要额外配置enctype="multipart/form-data"
3. form要提交数据必须要有submit按钮 
