用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键所以复制后请将代码格式化成这样
好了，今天就到这里了，敬请期待！
原文地址：https://blog.csdn.net/2401_82944012/article/details/140577490
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！