一，web服务的本质： 浏览器中敲入网站回车发生的几件事？ 1.游览器向服务端发送请求 2.服务端接受请求 3.服务端返回相应的响应 4.浏览器接受响应 根据特定的规则渲染页面展示给用户看二： HTTP 协议 HTML是一种标记语言（markup language），它不是一种编程语言。 HTML使用标签来描述网页。 超文本传输协议 规定了浏览器与服务器之间消息传输的数据格式 四大特性： 1.基于请求响应 2.基于TCP/IP 之上的作用于应用层的协议 3.无状态（服务端无法保存用户的状态，一个人来一千次，都是和第一次一样，都是初恋 4.无连接（请求来一次响应一次，之后立马断开连接，两者之间就再无任何关系 websocket相当于http协议的一个大补丁，可以长连接 请求数据格式： 请求首行 （标识HTTP协议的版本，当前请求方式） 请求头 （ 一大堆的k，v键值对） 下面一行是固定句式的空格\r\n 请求体 （携带的是一些敏感信息，密码，身份证号等） 响应数据格式： 响应首行 （标识HTTP协议的版本，当前请求方式） 响应头 （ 一大堆的k，v键值对） 下面一行是固定句式的空格\r\n 响应体 （返回给浏览器页面的数据 通常响应响应体都是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>