HTML5新手入門教程，手把手教你使用記事本編寫一個網頁

阿新 • • 發佈：2019-02-18

· 背景

趁著處於學生狗時代又是在暑假期間，我們剛剛好利用這個時間來學習一下另一個對於我現在還沒接觸過的領域，那就是網頁程式設計。雖然說我想做一名Android工程師，但是現在Android開發的跨平臺性使得Android程式設計不再僅僅侷限於原生開發。我個人學習Android已經將近一年了，記得從去年的暑假，自己拿了學校講課的書一邊敲一邊學習Android基礎。後來因為書內容有限，自己又買了《第一行程式碼第二版》來自學，現在Android基礎知識也基本學習完了。

因為對於Android的興趣比較高，自己也想以後可以從事Android開發這個工作，所以在Android領域花了所有的時間來學習安卓程式設計知識。學了一年以後呢，發現Android水平已經很難進步了，這也是我們Android初級開發應需要過的一道坎。

在這段時間，我買了幾本網上推薦的Android進階的書籍。例如：《Android開發進階，從小工到專家》、《Android群英傳》、《Android開發藝術探索》等。可是這些書籍畢竟是進階的書，《Android群英傳》這本會比其它略好懂一點。雖然有學過一年的Android程式碼，但是讀起這幾本書，以我的感覺來看還是偏理論了一點。雖然書中有一些程式碼解釋例子，但進階的知識畢竟無法以偏概全，想要深入理解，還需要我們自己的深入研究。

可能有點離題了，但是這是我一個月以來的一些學習內容以及我們推薦給大家幾本Android學習書籍。網上有挺多的相關書籍推薦的，但是這幾本是本人讀過的，雖然有些知識我這個階段很難理解，但是之後的學習生涯我會慢慢克服這些困難。

· HTML5學習

不得不承認一個事實，程式猿這個職業真的是活到老學到老！現在好多招Android的可能會偏向於有Android + H5混合開發經驗的程式猿。H5即是HTML5（超文字標籤語言）。這種標籤語言的簡直像我們Android XML檔案，所謂同一個爸媽生的，總歸有點類似。

既然我們有這個基本概念，學起來一定會輕鬆很多了。關於我們的軟體架構有兩種，歸納為：

C/S
B/S

C/S：即是Client/Server（客戶端/伺服器，例如：QQ、網易雲音樂、有道詞典等）

B/S：即是Brower/Server（瀏覽器/伺服器，例如：Chrome、IE、火狐等）

那麼，我們的網頁就是這種B/S架構軟體，這種軟體有一個重要的特點：跨平臺性。

以我們的QQ客戶端為例子，我們在Windows環境需要開發一個Windows版；Linux環境需要開發一個Linux版；而Mac需要開發一個Mac版；Android、IOS、WindowsPhone等同理。這就給我們的軟體投入使用大大增加的難度。我們需要招很多工程師來開發不同的版本，成本當然就多出了。

這樣看來，我們的網頁就體現出它的巨大優勢。我們在任何一個平臺執行瀏覽器它顯示出來的結果基本沒差別。我們在Windows、Android、Mac、IOS等平臺開啟[百度]基本沒差別。

既然我們學習網頁，我們就要了解它的基本構成。我們這裡拿人體來作為抽象來理解我們的網頁。

1、HTML（結構：意為主體框架，構成網頁基本結構。例如：人的骨架）

HTML經歷我們好幾個版本的歷程，現在我們基本統一在使用的HTML5。HTML語言稱為超文字標籤語言。

那何為超文字呢？超過文字的限制，我們文字（常用的記事本）只能輸入/顯示文字。而超文字既能顯示文字，也能夠顯示圖片、連結、動態圖等等。

2、CSS（表現：意為顯示效果，好看、漂亮。例如：人的面板、著裝）

CSS既是CSS樣式表，裝飾著我們的HTML主題骨架，比如：我們給字型換顏色、大小、位置等。它必須與我們的HTML語言解耦，一般不會寫在HTML語言中，通常以標籤引入我們的CSS樣式表。

3、JavaScript（行為：意為一般動作，像點選事件、彈窗行為。例如：人的行為動作）

這個沒什麼好介紹的，我們網頁肯定都會有一定的行為。例如：點選事件、輸入、彈框等等。這種賦予網頁行為的我們稱為動態網頁，而沒有行為的我們稱為靜態網頁，就像死的一樣。

說了這麼多理論知識，其實這個還是挺有作用的，我們從它的思想上就可以發現，它的三分部其實沒什麼聯絡，要說真沒聯絡，那不可能的。只是抽離了它使其分成了三個部分內容，實際上就是為了解耦。其中最難的就是JavaScript。我們放在最後學習。

· HTML5結構

講了這麼多，我們還是看一下程式碼吧。首先，我們看一下最基本的HTML骨架，這個也是最有必要的，以這個骨架為基礎，一層一層的開發出我們漂亮的網頁。

· 開發工具：Hbuidler（免費、國人打造），往後我們主要使用這個軟體做開發。

今天呢，我們的Hbuidler先不用，我們拿最簡單的記事本來寫一個網頁吧，以便於記憶標籤。程式碼如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第一個的網頁：HTML</title>
	</head>
	<body>
                <h1>我是網頁中標題</h1>
	</body>
</html>

· 標籤介紹

<!doctype html>

最開頭指定文件型別為 html ，為了讓我們瀏覽器更好的解碼我們的網頁，避免出現未知異常。

<html>

這是必要標籤，全文有且僅有一個，是整個HTML主體，所有子標籤必須寫在內部。

<head>

在這裡面寫再多的程式碼瀏覽器也無法顯示出效果，這是給開發者或搜尋引擎使用的，通常配置一些HTML屬性，例如我們的CSS樣式。

<title>

這個標題顯示的位置是我們瀏覽器的標題欄裡，其主要作用：例如，百度第一個時候搜尋引擎會去遍歷title是否含有此內容。

<meta charset="utf-8">

這個非常重要，charset指定了字符集編碼，有常用的ASCll（美國使用的編碼）、GBK（中國使用的編碼）、UTF-8（萬國碼）。只要我們在地球開發，我們就用UTF-8。

<body>

這裡面的所有程式碼會顯示在我們瀏覽器中。換句話說，就是以可見的效果顯示給使用者。

<h1> <h2>...... <h6>

這裡總共6個標題級別，大小依次縮小，我們常用的一般到<h3>級別，<h4>之後就很少用的到了。

<br/> 換行

<hr/> 分割線

<center> 居中顯示

<font color=”red” size=”7”> 字型顏色和大小，大小範圍1~7

<p> 段落內容 </p> 另起一個段落，段落之間有間距

<a href=”連結地址” target=”_self”> 連結顯示的名稱 </a> 超連結，用於跳轉網頁。

_self對於本頁跳轉（預設），_blank對於新建一頁跳轉。

<img src=”圖片相對路徑” alt=”圖片描述”></img> 顯示圖片（格式為png,、jpg、gif都可以。）

alt 屬性一定記得寫。例如我們搜尋引擎會遍歷alt屬性，我們寫個貓，那麼搜尋貓圖片的時候就會顯現出來，即使圖片不是貓。

這個標籤還附帶width、height屬性，用於指定圖片大小（px畫素）。如果只指定一個width/height，便以寬、高等比例縮放；指定兩個便以指定的大小縮放。不理解的可以自己嘗試一下。

· 圖片格式區別

既然提到圖片格式，我們有多種可選。比如.jpg、.png、.gif等，我們來看一下這三種的區別和優先選擇哪個吧。

一、jpg格式圖片：

jpg格式圖片最大的缺點是不支援透明，但是它的優點是支援的顏色比較多，顏色豐富逼真。

二、png格式圖片：

png補足了jpg格式圖片的缺點，它支援了透明效果，支援的顏色也眾多。

三、gif格式圖片：

gif區別其它兩種，是動態圖片。它雖然支援透明，但只是簡單的線性透明，比如影象複雜度高的，它便無法透明並且支援的顏色比較少。

我們開發者需要根據我們的需求情況，做出相應的選擇。例如：圖片顯示效果一致，我們選擇佔用記憶體最小的；如果顯示效果好的，我們當然選擇顯示效果優先，為了增加使用者體驗。

標籤屬性我們先介紹到這裡，大家不妨可以把我們的程式碼拷貝到記事本中，然後字尾改成.html檔案即可看到效果，我們順便貼出我們的網頁效果吧。

· HTML5實戰

根據我們剛學的一些標籤，現在我們就來實戰一個網頁吧。為了方便，我就用了李白的兩首詩來充當我們的網頁內容，可以預覽一下我們的網頁效果。

這一個簡單的例子，涵蓋了我們剛剛學的幾個知識點，所謂活學活用就是要這樣。這個是我們純HTML沒有任何CSS樣式，看起來有點醜。但介於初學者，也可以湊合學習了。下面看一下我們的網頁原始碼，自己好好琢磨琢磨，熟悉一下我們的標籤吧。

先看看我們的網頁效果，這個圖片縮放的有點不正常，大家自己試一試原始碼效果會更好：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<meta name="keywords" content="李白,唐詩,靜夜思,望廬山瀑布"/>
		<meta name="description" content="有關於李白寫的兩首詩">
		<title>詩仙李白</title>
	</head>
	<body>
	<center>
		<h1><font color="pink" size="6">靜夜思</font></h1>
		<p><font color="purple">床前明月光，</font></p>
		<p><font color="purple">疑是地上霜。</font></p>
		<p><font color="purple">舉頭望明月，</font></p>
		<p><font color="purple">低頭思故鄉。</font></p>
		<hr/>
		<h1><font color="red">望廬山瀑布</font></h1>
		<p><font color="bule">
		日照香爐生紫煙，<br/>
		遙看瀑布掛前川。<br/>
		飛流直下三千尺，<br/>
		疑是銀河落九天。<br/></font></p>
		<hr/>
		<h3>李白<h3>
		<p><img src="libai.jpg" alt="李白圖片"></img></p>
		<p>簡介：李白（701年－762年） ，字太白，號青蓮居士，又號“謫仙人”。<br/>
		是唐代偉大的浪漫主義詩人，被後人譽為“詩仙”，與杜甫並稱為“李杜”。<br/>
		為了與另兩位詩人李商隱與杜牧即“小李杜”區別，杜甫與李白又合稱“大李杜”。<br/></p>
		<p><a href="https://www.baidu.com/link?url=egINeZjr5GoWqQeInn7JPMSN5t9Sz4xUqTAX3G0n0QnVGmfz26xcV8a_JXPoZV4053s9-DlC0y8TlrZAGYueRnsvNnuSO-GBjLgGla0HXCe&wd=&eqid=f5f722d700010650000000065b691924" target="_blank">更多詳情</a></p><br/>
		<p><a href="https://blog.csdn.net/smile_Running/article/details/81505627" target="_blank">&copy;版權所有</a></p>
		<p><a href="https://blog.csdn.net/smile_Running" target="_blank">&reg;作者</a></p>
	</center>
		<p><a href="mailto:[email protected]">聯絡作者</a></p>
		<p><a id="bottom" href="#">回到頂部</a></p>
	</body>
</html>

這是我的第一個網頁，後面繼續學習CSS後將會結合CSS樣式，寫出更好看的頁面。執行這段程式碼很簡單，複製我們的程式碼到你的記事本中，另存為.html檔案。最後開啟就可以看到效果了。

HTML5新手入門教程，手把手教你使用記事本編寫一個網頁

· 背景

· HTML5學習

· HTML5結構

· 標籤介紹

· 圖片格式區別

· HTML5實戰

HTML5新手入門教程，手把手教你使用記事本編寫一個網頁

2019最新Youtube教程，手把手教你打開Youtube，在國內也能看油管視頻，甚至有免費的辦法

Python爬蟲基礎教程，手把手教你爬取拉勾網！

【新手教程】手把手教你搭建騰訊雲伺服器，圖文詳細教程

NN入門，手把手教你用Numpy手撕NN(一)

NN入門，手把手教你用Numpy手撕NN(二)

NN入門，手把手教你用Numpy手撕NN(三)

建模、紋理、後期，手把手教你制作《向日葵公主》

電腦怎麽進pinterest，手把手教你pinterest怎麽註冊

MathType安裝教程，手把手教您

右鍵Git Bash Here不見了怎麼辦，手把手教你還原！

釋出訂閱模式還不會??戳這裡，50行核心程式碼，手把手教你學會

怎麼進pinterest，手把手教你Pinterest賬號怎麼註冊

pinterest網頁打不開，手把手教你pinterest怎麼註冊

三分鐘上手，手把手教你如何微信快速爆粉！

根據我開發過的六七個vue專案以及獨立開發的3個vue專案總結，手把手教你搭建一個結構清晰易開發易維護的公司的Vue專案，包含axios服務，vuex，公共元件/指令/過濾器/服務等

做PPT別再傻乎乎的直接插入圖片了，手把手教你處理毛玻璃式圖片

流程圖繪制技巧，手把手教你如何畫出有創意的流程圖

流程圖的制作技巧分享，手把手教你如何畫流程圖？

安卓Tablayout的使用，手把手教你如何打造滑動切換介面

HTML5新手入門教程，手把手教你使用記事本編寫一個網頁

· 背景

· HTML5學習

· HTML5結構

· 標籤介紹

· 圖片格式區別

· HTML5實戰

相關推薦