Day 49 前端开发

最新推荐文章于 2024-07-19 12:58:53 发布

Tao.686

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量208

点赞数

分类专栏： html 文章标签：前端

本文链接：https://blog.csdn.net/weixin_71967396/article/details/126474201

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Day 49 前端开发

文章目录

Day 49 前端开发

1、前端简介

前端
与用户直接打交道的操作界面都可以称之为是前端

后端（幕后工作者）
不直接与用户打交道的内部真正执行核心业务逻辑的代码程序

前端学习
真正的前端工程师也需要学习很长的时间我们作为后端工程师对前端目前只做最核心的了解大致七天的学习

前端核心基础

HTML
- 网页的骨架
CSS
- 网页的样式
JS
- 网页的动态

2、超文本传输协议前戏

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

问题出在我们自己写的服务端的响应数据格式

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)

# 创建 den
while True:
    sock, addr = server.accept()
    while True:
        data = sock.recv(1024)
        print(str(data,'utf'))

        sock.send(b'hello,baby')

3、HTTP超文本传输协议

3.1、四大特性

基于请求响应
基于TCP/IP 之上作用于应用层的协议
无状态
无/短连接

3.2、数据格式

请求数据格式

请求首行（请求方式：有很多种协议名称及版本）
请求头（一大堆K：V键值对）
换行
请求体（携带一些铭感的数据不是所有的请求都有请求体）

响应数据格式

响应首行（响应状态码）
响应头（一大堆K：V键值对）
换行
响应体（一般情况下就是浏览器）

3.3、响应状态码

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

我们在公司还会自己定义更多的状态码
一般情况下从10000开始

4、HTML简介

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

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

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

HTML 注释语法

<!--注释内容-->

HTML 文件结构

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

HTML标签分类

单标签（自闭和标签）

<img/>
双标签

<a></a>

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

5、head内常见标签

标签	标签功能
`<title>`	控制网页小标题
`<stytle></style>`	内部支持编写css 控制标签样式的
`<link>`	引入外部CSS文件
`<script></script>`	内部支持编写JS代码还可以通过src属性引入外部JS文件
`meta`	通过内部属性的不同可以有很多功能

# title
<title>我的第一个html文件</title>

# stytle
<style>
        body {
            color: crimson;
        }
</style>

#link
<link rel="stylesheet" href="">

#script
<script>
        confirm('程序 将在十秒钟后 启动自毁')
</script>

# meta
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率"> #用处不大 浏览器 可以通过 合作 充值 将你提前
<meta name="description" content="填写一些网页的简介">

6、body内基本标签

标签字符	功能
`h1-h6`	标题标签
`<p></p>`	段落标签
`<hr>`	分割线
`<br>`	换行
`<u></u>`	下划线
`<s></s>`	删除线
`<b><b>`	加粗

注意：有很多样式可能存在多种标签可以实现

块儿级标签与行内标签

块儿级标签 h1-h6 p hr br
一块标签独占一行

行内标签 u i s b
内部文本多大自身就占多大

6.1、body 内基本符号

字符	功能
`&nbsp`	空格
`&gt`	大于号
`&lt`	小于号
`&amp`	&
`&yen`	￥
`&reg`	注册
`&copy`	版权

6.2、body内布局标签

div
块儿级标签

spen
行内标签

块儿级标签是可以通过CSS调整为不独占一行
标签之间很多时候可以嵌套

块儿级可以嵌套任何类型标签
- p标签虽然是块儿级标签但是不能嵌套块儿级标签
行内标签只能嵌套行内标签

6.3、body内常见标签

a标签 <a></a>
链接标签

herf 可以填写网址点击自动跳转
- herf 还可以填写其他标签的id值实现锚点功能
target 可以控制是否新建页面跳转
- _self 在原来页面跳转
- _blank 新起一个页面跳转

img 标签
图片标签

src 填写图片地址（网络地址本地地址）
title 鼠标悬浮再图片上会提示信息
alt 图片加载失败提示的信息
height 调整图片的高度
width 调整图片宽度
- 上述两个调整一个另外一个等比例缩放

7、标签两大重要属性

下面的两个属性都是用来快速定位需要操作的标签
id属性（一对一管理）
类似于身份证号再同一个html页面上 id值不能重复

class属性 （批量管理）
类似于分组多个标签可以拥有相同的class值

8、列表标签

无序列表

<ul > 可以添加参数 type=”“ disc实心默认  circle 空心圆 square实心方块 nonne无样式
    <li>python</li>
    <li>mysql</li>
    <li>httml</li>
</ul>

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

有序列表

<ol type="1" start="10">  #第一个参数 为序号样式 第二个为起始点
    <li> 第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ol>

9、表格标签

  <table>  #表格
    <thead> 字段 
      <tr> 添加一行
        <th>id</th> 字段一 th相比td 粗一点
        <th>name</th> 字段二
        <th>pwd</th> 字段三
      </tr>
    </thead>
    <tbody> 数据
      <tr> 添加一行数据
        <td>001</td> 字段一数据
        <td>kk</td> 字段二 数据
        <td>123</td> 字段三 数据
      </tr>
    </tbody>
  </table>

10、表单标签

能够获取用户（输入、选择、上传）的数据并发送给后端服务器
form 表单能完成上述操作的不仅仅只有它

<form action="" method="post"></form>

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

**用户输入账号密码 **

<p>账号：<input type="text"></p>
<p>密码：<input type="password"></p>

用户日期选择

<p>birthday:<input type="date"></p>

用户邮箱填写自动识别@

<p>emil:<input type="email"></p>

单选（性别）

<p>
gender:
    <input type="radio" name="gender"> 男
    <input type="radio" name="gender"> 女
</p>

多选

<p>hoby：
    <input type="checkbox" name="hoby"> 唱
    <input type="checkbox" name="hoby"> 跳
    <input type="checkbox" name="hoby"> 篮球
</p>

上传文件单个或多个

上传单个文件
<p>file：
    <input type="file">
</p>

上传多个文件
<p> file:
    <input type="file" multiple>
</p>

下拉单选

<p>province:
    <select name="" id="">
    <option value=""> 上海</option>
    <option value=""> 浙江</option>
    <option value=""> 北京</option>
    </select>
</p>

下拉多选

<p>GF:：
    <select name="" id="" multiple>
    <option value=""> kk</option>
    <option value=""> ming</option>
    <option value=""> hong</option>
    <option value=""> gong</option>
    </select>
</p>

大内容文本框

<p>
    简介:
    <textarea name="" id="" cols="30" rows="10"></textarea>
</p>

提交数据

<input type="submit" value="用户注册">

重置输入的内容

<input type="reset" value="重置内容">

无功能按钮
可以后期自己添加功能

<input type="button" name="无功能按钮">

Tao.686

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day 49 前端开发

html基础
复制链接

扫一扫

专栏目录

Day 49 前端开发

Day 49 前端开发

文章目录

1、前端简介

2、超文本传输协议前戏

3、HTTP超文本传输协议

3.1、四大特性

3.2、数据格式

3.3、响应状态码

4、HTML简介

5、head内常见标签

6、body内基本标签

6.1、body 内基本符号

6.2、body内布局标签

6.3、body内常见标签

7、标签两大重要属性

8、列表标签

9、表格标签

10、表单标签

“相关推荐”对你有帮助么？