概述
一，web服务的本质：
浏览器中敲入网站回车发生的几件事？
1.游览器向服务端发送请求
2.服务端接受请求
3.服务端返回相应的响应
4.浏览器接受响应 根据特定的规则渲染页面展示给用户看
二： HTTP 协议
HTML是一种标记语言（markup language），它不是一种编程语言。
HTML使用标签来描述网页。
超文本传输协议
规定了浏览器与服务器之间消息传输的数据格式
四大特性：
1.基于请求响应
2.基于TCP/IP 之上的作用于应用层的协议
3.无状态（服务端无法保存用户的状态，一个人来一千次，都是和第一次一样，都是初恋
4.无连接（请求来一次响应一次，之后立马断开连接，两者之间就再无任何关系
websocket相当于http协议的一个大补丁，可以长连接
请求数据格式：
请求首行 （标识HTTP协议的版本，当前请求方式）
请求头 （ 一大堆的k，v键值对） 下面一行是固定句式的空格rn
请求体 （携带的是一些敏感信息，密码，身份证号等）
响应数据格式：
响应首行 （标识HTTP协议的版本，当前请求方式）
响应头 （ 一大堆的k，v键值对） 下面一行是固定句式的空格rn
响应体 （返回给浏览器页面的数据 通常响应响应体都是HTML页面）
响应状态码 (我的理解：就是响应之后的结果，用某个数字表示结果的状态）
用一串简单的数字来表示一些复杂的状态或者提示信息
1XX：服务端已经成功接收浏览器发来的数据，正在处理
2XX: 服务端成功响应 你所要的数据，请求成功 例如：200
3XX: 重定向（当你在访问一个需要登录之后才能访问的页面，窗口会自动调到登录页面，例如301 302
4XX: 请求错误（当你请求的数据不存在404，请求不合法或者权限不够时就是403
5XX: 服务器内部错误
请求方式：
1.get请求
向服务端要资源（比如浏览器窗口输入www.baidu.com）# 就是从服务端获取你要的数据
2，post请求
向服务端提交数据（比如密码，用户登录，提交用户名等等）
URL:统一资源定位符(大白话 就是网址)
三： HTML 超文本标记语言 注意是一种标记语言，不是编程语言
要想让你的页面能够正常的被浏览器显示出来，你就必须遵循html标记语法
也就是说，所有能够被浏览器显示出来的页面， 内部都是HTML代码
浏览器只认识 html css js
web 本质
浏览器
服务器
文件（后缀名是.html或者htm 结尾的文件，也就意味着，只要看到.html结尾的文件，他都是一个前端页面文件
#文件的后缀名仅仅是给人看的 计算机无所谓 因为都是二进制数据
HTML 注释
写网页的一套标准
注释是代码之母
<!--单行注释--> ctrl+/
<!--
多行注释
多行注释
-->
一般情况下 html的注释都会按照下面的方式书写
<!--导航条样式开始--> # 大白话说导航就是快速查找的作用
<!--导航条样式结束-->
HTML文档结构
<html>
<head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的
<body></body>:body内的标签 就是浏览器展示给用户看的内容
</html>
打开html页面的两种方式
1.找到文件路径 选择浏览器打开
2.pycharm快捷方式直接打开
标签的分类一：
1，双标签 (<h1></h1> <a></a>)
2，单标签(自闭和标签 <img/>)
head内常用标签
title 标题标签， 用来显示网页标题
style用来控制样式 内部支持写css代码
script内部支持写js代码， 也支持导入外界的js文件
link 专门用来引入外部的css文件
标签的分类2
1.块儿级标签（独占浏览器一行）
div 结构框架标签
p 段落标签
h 标题标签
1，块儿级标签可以修改长宽， 修改长度等比例缩放，一般只修改长
2，块儿级标签内部可以嵌套任意的块级标签，
但是p标签虽然是块级标签，但是内部不能嵌套 块儿级标签 包括自身也不能
但是可以嵌套行内标签
总结：就是只要是块儿级标签，都可以嵌套行内标签，p标签只能嵌套行内标签，
其他块儿级标签可以嵌套任意块儿级标签
即：p标签不能包含块级标签，p标签也不能包含p标签。*******************
2，行内标签：（自身文本多大就占多大）
span b加粗标签 i 斜体标签 u 下划线标签 s 删除标签
3，div和span通常都是用来构建网页布局的
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
Meta标签介绍：
<meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。
案例：
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
案列：
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
注：开发网页时用的较多， 此时content关键字后面跟的是 用户输入有关内容的关键，
只要用户输入你所在这里有的内容关键字，浏览器就会把与之相关的内容响应给用户
<meta name="description" content="老男孩教育Python学院">
注：开发网页时，此时content= 后跟的是此网页的简介，也就是说明书，说明此网页内容是什么
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>
特殊字符：**********
空格
> >
< <
& &
¥ ¥
版权 ©
注册 ®
img 标签:
src存放的是图片的路径(该路径可以是本地的也可以是网上的)
1.也可以放url(会自动请求该url获取相应数据)
2.也可以直接放图片的二进制数据 会自动转换成图片
alt当图片加载不出来的时候 显示的提示信息
title当鼠标悬浮在图片上 提示的信息
height,width 当你只指定一个参数的时候 另外一个会等比例缩放
a 超链接标签：
href后面存放url的时候 点击跳转到该url
如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色
target 默认是_self当前页面跳转
_blank新建页面跳转
锚点功能(回到顶部)
href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签
每一个标签都应该有三个比较重要的属性
1.id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复
2.class值 该值就类似于面向对象里面的继承 可以写多个
3.style(不是必备) 支持在标签内直接写css代码 属于行内样式 优先级最高
补充 任何标签都支持自定义属性!!!
列表标签***************
<table>
<thead></thead>
<tbody></tbody>
</table>
tr表示一行
th和td都是文本
建议在thead内用th 因为加粗的
tbody内用td
th显示出来的结果字体比td粗
colspan表示的水平方向
rowspan表示的竖直方向
表单标签(******)
能够接收用户输入(输入 选择 上传)并将其发送给后端
能够将图片，文字，，选择按钮等，一块打包统一发送给后端服务器
action:能够控制数据提交的目的地
（是向阿里，新浪，谷歌等等提交）
1，不写的情况下，默认提交到当前页面所在的路径（即当前浏览器网站）
2，写全路径(https://www.baidu.com)
3，路径后缀(/index/)
input input标签就类似于是前端变形金刚
type
text:普通文本
password:密文 不展示明文
date:日期
submit:触发提交动作
button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作
reset:重置表单内容
radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked"
checkbox:多选 同上 可以设置默认值
file:获取用户上传的文件
select标签
默认是单选 可以通过multiple变成多选
如果想默认选择 用selected (selected="selected")
textarea标签
获取用户输入的大段文本
form表单默认是get请求 你需要通过method参数 换成post提交
form表单中 要想触发提交动作
只有两种情况可以
1.input标签type指定成submit
2.直接写button标签
获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性
这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value
<input type="text" id="d1" name="username" value="默认值">
name就相当于是字典的key
value就是字典的值
获取都的用户输入都会被放入value属性中
form表单传文件的时候 需要指定enctype参数
from表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>注册页面</h2>
<form action="">
<!--此时显示效果在一行，要想使分行显示就用p标签包一下-->
<!--<label for="">username：<input type="text"></label>-->
<!--<label for="">password：<input type="text"></label>-->
<!--分行显示就用p标签包一下-->
<!--<p><label for="">username：<input type="text"></label></p>-->
<!--<p><label for="">password：<input type="text"></label></p>-->
<!--当鼠标在username或者password上面点击时，游标会自动在对应的框内等待输入，
这时就增加个id就可以了，id要唯一不能有重复的，第一种写法-->
<p><label for="d1">username：<input type="text" id="d1"></label></p>
<p><label for="d2">password：<input type="password" id="d2"></label></p>
<!--disabled禁用，即密码这个框动不了-->
<p><label for="d2">password：<input type="password" id="d4" disabled></label></p>
<!--第二中写法，-->
<p>
<label for="d3">生日</label>
<input type="date" id="d3">
</p>
<p>性别：
<!--type="radio" radio表示单选 选择性别，显示出来是一个原点-->
<!--当两个name="gender"都一样时就会只能二选一-->
<!--checked="checked"默认值，就是默认为男，如果标签名和标签值相等的话，可简写成checked-->
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
</p>
<p>
<input type="text" name="tank">将是
<input type="text" name="tank">会喜欢
</p>
<p>爱好:
<!--checkbox 默认多选，name可写可不写，如果是博彩网站，可以设为默认，还是用checked-->
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby" checked>双色球
</p>
<p>省市:
<!--select标签，默认市单选，可以通过multiple变成多选-->
<!--如果要在此标签里多选，用selected （selected="selected"）-->
<!--select 表示效果是下拉框选择 ，此时没有multiple就是单选-->
<select name="" id="">
<!--option 表示选项的意思-->
<option value="">上海市</option>
<option value="">北京市</option>
<option value="">深圳市</option>
</select>
</p>
<p>伴侣:
<!--multiple 表示可以选多个，选多个时按住ctrl键即可-->
<select name="" id="" multiple>
<option value="">向远介意</option>
<option value=""selected="selected">斯嘉丽</option>
<option value="">吉泽老师</option>
</select>
</p>
<p>省市1：
<!--直接选择区，前面默认市自动选择，不用选择市-->
<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>
</select>
</p>
<p>头像:
<!--获取用户选择的文件，自己点击，自动选择好-->
<input type="file">
</p>
<p>个人简介:
<!--textarea 获取用户输入的大段文本-->
<textarea name="" id="" cols="30"
rows="10"></textarea>
</p>
<p>隐身:
<!--hidden隐身，把input框隐藏起来了-->
<input type="hidden">
</p>
<!-- input在p包起来时：这样注册，密码是明文
1，type="text" 表示普通文本，输入什么，显示的就是什么
type="password" 此时密码就变成了密文，password是自带规定用法
type="date" 此时生日就变成了日期格式，有客户直接选择，在不需要输入
-->
<!--input在外部时：
用type="submit" 此时显示的是提交按钮，单击此按钮，就会刷新提交一次-->
<!--<input type="submit">-->
<!--所有的input标签都有value值-->
<!--value="注册"，value用来指定值 value后面可输入值，你输入什么，按钮上就是什么-->
<input type="submit" value="注册1">
<!--type="button" 表示就是一个普通的按钮，此时无任何作用，一般都是与js中合用-->
<input type="button" value="注册2">
<!--type="reset" 表示重置，清空了所有内容，不刷新，只是清空了输入的内容-->
<input type="reset" value="注册3">
<!--普通的button标签，产生的按钮，也和submit一样，是给后端提交任务，提交一次页面刷新一次，-->
<button>普通的button标签</button>
<!--防呆措施-->
</form>
</body>
</html>
转载于:https://www.cnblogs.com/Fzhiyuan/p/11456641.html
最后
以上就是烂漫宝贝为你收集整理的一 前端基础，http协议，form表单的全部内容，希望文章能够帮你解决一 前端基础，http协议，form表单所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复