前段开发01

怼怼哎

已于 2022-08-29 19:39:34 修改

阅读量120

点赞数

文章标签：前端

于 2022-08-22 22:33:54 首次发布

本文链接：https://blog.csdn.net/m0_72611192/article/details/126471635

版权

前端与后端

	前端：
	与用户直接打交道的操作界面可以称之为前端
	后端：
	不直接与用户打交道的内部真正执行核心业务逻辑的代码程序

前端核心基础
HTML
网页的骨架
CSS
网页的样式
JS
网页的动态

超文本传输协议前戏：

1.手写一个服务端程序
2.使用浏览器充当客户端
3.浏览器端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件为了实现无障碍沟通交流有了一些协议
HTTP协议、FTP协议、HTTPS协议
5.浏览器发送的请求数据格式肯定没有问题因为别人早就封装好了
问题出在我们自己写的服务端的响应数据格式

HTTP超文本传输协议：

1 四大特性

1 基于请求响应

2 基于TCP/IP之上使用于应用层的协议应表会传

网数物

3 无状态（不保存前面的转台）

4 无/短链接

2 数据格式

请求数据格式

1 请求首行(请求方式：协议名称及版本）
2请求头（一大堆k:v键值对）
3 换行
4请求体（携带一些敏感的数据，不是每一个都是有的）
get 模式请求没有请求体

响应数据格式

1 响应首行（响应状态码）
2响应头（一大堆k:v键值对）
3 换行
4响应体（一般情况系就是浏览器要展示给客户看的数据）

3 响应状态码

利用数据表示一些复杂的情况说明（类似于暗号） 1XX: 服务端已经接收到你的请求正在处理你可以继续提交或者等待
2XX:200 OK服务端给出了相应响应
3XX:重定向
4XX:403请求不符合条件 404请求资源不存在
5XX:服务端内部错误

HTML简介

超文本标记语言
是所有浏览器展示的页面必备的!!!

浏览器展示的界面我们也称之为HTML页面存储HTML语言的文件后缀一般是.html

HTML没有任何的逻辑所见即所得

HTML注释语法

HTML文件结构
所有的代码都必须写在html标签内部
head内的数据一般都不是给用户看的
body内的数据就是浏览器展示给用户看的

HTML标签的分类
1.单标签(自闭和标签)

2.双标签

“”“HTML代码是不讲究缩进的我们只是习惯了python的缩进语法”“”

head内常见标签

title	控制标签页小标题
style	内部支持编写css
link	引入外部css文件
script	内部支持编写js代码，还可以通过src属性引入外部js文件
meta	通过内部属性的不同可以有很多功能

<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">

body内常见标签

h1-h6	标题标签
p	段落标签
hr	水平分割线
br	换行符
u	下划线
i	斜体
s	删除线
b	加粗

块儿级标签与行内标签

块儿级标签 h1 -h6 p hr br
一个标签独占一行
行内标签 u i s b
内部文本多大自身就占多大

body内基本符号

&nbsp；	空格
&gt；	大于号
&lt；	小于号
&amp；	&
&yen；	￥
&reg；	版权
&copy；；	商标

body内布局标签

div
块儿级标签
span
行内标签

1.块儿级标签是可以通过CSS调整为不独占一行
2.标签之间很多时候可以嵌套
块儿级可以嵌套任何类型的标签
p标签虽然是块儿级标签但是不能块儿级标签
行内标签只能嵌套行内标签

body内常见标签
a标签
链接标签
herf
可以填写网址点击自动跳转
herf 还可以填写其他标签的id值实现锚点功能
target
可以控制是否新建页面跳转
_self
_blank
2.img标签
图片标签

src	填写图片地址(网络地址本地地址)
title	鼠标悬浮在图片上就会有提示信息
alt	图片加载失败提示的信息
height	调整图片的高度
width	调整图片的宽度

上述两个调整一个另外一个等比例缩放

标签两大重要属性

下面的两个属性都是用来快速定位需要操作的标签
1.id属性(一对一管理)
类似于身份证号在同一个html页面上 id值不能重复
2.class属性(批量管理)
类似于分组多个标签可以拥有相同的class值

<!DOCTYPE html><!--文档类型说明-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dui</title>
    <style>
        body {
            color:  yellowgreen;
        }
    </style>
<!--    <link rel="stylesheet" href="my.css">-->
<!--    <script>-->
<!--        confirm('今天很困')-->
<!--    </script>-->
<!--    <script src="myjs.js"></script>-->
</head>
<body>

<!--    <h1>一级标题</h1>-->
<!--    <h2>二级标题</h2>-->
<!--    <h3>三级标题</h3>-->
<!--    <h4>四级标题</h4>-->
<!--    <h5>五级标题</h5>-->
<!--    <h6>六级标题</h6>-->
<!--    <u>下划线</u>-->
<!--    <s>删除线</s>-->
<!--    <i>斜体</i>-->
<!--    <b>加粗</b>-->
<!--<p>困的不行</p>-->
<!--<hr>-->
<!--<p>困的不行</p>-->
<!--<br>-->
<!--<p>困的不行</p>-->
<!--<p>春眠不揭晓&nbsp;&nbsp;&nbsp;处处闻啼鸟</p>-->
<!--a &gt; b-->
<!--a &lt; c-->
<!--a &amp;b-->
<!--&yen;-->
<!--&reg;-->
<!--&copy;-->
<!--<span>123-->
<!--    <p>我是好人</p>-->

<!--</span>-->
<!--<a href="https://www.baidu.com/">点我</a>-->
<!--<a href="https://www.baidu.com/" target="blank">点我</a>-->
<!--<h1>python</h1>-->
<!--<img src="https://img0.baidu.com/it/u=3579466705,1894470778&fm=253&fmt=auto&app=138&f=JPEG?w=343&h=499" alt="" title="sao" height="150ps">-->
</body>
</html>

列表标签

无序列表：

<ul>
  <li>春天</li>
  <li>夏天</li>
  <li>冬天</li>
</ul>

<ul>
  <li type="none">春天</li>
  <li>夏天</li>
  <li>冬天</li>
</ul>

页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表

有序列表

<ol>
  <li>周一</li>
  <li>周二</li>
  <li>周三</li>

标题列表

<dl>
      <dt>标题1</dt>
        <dd>内容1</dd>
      <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>

表格标签

</body>
    <table>
          <thead>
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>密码</th>
                </tr>
          </thead>
          <tbody>
                <tr>
                    <td>1</td>
                    <td>dui</td>
                    <td>123</td>
                </tr>
                  <tr>
                     <td>2</td>
                     <td>xi</td>
                     <td>456</td>
                  </tr>
          </tbody>
    </table>
</body>

> th 加粗
> td 不加粗

表单标签

能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器

action属性用于控制数据的提交地址不写的话就是朝当前页面所在的地址提交 method属性用于控制请求的方式(get\post)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
  <h1>用户注册</h1>
    <from action="" method="">
        <p>username:<input type="text"></p>
        <p>password:<input type="password"></p>
        <p>birthday:<input type="date"></p>
        <p>email:<input type="email"></p>
        <p>gender:
            <input type="radio"  name ="gender">男
            <input type="radio"  name ="gender">女
            <input type="radio"  name ="gender">其他
        </p>
        <p>hobby:
             <input type="checkbox"  name ="hobby">篮球
             <input type="checkbox"  name ="hobby">足球
             <input type="checkbox"  name ="hobby">地球
        </p>
        <p>file:
            <input type="file">
        </p>
        <p>files:
            <input type="file" multiple>
        </p>
        <p>province：
            <select name="" id="" >
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">广州</option>
            </select>
        </p>
        </p>
        <p>GF:
            <select name="" id="" multiple>
                <option value="">小明</option>
                <option value="">小波</option>
                <option value="">小冲</option>
                <option value="">小黄</option>
            </select>
        </p>
        <p>info:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <input type="submit" value="用户注册">
        <input type="reset" value="重置内容">
        <input type="button"  value="普通按钮">
    </from>

</body>
</html>