整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
019年的到來，我們看到了互聯網覆蓋了各行各業，無論是老板、高管、自由職業、創業ing、網店店主、B2B/B2C、網紅賣家等等，大都需要用到互聯網做事情。很多人都擁有自己的網站，但是這些網站卻大致相同，毫無特點，并且關鍵的數據信息和網頁訪問都受制于人。所以，擁有一個自己的網站，對于一些網店店家、網紅賣家、知名博主、創業者、企業家等人來說，是十分有必要的。
用相關工具做好網頁
把網頁復制到別人可以訪問到的地方
讓別人用一個網址可以訪問你的網頁
五分鐘演示如下：
本地雙擊打開文件，即可在瀏覽器看到
別人可以訪問的地方，我們稱之為“網站空間”，也就是我們的“服務器”。
把文件傳輸到服務器上，我們需要一個傳輸工具“FlashFTP”，購買好網站空間“服務器”之后，我們能看到服務器的詳細信息，如：IP地址，端口號，賬號，密碼等等，選擇默認配置好網站服務的“服務器”，把我們編寫的文件使用“FlashFTP”上傳到網站空間中的“www”文件夾中，等待上傳成功即可。
這個時候，我們可以用“IP地址+網址的路徑”進行訪問編寫的網頁，如下：
我們需要購買一個域名，比如我們訪問百度網站時輸入的網址 就是域名——“www.****.com”
購買好域名之后，我們在域名服務中找到解析，添加一條解析記錄，填寫主機記錄——www，類型——A，記錄值——[您購買的服務器IP地址]，保存等待幾秒鐘即可。
此時，我們就可以使用域名訪問網頁了
此時，三步做完，簡單的網頁就做好啦。
網站制作工具的三個基本組成：HTML、CSS、JavaScript
HTML（HyperText Markup Language）：超文本標記語言，創建瀏覽器可以識別的文本內容
CSS（CascadingStyleSheets）：層疊樣式表，用于網頁的樣式和布局
JavaScript：世界上最流行的腳本語言，為向 HTML 頁面增加交互性
HTML是一個十分鐘就能入門的語言，新手不需要掌握，現在的開發工具普遍可以自動生成，會打字就會寫網頁。從HTML開始做網頁就像從造螺絲開始做一部汽車，后來慢慢有了更簡便快捷的方法。
學習資源網上有很多，找到HTML、CSS、JavaScript即可開始入門學習，每一個知識點都可以進行實戰練習。
在任何瀏覽器上，點擊右鍵，可看到如下：
可以看到具體代碼，不過目前大多數是開發工具生成，完全手寫出來的很少
推薦使用開發工具：DreamWeaver，Sublime text，WebStorm，VS Code等等
新手工具（DW）使用介紹：
目前DW已經被開發人員淘汰，但是作為入門學習使用，仍然是一大利器。
使用到的工具：FlashFTP
ftp是指文件傳輸協議，文件傳輸協議ftp(file transfer protocol)是internet傳統的服務之一。ftp使用戶能在兩個聯網的計算機之間傳輸文件，它是internet傳遞文件最主要的方法。使用匿名(anonymous)ftp，用戶可以免費獲取internet豐富的資源。除此之外，ftp還提供登錄、目錄查詢、文件操作及其他會話控制功能。flashfxp是一款功能強大的fxp/ftp軟件，集各種優秀ftp工具軟件的優點于一身，同時還具備無需安裝，解壓即可使用的綠色軟件標準。
需要擁有的網站空間：服務器
購買渠道有某里云，某訊云等，購買最便宜的1核1G服務器即可夠用，購買時選擇已經配置好網站環境的服務器，先獲得服務器的詳細信息，如IP地址，端口，賬號密碼(可在購買時的網站里設置或重新設置)，通過FlashFTP登陸，彈出的鑒權窗口選擇允許，找到配置到的web服務器地址，這里找到www文件夾即可，把文件從桌面拖到www文件夾中，上傳成功即可使用IP地址+文件名訪問。
我們熟知的網址其實是一種域名，比如某寶的網址www.***.com，這里我們也去購買一個域名，跟服務器購買渠道相同即可，域名幾十塊上下一年，即買即用。
域名介紹：域名使用DNS解析協議，DNS解析協議將域名地址解析到IP地址，在全世界能上網的地方，只要輸入網址，即可看到我們的網頁。
域名購買成功后，進入域名解析，添加一條解析記錄，如上述過程中解說
等待幾分鐘即可生效，此時再訪問輸入網址即可
介紹一下大家訪問網站的過程
想即刻體驗網站開發效果的，可以下載自動生成模版的工具，即拖即看，各種模塊一應俱全，適合敏捷開發，需要一定基礎和時間去做微調。
什么學習HTML？
理解HTML代碼是制作網頁的基本技能。在互聯網高度發達的今天，網頁制作技術開始變的和修圖、處理視頻一樣重要。
第一，學會制作網頁就可以把自己想要展示的信息讓其他人使用瀏覽器觀看，無論是文字、照片還是視頻都可以通過瀏覽器觀看，甚至是分享自己制作的小游戲。
第二，理解網頁運行的基本原理后可以更好的瀏覽他人的網頁，尋找有用信息，更合理的使用第三方工具，簡單高效的制作自己的網頁。
HTML學習難度與重要性
HTML代碼本身非常容易理解，使用也非常簡單，但是單純使用HTML代碼寫出的網頁效果和我們平時看到的網頁相差甚遠。要想做出一個漂亮的頁面，我們還需要CSS和JavaScript的幫助。
HTML、CSS、JavaScript這些不同的代碼都有什么作用呢？簡單來說，HTML代碼可以為網頁提供基本內容，比如文字、圖片、音樂、視頻等。CSS代碼可以為頁面安排布局，比如標題的位置、字體、顏色、大小等，籠統的說就是為HTML代碼添加的內容增加樣式信息，例如修改位置、尺寸、顏色等屬性。JavaScript代碼可以為頁面提供交互（互動）功能，例如通過按鈕控制頁面內容的隱藏、出現，或者為多張圖片添加輪播功能等。
對比起來，HTML的學習難度最低，但作用是最重要的，因為一切頁面的基礎是內容，沒有內容，樣式與交互都不存在。
認識HTML基本結構
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
以上七行代碼是一個網頁文件的HTML代碼的基本結構。
大家觀察一下可以發現一個規律，每一行的內容都是寫在“<>”里面的。原因說來話長，先記住就行。每個寫在“<>”里面的內容叫做“標簽”。以后“標簽”這個詞會經常出現。
第一行<!DOCTYPE HTML>標簽指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令（這句話可以暫時不必理解）。重要的是這句傲嬌的代碼只能存在在HTML代碼的第一行！
第二行<html>標簽與第七行的</html>標簽是一對，“<html>”叫做開始標簽，“</html>”叫做結束標簽。他們之間的區別在于結束標簽比開始標簽多一個“/”。這是HTML代碼的一個重要規律，以后我將要學到的大部分標簽都是這樣的，可能瀏覽器有些強迫癥吧，如果沒有結束標簽它會很不舒服，有可能會消極怠工而產生麻煩（不能正常顯示）。不過遺憾的是<!DOCTYPE HTML>太傲嬌，至今沒有另一半。<html> 與 </html> 標簽限定了文檔的開始點和結束點。
第三行與第四行組成一對，叫做“head”標簽。顧名思義，這個“頭”標簽里的內容統領全局，比如控制布局與樣式的CSS代碼文件和添加互動功能的JavaScript代碼文件在這里添加或導入；搜索頁面用的關鍵詞信息在這里添加；頁面信息的編碼方式也是由此指定；瀏覽器窗口的標題也在這里顯示。
第五行與第六行組成一對，叫做“body”標簽。用來顯示所有的頁面內容信息。
畫個圖來表示一下這四個標簽的層級關系（就是誰包含誰的意思，或者誰在誰的勢力范圍內出現）：
邊學邊練------寫一個最簡單的頁面
正所謂萬丈高樓平地起，下面我們就動手做我們的第一個網頁文件。
工具：電腦，安裝一個瀏覽器（IE 火狐 谷歌瀏覽器都可以），確定“記事本”工具可用。
有了以上工具我們就可以寫了。
Step1 新建一個.txt文件。
操作如下：
（1）選擇合適的磁盤，比如D盤或F盤新建一個文件夾，命名為“網頁”。點擊進入。
（2）在空白處點擊鼠標右鍵新建一個文本文件，命名為“第一個頁面”。這時我們就有了一個“第一個頁面.txt”文件了。
如果你的電腦不顯示“.txt”這樣的文件后綴，可以在屏幕左上方尋找“查看”菜單，如圖2
圖 2
點擊后，出現如下菜單如圖3，點擊“選項”。
圖 3
點擊“查看”，去掉“隱藏已知文件類型的擴展名”選項前的“對號”，如圖4所示。這時就能顯示或修改文件后綴了。
圖 4
Step2 添加內容
（1）雙擊打開“第一個頁面.txt”文件，把HTML基本結構共七行代碼輸入進去。
（2）保存，關閉文件，在“第一個頁面.txt”文件上點擊鼠標右鍵，選擇“重命名”，將“.txt”修改為“.html”。這時，系統會提示，如圖1，大膽點“是”。
圖 1
這時我們的文件就變成了html網頁文件了。
我們雙擊這個文件發現瀏覽器內一片空白，這就好比我們在桌子上擺了個碟子，里面并沒有放美食。瀏覽器中的一片白就是空碟子的顏色，而HTML基本結構就是這個碟子。
下面我們往碟子里加點東西。
Step3 添加內容
（1）在“第一個頁面.html”文件上點擊鼠標右鍵，選擇“打開方式”，選擇“記事本”，如果沒有“記事本”選項，請點擊“選擇其他應用”，點擊選擇最下面的“更多應用”，選擇“記事本”。下一次選擇“打開方式”時，“記事本”就會出現了。
（2）在<head></head>標簽之間添加“<title>學習寫第一個網頁</title>”。在<body></body>之間添加“<h1>第一個網頁</h1>”；“<p>隨著學的內容越來越多，網頁就會越來越漂亮了！</p>”完成如圖5
圖 5
（3）保存，關閉，雙擊打開！效果如圖6
圖6
今天的邊學邊做就到這里，下一次會詳細解釋<head>標簽、<body>標簽中常出現的子標簽以及它們各自的作用。
第二篇《邊學邊做網頁篇——<head>標簽里裝點啥？》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
