前端(HTML)初始

时间:2023-03-08 15:36:00
前端(HTML)初始

一、用socket实现HTML的原理

import socket
sk = socket.socket()
sk.bind(('127.0.0.1',8080))
sk.listen() while True:
conn,addr = sk.accept()
data = conn.recv(9000)
print(data)
# 按照HTTP协议的格式给浏览器回复消息
conn.send(b'HTTP/1.1 200 OK\r\ncontent-type: text/html; charset=utf-8\r\n\r\n')
with open('s1.txt','rb') as f:
msg = f.read()
conn.send(msg)
conn.close()

实现结果:

前端(HTML)初始

二、HTML

1、CS --> BS架构

2、web的原理

  1、浏览器地址栏输入URL

  2、浏览器往服务端发消息

  3、服务端接收消息

  4、服务端回消息(从文件中读取数据)

  5、浏览器收到消息(按照一个约定好的规则展示出来)

3、HTML初始

  1、就是一些特殊符号,不同的符号有不同的显示效果

  2、学前端就是学怎么写HTML文件,学后端框架就是学习怎么样返回写好的HTML文件

  3、HTML是一种标记语言,网页文件的扩展名:.html和htm

 

<!DOCTYPE html>  <!--声明为HTML5文件-->
<html lang="ch-CN">
<head>
<meta charset="UTF-8">
<title>骑士计划</title>
</head>
<body>
<b>呵呵</b>
<i>呵呵</i>
<u>呵呵</u>
<s>呵呵</s>
</body>
</html>

  1、<!DOCTYPE html>声明为HTML5文档。

  2、<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部              (head)和主体(body)。

  3、<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包                   含了文档的元(meta)数据

  4、<title>、</title>定义了网页标题,在浏览器标题栏显示。

  5、<body>、</body>之间的文本是可见的网页主体内容。

4、HTML规则:https://www.cnblogs.com/liwenzhou/p/7988087.html

  1、HTML中吧连续的空格和换行都解析成一个空格,不存在缩进的问题

  2、基本标签

  3、块级标签和行内标签

    div和span标签的特点:

      没有自带的样式,方便后续使用CSS调整样式!

    块级标签:

      自己独占一行;

      p

      h1~h6

      hr

      div

    行内标签(内联标签):

      默认都在一行显示!

      b、i、u、s

      span

  4、标签支持嵌套

    1、块级标签可以包含内联标签

    2、p标签不能包含p标签和div标签

  5、标签分类

      1、展示给用户看的标签

      2、获取用户输入的标签

          form标签(表单标签)

  6、获取用户输入的标签

      1、input

        1、根据type类型划分

          1、text

          2、password

          3、email

          4、date

          5、radio  -->单选

          6、checkbox  --> 多选

          7、button  --> 普通按钮,多用于使用JS代码绑定事件

          8、submit  --> 提交

          9、reset  --> 重置

          10、  --> 上传文件

      2、select

        1、select标签内部包含的是option,需要配置value属性

            默认选中:select=“select”

      3、textarea

      注意事项:

        1、所有放在form标签中获取用户输入的标签,必须要有name属性

        2、form标签有action属性和method属性

            1、action:控制往哪里提交数据

            2、method:控制用什么方式提交

            3、上传文件需要额外配置enctype="multipart/form-data"

        3、form要提交数据必须要有submit按钮