前端初识

内容概要
内容详细
- 前端与后端的概念
前端前戏
- HTTP协议
HTML简介
HTML概览
预备知识
head内常见标签
body内基本标签
常见符号
body内布局标签
body内常用标签
列表标签
表格标签
表单标签

内容概要

前端与后端的概念
服务端搭建及客户端访问
超文本传输协议(HTTP)
超文本标记语言(HTML)

内容详细

前端与后端的概念

前端
	任何与用户直接打交道的操作界面  都可以称之为前端>>>:  接待员
后端
	不直接与用户打交道 主要负责内容真正的业务逻辑的执行>>>:幕后操作者
       
      
        
        
        
        
前端三剑客

    HTML         	网页的骨架
    CSS          	网页的样式
    JavaScript		  网页的动态(JS)
"""
蜡笔小新光着身子       HTML
穿裙子  抹口红(打扮打扮)  CSS
给我舞					JS

"""

前端前戏

1.编写服务端
2.浏览器充当客户端访问服务端
3.浏览器无法正常服务端内容(因为服务端的数据没有遵循标准)
4.HTTP协议>>>:最重要的内容就是规定了浏览器与服务单之间数据交互的格式

HTTP协议

四大特性
1. 基于请求响应
客户端发送请求服务端回应响应
2. 基于TCP、IP作用与应用层之上的协议
该协议属于应用层
3. 无状态
服务端不会保存客户端的状态(记不住人)
4. 无\短连接
客户端与服务端不会长久保存连接
如果想要长连接
数据格式
1. 请求格式
请求首行(请求方式（有很多种）协议版本)
请求头(一大堆K:V键值对)
换行(\r\n)
请求体（存放敏感信息并不是所有的请求方式都有请求体）
2. 响应格式
相应首行(状态码协议版本)
响应头(一大堆K:V键值对)
换行(\r\n)
响应体(存放给浏览器展示的数据)

响应状态码
用数字来表达一些文字意义(类似暗号)
1XX:服务端已经接收到了你的请求正在处理客户端可以继续发送或者等待
2XX: 200 OK 请求成功服务端发送了对应的响应

3XX: 302（临时）301（永久）重定向(想访问网页A但是自动跳转到了网页B)

4XX: 403访问权限不够 404请求资源不存在

5XX:服务端内部错误
在公司中我们还会自定义更多的响应状态码通常以10000起步

没事可以去 <「聚合数据」-API-API数据接口服务专家 (juhe.cn)>

去玩玩

HTML简介

1.直接发送手写的数据

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)
    print(data)
    conn.send(b'http/1.1 200 ok\r\n\r\nhello word')

2.也可以发送文本数据

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)
    print(data)
    conn.send(b'http/1.1 200 ok\r\n\r\n')
    with open('a.txt', 'rb')as f:
        conn.send(f.read())

3.编写HTML出现特殊的现象

HTML概览

1.HTML注释语法 (注释乃代码之母)
	<!--注释内容-->

2.HTML文档注释
<html > 固定的格式 html包裹
	<head>主要放跟浏览器交互的配置</head>
	<body>主要放给用户查看的花里胡哨的内容</body>
</html>
3.HTML标签分类
	单标签(自闭和标签)
    <img />
    双标签
    <h1></h1>

预备知识

网页信息数据一般也会存放于文件中

.html
pycharm支持前端所有类型的文件编写

内置有自动补全的功能我们只需要专注于标签名的编写即可
html文件的打开

内置有自动调用浏览器的功能

head内常见标签

title网页小标题

meta定义网页源信息（很多配置）

<meta name='keywirds' content='查询关键字'>
<meta name='description' content='网页简介'>

style内部支持编写css代码

<style>
    h1{
        color:greenyellow;
    }

</style>

link引入外部的css文件

<link rel='stylesheet' href='mycss.css'>

script支持内部编写js代码也可以引入外部js文件

<script>
	prompt('好好活着','不要浪费生命')
</script>
<script src='myjs.js'></script>
ps:了解每个标签大致的作用即可

body内基本标签

标题系列标签
```
h1~h6
```

段落标签

<p>
    dad 
</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color:#0000ff;
            font-size: 130px;

        }
        div.yy {
            width: 960px;
            height: 677px;
            background-image: url("11.jpg");
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="yy">
    <p> 大</p>
    <p>山</p>
    <p>羊</p>
        </div>

</body>
</html>

其他标签

u 下划线
i 斜体
s 删除线
b 加粗
    <u>哈哈</u>
    <i>芜湖</i>
    <s>啦啦啦啦</s>
    <b>牛战士</b>

换行与分割线

<br>
<hr>

    <u>哈哈</u>
    <i>芜湖</i>
    <s>啦啦啦啦</s>
<br>
    <b>牛战士</b>
<hr>


"""
标签的分类二
行内标签  u i  s b
	内部文本多大就占多大
	
块儿级标签  h系列 p
独占一行


"""

常见符号

1.&npsp;  空格
2.&gt; 		大于
3.&lt;		小于
4.&amp;		&符号
5.&yen;		￥
6.&copy 	©
7.&reg;		®

body内布局标签

div
	块儿级标签
span
	行内标签
    
"""
标签之间可以互相嵌套 并且理论上可以无限套娃
	块儿级标签可以嵌套 行内标签和块儿级标签
	但是 p 标签不能嵌套

行内标签内部只能嵌套行内标签

"""

    <div class="yy">
    <p> 大</p>
    <p>山</p>
    <p>羊</p>
        </div>

body内常用标签

"""
标签括号内填写什么  什么=什么 称之为标签的属性

1.默认属性
	标签自带的  编写的时候有自动提示
2.自定义属性
	用户自定义 编写不会有提示甚至会飘颜色

"""
href='url'

href='#id'  可以跳转到 那个id标签的地方


<a href="https://www.bilibili.com/"> 快点</a>  <!-- 会子在原来的网址上打开-->
<a href="https://www.bilibili.com/" target="_blank"> 快点</a> <!-- 会打开一个新网站-->


img标签 图片标签
src
	1.填写图片地址

 title 
	鼠标悬浮在图片上自动展示的文本
 alt
	图片加载失败提示的信息
 width\height
图片的尺寸 两者调整一个即可  等比例缩放
    <img src="11." alt="大山羊没有了" title="大山羊">

列表标签

无序列表
<ul>
  <li>手机</li>
  <li>衣物</li>
  <li>柴米油盐</li>

</ul>
有序列表
<ol>
    <li>苹果</li>
    <li>李子</li>
    <li>香蕉</li>
</ol>
标题列表
<dl>
    <dt>大大标签</dt>
        <dd>小标签1</dd>
        <dd>小标签2</dd>

    <dt>大大标签</dt>
        <dd>小镖旗1</dd>
        <dd>小镖旗2</dd>
        <dd>小镖旗3</dd>

</dl>

表格标签

1.先写基本骨架
<table>
    <thead></thead>
    <tbody></tbody>
</table>

2.再写表头及表单数据
<table>
    <thead>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </thead>
    <tbody>
        <td>1</td>
        <td>jason</td>
        <td>18</td>
    </tbody>
        <tbody>
        <td>2</td>
        <td>kevin</td>
        <td>18</td>
    </tbody>
</table>

表单标签

可以获取到用户的数据并发给服务器

form标签

action 控制数据的提交地址

method 控制数据的提交方式

input 标签(类似于前端的变形金刚)
type属性
	text      普通文本
    password  密文展示
    data     日期选项
    email    邮箱格式
    radio    单选框
    checkbox  多选框
    file     文件
    submit   触发提交动作
    reset    重置表单内容
    buttom    暂无任何功能
    
<form action="">
  <p>username: <input type="text"></p>
  <p>password: <input type="password" name="" ></p>
  <p>birthday: <input type="date" name="" ></p>
  <p>email: <input type="email" name="" ></p>
  <p>gender: <input type="radio" name="gender"  value="male">男
   <input type="radio" name="gender"  value="female">女
   <input type="radio" name="gender"  value="other">其他</p>
  hobbies: <input type="checkbox" name=""  value="basketball"> 篮球
   <input type="checkbox" name=""  value="read"> 读书
   <input type="checkbox" name=""  value="sleep"> 睡觉</p>
    <p>file <input type="file" name="" ></p>
    <p>files <input type="file" name=""  multiple></p>
  <p></p>地区<select name="" >
      <option value="">上海</option>
      <option value="">北京</option>
      <option value="">河南</option>
  </select></p>
  <p></p>地区多选<select name=""  multiple>
      <option value="">上海</option>
      <option value="">北京</option>
      <option value="">河南</option>
  </select></p>
  <input type="submit" >
  <input type="reset" >
  <input type="button"  value="我是按钮">
</form>



"""
input 标签应该有name属性
	name属性相当于字典的键 input标签获取到的用户输入的数据相当于字典的值
	点击发送就会组织成字典的形式发送给服务器 这样才具有明确的意义

"""

点提交后会出现这个页面

但是如果你点提交后没有反应可能是你没有写在

form标签里面

posted @ 2022-11-30 21:48 可否阅读(47) 评论(0) 收藏举报

可否