前端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. postgresql中进行备份和回滚的常用sql语句小结

    最近在项目中需要对已有的部分数据库数据进行备份,通过搜索和实践,把常用的sql以及过程记录如下, 1.常用的备份数据库思路,把需要备份的数据放到一个新表中,这个新表的记录与需要备份的表完全一样,然后备 ...

  2. Spring Boot入门系列（十八）整合mybatis，使用注解的方式实现增删改查

    之前介绍了Spring Boot 整合mybatis 使用xml配置的方式实现增删改查,还介绍了自定义mapper 实现复杂多表关联查询.虽然目前 mybatis 使用xml 配置的方式 已经极大减轻 ...

  3. cb18a_c++_修改string对象的方法

    cb18a_c++_修改string对象的方法s.insert(p,t)s.insert(p, 'A'); //迭代器前插入As.insert<p,n,t)s.insert(p, 3, 'B') ...

  4. cc28c_demo.cpp,派生类的构造函数和析构函数-代码示范3

    cc28c_demo.cpp,派生类的构造函数和析构函数-代码示范3 //派生类的构造函数和析构函数//派生类的构造函数(执行步骤)//--执行基类的构造函数//--执行成员对象的构造函数//--执行 ...

  5. shellcode 免杀(一)

    工具免杀 选择了几个简单或者近期还有更新的免杀工具进行学习 ShellcodeWrapper https://github.com/Arno0x/ShellcodeWrapper 该工具的原理是使用异 ...

  6. 记录工作中遇到的BUG，经典的数据库时区问题和字段类型tinyint(1)问题

    记录工作中发现的相对而言经典的问题 [数据库时区问题] 我个人数据库配置为CST 如下 我们测试环境的数据库配置为UTC 如下 倘若我修改了测试环境数据库时区为CST.由此造成的问题是 系统读取到数据 ...

  7. Python在Linux下编译安装

    [准备环境] Linux centos [前言] 1 linux下默认带Python,带的是2.7版本的 ,如果需要升级版本,需要把系统的自带的Python改名或者卸载,再次安装你所需要的Python ...

  8. Asp.Net Core入门之静态文件

    静态文件(css,js,html等类型文件)通常位于 web根目录下,而ASP.Net Core框架默认内容根目录下的wwwroot文件夹为web根目录.这里简单解释下内容根目录:实际就是指包含可执行 ...

  9. C++ vector迭代器访问二维数组

    #include<iostream> #include<vector> int main(){ std::vector<int> arr(); // 创建一维数组 ...

  10. 13.DRF-版本

    Django rest framework源码分析(4)----版本 版本 新建一个工程Myproject和一个app名为api (1)api/models.py from django.db imp ...