分享程序员开发的那些事...
更新时间：2022-10-02 17:08:17
web服务的本质：
服务端
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import socket
sock=socket.socket()
sock.bind(("127.0.0.1",8800))
sock.listen(5)
while 1:
print("waiting....")
conn,addr=sock.accept()
data=conn.recv(1024)
print('data',data)
with open("index.html") as f:
response=f.read()
conn.send(("HTTP/1.1 201 OK \r\n\r\n %s" %response).encode("utf8")) #声明通信的协议
conn.close()
|
html
HTMLШ摤文本编辑语言通过标签语言来标记要显示的网页中的各个部分浏览器认识的规则它是一种标记语言不是编程语言使用标记标签来描述网页
静态网页文件扩展名.html 或 .htm
html结构
|
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html> #声明解析html文档的格式<html lang="en"> #<html> </html>是文档的开始标记和结束标记
<head> #<head></head>元素出现在文档的开头部分
<title>网页标题</title> #<title></title>定义网页标题
</head>
<body> #<body></body>之间的文本是可见的网页主体内容
</body>
</html>
|
<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档在它们之间是文档的头部<head>和主体<body>。
<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会扎浏览主5奈牡荡翱谙允荆瞧浼涞脑赜刑厥庵匾囊庖濉
<title></title>定义网页标题在浏览器标题栏显示。
<body></body>之间的文本是可见的网页主体内容
2.html标签格式
标签的语法
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
a.由尖括号包围的关键字。如<html>
b.通常是成对出现的双边标记。如<div></div>
c.标签不区分大小写推荐使用小写
d.标签分为两部分开始标签<a>和结束标签</a>两个标签之间的部分叫做标签体有些标签功能比较简单使用一个标签即可这种标签叫做自闭和标签。如<br/>、<hr/>、<input/>、<img/>
e.标签可以有若干属性也可以不带属性。如<head>元素不带任何属性
f.标签可以嵌套但不能交叉嵌套。如<a><b><a/><b/>
3.常用标签
标签分为两类
block块级标签---自己独占一行
inline内联标签---按内容划分
<!DOCTYPE>
声明位于文档中的最前面的位置处于<html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范
作用声明文档的解析类型(document.compatMode)避免浏览器的怪异模式
document.compatMode
BackCompat怪异模式浏览器使用自己的怪异模式解析渲染页面
CSS1Compat标准模式浏览器使用W3C的标准解析渲染页面
如果未指定DOCTYPE声明则默认使用BackCompat
<head>内常用标签
<meta>标签
<meta>元素可提供有关页面的元信息meta-information针对搜索引擎和更新频度的描述和关键词
<meta>标签位于文档的头部不包含任何内容。
<meta>提供的信息是用户不可见的
meta标签的组成meta标签共有两个属性
name属性: 主要用于描述网页与之对应的属性值为contentcontent中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
http-equiv属性相当于http的文件头作用它可以向浏览器传回一些有用的信息以帮助正确地显示网页内容与之对应的属性值为contentcontent中的内容其实就是各个参数的变量值
非meta标签
|
1
2
3
4
|
<title></title>
<link rel=”icon” href=”www.baidu.com”>
<link rel="stylesheet"href="css.css">
<scriptsrc="hello.js"></script>
|
<body>内常用标签
基本标签块级标签和内联标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
<div>和<span>
<div></div>块级元素并无实际的意义。主要通过CSS样式为其赋予不同的表现
<span></span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现
如果单独在网页中插入这两个元素不会对页面产生任何的影响这两个元素是专门为定义CSS样式而生的
<img>图形标签
src要显示图片的路径.
alt图片没有加载成功时的提示.
title鼠标悬浮时的提示信息.
width图片的宽
height图片的高 (宽高两个属性只用一个会自动等比缩放.)
<a></a>超链接标签锚标签
指从一个网页指向一个目标的连接关系这个目标可以是另一个网页也可以是相同网页上的不同位置还可以是一个图片一个电子邮件地址一个文件甚至是一个应用程序
什么是URL
URL是统一资源定位器(Uniform Resource Locator)的缩写也被称为网页地址是因特网上标准的资源的地址
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
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"
列表标签
<ul>无序列表 [type属性disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
<ol>有序列表
<li>列表中的每一项.
<dl>定义列表
<dt> 列表标题
<dd> 列表项
<table>表格标签
表格概念
表格是一个二维数据空间一个表格由若干行组成一个行又有若干单元格组成单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格的基本结构
|
1
2
3
4
5
6
7
8
9
10
11
|
<table>
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
|
<tr>: table row
<th>: table head cell
<td>: table data cell
属性:
border: 表格边框
cellpadding: 内边距
cellspacing: 外边距
width: 像素 百分比***通过css来设置长宽
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列即合并单元格
<form>表单标签
功能
表单用于向服务器传输数据从而实现用户与Web服务器的交互
表单能够包含input系列标签比如文本字段、复选框、单选框、提交按钮等
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据即表单元素值作相应处理
method: 表单的提交方式 post/get默认取值就是get
表单元素
基本概念
HTML表单是HTML元素中较为复杂的部分表单往往和脚本、动态页面、数据处理等功能相结合因此它是制作东态网拙重要的内容。
表单一般用来收集用户的输入信息
表单工作原理
访问者在浏览有表单的网页时可填写必需的信息然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理如果有错误会返回错误信息并要求纠正错误。当数据完整无误后服务器反馈一个输入完成的信息
<input>系列标签
<1> 表单类型
type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.)
file 提交文件form表单需要加上属性enctype="multipart/form-data" 上传文件注意两点
1 请求方式必须是post
2 enctype="multipart/form-data"
<2> 表单属性
name 表单提交项的键
与id属卦的屈毙
name属性是和服务器通信时使用的名称id属栽是洵佬器端使用的名称该属性主要是为了方便客户端编程而在css和javascript中使用的
value 表单提交项的值
对于不同的输入类型value 属性的用法也不同
type="button","reset", "submit" - 定义按钮上的显示的文本
type="text","password", "hidden" - 定义输入字段的初始值
type="checkbox","radio", "image" - 定义与输入相关联的值
checked radio和 checkbox 默认被选中
readonly 只读. text 和 password
disabled 对所用input都生效
select 下拉选标签
name 表单提交项的键.
size &nbcp;&njs0; 选项个数
multiplemultiple
<optgroup> 为每一项加上分组
<option> 下拉选中的每一项属性
value 表单提交项的值
selected selected下拉选默认被选中
<textarea> 多行文本框
<form id="form1"name="form1" method="post" action="">
<textarea cols=“宽度” rows=“高度” name=“名称”>
默认内容
</textarea>
</form>
<label>标签
定义<label> 标签为 input 元素定义标注标记
说明
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id =sp醤 style="font-family:'微软雅黑', 'sans-serif';">属性值相同。
<form method="post"action="">
<label for=“username”>用户名</label>
<input type=“text” name=“username” id=“username” size=“20” />
</form>
<fieldset>标签
<fieldset>
<legend>登录吧</legend>
<input type="text">
</fieldset>
本文转自lyndon博客51CTO博客，原文链接http://blog.51cto.com/lyndon/1967742如需转载请自行联系原作者
迟到的栋子