HTML5教程

前端微讲解

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

前端微讲解

1.HTTP协议简介

# 1.HTTP协议
	规定了服务端与浏览器之间的数据交互格式及其他事项。
    如果服务端遵循HTTP协议，就可以被浏览器正常访问并展示内容，如果服务端不遵循HTTP协议，浏览器就不会正常访问和展示，但是
不会影响服务端。
# 2.四大特性
	1.基于请求、响应:服务端永远不会主动给客户端发信息，必须是客户端先请求，服务端被动响应。
	2.基于TCP/IP作用于应用层之上的协议，常见的有HTTP,HTTPS,FTP...
    3.无状态:服务端不保存客户端状态
	4.短连接:不保持客户端与服务端之间的链接(websocket长连接，能够长时间保持链接)。
# 3.数据格式
	1.请求格式:客户端给服务端发送消息应该遵循的数据格式
        (1)请求首行(请求方法、协议版本)
        (2)请求头(一大堆K:V键值对)
        (3)换行
        (4)请求体(携带敏感数据，比如密码身份证号...)，但是不是一直都有的
	2.响应格式:服务端给客户端发送信息应该遵循的数据格式
        (1)响应首行(响应状态码，协议版本)
        (2)响应头(一大堆K:V键值对)
        (3)换行
        (4)响应体(在浏览器展示给用户看的)
# 4.响应状态码
	1XX:服务端成功接收到了客户端的数据正在处理，客户端可以选择等待结果或者继续发送
	2XX:常见的就是200 OK,表示请求成功，服务端给出了响应
	3XX:常见的是301/302，都表示重定向，意思就是想访问A页面但是自动跳转到了B页面
	4XX:常见的是403、404,403表示请求不合法，也就是权限不够，404表示资源不存在
	5XX:服务端错误，与客户端无关
'''以后我们还会自定义状态码，因为默认的不够用，自定义状态码一般都是从10000开始'''
# 代码演示
import socket

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

sock,addr = server.accept()
data = sock.recv(1024)
sock.send(b'HTTP/1.1 200 OK\r\n\r\nhello world!')  # HTTP的格式

2.前端简介

# 1.什么是前端，什么是后端
	1.前端:任何与用户直接打交道的界面都可以称之为前端
	2.后端:不直接与用户打交道，用于执行真正的业务逻辑
# 2.前端三剑客
	1.HTML:网页的骨架
	2.CSS:网页的样式
	3.JavaScript:网页的动态效果

3.HTML简介

1.存放HTML代码的文件后缀名一般都是.html
2.HTML是超文本标记语言，它没有任何的逻辑和固定搭配
3.HTML标签分类:
    (1)双标签:有头有尾，内容写在中间
    (2)自闭和标签:也叫单标签，一般都有特殊的功能
4.HTML文档结构:
    <html>
    	<head>给浏览器看的数据</head>
        <body>给用户看的数据</body>
    </html>
5.HTML注释语法:
    (1)单行注释:<!--单行注释-->
	(2)多行注释:<!--
        		多行注释
        		-->

4.head内常见标签

1.title标签:控制网页小标题
2.style标签:内部支持编写css代码
3.link标签:引入外部css文件
4.script标签:内部支持编写js代码，也可以通过src属性引入外部js文件
5.meta标签:
    (1).keywords:搜索引擎关键字
    (2)description:用于展示页面搜索结果的文本描述

5.body内基本标签

1.标题系列:h1~h6(1~6级标题)
2.字体系列:
    (1):<i>斜体</i>
    (2):<b>粗体</b>
    (3):<u>下划线</u>
    (4):<s>删除线</s>
3.文本段落:<p>文本段落</p>
4.水平分割线:<hr/>
5.换行符:<br/>

6.body内特殊标签

空格:&nbsp
大于号:&gt
小于号:&lt
&符号:&amp
羊角符:&yen
版权符:&copy
商标符:&reg

7.body内常见标签

1.布局标签:div、span
    页面的编写首先就是先用布局标签占位，之后填充内容即可
2.图片标签:<img src = "图片路径" title = "鼠标悬浮自动展示提示信息" alt = "当图片无法正常展示自动提示的信息" height =
 "自定义图片高度" width = "自定以图片宽度">
    '''title、alt、height、width不是必须填写'''
3.链接标签:<a href = "点击跳转到的位置">，也可以写标签id值，跳转到页面标签id的值，'target'控制是否当前页跳转，默认_self
当前页，设置_blank新建页

8.标签的两大重要参数

1.id:类似于身份证号，同一个html页面上的标签的id值不允许重复，用于精确查找某个标签。
2.class:类似于面向对象知识，可以将多个标签归为一类，用于分类查找

9.列表标签

<ul>
	<li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>

10.表格标签

<table>
	<thead>  <!--表头字段-->
    	<tr>  <!--tr表示一行-->
        	<th>编号</th>  <!--th加粗文本-->
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>  <!--表单数据-->
    	<tr>
        	<td>1</td>  <!--td普通文本-->
            <td>oscar</td>
            <td>21</td>
        </tr>
    </tbody>
    <tbody>
    	<tr>
        	<td>2</td>  <!--td普通文本-->
            <td>jason</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

这里是IT小白陆禄绯，欢迎各位大佬的指点！！！

这篇关于前端微讲解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航