整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
英國《太陽報》報道，菲律賓一位網頁設計師為了向自己的職業致敬，給自己的兒子取名為“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）”。還有人對寶寶的名字表示了擔憂評論道：“將來，他可能會成為被欺負和被嘲笑的對象?！?/p>
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是代表著網頁的框碼，頭部就是放一些文文件的，這個就是寫正文，就是內容來的?，F在把選一個，這是保存一下，打開，現在就可以了。
·現在標題是沒有的，現在就用一下常用的代碼標題。來到這邊pat里面寫標題，這是標題的意思是網頁的標題，這是一個標題，保存。
·刷新一下頁面，標題在這邊。
·然后來看一下常用的，h1到h6就是定義文檔的標題，h1的值最大，h6的值最小，一一四排，排一減的。
·比如來一個h1對比一下，保存，刷新，h1的最大，s3的就小一點，s6的最小。
·現在來看一下p就是定義段落，寫完章之后有很多一段，一段是有很多行字的。比如寫個p，這邊可以寫很多句話，比如隨便寫，這么長一段字，這里很長的。
·假如要換行就用到標標簽，換行標簽b r，就從這里加的，這叫打算考，后面加的pr，所以就換行了。
·定義超鏈接，平常上完之后就會點擊，點擊到一些東西會跳到另外一個頁面或者會進行下載，是不是就是利用標標簽的。
·邊選跳到百度，跳到百度，看一下，跳不了，原因是還要選地址，a碼是條連起來的，寫個地址，h r，跳到百度，點c o n，保存，刷新，點擊一下，跳來了，不過電。
先這樣，有事，拜拜。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
