用HTML做python教程02

用HTML做python教程02

前言

我们上次用HTML做了一个python教程关于数据类型和print()python的内置函数,上次留了个小尾巴,这次补上

上次的代码

上次最后将了响应式,或者说是自适应,具体代码如下:

<!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;
            transition: 1s;
        }

        .main {
            margin: 20px;
            width: 70%;
            background: #fff;
            height: 750px;
            padding: 30px;
            transition: 1s;
        }

        .part {
            width: 30%;
            background: rgb(200, 200, 200);
            height: 4050px;
            transition: 1s;
            padding: 20px;
        }

        h1 {
            font-size: 30;
            font-family: font;
            transition: 1s;
        }

        h3 {
            font-size: 22px;
            font-family: font;
            transition: 1s;
        }

        p {
            font-size: 18px;
            font-family: font;
            transition: 1s;
        }


        h2 {
            font-family: font;
            transition: 1s;
        }
        ul>li{
            font-family: font;
            transition: 1s;
        }
        .box {
            justify-content: center;
            text-align: center !important;
            background: #c48f11;
            width: 100%;
            height: 200px;
            transition: 1s;
            overflow: hidden;
        }
        .guide{
            left:2.25%;
            top: 70%;
            height: 30%;
            width: 15%;
            background: rgba(255,255,255,0);
            border-radius: 15px;
            position: fixed;
            transition: 1s;
        }
        a{color:#000;}
        a:visited{color:#000;}
        a:hover {color:#000;}
        a:active {color:#000;}
        @font-face {
            font-family: "font";
            src: url("YeZiGongChangZhaoPaiTi-2.ttf");
        }
        @media screen and (max-width: 1000px) {
            body {
                transition: 1s;
                width: 100%;
            }
        }
        @media screen and (max-width: 900px) {
            body {
                transition: 1s;
                width: 80%;
                margin-left: 10%;
            }
        }
    </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 class="guide">
                <p><a href="#first_part">print()语句</a></p>
                <p><a href="#second_part">数据类型</a></p>
                <p><a href="#third_part">最后</a></p>
            </div>
        </div>
        <div class="main">
            <h3 id="first_part">print()语句</h3>
            <p>print()语句是python用来输出的一个自带的函数,用法很简单,只需要在print()语句当中放上你想要打印的东西,它就会在运行之后在控制台输出print()语句中的东西,例如在代码区输入:print('HelloWorld'),运行代码后,控制台就会多出一行Hello
                World</p>
            <h3 id="second_part">数据类型</h3>
            <p>肯定有些小朋友会很疑惑,为何什么上文中的Hello
                World加上了英文的上下引号,其实就是因为python有一个叫数字类型的东西。我们常见的数据类型有很多,列如:字符串、整数、浮点数、布尔值。还有一些存储其他东西,比如:列表、元组、字典、json等 </p>
            <p>我们这次主要要讲的是字符串、整数、浮点数。</p>
            <p>字符串就是我们平时说话用的汉字,英文字母,英文单词,可以查看Unicode或者是Ascll这两个是我们常用的编码方式,存储着各种语言、表情包等。</p>
            <p>整数就是数字,也就是数学概念中的自然数</p>
            <p>浮点数就是小数,包括整数。</p>
            <h3 id="third_part">最后</h2>
            <p>好了,今天就到这里了,敬请期待!</p>
        </div>
    </div>
</body>

</html>

这里引用了我自己下载的字体。大家如果不要字体可以将@family-face删了,记住所有的。否则会报错。
其中@media-screen就是响应式,大家可以自行研究。
这里面还有我自己加的导航栏,也就是今天的新知识。
我将导航栏设置成在左下角,无论你怎么滑动界面它都不会动,最终结果长这样。
在这里插入图片描述
在这里插入图片描述
很简单。

正文

开始我们今天的内容,今天我的计划的教程是数据类型细讲、打印某数据的数据类型、以及制作数据类型转换器。
我们今天要学习导航栏、ul和li标签就是列表。
首先先上我们今天最后的代码:

<!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;
            transition: 1s;
        }

        .main {
            margin: 20px;
            width: 70%;
            background: #fff;
            height: 750px;
            padding: 30px;
            transition: 1s;
        }

        .part {
            width: 30%;
            background: rgb(200, 200, 200);
            height: 4050px;
            transition: 1s;
            padding: 20px;
        }

        h1 {
            font-size: 30;
            font-family: font;
            transition: 1s;
        }

        h3 {
            font-size: 22px;
            font-family: font;
            transition: 1s;
        }

        p {
            font-size: 18px;
            font-family: font;
            transition: 1s;
        }


        h2 {
            font-family: font;
            transition: 1s;
        }
        ul>li{
            font-family: font;
            transition: 1s;
        }
        .box {
            justify-content: center;
            text-align: center !important;
            background: #c48f11;
            width: 100%;
            height: 200px;
            transition: 1s;
            overflow: hidden;
        }
        .guide{
            left:2.25%;
            top: 70%;
            height: 30%;
            width: 15%;
            background: rgba(255,255,255,0);
            border-radius: 15px;
            position: fixed;
            transition: 1s;
        }
        a{color:#000;}
        a:visited{color:#000;}
        a:hover {color:#000;}
        a:active {color:#000;}
        @font-face {
            font-family: "font";
            src: url("YeZiGongChangZhaoPaiTi-2.ttf");
        }
        @media screen and (max-width: 1000px) {
            body {
                transition: 1s;
                width: 100%;
            }
        }
        @media screen and (max-width: 900px) {
            body {
                transition: 1s;
                width: 80%;
                margin-left: 10%;
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>Python教程</h1>
        <h2>第二课:数据类型转换及打印某个数据的数据类型</h2>
    </div>
    <div class="under">
        <div class="part">
            <h2>关于我</h2>
            <p>姓名:MMO死神永生</p>
            <p>爱好:敲代码</p>
            <p>外号:电脑终结者</p>
            <div class="guide">
                <p><a href="#first_part">数据类型转换</a></p>
                <p><a href="#second_part">打印数据类型</a></p>
                <p><a href="#third_part">制作进制转换器</a></p>
            </div>
        </div>
        <div class="main">
            <h3 id="first_part">数据类型转换</h3>
            <p>首先我们得学会各个数据类型在python中的缩写</p>
            <ul>
                <li>字符串:str</li>
                <li>整数:int</li>
                <li>浮点数:float</li>
                <li>布尔值:bool</li>
            </ul>
            <p>这里在回顾一下,整数是数字,也就是自然数。</p>
            <p>浮点数就是小数,包括整数。</p>
            <p>字符串就是我们平时说话用的汉字,英文字母,英文单词,可以查看Unicode或者是Ascll这两个是我们常用的编码方式,存储着各种语言、表情包等。</p>
            <p>最后一个就是布尔值了,它只有两个值,一个是True,一个是False,分别对应正确与错误。</p>
            <p>而上文中的str、int、float、bool分别是用来将各种数据转换为字符串、整数、浮点数、布尔值的函数</p>
            <p>有的小朋友很好奇,函数是什么?函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段。 函数能提高应用的模块性,和代码的重复利用率。比如print()。但你也可以自己创建函数,这被叫做用户自定义函数。我们以后就会学到</p>
            <p>我们拿一个函数举列子,比如print('Hello World')</p>
            <p>print()就是函数,而'Hello World'就是一个参数。</p>
            <p>之后我们就开始学校,关于数据类型转换的函数。</p>
            <p>int('1')就会将'1'这个字符串转换为1也就是整数型,其他就不一一列举。</p>
            <p>我们还需要知道其他一些特殊情况。</p>
            <p>整数类型的0就等于布尔值的False</p>
            <p>整数和浮点数类型的除0、0.0以外的所有数都是True</p>
            <p>字符串不能转换为整数或浮点数、字符串中除了是None或空格等于布尔值的False其他都等于布尔值的True</p>
            <p>总结一下只要是空的都等于布尔值的False</p>
            <h3 id="second_part">打印数据类型</h3>
            <p>如果我们想要知道每个数据的数据类型该怎么办。我们要学会一个新的函数type()中文意思是类型。如果我们要打印数据的数据类型我们就可以这么做。print(type(1))。意思是判断1的数字类型,它会弹出<class = "int">这样就说明你对了</p>
            <p>我们还可以用数据类型做一下有意思的东西像将各种进制转换,首先我们得先了解一下进制,进制也就是进位计数制,是人为定义的带进位的计数方法(有不带进位的计数方法,比如原始的结绳计数法,唱票时常用的“正”字计数法,以及类似的tally mark计数)。 对于任何一种进制---X进制,就表示每一位上的数运算时都是逢X进一位。 十进制是逢十进一,十六进制是逢十六进一,二进制就是逢二进一,以此类推,x进制就是逢x进位。</p>
            <p>这里举一个例子比如二进制的100就是十进制的4。二进制的100不读成一百而读成一零零</p>
            <p>这里我们拓展几个函数。</p>
            <p>首先我们重新认识一下int()函数,它在python中原来长这样:int(x,base = 10).base是进制的意思。默认值为10,也就是10进制。x:待转换的字符串或数字。如果为字符串,必须是合法的数值表示形式,可包含正负号和小数点;如果为数字,则直接转换为整数。
                base:转换时使用的基数,默认值为10。例如,当base=2时,表示将二进制字符串转换为十进制整数;当base=16时,表示将十六进制字符串转换为十进制整数。这下就很清楚了。</p>
            <p>我们还要认识三个函数分别是oct、hex、bin。oct() oct函数将一个整数转换成 8 进制字符串。Python2.x 版本的 8 进制以 0 作为前缀表示。Python3.x 版本的 8 进制以 0o 作为前缀表示。</p>
            <p>hex() 函数用于将10进制整数转换成16进制,以字符串形式表示。</p>
            <p>在Python中bin()是一个内置函数,用于将整数(正整数或负整数)转换为二进制字符串表示形式。这个函数非常有用,特别是在处理与二进制数相关的任务时,如位操作、编码或解码二进制数据等。其中我们使用的计算机就是二进制的。</p>
            <h3 id="third_part">制作进制转换器</h3>
            <p>转进制要看你的逻辑好不好。反正我的逻辑不咋地。但经过我几夜的思考我找到了规律,最终在python中打出了转换进制的代码,像这样:</p>
            <ul>
                <li>2进制转10进制int(n,base = 2)</li>
                <li>2进制转8进制oct(int(n,base = 2))</li>
                <li>2进制转16进制hex(int(n,base = 2))</li>
                <li>8进制转10进制int(n,base = 8)</li>
                <li>8进制转2进制bin(int(n,base = 8))</li>
                <li>8进制转16进制hex(int(n,base = 8))</li>
                <li>10进制转8进制oct(int(n))</li>
                <li>10进制转2进制bin(int(n))</li>
                <li>10进制转16进制hex(int(n))</li>
                <li>16进制转8进制oct(int(n,16))</li>
                <li>16进制转2进制bin(int(n,16))</li>
                <li>16进制转10进制hex(int(n,16))</li>
            </ul>
            <p>最后我将它们组合了一下,做出了一个进制转换器,具体代码如下</p>
            <p>while True:</p>
            <p>base = int(input("请输入原数"))</p>
            <p>index_before = int(input("请输入原数的进制"))</p>
            <p>index_after = int(input("请输入你想转换后的进制"))</p>
            <p>if base == None:</p>
            <p>    break</p>
            <p>if index_before == 2 and index_after == 10:</p>
            <p>    print(int(base,base = 2))</p>
            <p>if index_before == 2 and index_after == 8:</p>
            <p>    print(oct(int(base,base = 2)))</p>
            <p>if index_before == 2 and index_after == 16:</p>
            <p>    print(hex(int(base,base = 2)))</p>
            <p>if index_before == 8 and index_after == 10:</p>
            <p>    print(int(base,base = 8))</p>
            <p>if index_before == 8 and index_after == 2:</p>
            <p>    print(bin(int(base,base = 8)))</p>
            <p>if index_before == 8 and index_after == 16:</p>
            <p>    print(hex(int(base,base = 8)))</p>
            <p>if index_before == 10 and index_after == 8:</p>
            <p>    print(oct(int(base)))</p>
            <p>if index_before == 10 and index_after == 2:</p>
            <p>    print(bin(int(base)))</p>
            <p>if index_before == 10 and index_after == 16:</p>
            <p>    print(hex(int(base)))</p>
            <p>if index_before == 16 and index_after == 8:</p>
            <p>    print(oct(int(base,16)))</p>
            <p>if index_before == 16 and index_after == 2:</p>
            <p>    print(bin(int(base,16)))</p>
            <p>if index_before == 16 and index_after == 10:</p>
            <p>    print(hex(int(base,16)))</p>
            <p>由于我的编辑器不支持tab键所以复制后请将代码格式化成这样</p>
            <img src="代码.jpg" alt="">
            <p>好了,今天就到这里了,敬请期待!</p>
        </div>
    </div>
</body>

</html>

我在制作导航栏的时候用了id选择器不是类也就是class选择器,我们看一下它们的区别。
类选择器允许以一种独立于文档元素的方式来指定样式,该选择器可以单独使用,也可以与其他元素结合使用。只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。类选择器通常以"."来定义
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。
这次我们用到a标签。也就是超链接,HTML a 元素(或称锚元素)可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。a 中的内容应该指明链接的目标。如果存在 href 属性
如果要访问外部链接(就是在本网页到其他网址不同的网页)就需要填写网址,如果要访问本网站的一部分就要填id或class,进行定位。
这一部分在我写的代码中id分别等于first_part、second_part、third_part。大家可以自行研究。
我还用到了ul和li标签。
HTML ul 元素表示无序的项目列表,通常渲染为项目符号列表。
HTML 元素用于表示列表中的项目。它必须包含在一个父元素中:有序列表(ol)、无序列表(ul)或菜单(menu)。在菜单和无序列表中,列表项通常使用项目符号显示。在有序列表中,通常在左侧显示一个升序计数器,如数字或字母.
非常的完美。

最后

将我们这节课的效果展示一下
在这里插入图片描述
这是这个网页里的内容:
数据类型转换
首先我们得学会各个数据类型在python中的缩写

字符串:str
整数:int
浮点数:float
布尔值:bool
这里在回顾一下,整数是数字,也就是自然数。

浮点数就是小数,包括整数。

字符串就是我们平时说话用的汉字,英文字母,英文单词,可以查看Unicode或者是Ascll这两个是我们常用的编码方式,存储着各种语言、表情包等。

最后一个就是布尔值了,它只有两个值,一个是True,一个是False,分别对应正确与错误。

而上文中的str、int、float、bool分别是用来将各种数据转换为字符串、整数、浮点数、布尔值的函数

有的小朋友很好奇,函数是什么?函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段。 函数能提高应用的模块性,和代码的重复利用率。比如print()。但你也可以自己创建函数,这被叫做用户自定义函数。我们以后就会学到

我们拿一个函数举列子,比如print(‘Hello World’)

print()就是函数,而’Hello World’就是一个参数。

之后我们就开始学校,关于数据类型转换的函数。

int(‘1’)就会将’1’这个字符串转换为1也就是整数型,其他就不一一列举。

我们还需要知道其他一些特殊情况。

整数类型的0就等于布尔值的False

整数和浮点数类型的除0、0.0以外的所有数都是True

字符串不能转换为整数或浮点数、字符串中除了是None或空格等于布尔值的False其他都等于布尔值的True

总结一下只要是空的都等于布尔值的False

打印数据类型
如果我们想要知道每个数据的数据类型该怎么办。我们要学会一个新的函数type()中文意思是类型。如果我们要打印数据的数据类型我们就可以这么做。print(type(1))。意思是判断1的数字类型,它会弹出这样就说明你对了

我们还可以用数据类型做一下有意思的东西像将各种进制转换,首先我们得先了解一下进制,进制也就是进位计数制,是人为定义的带进位的计数方法(有不带进位的计数方法,比如原始的结绳计数法,唱票时常用的“正”字计数法,以及类似的tally mark计数)。 对于任何一种进制—X进制,就表示每一位上的数运算时都是逢X进一位。 十进制是逢十进一,十六进制是逢十六进一,二进制就是逢二进一,以此类推,x进制就是逢x进位。

这里举一个例子比如二进制的100就是十进制的4。二进制的100不读成一百而读成一零零

这里我们拓展几个函数。

首先我们重新认识一下int()函数,它在python中原来长这样:int(x,base = 10).base是进制的意思。默认值为10,也就是10进制。x:待转换的字符串或数字。如果为字符串,必须是合法的数值表示形式,可包含正负号和小数点;如果为数字,则直接转换为整数。 base:转换时使用的基数,默认值为10。例如,当base=2时,表示将二进制字符串转换为十进制整数;当base=16时,表示将十六进制字符串转换为十进制整数。这下就很清楚了。

我们还要认识三个函数分别是oct、hex、bin。oct() oct函数将一个整数转换成 8 进制字符串。Python2.x 版本的 8 进制以 0 作为前缀表示。Python3.x 版本的 8 进制以 0o 作为前缀表示。

hex() 函数用于将10进制整数转换成16进制,以字符串形式表示。

在Python中bin()是一个内置函数,用于将整数(正整数或负整数)转换为二进制字符串表示形式。这个函数非常有用,特别是在处理与二进制数相关的任务时,如位操作、编码或解码二进制数据等。其中我们使用的计算机就是二进制的。

制作进制转换器
转进制要看你的逻辑好不好。反正我的逻辑不咋地。但经过我几夜的思考我找到了规律,最终在python中打出了转换进制的代码,像这样:

2进制转10进制int(n,base = 2)
2进制转8进制oct(int(n,base = 2))
2进制转16进制hex(int(n,base = 2))
8进制转10进制int(n,base = 8)
8进制转2进制bin(int(n,base = 8))
8进制转16进制hex(int(n,base = 8))
10进制转8进制oct(int(n))
10进制转2进制bin(int(n))
10进制转16进制hex(int(n))
16进制转8进制oct(int(n,16))
16进制转2进制bin(int(n,16))
16进制转10进制hex(int(n,16))
最后我将它们组合了一下,做出了一个进制转换器,具体代码如下

while True:

base = int(input("请输入原数"))

index_before = int(input("请输入原数的进制"))

index_after = int(input("请输入你想转换后的进制"))

if base == None:

break

if index_before == 2 and index_after == 10:

print(int(base,base = 2))

if index_before == 2 and index_after == 8:

print(oct(int(base,base = 2)))

if index_before == 2 and index_after == 16:

print(hex(int(base,base = 2)))

if index_before == 8 and index_after == 10:

print(int(base,base = 8))

if index_before == 8 and index_after == 2:

print(bin(int(base,base = 8)))

if index_before == 8 and index_after == 16:

print(hex(int(base,base = 8)))

if index_before == 10 and index_after == 8:

print(oct(int(base)))

if index_before == 10 and index_after == 2:

print(bin(int(base)))

if index_before == 10 and index_after == 16:

print(hex(int(base)))

if index_before == 16 and index_after == 8:

print(oct(int(base,16)))

if index_before == 16 and index_after == 2:

print(bin(int(base,16)))

if index_before == 16 and index_after == 10:

print(hex(int(base,16)))

由于我的编辑器不支持tab键所以复制后请将代码格式化成这样

好了,今天就到这里了,敬请期待!

  • 19
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值