一、web服务的本质
web服务本质上也是浏览器发送请求，基于http网络协议，发送到服务端，服务端接收请求并做出响应
HTTP协议：http协议
超文本传输协议
客户端服务端在数据交互的时候都必须遵循这套协议
以python模拟一个简单的服务端：
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
conn, addr = server.accept()
data = conn.recv(1024)
# 必须指明协议，否则无法接收响应
conn.send(b'HTTP/1.1 200 OK \r\n\r\n')
conn.send(b'<h1>Hello World!</h1>')
conn.close()什么是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
各部分之间用“/”符号隔开。
二、HTML
html是一种超文本标记语言，不是编程语言，没有任何的逻辑。
最基本的html文件是：
<!DOCTYPE html> 声明为html5文档
<html lang="en"> 文档开始标记
<head> 文档开头
<meta charset="UTF-8">
<title>Title</title> 网页标题
</head>
<body> 网页主体内容
</body>
</html> 文档结束标记1、注释
<!--这是单行注释-->
<!--
这是多行注释
-->
2、标签
- HTML标签是由尖括号包围的关键字，如<html>, <div>等
- HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
- 也有一部分标签是单独呈现的，比如：<br>、<hr>、<img src="1.jpg" />等。
- 标签里面可以有若干属性，也可以不带属性。
标签的语法：
- <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
几个很重要的属性：
- id：定义标签的唯一ID，HTML文档树中唯一
- class：为html元素定义一个或多个类名（classname）(CSS样式类名)
- style：规定元素的行内样式（CSS样式）
3、head内常用标签
<!DOCTYPE html>
<html lang="en">
<head>
<!--head存储的是用户看不到的，主要给浏览器和搜索引擎看的-->
<!--指定字符集-->
<meta charset="UTF-8">
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://blog.youkuaiyun.com/weixin_40406241">
<title>这是我的第一个前端页面</title>
<!--在style里面给h1标题设置颜色-->
<!--<style>-->
<!--h1 {-->
<!--color: greenyellow;-->
<!--}-->
<!--</style>-->
<!--<script>-->
<!--// <!– alert可以弹窗 –>-->
<!--// alert('hello world!')-->
<!--</script>-->
<!--src引入外部的js代码-->
<script src="myjs.js"></script>
<!--href引入css代码-->
<link rel="stylesheet" href="mycss.css">
</head>
<!--用户能够看到的都放在body里面-->
<body>
<h1>冲天香阵透长安，满城尽带黄金甲</h1>
</body>
</html>
<title></title>：页面标题
<style></style>：写css代码，定义内部样式
<script></script>：内部可以直接写js代码，也可以通过src属性引入外部的js代码文件
<link/>：通过href引入外部的css文件
<meta/>：定义网页元信息
meta标签有两个属性：http-equiv属性和name 属性
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--告诉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="京东商城，中国优秀电商">4、body内标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html好多东西啊</title>
<style>
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
这是正常文本！！！！！！
<h1>h1一级标题</h1>
<h2>h2二级标题</h2>
<h3>h3三级标题</h3>
<h4>h4四级标题</h4>
<h5>h5五级标题</h5>
<h6>h6六级标题</h6>
<h1>清平调 <i>李白</i></h1>
<br>
<p>云想衣裳花想容，春风拂槛露华浓。</p>
<p>若非群玉山头见，会向瑶台月下逢。</p>
<hr>
</body>
</html>p：段落标签
h1-h6：标题标签
<s>199</s>现价：99 （显示时199会有删除符）
<br> 换行
<hr> 分割线
<u>下划线</u>
<i>斜体</i>
<b>加粗</b>
特殊字符：
1 < a --1<a
3 > 1 --3>1
¥ --￥，人民币符号
© --©，版权
® --®，注册
& --&
<p>天呐 风吹草低见牛羊</p> --空格div标签和span标签
<div>div1
<div>
div2
<div>
div3
</div>
</div>
</div>
<div>div4</div>
<span>span</span>
<span>span</span>div标签用来定义一个块级标签，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)标签，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
所谓块标签，是以另起一行开始渲染的元素，行内标签则不需另起一行。如果单独在网页中插入这两个标签，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
块儿级标签 div h1~h6 p hr br
行内标签 span a img i s b u
注意：
关于标签嵌套：通常块级标签可以包含内联标签或某些块级标签，但内联标签不能包含块级标签，它只能包含其它内联标签。
p标签不能包含块级标签，p标签也不能包含p标签。
img标签：
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
a标签：
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<a href="http://www.baidu.com" target="_blank" >点我</a>target属性用来控制是否在当前页面跳转
默认是_self当前页
也可以指定成_blank新建页面跳转
还有一个锚点功能，用来回到页面顶部：
<a href="" id="a1">top</a>
<div style="height: 1000px; background: blue"></div>
<div style="height: 1000px; background: green"></div>
<div style="height: 1000px; background: red"></div>
<a href="#a1">点我返回top</a>列表标签：
1、无序列表
<ul type="square"> <!--type默认disc-->
<li>lsb</li>
<li>lxx</li>
<li>shj</li>
<li>cr</li>
<li>lo</li>
<li>lk</li>
</ul>type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
2、有序列表
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ol>type属性：
- 1 数字列表排序，默认值
- A 大写字母排序
- a 小写字母排序
- Ⅰ大写罗马数字排序
- ⅰ小写罗马数字排序
3、标题列表
<dl>
<dt>标题1</dt>
<dd>内容一</dd>
<dd>内容二</dd>
<dd>内容三</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>表格标签：
<table border="1"> <!--border指定表格边框-->
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>shj</td>
<td>18</td>
<td>breaking</td>
</tr>
<tr>
<td>lzp</td>
<td>38</td>
<td rowspan="2">lg</td>
</tr>
</tbody>
</table>属性:
- border: 调整列表的边框
- cellpadding: 调文本与单元格之间的距离
- cellspacing: 调单元格与外边框之间的距离
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
- tr 一个tr表示一行
form表单：
表单用于向服务器传输数据，从而实现用户与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）。 |
form表单中只有input的type类型为submit才会触发提交信息的动作
如果不想通过input标签来触发提交动作 那么可以直接写一个：<button>button按钮</button>
input的属性：
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
select的属性：
<select name="province" id="">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>textarea
获取用户大段文本值
搭建简易的html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>用户注册</h3>
<form action="" method="post" enctype="multipart/form-data">
<!--一般label与input连用，for里的label指明给谁用，并且加了label可以点击前面的username定位输入框-->
<label for="i1">username:<input type="text" id="i1" name="username"></label>
<label for="i2">password: <input type="password" name="pwd" id="i2"></label>
<p>birthday: <input type="date" name="birthday"></p>
<p>gender:
男 <input type="radio", name="gender" value="0">
女 <input type="radio" name="gender" value="1">
保密 <input type="radio" name="gender" value="2">
</p>
<p>hobby:
<input type="checkbox" checked name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province:
<!--多选在select里加一个multiple-->
<select name="province" id="">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
</p>
<p>city:
<select name="" id="">
<optgroup label="北京">
<option value="">朝阳</option>
<option value="">昌平</option>
<option value="">海淀</option>
</optgroup>
<optgroup label="上海">
<option value="">浦东</option>
<option value="">徐汇</option>
<option value="">青浦</option>
</optgroup>
<optgroup label="深圳">
<option value="">福田</option>
<option value="">罗湖</option>
<option value="">宝安</option>
</optgroup>
</select>
</p>
<p>info:
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>file:
<input type="file" name="file">
</p>
<input type="submit" value="注册">
<input type="button" value="普通按钮">
<input type="reset" value="重置">
<button>button按钮</button>
</form>
</body>
</html>实现的效果：
总结:
1、 获取用户输入的标签都必须有一个name属性
用户输入的值会被存放到标签的value属性中
你可以理解为name属性对应是字典的key
用户输入的被value属性获取的到值是字典的value
2、 label标签
通常是和input标签组合使用
<form action="">
<label for="i1">username:<input type="text" id="i1" name="username"></label>
<label for="i2">password: <input type="password" name="pwd" id="i2"></label>
<input type="submit">
</form>
form表单中几个重要的属性
action:用来控制数据到底提交给谁 写url来指定提交给谁
form表单默认是get请求 可以通过method属性修改提交方法
form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型
你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值
form表单发送文件 需要修改enctype属性的值
默认是urlencoded不支持传输文件
需要将其修改为multipart/form-data
GET请求与POST请求
get请求:朝服务端获取资源(可以携带参数供服务端校验)
不推荐携带敏感型的参数
get请求携带的参数是有大小限制的 大概4KB
可以携带一些不重要的参数
post请求:朝服务端提交数据
敏感性的信息都应该采用post提交方式
扫一扫
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
