用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

那我们就开始吧，先搭小框架，这是我搭的：

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语句。然后我自己简单的调了一下，这是代码：

html 复制代码

<!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，这是我的代码：

html 复制代码

<!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语句，像这句：

html 复制代码

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

它的意思就是当屏幕分辨率最大宽度是768个像素时（因为一般的手机是768px）运行大括号里的内容。

好了开始我们的代码：我们想在为电脑分辨率时，让它的主题变为全部宽度的80%并居中，当它为平板分辨率时占满屏，当是手机分辨率时收起自我介绍那一栏，变成一个菜单按钮，按下时展开，菜单按钮变成一个×，在按下×时再变回原来的菜单按钮，并且自我介绍那一栏收起。

这是我的代码：

这是我写的，当在电脑分辨率时，宽度80%，其余两种大家可以自行研究

最后

时间不够，下次再见，敬请期待!