整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
英国《太阳报》报道，菲律宾一位网页设计师为了向自己的职业致敬，给自己的儿子取名为“Hypertext Mark-up Language（超文本标记语言）”。这位叫做Mac Pascual的父亲表示，给新生儿取个独一无二的名字是他们家族的传统。他对自己的工作充满热情，决定给自己的宝宝取名为HTML。据媒体报道，这个宝宝出生在当地的布拉坎医疗集团合作医院，体重2.25公斤。
6月10日，HTML的姑姑Salie Rayo Pascual拍下了这个可爱侄子的照片，并把照片发布到了Facebook上，标题是“HTML，欢迎来到这个世界”。这篇帖子很快引起了网友们的关注，大家纷纷评论并转发了这个帖子。不过，还是有一些社交媒体用户对这个奇特的名字进行了一番嘲笑，并嘲讽般地建议他给未来的孩子用一些其他的编码缩写来当名字，比如“Results-based management system”、“JavaScript”，或者是“Cascading Style Sheets（CSS）”。还有人对宝宝的名字表示了担忧评论道：“将来，他可能会成为被欺负和被嘲笑的对象。”
HTML的爸爸解释说，他自己的名字“Mac”就是“Macaroni'85”的缩写，而他姐姐的名字是“Spaghetti'88（意大利面）”的缩写。他的姐姐有两个孩子，分别叫“Cheese Pimiento（辣椒奶酪）”和“Parmesan Cheese（帕尔玛奶酪）”，所以他们的小名分别是“Chippy”和“Peewee”。HTML和其他名字不同寻常的婴儿一样，从出生起就成为了人们讨论的话题。特斯拉的首席执行官Elon Musk和Claire Boucher（Grimes）就给自己的儿子取名为“X ? A-12 Musk”，因而上了新闻头条。今年早些时候，模特兼女演员Emily Ratajkowski 通过社交媒体宣布，她将给自己刚出生的宝宝取名为“Sylvester Apollo Bear”。（中国青年网编译报道）
来源：中国青年网
（OF作品展示）
OF之前介绍了用python实现数据可视化、数据分析及一些小项目，但基本都是后端的知识。想要做一个好看的小系统，我们还要学一些前端的知识，今天OF将讲解如何用pycharm（全栈开发不错的工具）做一张好看的网页，以后我们就可以自己开发网页/网站放到互联网上。
主要内容：网页前端布局
适用人群：Python初学者，前端初学者
准备软件：pycharm
1) 下载完成pycharm, 点击file-New Project...
2) 按下图步骤创建一个项目，目前我们选择Pure python即可，以后我们可以学习用Django/flask等框架来做完整的系统
1）在创建的项目空白处鼠标右键-New-HTML File
2）输入英文的网页名字，尽量不要输入中文/特殊字符
当双击打开我们创建后的HTML文件，大家会看到下面的界面
在开始开发网页前，我们需要自己设计下想要把网页做成什么样，为了节省成本OF都是自己设计的页面样式，可以手绘，也可以在PPT上画。
我们先学习一个比较简单的布局如下图，大家可以看到下图已经画出了我们需要添加的内容，要注意的地方是比如Taylor的图片和文字一定要用<div class=bord>框住，否则Taylor图片与文字将会是左右的关系，而不是上下
根据上述的css名字定义，先填充<body>内的代码，那么我们就完成一半的工作了，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="intro">
<p class="peo">人物介绍</p>
</div>
<div id="pic1">
<div class="bord">
<img class="img" src="pic/Taylor.png"/>
<p class="word">Taylor</p>
</div>
<div class="bord">
<img class="img" src="pic/yan.png"/>
<p class="word">东</p>
</div>
<div class="bord">
<img class="img" src="pic/song.png"/>
<p class="word">乔</p>
</div>
</div>
</body>
</html>1）鼠标移到代码处，在右上角我们会看到一排浏览器，我们点击其中一个运行
2）目前看到的网页内容从上到下显示
首先我们简要了解下flex布局，大家可以看到下图中#main的style样式中display:flex，在body部分将3个颜色内容框在<div id="main">中，运行结果是3个颜色的内容横向展示了，而不是上下
1）那么我们先从“人物介绍”的布局开始，“人物介绍”居中展现（用flex中justify-content:center），而且下面有一条黑线，OF准备用border样式来实现，所以在<div id=intro>里另加了个<div class=peo>，代码如下：
(注：style中的#main对应body中的id=main, .main对应class=main)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#intro {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
.peo {
max-width: 10rem;
border-bottom: 0.2rem solid #000000;
font-family: sans-serif;
font-size: 1.5rem;
color: #0070C0;
line-height: 3rem;
}
</style>
</head>
<body>
<div id="intro">
<p class="peo">人物介绍</p>
</div>
<div id="pic1">
<div class="bord">
<img class="img" src="pic/Taylor.png"/>
<p class="word">Taylor</p>
</div>
<div class="bord">
<img class="img" src="pic/yan.png"/>
<p class="word">东</p>
</div>
<div class="bord">
<img class="img" src="pic/song.png"/>
<p class="word">乔</p>
</div>
</div>
</body>
</html>运行结果：
2）图片部分是3个<div class=bord>横向展示，所以要在框住它们的<div id=pic1>样式中设置flex布局，在<style>里加入以下代码：
#pic1 {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}运行结果：
3）图片之间靠太近，图片大小不一致，文字没居中，我们在<style>里加入以下代码：
.bord{
padding: 1rem 2rem;
}
.img {
border: 0.2rem solid #e3e3e3;
max-width: 15rem;
height: 22rem;
}
.word {
text-align: center;
}运行结果：
今天我们学会了flex布局，今后所有的网页排版都可以实现了，祝愿大家都有所收获，完整的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#intro {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
.peo {
max-width: 10rem;
border-bottom: 0.2rem solid #000000;
font-family: sans-serif;
font-size: 1.5rem;
color: #0070C0;
line-height: 3rem;
}
#pic1 {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}
.bord{
padding: 1rem 2rem;
}
.img {
border: 0.2rem solid #e3e3e3;
max-width: 15rem;
height: 22rem;
}
.word {
text-align: center;
}
</style>
</head>
<body>
<div id="intro">
<p class="peo">人物介绍</p>
</div>
<div id="pic1">
<div class="bord">
<img class="img" src="pic/Taylor.png"/>
<p class="word">Taylor</p>
</div>
<div class="bord">
<img class="img" src="pic/yan.png"/>
<p class="word">东</p>
</div>
<div class="bord">
<img class="img" src="pic/song.png"/>
<p class="word">乔</p>
</div>
</div>
</body>
</html>今天的知识比较基础但非常实用，每天学会一个小技能，积少成多，以后就能成为大神。如果大家对网页上的实现有什么不懂的，尽请留言，OF一定会一一解答的。
一课认识了什么是网页，这节课来讲一下制作网页的常用标签。先来回顾一下上一节课。
·双击一下这边新建一个文件，先保存一下，起个名字，随便起。
·ai，一定要记得写点html后缀，保存。
·然后来打标签，html做网页一定得打这一个，一定一点有的，还有head头部是得有的。
·body是代表着网页的框码，头部就是放一些文文件的，这个就是写正文，就是内容来的。现在把选一个，这是保存一下，打开，现在就可以了。
·现在标题是没有的，现在就用一下常用的代码标题。来到这边pat里面写标题，这是标题的意思是网页的标题，这是一个标题，保存。
·刷新一下页面，标题在这边。
·然后来看一下常用的，h1到h6就是定义文档的标题，h1的值最大，h6的值最小，一一四排，排一减的。
·比如来一个h1对比一下，保存，刷新，h1的最大，s3的就小一点，s6的最小。
·现在来看一下p就是定义段落，写完章之后有很多一段，一段是有很多行字的。比如写个p，这边可以写很多句话，比如随便写，这么长一段字，这里很长的。
·假如要换行就用到标标签，换行标签b r，就从这里加的，这叫打算考，后面加的pr，所以就换行了。
·定义超链接，平常上完之后就会点击，点击到一些东西会跳到另外一个页面或者会进行下载，是不是就是利用标标签的。
·边选跳到百度，跳到百度，看一下，跳不了，原因是还要选地址，a码是条连起来的，写个地址，h r，跳到百度，点c o n，保存，刷新，点击一下，跳来了，不过电。
先这样，有事，拜拜。
*请认真填写需求信息，我们会在24小时内与您取得联系。
