前端HTML

HTML

一、Web服务本质

import socket

server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(('127.0.0.1', 8080))
server.listen(5)

while True:
    conn, client_addr = server.accept()
    data_bytes = conn.recv(1024)
    print(data_bytes)
    conn.send(b'http/1.1 200 OK \r\n\r\n')
    # 1. 纯文本
    # conn.send(b'hello world!')

    # 2. 标签
    # conn.send(b'<h1>hello world!</h1>')

    # 3. 使用文件方式
    """
    文件内容如下:
    <h1>hello world!</h1>
    <a href="https://www.mzitu.com/">click me! give you some color to see see!</a>
    <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />
    """
    with open('a.txt', 'rb') as f:
        conn.send(f.read())
    conn.close()


"""
=================== 请求首行 ===================
b'GET / HTTP/1.1\r\n

=================== 请求头 ===================   
Host: 127.0.0.1:8080\r\n  
Connection: keep-alive\r\n
Pragma: no-cache\r\n
Cache-Control: no-cache\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8\r\n

=================== \r\n ===================
\r\n'  

=================== 请求体. 只有收到post请求方式才有 ===================

"""

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

二、HTML简介

如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法

我们浏览器看到的页面,内部其实都是HTML代码(所有的网站内部都是HTML代码)

补充: 除了HTML可以书写前端页面之外, 还有XML也可以书写前端页面, 具有代表性的odoo框架内部的前端页面全部是用XML书写的. 还有就是公司内部会使用一种管理软件ERP, 也可以实现前端页面的书写.

1. HTML是什么?
CopyHTML是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
网页文件的扩展名:.html或.htm
2. 注意: HTML不是编程语言

HTML是一种标记语言(markup language),它不是一种编程语言。

HTML使用标签来描述网页。

img

三. 两种打开HTML文件的方式

"""
方式一: 找到文件所在的位置右键选择浏览器打开
方式二: 在pycharm内部,集成了自动调用浏览器的功能,直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器
"""

四. HTML注释

注释是代码之母

<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->


由于HTML代码非常的杂乱无章并且很多,所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->

五. <!DOCTYPE>

"""
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

<!DOCTYPE> 这种文档声明不是 HTML 标签, 它只是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
"""

六. HTML文档结构

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

<!--<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。-->
<html lang="zh-CN">

<!--<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的.-->
<head>
  <meta charset="UTF-8">

  <!--定义了网页标题,在浏览器标题栏显示。-->
  <title>css样式优先级</title>
</head>

<!--<body>、</body>之间的文本是可见的网页主体内容。body内的标签 写什么浏览器就渲染什么 用户就能看到什么.-->
<body>

</body>
</html>

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

**补充: **HTML代码是没有格式的,可以全部写在一行都没有问题,只不过我们习惯了缩进来表示代码标签的分类:

七. 标签的分类1: 单/双标签

<h1></h1>
<a href="https://www.mzitu.com/"></a>
<img/>

1  双标签
2  单标签(也叫自闭和标签)

八. HTML标签格式

# 介绍
"""
HTML标签是由尖括号包围的关键字,如<html>, <div>等

HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线。

也有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src="1.jpg" />等。

标签里面可以有若干属性,也可以不带属性。
"""

# 标签的语法
"""
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

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


# 标签具有的几个重要属性
"""
id:定义标签的唯一ID,HTML文档树中唯一. 类似于标签的身份证号 在同一个html页面上id值不能重复

class:为html元素定义一个或多个类名(classname)(CSS样式类名). 该值有点类似于面向对象里面的继承 一个标签可以继承多个class值

style:规定元素的行内样式(CSS样式)
"""


# 标签既可以有默认的书写属性也可以有自定义的书写属性
"""
<p id="d1" class="c1" username="jason" password="123"></p>
"""

九. head内常用标签

1. 基本标签
<!--title: 定义网页标题-->
<title>Title</title>

<!--style: 定义内部样式表. 内部用来书写css代码-->
<style>
    h1 {
     
        color: greenyellow;
    }
</style>

<!--script: 内部用来书写js代码-->
<script>
    alert(123)
</script>
<!--script: 还可以引入外部js文件-->
<script src="myjs.js"></script>

<!--link: 引入外部css文件 或 网站图标-->
<link rel="stylesheet" href="mycss.css">
2. meta标签
# Meta标签介绍
"""
<meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。

<meta>标签位于文档的头部,不包含任何内容。

<meta>提供的信息是用户不可见的。
"""

# meta标签的组成
"""
meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
"""
  • http-equiv 属性: 相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。补充: equiv 全称 equivalent /ɪˈkwɪvələnt/ 相等的 等值 相当于
<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset="UTF8">  
                                          
<!--2秒后跳转到对应的网址,注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
                                                                    
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
  • name 属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<!-- 当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户 -->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<!-- 网页的描述性信息 -->
<meta name="description" content="老男孩教育Python学院">
3. 总结
<title>网页标题</title>

<style></style>
<!--rel	Reload 加载-->
<!--href hypertext reference 超文本引用-->
<link rel
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值