前端01 /HTML简单简绍

1.web服务本质

  1. import socket
  2. sk = socket.socket()
  3. sk.bind(("127.0.0.1", 8080))
  4. sk.listen(5)
  6. while True:
  7.     conn, addr = sk.accept()
  8.     data = conn.recv(8096)
  9.     conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
  10.     conn.send(b"<h1>Hello world!</h1>")
  11.     conn.close()

2.浏览器的工作流程

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

3.HTML是什么

  1. 1.超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
  2. 2.本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
  3. 3.网页文件的扩展名：.html或.htm
  5. HTML是一种标记语言（markup language），它不是一种编程语言。
  6. HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的

4.web服务本质

  1. import socket
  2. server = socket.socket()
  3. server.bind(('192.168.16.160',8001))
  4. server.listen()
  5. while 1:
  6.     conn,addr = server.accept()
  8.     from_browers_msg = conn.recv(1024)
  9.     print('from_browers_msg',from_browers_msg.decode('utf-8'))
  10.     send_msg = b'HTTP/
  11.     1.1 200 ok\r\n\r\n'
  12.     # data = b'<h1>daguangtou</h1>'
  13.     conn.send(send_msg)
  14.     # conn.send(data)
  15.     with open('test01.html','r',encoding='utf-8') as f:
  16.         data = f.read()
  17.     import time
  18.     data = data.replace('{{ name }}',str(time.time()))
  19.     conn.send(data.encode('utf-8'))
  20.     conn.close()

5.HTML文档结构

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>css样式优先级</title>
  7. </head>
  8. <body> 
  10. </body>
  11. </html>
  13. <!DOCTYPE html>
  14. <html lang="en">
  15. <head>
  16.     <meta charset="UTF-8">
  17.     <title>Title</title>  #网页的标题
  18. </head>
  19. <body>
  20. <h1>24nb</h1>
  21. {{ name }}
  22. </body>
  23. </html>
  25. <!DOCTYPE html>声明为HTML5文档。
  26. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
  27. <meta http-equiv="X-UA-Compatible" content=" ie=edge”>  #告诉ie浏览器以最高版本来渲染我
  28. ”
  29. <meta name= "viewport” content= "python,go"> #搜索的关键字
  31. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
  32. <title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）
  33. <body>、</body>之间的文本是可见的网页主体内容。
  35. 注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
  36. pycharm中创建一个html文件，你就会发现，整个结构都给你直接生成好了，因为不管什么浏览器，这个文档结构都是这样的。

6.HTML注释

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

6.标签语法

  1. 　标签的语法：
  3. <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
  4. <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

7.HTML常用标签

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

body基本标签

  1. 不加标签的纯文字也是可以在body中写的
  2. <b>加粗</b>
  3. <i>斜体</i>
  4. <u>下划线</u>
  5. <s>删除</s>
  7. <p>段落标签</p> #独占一个段落
  9. <h1>标题1</h1>
  10. <h2>标题2</h2>
  11. <h3>标题3</h3>
  12. <h4>标题4</h4>
  13. <h5>标题5</h5>
  14. <h6>标题6</h6>
  16. <!--换行-->
  17. <br>
  19. <!--水平线--><hr> #就是单独个一个水平线
  20. 每次加上一些内容，别忘了刷新一下页面，才能看到新添加的效果或者内容，其实上面这些标签很少用

前端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. XAI/MLI 可解释机器学习系列1- 开源&paper汇总

    一直在关注可解释机器学习领域,因为确实在工作中有许多应用 模型检查,特征重要性是否符合预期和AUC一样重要 模型解释,比起虚无缥缈的模型指标,解释模型学到的规律更能说服业务方 样本解释,为什么这些用户 ...

  2. 曹工改bug：centos下，mongodb开机不能自启动，systemctl、rc.local都试了，还是不行，要不要放弃？

    问题背景 最近装个centos 7.6的环境,其中,基础环境包括,redis.nginx.mongodb.fastdfs.mysql等,其中,自启动使用的是systemctl,其他几个组件,都没啥问题 ...

  3. ASP.NET处理管道之防盗链

    盗链就是在用户向网站a请求网站资源时,网站a将网站资源的路径填写为b网站资源的地址,用户将直接看到网站a上显示着网站b的资源,从而造成盗链. 要防止盗链,就要用到处理管道中的技术 在相应的模块类中: ...

  4. Python数据结构01 线性结构

    栈 实现 后进先出的结构,主要有如下操作 *Stack() *push(item) *pop() *peek() *isEmpty() *size() class Stack(): def __ini ...

  5. 看了Java的Class的源码，我自闭了

    java源码之Class ​ 源码的重要性不言而喻,虽然枯燥,但是也有拍案叫绝.这是我的源码系列第二弹,后续还会一直更新,欢迎交流.String源码可以看我的Java源码之String,如有不足,希望 ...

  6. 你所不知道的redis安装方法，穿一手鞋，看一手资料

    一 .准备工作 $ yum install wget $ cd /opt/ $ mkdir redis $cd redis $ ll wget http://download.redis.io/rel ...

  7. DataOutputStream是用来处理什么类型数据的

    FileOutputStream f=new FileOutputStream(new File("sa.txt")); DataOutputStream do=new DataO ...

  8. java 中的线程池

    1.实现下面的一个需求,控制一个执行函数只能被五个线程访问 package www.weiyuan.test; public class Test { public static void main( ...

  9. 锐捷交换机18010-X端口假死现象

    一次上架锐捷交换机,由于ODF光衰不稳定,导致交换机端口down,排查很多发现以下故障: 重置18010-X端口发现提示一下命令: Port in violation! Use 'errdisable ...

  10. express高效入门教程（4）

    4.静态文件 4.1.普通处理静态文件的方法 在./views/index.html文件中去引入另一个css文件index.css,index.css文件放在public/css目录下,目录结构是这样 ...