当前位置：首页 > news >正文

用html做python教程01

news 2025/7/4 23:59:52

用html做python教程01

前言
开肝
- 构思
- 实操
- 额外修饰
- 更换字体
- 自适应
最后

前言

今天打开csdn的时候，看见csdn给我推荐了一个python技能书。
在这里插入图片描述
说实话，做得真不错。再看看我自己，有亿点差距😟。

开肝

先创建一个文件，后缀名为.html然后用vscode运行。
一个英文感叹号回车，跳出：
在这里插入图片描述
然后就可以开始我们的教程了。

构思

我们要用h系列的标签，也就是h1、h2、h3、h4、h5、h6，我们还要用到p、div、a、image，或许还会用到正则表达式来判断，我们先来构思第一节的内容，博主的文采不咋地，我以后打的标签里的内容都是可以修改的，说实话，这是一项大工程，估计今天完成不了。

实操

研究一下，左边是导航栏，右边则是内容。like这样：
在这里插入图片描述
来自：https://www.runoob.com/w3cnote/htmlcss-make-a-website.html
那我们就开始吧，先搭小框架，这是我搭的：

    <div class="box"><h1></h1><h2></h2></div><div class="under"><div class="part"><h2></h2><h3></h3><p></p></div><div class="main"><h2></h2><h3></h3><p></p><h3></h3><p></p><h3></h3><p></p><h3></h3><p></p></div></div>

差不多，运行一下，如果什么都没有就对了。
之后就开始调整div的大小长宽，颜色，位置，内间距，外间距，占屏幕大小。
注意外间距是padding，内间距是margin语句。然后我自己简单的调了一下，这是代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.under{display: flex;justify-content: center;text-align: center;}.main{width: 80%;background: #fff;height: 900px;}.part{width: 20%;background: rgb(200,200,200);height: 900px;}.box{background: #c48f11;width: 100%;height: 300px;}</style>
</head>
<body><div class="box"><h1></h1><h2></h2></div><div class="under"><div class="part"><h2></h2><h3></h3><p></p></div><div class="main"><h2></h2><h3></h3><p></p><h3></h3><p></p><h3></h3><p></p><h3></h3><p></p></div></div>
</body>
</html>

运行一下：
在这里插入图片描述
nice，接下来就先填充文本了，那我们这次的python教程就打上print()和变量的概念，听起来很不错，这是我的结果（我随便填充的，大家可以随意改）:

nice，这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.under{display: flex;justify-content: center;text-align: center;text-align: left !important;}.main{margin: 20px;width: 80%;background: #fff;height: 750px;padding: 30px;}.part{width: 20%;background: rgb(200,200,200);height: 750px;}h1{font-size: 30;}h3{font-size: 22px;}p{font-size: 18px;}.part{padding: 20px;}.box{justify-content: center;text-align: center !important;background: #c48f11;width: 100%;height: 300px;overflow: hidden;}</style>
</head>
<body><div class="box"><h1>Python教程</h1><h2>第一课:print()语句和数据类型</h2></div><div class="under"><div class="part"><h2>关于我</h2><p>姓名:MMO死神永生</p><p>爱好:敲代码</p><p>外号:电脑终结者</p></div><div class="main"><h3>print()语句</h3><p>print()语句是python用来输出的一个自带的函数，用法很简单，只需要在print()语句当中放上你想要打印的东西，它就会在运行之后在控制台输出print()语句中的东西,例如在代码区输入:print('Hello World')，运行代码后，控制台就会多出一行Hello World</p><h3>数据类型</h3><p>肯定有些小朋友会很疑惑，为何什么上文中的Hello World加上了英文的上下引号，其实就是因为python有一个叫数字类型的东西。我们常见的数据类型有很多，列如：字符串、整数、浮点数、布尔值。还有一些存储其他东西，比如：列表、元组、字典、json等 </p><p>我们这次主要要讲的是字符串、整数、浮点数。</p><p>字符串就是我们平时说话用的字，英文字母，英文单词，可以查看Unicode或者是Ascll这两个是我们常用的编码方式，存储着各种语言、表情包等。</p><p>整数就是数字，也就是数学概念中的自然数</p><p>浮点数就是小数，包括整数。</p><h2>最后</h2><p>好了，今天就到这里了，敬请期待！</p></div></div>
</body>
</html>

额外修饰

我们可以为这些字添加字体，还可以为这个网页添加自适应，听起来很不错。
（注：自适应原名是响应式，我喜欢叫它自适应）

更换字体

1.打开浏览器，搜索下载免费字体
在这里插入图片描述
2.进入，网页下载自己喜欢的字体，在将字体放到我们编程文件的文件夹中。

不要看文件夹，直接把里面的.tff复制到编程的文件夹。

这是我的，之后就开始运用像这样：

在style标签打上@font-face{}其中font-family填的是你将这种字体在本文件中的命名。src:url填的是我们刚刚复制到文件夹中的.ttf格式的文件路径。
最后在你想要更换字体的地方输入font-famil: ;其中填的是你在@font-face{}中给此字体的命名。像我这样，效果：
在这里插入图片描述

自适应

用到的主要语句是@media screen语句，像这句：

@media screen and (max-width:768px){}

它的意思就是当屏幕分辨率最大宽度是768个像素时（因为一般的手机是768px）运行大括号里的内容。
好了开始我们的代码：我们想在为电脑分辨率时，让它的主题变为全部宽度的80%并居中，当它为平板分辨率时占满屏，当是手机分辨率时收起自我介绍那一栏，变成一个菜单按钮，按下时展开，菜单按钮变成一个×，在按下×时再变回原来的菜单按钮，并且自我介绍那一栏收起。
这是我的代码：
在这里插入图片描述
这是我写的，当在电脑分辨率时，宽度80%，其余两种大家可以自行研究