這節課，來講一下如何做一個網頁的helloworld，以及基本的標簽知識。
因為操作系統型號過多，這里僅僅選取樹莓派電腦Raspbian操作系統和Windows7操作系統做為代表說明，如果是其他操作系統請自行到網上搜索相關內容，大概內容應該相差不大。
確認安裝了瀏覽器
開始編寫代碼之前，需要確認一下電腦上是否安裝好了瀏覽器，一般來說，操作系統安裝的都是打包著安裝好了瀏覽器的。
比如蘋果的操作系統一般都裝好了Safari瀏覽器，微軟的操作系統一般都裝好了IE或者Edge瀏覽器，ubuntu操作系統一般都裝好了Firefox瀏覽器，樹莓派電腦操作系統一般都裝好了Chromium瀏覽器。
這里建議大家統一安裝Chrome瀏覽器，因為這個瀏覽器的調試功能非常出色，大家可以自行搜索關鍵字“Chrome下載”，然后選擇對應的操作系統的安裝版本文件下載和安裝。
樹莓派電腦默認應該安裝了Chromium瀏覽器，它是Chrome瀏覽器的工程版和實驗版，和Chrome瀏覽器是相同核心，因此樹莓派電腦就無需安裝Chrome瀏覽器了，使用Chromium瀏覽器就可以了：
Windows電腦下載安裝后，可以到菜單中找到：
編寫helloworld并在瀏覽器中查看
樹莓派電腦打開【Text Editor】程序：
Windows電腦，則打開【記事本】程序。
然后編寫如下代碼：
然后，選擇菜單【文件】-》【另存為...】-》選擇目錄，輸入文件名helloworld.html，-》【保存】。
樹莓派電腦，保存到目錄/home/pi。
Windows電腦，保存到目錄C:/pi，如果不存在，則先創建pi目錄。注意保存類型為所有文件，編碼為UTF-8：
然后，打開瀏覽器程序，并打開剛才保存的helloworld.html文件：
樹莓派電腦，選擇系統菜單【附件】->【文件管理器】，打開文件管理器程序，進入/home/pi目錄，找到文件helloworld.html，單擊鼠標右鍵，單擊菜單【Chromium瀏覽器】，打開了瀏覽器，并顯示了結果。
Windows電腦，打開【Windows資源管理器】程序，進入目錄/home/pi，選中helloworld.html文件， 單擊鼠標右鍵，點擊菜單【打開方式】，點擊菜單【Google Chrome】，打開瀏覽器，查看這個網頁。
然后，就可以看到自己做的第一個網頁了：
樹莓派電腦：
Windows電腦：
通過比較可以發現，不同操作系統的瀏覽器可能顯示的效果有略微差異，但基本差異不大可以忽略不計。
另外，發現樹莓派的Chrome瀏覽器的標題顯示的是亂碼，如果要顯示正常，可以按照圖中提示設置瀏覽器可以達到目的。
當然，如果提供一個網頁給其他人瀏覽，要求其他人每次都修改瀏覽器設置，好像不太合理，可以通過修改代碼，讓瀏覽器知道網頁需要什么編碼，從而自動進行設置，從而達到目的。
修改代碼如下，在</title>這一句下面增加一行代碼：
保存代碼之后，回到瀏覽器，點刷新按鈕，就可以看到標題不是亂碼了。
修改代碼刷新頁面
回到文本編輯器，將剛才的helloworld.html代碼修改一下，例如，增加：我是學哥。然后保存。
如果沒有修改文件名，并且瀏覽器某個Tab窗口正在顯示這個文件，則無需打開了，只要點擊【刷新】按鈕即可。
樹莓派電腦：
Windows電腦：
可以看到，剛才修改的代碼的內容體現出來了效果。
如果同時在編輯2個文件，該如何處理呢？
回到文本編輯器，新增一個文件，然后，將下面的代碼輸入，并保存為second.html文件：
然后，在文件管理器里面找到second.html文件，右鍵打開，就可以看到這個網頁了：
樹莓派電腦：
Windows電腦：
后續教程，將會重復上面的步驟和過程，所以有2個要點要記住，新手比較容易犯錯：
1.修改代碼之后，文本編輯器一定記得保存。
2.保存代碼之后，網頁瀏覽器一定記得刷新。
另外，由于我們統一采用Chrome瀏覽器，不同操作系統上顯示的網頁內容差異不大，后續的課程中，將不再說明Windows電腦的情況了，除非有不同情況才會補充說明。
html標簽
來看一下，helloworld.html的代碼內容：
先看第一行和最后一行：
第一行：<html>
最后一樣：</html>
這里的<html>就可以稱之為HTML標簽，那么HTML標簽是用來做什么呢，不得不提到HTML語言。
按照定義，HTML語言是用來描述網頁的一種語言。
也就是說，瀏覽器為何能夠顯示出豐富多彩的內容，全都是靠HTML語言來實現。
HTML語言遵循一定的規范，這個規范是預先定義好的，程序員按照規范編寫代碼，瀏覽器按照規范解釋執行這些代碼，雙方就能統一起來，就不會產生理解偏差和歧義。這樣程序的世界才能運轉起來。
HTML全稱是（Hyper Text Markup Language)，也就是超文本標記語言。
它不是編程語言，是一種標記語言。
是通過一套標記標簽來描述網頁。
比如，用<html>和配對的</html>來表示，有一個網頁的意思。
用<head>和配對的</head>來表示，網頁的頭部信息的意思。
用<title>和配對的</title>來表示，網頁的標題的意思。
記住以下標簽的特征：
1.HTML標簽由尖括號包圍的關鍵字組成，比如<html>，這里前面一定是<，后面一定是>
2.HTML標簽通常是成對出現的，比如<title>和</title>，并且成對的范圍不能錯亂。
比如<html><head></head></html>是正確的，但<html><head></html></head>就是錯誤的。
嵌套包含的時候，必須層次也要對上。
3.不帶/的標簽稱為開始標簽，帶/的標簽稱為結束標簽，開始標簽必須在結束標簽前面出現。
比如<title></title>是正確的，但</title><title>就是錯誤的。
4.標簽影響的范圍就是開始標簽和結束標簽之間的內容。
比如<title>這是標題</title>這不是標題，只有“這是標題”會被認為是標題。
用HTML語言規范編寫的文檔就可以稱之為網頁。
head標簽
一般來說，一個html網頁，至少都包含了這幾個標簽，并且以這樣的嵌套層次：
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
也就是html里面包含head和body兩部分，而head里面包含了title。
html,head和body標簽本身是不顯示在瀏覽器內容中的，是不可見的。
但title標簽中的內容是會顯示在瀏覽器的標題欄上的，是可見的。
記住，這個次序是不能亂的，因為標簽都是配對并且有層次包含關系的。
title標簽
大家可以將title標簽修改為“hello world 標題2”，然后刷新網頁看看效果。
body標簽
body標簽定義了HTML文檔的主體，也就是在瀏覽器頁面當中真正要顯示的內容，要全部包含在body標簽當中。
目前我們僅僅顯示了一段文字。
修改這段文字，然后刷新頁面實施看效果。
安裝更好用的文本編輯器
之前使用的文本編輯器，雖然也可以編寫代碼，但是用起來感覺功能比較弱，比如沒有關鍵字顏色提醒等等功能。
因此，學哥推薦大家安裝自己喜歡的代碼編輯器，提高編寫程序的效率。
樹莓派電腦，圖形界面推薦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 // 在左側行號
set tabstop //tab 長度設置為 4
set nobackup //覆蓋文件時不備份
set cursorline //突出顯示當前行
set ruler //在右下角顯示光標位置的狀態行
set autoindent //自動縮進
保存之后，配置完畢。
上面的配置，其實是非常簡單的，比如一些配色方案等，學哥并沒有寫入，如果您還有其他需求的話，建議網上搜索。
啟動vim：
$sudo vim helloworld.html
可以看到代碼顏色很好看。
至于vim和用法，和vi的用法基本一致，如果有不熟悉的話，去網上搜索看看。
樹莓派電腦，安裝gedit：
$sudo apt-get update
$sudo apt-get install gedit
啟動gedit：單擊菜單【附件】->【gedit】，打開helloworld.html如下：
Windows電腦下載安裝editplus軟件，請自行搜索，啟動之后是這樣的：
課后練習
新建一個index.html文件，然后title顯示“個人簡歷”，內容顯示“這是XXX的個人簡歷。”。
往期教程
因為教程是系列教程，前后關聯性非常強，請大家按照微信公眾號【零基礎學編程】的歷史消息發布時間先后次序進行閱讀。
