前端01 /HTML简单简绍

1.web服务本质

import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 8080))

sk.listen(5)

while True:

    conn, addr = sk.accept()

    data = conn.recv(8096)

    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")

    conn.send(b"<h1>Hello world!</h1>")

    conn.close()

2.浏览器的工作流程

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

3.HTML是什么

1.超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。

2.本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

3.网页文件的扩展名：.html或.htm

HTML是一种标记语言（markup language），它不是一种编程语言。

HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的

4.web服务本质

import socket

server = socket.socket()

server.bind(('192.168.16.160',8001))

server.listen()

while 1:

    conn,addr = server.accept()

    from_browers_msg = conn.recv(1024)

    print('from_browers_msg',from_browers_msg.decode('utf-8'))

    send_msg = b'HTTP/

    1.1 200 ok\r\n\r\n'

    # data = b'<h1>daguangtou</h1>'

    conn.send(send_msg)

    # conn.send(data)

    with open('test01.html','r',encoding='utf-8') as f:

        data = f.read()

    import time

    data = data.replace('{{ name }}',str(time.time()))

    conn.send(data.encode('utf-8'))

    conn.close()

5.HTML文档结构

<!DOCTYPE html>

<html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'

<head>

  <meta charset="UTF-8">

  <title>css样式优先级</title>

</head>

<body> 

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>  #网页的标题

</head>

<body>

<h1>24nb</h1>

{{ name }}

</body>

</html>

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

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

<meta http-equiv="X-UA-Compatible" content=" ie=edge”>  #告诉ie浏览器以最高版本来渲染我

”

<meta name= "viewport” content= "python,go"> #搜索的关键字

<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。

<title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）

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

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

pycharm中创建一个html文件，你就会发现，整个结构都给你直接生成好了，因为不管什么浏览器，这个文档结构都是这样的。

6.HTML注释

<!--注释内容-->  #找到一行内容ctrl+/就能注释，注释的内容不会在网页上显示出来

6.标签语法

　标签的语法：

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

7.HTML常用标签

标签 意义
定义网页标题
定义内部样式表
定义JS代码或引入外部JS文件
引入外部样式表文件
定义网页原信息

body基本标签

不加标签的纯文字也是可以在body中写的

<b>加粗</b>

<i>斜体</i>

<u>下划线</u>

<s>删除</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<!--换行-->

<br>

<!--水平线--><hr> #就是单独个一个水平线

每次加上一些内容，别忘了刷新一下页面，才能看到新添加的效果或者内容，其实上面这些标签很少用

前端01 /HTML简单简绍的更多相关文章

  1. python 简单简绍以及简单的语法

    一.Pthon介绍 Pyhton的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆在阿姆斯特丹打发时间,决心开发一款新的脚本解释程序,作为ABC语言的 ...

  2. 前端03 /css简绍/css选择器

    前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...

  3. SpringCloud（1）生态与简绍

    一:微服务架构简绍学习目标 1.技术架构的演变,怎么一步步到微服务的:2.什么是微服务,优点与缺点  :3.SOA(面向服务)与MicroServices(微服务)的区别 :4.Dubbo 与Spri ...

  4. Python学习（基础简绍）

    今天终于开始了python的学习,至于python的历史我就不说了,百度百科中太详细了,我这里说就是关公面前耍大刀,太自不量力了,所以,废话不多说,直接讲讲我惊天学习Python的收获吧. 1.Pyt ...

  5. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  6. Eureka 系列（01）最简使用姿态

    目录 Eureka 系列(01)最简使用姿态 0. Spring Cloud 系列目录 - Eureka 篇 1. 服务发现与发现 1.1 服务发现(Service Discovery) 1.2 服务 ...

  7. Feign 系列（01）最简使用姿态

    目录 Feign 系列(01)最简使用姿态 1. 引入 maven 依赖 2. 基本用法 3. Feign 声明式注解 Feign 系列(01)最简使用姿态 Spring Cloud 系列目录(htt ...

  8. NIO 源码分析(01) NIO 最简用法

    目录 一.服务端 二.客户端 NIO 源码分析(01) NIO 最简用法 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) J ...

  9. django ORM 简单示例简绍

    简单 models 操作 class Host(models.Model): nid = models.AutoField(primary_key=True) #Nid为主键 hostname = m ...

随机推荐

  1. [每日一题2020.06.09] leetcode #97 交错字符串 dp

    题目链接 利用动态规划的思想, 对于每种状态(i, j)来说都有(i-1, j) 和 (i,j-1) 需要注意的问题 : 初始化的问题,先把i=0和j=0的状态都初始化后才可以进行dp否则发生数组越界 ...

  2. php 判断设备是手机还是平板还是pc

    1 <?php 2 //获取USER AGENT 3 $agent = strtolower($_SERVER['HTTP_USER_AGENT']); 4 5 //分析数据 6 $is_pc ...

  3. cc22a_demo_c++重载自增自减操作符-代码示范

    cc22a_demo_c++重载自增自减操作符-代码示范 #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespa ...

  4. 使用Kubeflow构建机器学习流水线

    在此前的文章中,我已经向你介绍了Kubeflow,这是一个为团队设置的机器学习平台,需要构建机器学习流水线. 在本文中,我们将了解如何采用现有的机器学习详细并将其变成Kubeflow的机器学习流水线, ...

  5. 代码规范与计划(Beta阶段)

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 Beta冲刺 这个作业的目标 代码规范与计划 作业正文 如下 其他参考文献 代码规 ...

  6. Docker Dockerfile 指令详解与实战案例

    Dockerfile介绍及常用指令,包括FROM,RUN,还提及了 COPY,ADD,EXPOSE,WORKDIR等,其实 Dockerfile 功能很强大,它提供了十多个指令. Dockerfile ...

  7. AliOS Things添加环境变量

    此电脑->属性->高级系统设置->环境变量->系统变量-新建.

  8. drf-Authentication认证

    drf-Authentication认证 ## 源码分析 ```python """ 1)APIView的dispath(self, request, *args, ** ...

  9. Selenium+Python调Chrome浏览器时报Traceback (most recent call last): File "C:/Users/EDZ/Desktop/selenium_demo/demo001.py", line 12, in <module>

    上次使用Selenium+Python还是好几个月前了 今天想再用一下,结果写个打开网站的小demo报错,报错如下: 检查了一下,查看报错日志,应该是chrome版本和driver版本不一致导致的. ...

  10. 发布Nuget包时遇到都意外

    准备好工具和发布教程.(这些网上都有,我就不说了,就说说我遇到都意外.) 在发布包都过程中,我给我都dll命名为Common.不知道是不是这个原因导致的我包发布上去后,程序对其引用时居然没主动引用进程 ...