HTTP和HTML

HTTP协议

  • 超文本传输协议，用来规定浏览器和服务器之间的数据交互格式

  • 四大特性

    • 基于请求响应
    • 基于TCP/IP作用于应用层之上的协议
    • 无状态，不保存用户的信息
      • 由于HTTP的无状态，后续出现了一些专门用来记录用户状态的技术：cookie，session，token ...
    • 无/短连接：请求来一次响应一次，之后就不在有任何的链接和关系
      • 长连接：双方建立连接后默认不在断开，websocket

  • 请求数据格式

    • 请求首行（标识HTTP协议版本，当前请求方式）
    • 请求头（一大堆kv键值对）
    • \r\n
    • 请求体（存在于post请求方式中，get方式中无请求体，存放的是请求提交的敏感数据）

  • 响应数据格式

    • 响应首行（标识HTTP协议版本，当前请求方式）
    • 响应头（一大堆kv键值对）
    • \r\n
    • 响应体（返回给浏览器展示给用户看的数据）

  • 请求方式

    1. get请求，朝服务端要数据
      • 例：输入网址获取对应的内容
    2. post请求，朝服务端提交数据，用户登录
      • 例：输入用户名和密码之后提交到服务器做身份校验

  • 响应状态码

    • 用一串简单的数字来表示一些复杂的状态或者描述信息
    • 1XX：服务端已经成功接收到你的数据正在处理，你可以继续提交额外的数据
    • 2XX：服务器成功响应了你想要的数据
      • 200 OK：请求成功
    • 3XX：重定向（当你咋访问一个需要登录之后才能看到的页面，它会自动跳转到登录页面）
    • 4XX：请求错误
      • 404：请求资源不存在
      • 403：当前请求不合法或不符合访问资源的条件
    • 5XX：服务器内部错误（500）

HTML介绍

  • 超文本标记语言

  • 如果想让浏览器能够渲染出自己写的页面，那就必须遵循HTML语法

  • 我们浏览器看到的页面内部都是HTML代码

  • HTML就是书写网页的一套标准

  • 注释

    <!--注释-->

HTML文档结构

<!DOCTYPE html> 
<!--声明这是一个HTML文档-->
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<!--head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的-->
<body> 
</body>
<!--body内的标签 写什么浏览器就渲染什么 用户就能看到什么-->
</html>

两种打开HTML文件的方式

  • 找到文件所在的位置右键选择浏览器打开
  • 在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器

HTML常用标签

head内常用标签

<title></title>  定义文档标题
<link></link> 标签定义文档与外部资源的关系
<style></style> 标签用于为 HTML 文档定义样式信息。
<script></script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件

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>

div和span

  • div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

  • span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

  • 上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁

  • div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可，而普通的文本先用span标签

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签

  • 超链接标签

  • 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
  • href属性指定目标网页地址。该地址可以有几种类型：
    • 绝对URL - 指向另一个站点（比如 href=”http://www.jd.com）/)
    • 相对URL - 指当前站点中确切的路径（href=”index.htm”）
    • 锚URL - 指向页面中的锚（href=”#top”）
  • target：
    • _blank表示在新标签页中打开目标网页
    • _self表示在当前标签页中打开目标网页

列表

无序列表
<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）
有序列表
<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马
标题列表
<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

表格

  • 表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
  • 表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）

from表单

  • 能够获取当前端用户数据，基于网络发送给后端服务器

  • action属性：控制数据提交的后端路径

    1. 什么都不写，默认就是朝当前页面所在的url提交数据
    2. 写全路径：https://www.baidu.com 朝百度服务器提交
    3. 只写路径后缀 /index/
      • 自动识别出当前服务器的ip和port拼接到前面
      • host:port/index/
input标签

input标签会根据不同的type属性变化多种形态

  • text单行文本框
  • password密码输入框
  • date日期
  • radio单选按钮
  • checkbox多选框
  • submit 提交按钮
  • reset重置按钮
  • hidden隐藏输入框
  • file文件选择框

属性说明

  • name：表单提交是的键，和id有所区别
  • value：表单提交时对应项的值，type的值不同时，所展示的有所区别
    • text，password，hidden ：输入框的初始值
    • reset，submit，button：按钮上显示的文本内容
    • checkbox，radio，file：输入相关联的值
  • checked：radio和checkbox默认被选中的项
  • readonly：text和password设置为只读
  • disabled：所有input都适用，设置为禁用
label标签

定义：标签为input元素定义标注（标记）

label元素不会向用户呈现任何效果，

标签的for属性值应当与相关联的元素id值相同

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>
select 标签

下拉列表框

<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>

属性说明：

  • multiple：布尔属性，设置后为多选，否则默认单选
  • disabled：禁用
  • selected：默认选中该项
  • value：定义提交时的选项值
textarea多行文本

属性说明：

  • name：名称
  • rows：行数
  • cols：列数
  • disabled：禁用
其他
  • <br/> 换行标签，完成文字的紧凑显示。可以使用连续多个<br/>标签来换行
  • <hr/> 水平分割线标签，用于段落与段落之间的分割
  • <p></p>段落标签,里面可以加入文字,列表,表格等，
  • <pre></pre>按原文显示标签，可以把原文件中的空格,回车,换行,tab键表现出来
  • <hn></hn> 标题字标签，n为1-6，定义六级标题，而且会自动换行插入一个空行
  • <div></div> 没有任何语义的标签
posted @ 2021-08-17 19:11  zheng-sn  阅读(145)  评论(0)    收藏  举报