這節(jié)課浓恳，來講一下如何做一個網(wǎng)頁的helloworld缺狠，以及基本的標簽知識宇攻。
因為操作系統(tǒng)型號過多，這里僅僅選取樹莓派電腦Raspbian操作系統(tǒng)和Windows7操作系統(tǒng)做為代表說明庶弃，如果是其他操作系統(tǒng)請自行到網(wǎng)上搜索相關(guān)內(nèi)容衫贬，大概內(nèi)容應(yīng)該相差不大。
確認安裝了瀏覽器
開始編寫代碼之前歇攻，需要確認一下電腦上是否安裝好了瀏覽器固惯，一般來說，操作系統(tǒng)安裝的都是打包著安裝好了瀏覽器的缴守。
比如蘋果的操作系統(tǒng)一般都裝好了Safari瀏覽器葬毫，微軟的操作系統(tǒng)一般都裝好了IE或者Edge瀏覽器，ubuntu操作系統(tǒng)一般都裝好了Firefox瀏覽器屡穗，樹莓派電腦操作系統(tǒng)一般都裝好了Chromium瀏覽器贴捡。
這里建議大家統(tǒng)一安裝Chrome瀏覽器，因為這個瀏覽器的調(diào)試功能非常出色村砂，大家可以自行搜索關(guān)鍵字“Chrome下載”烂斋，然后選擇對應(yīng)的操作系統(tǒng)的安裝版本文件下載和安裝。
樹莓派電腦默認應(yīng)該安裝了Chromium瀏覽器，它是Chrome瀏覽器的工程版和實驗版汛骂，和Chrome瀏覽器是相同核心罕模，因此樹莓派電腦就無需安裝Chrome瀏覽器了，使用Chromium瀏覽器就可以了：
Windows電腦下載安裝后帘瞭，可以到菜單中找到：
編寫helloworld并在瀏覽器中查看
樹莓派電腦打開【Text Editor】程序：
Windows電腦淑掌，則打開【記事本】程序。
然后編寫如下代碼：
然后蝶念，選擇菜單【文件】-》【另存為...】-》選擇目錄抛腕，輸入文件名helloworld.html，-》【保存】媒殉。
樹莓派電腦担敌，保存到目錄/home/pi。
Windows電腦廷蓉，保存到目錄C:/pi柄错，如果不存在，則先創(chuàng)建pi目錄苦酱。注意保存類型為所有文件，編碼為UTF-8：
然后给猾，打開瀏覽器程序疫萤，并打開剛才保存的helloworld.html文件：
樹莓派電腦，選擇系統(tǒng)菜單【附件】->【文件管理器】敢伸，打開文件管理器程序扯饶，進入/home/pi目錄，找到文件helloworld.html池颈，單擊鼠標右鍵尾序，單擊菜單【Chromium瀏覽器】，打開了瀏覽器躯砰，并顯示了結(jié)果每币。
Windows電腦，打開【W(wǎng)indows資源管理器】程序琢歇，進入目錄/home/pi兰怠，選中helloworld.html文件， 單擊鼠標右鍵李茫，點擊菜單【打開方式】揭保，點擊菜單【Google Chrome】，打開瀏覽器魄宏，查看這個網(wǎng)頁秸侣。
然后，就可以看到自己做的第一個網(wǎng)頁了：
樹莓派電腦：
Windows電腦：
通過比較可以發(fā)現(xiàn)，不同操作系統(tǒng)的瀏覽器可能顯示的效果有略微差異味榛，但基本差異不大可以忽略不計椭坚。
另外，發(fā)現(xiàn)樹莓派的Chrome瀏覽器的標題顯示的是亂碼励负，如果要顯示正常藕溅，可以按照圖中提示設(shè)置瀏覽器可以達到目的。
當然继榆，如果提供一個網(wǎng)頁給其他人瀏覽巾表，要求其他人每次都修改瀏覽器設(shè)置，好像不太合理略吨，可以通過修改代碼集币，讓瀏覽器知道網(wǎng)頁需要什么編碼，從而自動進行設(shè)置翠忠，從而達到目的鞠苟。
修改代碼如下，在</title>這一句下面增加一行代碼：
保存代碼之后秽之，回到瀏覽器当娱，點刷新按鈕，就可以看到標題不是亂碼了考榨。
修改代碼刷新頁面
回到文本編輯器跨细，將剛才的helloworld.html代碼修改一下，例如河质，增加：我是學哥冀惭。然后保存。
如果沒有修改文件名掀鹅，并且瀏覽器某個Tab窗口正在顯示這個文件散休，則無需打開了，只要點擊【刷新】按鈕即可乐尊。
樹莓派電腦：
Windows電腦：
可以看到戚丸，剛才修改的代碼的內(nèi)容體現(xiàn)出來了效果。
如果同時在編輯2個文件科吭，該如何處理呢昏滴？
回到文本編輯器，新增一個文件对人，然后谣殊，將下面的代碼輸入，并保存為second.html文件：
然后牺弄，在文件管理器里面找到second.html文件姻几，右鍵打開，就可以看到這個網(wǎng)頁了：
樹莓派電腦：
Windows電腦：
后續(xù)教程，將會重復(fù)上面的步驟和過程蛇捌，所以有2個要點要記住抚恒，新手比較容易犯錯：
1.修改代碼之后，文本編輯器一定記得保存络拌。
2.保存代碼之后俭驮，網(wǎng)頁瀏覽器一定記得刷新。
另外春贸，由于我們統(tǒng)一采用Chrome瀏覽器混萝，不同操作系統(tǒng)上顯示的網(wǎng)頁內(nèi)容差異不大，后續(xù)的課程中萍恕，將不再說明Windows電腦的情況了逸嘀，除非有不同情況才會補充說明。
html標簽
來看一下允粤，helloworld.html的代碼內(nèi)容：
先看第一行和最后一行：
第一行：<html>
最后一樣：</html>
這里的<html>就可以稱之為HTML標簽崭倘，那么HTML標簽是用來做什么呢，不得不提到HTML語言类垫。
按照定義司光，HTML語言是用來描述網(wǎng)頁的一種語言。
也就是說悉患，瀏覽器為何能夠顯示出豐富多彩的內(nèi)容飘庄，全都是靠HTML語言來實現(xiàn)。
HTML語言遵循一定的規(guī)范购撼，這個規(guī)范是預(yù)先定義好的，程序員按照規(guī)范編寫代碼谴仙，瀏覽器按照規(guī)范解釋執(zhí)行這些代碼迂求，雙方就能統(tǒng)一起來，就不會產(chǎn)生理解偏差和歧義晃跺。這樣程序的世界才能運轉(zhuǎn)起來揩局。
HTML全稱是（Hyper Text Markup Language)，也就是超文本標記語言掀虎。
它不是編程語言凌盯，是一種標記語言。
是通過一套標記標簽來描述網(wǎng)頁烹玉。
比如驰怎，用<html>和配對的</html>來表示，有一個網(wǎng)頁的意思二打。
用<head>和配對的</head>來表示县忌，網(wǎng)頁的頭部信息的意思。
用<title>和配對的</title>來表示，網(wǎng)頁的標題的意思症杏。
記住以下標簽的特征：
1.HTML標簽由尖括號包圍的關(guān)鍵字組成装获，比如<html>，這里前面一定是<厉颤，后面一定是>
2.HTML標簽通常是成對出現(xiàn)的穴豫，比如<title>和</title>，并且成對的范圍不能錯亂逼友。
比如<html><head></head></html>是正確的精肃，但<html><head></html></head>就是錯誤的。
嵌套包含的時候翁逞，必須層次也要對上肋杖。
3.不帶/的標簽稱為開始標簽，帶/的標簽稱為結(jié)束標簽挖函，開始標簽必須在結(jié)束標簽前面出現(xiàn)状植。
比如<title></title>是正確的，但</title><title>就是錯誤的怨喘。
4.標簽影響的范圍就是開始標簽和結(jié)束標簽之間的內(nèi)容津畸。
比如<title>這是標題</title>這不是標題，只有“這是標題”會被認為是標題必怜。
用HTML語言規(guī)范編寫的文檔就可以稱之為網(wǎng)頁肉拓。
head標簽
一般來說，一個html網(wǎng)頁梳庆，至少都包含了這幾個標簽暖途，并且以這樣的嵌套層次：
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
也就是html里面包含head和body兩部分，而head里面包含了title膏执。
html,head和body標簽本身是不顯示在瀏覽器內(nèi)容中的驻售，是不可見的。
但title標簽中的內(nèi)容是會顯示在瀏覽器的標題欄上的更米，是可見的欺栗。
記住，這個次序是不能亂的征峦，因為標簽都是配對并且有層次包含關(guān)系的迟几。
title標簽
大家可以將title標簽修改為“hello world 標題2”，然后刷新網(wǎng)頁看看效果栏笆。
body標簽
body標簽定義了HTML文檔的主體类腮，也就是在瀏覽器頁面當中真正要顯示的內(nèi)容，要全部包含在body標簽當中蛉加。
目前我們僅僅顯示了一段文字存哲。
修改這段文字因宇，然后刷新頁面實施看效果。
安裝更好用的文本編輯器
之前使用的文本編輯器祟偷，雖然也可以編寫代碼察滑，但是用起來感覺功能比較弱，比如沒有關(guān)鍵字顏色提醒等等功能修肠。
因此贺辰，學哥推薦大家安裝自己喜歡的代碼編輯器，提高編寫程序的效率嵌施。
樹莓派電腦饲化，圖形界面推薦gedit，命令行推薦使用vim吗伤，畢竟很多時候吃靠，都是通過ssh遠程登錄的，命令行方式使用vim文本編輯器非常方便足淆。
Windows電腦巢块，推薦使用editplus，支持的語言格式非常多巧号，非常適合編寫代碼族奢。
樹莓派電腦，安裝vim：
$sudo apt-get update
$sudo apt-get install vim
配置vim：
$sudo vi /etc/vim/vimrc
找到一句syntax on丹鸿，將前面的雙引號去掉
請在最后一行越走，輸入下面幾行，可以讓您的VIM變得更漂亮靠欢、舒服廊敌。
set nu // 在左側(cè)行號
set tabstop //tab 長度設(shè)置為 4
set nobackup //覆蓋文件時不備份
set cursorline //突出顯示當前行
set ruler //在右下角顯示光標位置的狀態(tài)行
set autoindent //自動縮進
保存之后，配置完畢门怪。
上面的配置庭敦，其實是非常簡單的，比如一些配色方案等薪缆，學哥并沒有寫入，如果您還有其他需求的話伞广，建議網(wǎng)上搜索拣帽。
啟動vim：
$sudo vim helloworld.html
可以看到代碼顏色很好看。
至于vim和用法嚼锄，和vi的用法基本一致减拭，如果有不熟悉的話，去網(wǎng)上搜索看看区丑。
樹莓派電腦拧粪，安裝gedit：
$sudo apt-get update
$sudo apt-get install gedit
啟動gedit：單擊菜單【附件】->【gedit】修陡，打開helloworld.html如下：
Windows電腦下載安裝editplus軟件，請自行搜索可霎，啟動之后是這樣的：
課后練習
新建一個index.html文件魄鸦，然后title顯示“個人簡歷”，內(nèi)容顯示“這是XXX的個人簡歷癣朗∈耙颍”。
往期教程
因為教程是系列教程旷余，前后關(guān)聯(lián)性非常強绢记，請大家按照微信公眾號【零基礎(chǔ)學編程】的歷史消息發(fā)布時間先后次序進行閱讀。
