前端 - 为之网

前端

本文主要是介绍前端，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前端
- 一、简介
  - 1.前端
  - 2.后端
  - 3.前端的学习
  - 4.前端的核心基础
- 二、超文本传输协议
- 三、HTTP超文本传输协议
  - 1.四大特性
  - 2.数据格式
  - 3.响应状态码
- 四、HTML
  - 1.简介
  - 2.语法
  - 3.head内常见标签
  - 4.body内基本标签
  - 5.块级标签与行内标签
    - 5.1.块级标签 h1~h6/p/hr/br
    - 5.2.行内标签 u/i/s/b
  - 6.body内基本符号
  - 7.body内布局标签
  - 8.标签两大重要属性
  - 9.列表标签
  - 10.表格标签
  - 11.表单标签

前端

一、简介

1.前端

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

2.后端

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

3.前端的学习

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

4.前端的核心基础

HTML：网页的骨架

CSS：网页的样式

JS：网页的动态

二、超文本传输协议

1.手写一个服务端程序

2.使用浏览器充当客户端

3.浏览器端无法直接展示服务端的响应数据

4.由于浏览器需要兼容很多服务端软件，为了实现无障碍沟通交流，有了一些协议

HTTP协议，FTP协议，HTTPS协议

5.浏览器发送的请求数据格式肯定没问题，因为别人早就封装好了，问题出在我们自己写的服务端响应数据格式

import socket

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

while True:
    sock,addr = server.accept()
    while True:
        sock.send(b'hello')
        date = server.recv(1024)
        print(date)

三、HTTP超文本传输协议

1.四大特性

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

2.数据格式

请求数据格式
    1.请求首行（请求方式：有很多 协议名称及版本）
    2.请求头（一大堆K:V键值对）
    3.换行
    4.请求体（携带一些敏感的数据，不是所有请求都有请求体）

响应数据格式
    1.响应首行（响应状态码）
    2.响应头（一大堆K:V键值对）
    3.换行
    4.响应体（一般情况下就是浏览器要展示给用户看的数据）

3.响应状态码

利用数字来表示一些复杂的情况说明（类似于暗号）

1XX:服务端已经收到你的请求正在处理，你可以继续提交或者等待
2XX:200 OK服务器给出了响应
3XX:重定向
4XX:
    403请求不符合条件 
    404请求资源不存在
5XX:服务端内部错误
在公司里还会自己定义更多的状态码
	一般情况下从10000开始

四、HTML

1.简介

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

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

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

2.语法

HTML代码不讲究缩进

1.html注释语法
	<!--注释内容-->
2.HTML文件格式
<html> 所有的代码都必须写在html标签内部
	<head>
    	一般不是给用户看的
	</head>
	<body>
        浏览器展示给用户看的内容
	</body>
</html>
3.HTML标签分类
	单标签（自闭合标签）
		<img/>
	双标签
		<a></a>
		<p></p>
		<li></li>

3.head内常见标签

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

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

4.body内基本标签

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

标签	作用
h1~h6	一到六级标题标签
p	段落标签
hr	水平分割线
br	换行符
u	下划线
i	斜体
s	删除线
b	加粗

5.块级标签与行内标签

5.1.块级标签 h1~h6/p/hr/br

一个标签独占一行

5.2.行内标签 u/i/s/b

内部文件多大自身就占多大

6.body内基本符号

&nbsp; 	空格
&gt; 	大于号
&lt; 	小于号
&amp; 	&
&yen;	￥
&reg;	注册
&copy;	版权

7.body内布局标签

a标签
	链接标签：href
        可以填网址，点击自动跳转
        href还可以填写其他标签的id值
	实现锚点功能：target
    	可以控制是否新建页面跳转
        _self
        _blank
    
img标签
	图片标签
        src 	填写图片地址（网络地址、本地地址）
        title 	鼠标悬浮在图片上会有提示信息
        alt 	图片加载失败提示的信息
        height 	调整图片高度
        weight 	调整图片宽度
        高度和宽度，只调整一个是等比例缩放

8.标签两大重要属性

用来快速定位需要操作的标签

id 属性（一对一管理）
	类似于身份证号码，在同一个HTML页面上，id值不能重复
class 属性（批量管理）
	类似于分组，多个标签可以拥有相同的class值

9.列表标签

1.无序列表
	<u1>
		<li>pyhton</li>
		<li>golang</li>
         <li>linux</li>
	</u1>
	页面上有规则的排列的横向或竖向的多个元素几乎使用的都是无序列表
2.有序列表
	<ol type="I" start="10">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
	</ol>
3.标题列表
	<d1>
		<dt>标题一</dt>
           <dd>内容1</dd>
         <dt>标题一</dt>
           <dd>内容1</dd>
           <dd>内容2</dd>
	</d1>

10.表格标签

<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>密码</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>jason</td>
            <td>123</td>
        </tr>
    </tbody>
</table>

11.表单标签

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

<form action="" method="post"></form>
action属性：用于控制数据的提交地址，不写的话就是朝当前页面所在的地址提交
method属性：用于控制请求的方式（get/post）


<form action="" method="post">
    <!--action属性：用于控制数据的提交地址，不写的话就是朝当前页面所在的地址提交-->
    <!--method属性：用于控制请求的方式（get/post）-->
    <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">male
        <input type="radio" name="gender">female
        <input type="radio" name="gender">other
    </p>
    <p>hobby:
        <input type="checkbox" name="hobby">basketball
        <input type="checkbox" name="hobby">football
        <input type="checkbox" name="hobby">dance
    </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>GF:
        <select name="" id="" multiple>
            <option value="">小敏</option>
            <option value="">小蓝</option>
            <option value="">小红</option>
            <option value="">小黄</option>
        </select>
    </p>
    <p>
        <input type="submit" value="用户注册">
        <input type="reset" value="重置按钮">
        <input type="botton" value="普通按钮">
    </p>
</form>

这篇关于前端的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

HTML5教程

前端

前端