前端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. 【loj - 6516】「雅礼集训 2018 Day11」进攻！

    目录 description solution accepted code details description 你将向敌方发起进攻!敌方的防御阵地可以用一个 \(N\times M\) 的 \(0 ...

  2. cc23b_demo-函数对象c++ 调用操作符的重载与函数对象-//用模板定义一元谓词、代码示范

    //用模板定义一元谓词. #include <iostream> #include <vector> #include <algorithm> using name ...

  3. 学习 SQL Server （5） ：视图，索引，事务和锁+T_SQL

    --=============== 视图的创建 =================. --create view 视图名 as 查询语句--注意:视图查询中的字段不能重名-- 视图中的数据是‘假数据’ ...

  4. Beta冲刺<6/10>

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺--第六天(05.24) 作业正文 如下 其他参考文献 ... B ...

  5. opencv C++构造并访问单通道和多通道Mat。

    一:构造并访问单通道. int main(){ cv::Mat m=(cv::Mat_<int>(3,2)<<1,2,3,4,5,6); for(int i=0;i<m. ...

  6. 解Bug之路-中间件"SQL重复执行"

    前言 我们的分库分表中间件在线上运行了两年多,到目前为止还算稳定.在笔者将精力放在处理各种灾难性事件(例如中间件物理机宕机/数据库宕机/网络隔离等突发事件)时.竟然发现还有一些奇怪的corner ca ...

  7. [区间+线性dp]数字游戏

    题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共\(n\)个),你要按顺 ...

  8. 使用phpQuery进行采集数据，模拟curl提升访问速度

    使用php采集网页数据一般有多种方法,有时候会使用正则去采集页面,但是当我们需要采集的页面大并且多的话,会严重的浪费我们的cpu,这时候我们可以使用phpQuer来进行采集,不知道phpQuery的童 ...

  9. ant design pro---ProTable关闭Table上的提示信息

    toolBarRender={false} tableAlertRender={false}

  10. node 模块正确暴露方法

    一个node模块,为了能够服用,就需要将其暴露,那么如何正确写呢?(参考:https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Expr ...