用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%，其余两种大家可以自行研究
最后
时间不够，下次再见，敬请期待!
