整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頻地址：
HTML網(wǎng)頁(yè)設(shè)計(jì)零基礎(chǔ)入門教程（一），兩分鐘學(xué)會(huì)設(shè)計(jì)第一個(gè)網(wǎng)頁(yè)。
文案：
大家好，我是老K。一個(gè)碼齡超過(guò)10年的程序員。從今天起，我會(huì)給大家介紹，Web網(wǎng)站開(kāi)發(fā)的最基本語(yǔ)言：HTML。本期視頻給大家介紹怎么編寫第一個(gè)網(wǎng)頁(yè)。什么是HTML呢？HTML就是超文本標(biāo)記語(yǔ)言，用來(lái)標(biāo)記通過(guò)互聯(lián)網(wǎng)傳輸?shù)木W(wǎng)頁(yè)的格式。用HTML標(biāo)記的網(wǎng)頁(yè)是靜態(tài)網(wǎng)頁(yè)，后綴名一般是.html或.htm。靜態(tài)網(wǎng)頁(yè)制作完成以后，其內(nèi)容不會(huì)變化。如果要修改內(nèi)容，必須修改源文件。
HTML用各種元素組織文檔，用一對(duì)尖括號(hào)標(biāo)記元素的開(kāi)始和結(jié)束。兩個(gè)尖括號(hào)里面的表示元素的內(nèi)容。例如：<title>人工智能</title>，表示網(wǎng)頁(yè)的標(biāo)題是，人工智能。所有的,web,設(shè)計(jì)語(yǔ)言都以HTML為基礎(chǔ)。編寫HTML，很簡(jiǎn)單。使用windows自帶的，記事本，就可以編寫。首先，創(chuàng)建一個(gè)文本文檔。用記事本打開(kāi)文檔，輸入HTML代碼。我們先來(lái)看一下效果，稍后我會(huì)詳細(xì)介紹源文件的內(nèi)容。保存以后，關(guān)閉記事本。重命名文本文件，把后綴名改為html。用瀏覽器打開(kāi)網(wǎng)頁(yè)，就看到效果了。
我們來(lái)看源文件。
第一個(gè)元素，HTML,是頂級(jí)元素。所有的元素都包含在它里面。
第二個(gè)元素，head，表示文檔的頭部信息。
第三個(gè)元素，title，是head的子元素，表示網(wǎng)頁(yè)的標(biāo)題.
第四個(gè)元素，body，是網(wǎng)頁(yè)的主體部分。
body，元素的內(nèi)容是一句文本：世界，你好。
好了，這就是本期視頻的內(nèi)容。謝謝觀看！再見(jiàn)！
源文件：
<html>
<head>
<title>This is the fisrt page</title>
</head>
<body>
Hello, world!
</body>
</html>
提條件：
電腦有至少一個(gè)瀏覽器
1.創(chuàng)建txt文件
右鍵桌面空白處選擇新建txt文件
2.在搜索引擎中搜索HTML入門
將圖中的模板文件內(nèi)容復(fù)制到TXT文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>hello world!</p>
</body>
</html>
3.將文件后綴“txt”改為“html”使用瀏覽器打開(kāi)（如果有瀏覽器那么直接雙擊打開(kāi)即可）
4.第一個(gè)簡(jiǎn)單的HTML網(wǎng)頁(yè)就成功了
5.以下是簡(jiǎn)單的一些網(wǎng)頁(yè)標(biāo)簽元素
（OF作品展示）
OF之前介紹了用python實(shí)現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項(xiàng)目，但基本都是后端的知識(shí)。想要做一個(gè)好看的小系統(tǒng)，我們還要學(xué)一些前端的知識(shí)，今天OF將講解如何用pycharm（全棧開(kāi)發(fā)不錯(cuò)的工具）做一張好看的網(wǎng)頁(yè)，以后我們就可以自己開(kāi)發(fā)網(wǎng)頁(yè)/網(wǎng)站放到互聯(lián)網(wǎng)上。
主要內(nèi)容：網(wǎng)頁(yè)前端布局
適用人群：Python初學(xué)者，前端初學(xué)者
準(zhǔn)備軟件：pycharm
1) 下載完成pycharm, 點(diǎn)擊file-New Project...
2) 按下圖步驟創(chuàng)建一個(gè)項(xiàng)目，目前我們選擇Pure python即可，以后我們可以學(xué)習(xí)用Django/flask等框架來(lái)做完整的系統(tǒng)
1）在創(chuàng)建的項(xiàng)目空白處鼠標(biāo)右鍵-New-HTML File
2）輸入英文的網(wǎng)頁(yè)名字，盡量不要輸入中文/特殊字符
當(dāng)雙擊打開(kāi)我們創(chuàng)建后的HTML文件，大家會(huì)看到下面的界面
在開(kāi)始開(kāi)發(fā)網(wǎng)頁(yè)前，我們需要自己設(shè)計(jì)下想要把網(wǎng)頁(yè)做成什么樣，為了節(jié)省成本OF都是自己設(shè)計(jì)的頁(yè)面樣式，可以手繪，也可以在PPT上畫。
我們先學(xué)習(xí)一個(gè)比較簡(jiǎn)單的布局如下圖，大家可以看到下圖已經(jīng)畫出了我們需要添加的內(nèi)容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會(huì)是左右的關(guān)系，而不是上下
根據(jù)上述的css名字定義，先填充<body>內(nèi)的代碼，那么我們就完成一半的工作了，代碼如下：
<!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）鼠標(biāo)移到代碼處，在右上角我們會(huì)看到一排瀏覽器，我們點(diǎn)擊其中一個(gè)運(yùn)行
2）目前看到的網(wǎng)頁(yè)內(nèi)容從上到下顯示
首先我們簡(jiǎn)要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個(gè)顏色內(nèi)容框在<div id="main">中，運(yùn)行結(jié)果是3個(gè)顏色的內(nèi)容橫向展示了，而不是上下
1）那么我們先從“人物介紹”的布局開(kāi)始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準(zhǔn)備用border樣式來(lái)實(shí)現(xiàn)，所以在<div id=intro>里另加了個(gè)<div class=peo>，代碼如下：
(注：style中的#main對(duì)應(yīng)body中的id=main, .main對(duì)應(yīng)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>運(yùn)行結(jié)果：
2）圖片部分是3個(gè)<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設(shè)置flex布局，在<style>里加入以下代碼：
#pic1 {
display: -webkit-flex; /* Safari */
display: flex;
justify-content: center;
}運(yùn)行結(jié)果：
3）圖片之間靠太近，圖片大小不一致，文字沒(méi)居中，我們?cè)?lt;style>里加入以下代碼：
.bord{
padding: 1rem 2rem;
}
.img {
border: 0.2rem solid #e3e3e3;
max-width: 15rem;
height: 22rem;
}
.word {
text-align: center;
}運(yùn)行結(jié)果：
今天我們學(xué)會(huì)了flex布局，今后所有的網(wǎng)頁(yè)排版都可以實(shí)現(xiàn)了，祝愿大家都有所收獲，完整的代碼如下：
<!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>今天的知識(shí)比較基礎(chǔ)但非常實(shí)用，每天學(xué)會(huì)一個(gè)小技能，積少成多，以后就能成為大神。如果大家對(duì)網(wǎng)頁(yè)上的實(shí)現(xiàn)有什么不懂的，盡請(qǐng)留言，OF一定會(huì)一一解答的。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
