前端HTML

最新推荐文章于 2023-04-24 15:15:48 发布

意大利面拌42号混凝土

最新推荐文章于 2023-04-24 15:15:48 发布

阅读量463

点赞数

分类专栏： python 文章标签： html

本文链接：https://blog.csdn.net/prigilm/article/details/121074592

版权

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使用标签来描述网页。

三. 两种打开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.47元/天解锁文章

意大利面拌42号混凝土

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端HTML

HTML文章目录HTML一、Web服务本质二、HTML简介1. HTML是什么？2. 注意: HTML不是编程语言三. 两种打开HTML文件的方式四. HTML注释五. 六. HTML文档结构七. 标签的分类1: 单/双标签八. HTML标签格式九. head内常用标签1. 基本标签2. meta标签3. 总结十. body内常用标签十一. 特殊符号十三. 常用标签十四. 标签的分类2: 块级/行内十五. img标签十六. a标签十七. 列表标签1. 无序列表2. 有序列表3. 定义列表(了解）十八. 表
复制链接

扫一扫