一、SOCKET服务器与浏览器交互

CS模式 -->  BS模式

CS模式逐渐向BS模式转移，底层都是socket客户端

浏览器给服务器发送请求 --> 服务器收到请求 --> 服务器给浏览器回复响应

由于浏览器版本众多，而且网络的类型众多，socket服务器和浏览器之间收发信息，必须格式要统一，遵循HTTP协议

socket服务器与浏览器交互

'''

socket与浏览器交互

'''

import socket

sk = socket.socket()

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

sk.listen()

while 1:

    conn,add = 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()

二、web的原理

① 浏览器地址输入URL

② 浏览器往服务器发消息

③ 服务器接收消息

④ 服务器回复消息（从文件中读取数据）

⑤ 浏览器收到消息（按照一个约定好的规则展示出来）

三、HTML

超文本标记语言，本质上是浏览器可识别的规则，不同的浏览器都是同一个规则

HTML是一种标记语言，不是编程语言

浏览器的极速模式：使用chrome内核

浏览器的兼容模式：使用IE内核

四、HTML文档结构

<!DOCTYPE html>

<html lang="zh-CN">

<head>

</head>

<body>

</body>

</html>
 <!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<body>、</body>之间的文本是可见的网页主体内容。 
 

<!DOCTYPE> 标签
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

html中把连续的空格和换行都解析成一个空格，没有缩进的概念，所有的操作都根据标签

 
五、HTML的标签格式
属性：

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）

HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
标签里面可以有若干属性，也可以不带属性。

六、注释

<!--注释-->

七、head内部标签

head标签内的内容是用于浏览器识别的

<head>

    <title>网页标题</title>

    <style>定义内部样式表</style>

    <script>定义JS代码或者引入外部JS文件</script>

    <link rel="stylesheet" href="">引入外部样式表文件

</head>

title　　  定义网页标题

style　　定义内部样式表

script　   定义JS代码或引入外部JS文件

link　　   引入外部样式表文件

meta标签

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--3表后跳转到www.google.com.hk，refresh是刷新-->

<meta http-equiv="refresh" content="3;URL=https://www.google.com.hk">
<!--指定文档的编码类型-->

<meta http-equiv="content-type" charset="UTF-8">
<!--IE以最高级模式渲染文档-->

<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

keywords 　　  关键字，用于搜索引擎搜索，爬虫，SEO

description 　　描述信息，搜索引擎展示网页的时候展示出来

<meta name="description" content="全球领先的综合性网上购物中心。超过100万种商品在线热销"/>

<meta name="keywords" content="网上购物，网上商城，网上买书，购物中心，在线购物"/>

前端HTML基础和head部分的更多相关文章

  1. Web前端开发基础 第一天（Html和CSS）

    学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...

  2. 网络统计学与web前端开发基础技术

    网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...

  3. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  4. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  5. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  6. 前端总结·基础篇·JS（一）五大数据类型之字符串（String）

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(二)补充 前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录 这是& ...

  7. 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）

    目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...

  8. 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  9. 前端总结·基础篇·JS（四）异步请求及跨域方案

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  10. Web前端-Ajax基础技术(下)

    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...

随机推荐

  1. AD 常用策略-修改本地管理员密码，禁用非administrator帐户，删除非administrator帐户

    这个是用启动脚本实现的. 我放在计算机策略下了. 另存为VBS格式即可 修改第三行“123qwe!@#”,引号中的就是你的新密码. 一:禁用非administrator帐户 strComputer = ...

  2. 安装kubernet（k8s）

    简介: 需要学习的都明白,这里就不赘述了. 本文采用CentOS-7-x86_64-DVD-1810.iso 一:安装操作系统 本来是喜欢用fedora的,但是fedora貌似包维护的不好,就又开始用 ...

  3. 创建 LVM

    1.将物理磁盘设备条带化为物理卷 # pvcreate /dev/sdb 查看物理卷: # pvs# pvdisplay 2.创建卷组,并添加 PV 到卷组 # vgcreate vg1 /dev/s ...

  4. 十篇TED点击率最高演讲，带你重新认识大数据与人工智能

    我们通常过于专注于机器学习算法的实现,倾向于忽略这种技术本身的一些重要问题:如未来的应用和政治后果.在这篇文章中,我们从非常受欢迎的非营利组织TED上收集了一系列的视频(并非关注于选择什么语言或算法来 ...

  5. PHP比较两个版本的方法

    PHP比较两个版本的方法 写app接口经常要用到 PHP接口的版本和app里面的版本做比较 如果app版本低于接口版本 那么就要提示他升级 <pre><?php/** * 版本处理类 ...

  6. 史上最浅显易懂的RxJava入门教程

    RxJava是一个神奇的框架,用法很简单,但内部实现有点复杂,代码逻辑有点绕.我读源码时,确实有点似懂非懂的感觉.网上关于RxJava源码分析的文章,源码贴了一大堆,代码逻辑绕来绕去的,让人看得云里雾 ...

  7. 兔子问题（Rabbit problem）

    Description 有一种兔子,出生后一个月就可以长大,然后再过一个月一对长大的兔子就可以生育一对小兔子且以后每个月都能生育一对.现在,我们有一对刚出生的这种兔子,那么,n 个月过后,我们会有多少 ...

  8. 【转帖】linux内存管理原理深入理解段式页式

    linux内存管理原理深入理解段式页式 https://blog.csdn.net/h674174380/article/details/75453750 其实一直没弄明白 linux 到底是 段页式 ...

  9. 考试应对（Java语法速览）

    1.从命令行输入数据 格式:Scanner reader=new Scanner(System.in); 此reader对象可以使用的方法:nextBoolean(),nextByte(),nextS ...

  10. Linux基础-04-权限

    1. 查看文件的权限 1) 使用ls –l命令查看文件上所设定的权限. -rw-r--r-- 1 root root 605 Mar 18 20:28 .jp1.tar.gz 权限信息 属主 属组 文 ...