目 錄（本篇字數：3290）
-
背景
趁着處於學生狗時代又是在暑假期間，我們剛剛好利用這個時間來學習一下另一個對於我現在還沒接觸過的領域，那就是網頁編程。雖然說我想做一名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">©版權所有</a></p>
<p><a href="https://blog.csdn.net/smile_Running" target="_blank">®作者</a></p>
</center>
<p><a href="mailto:767412271@qq.com">聯系作者</a></p>
<p><a id="bottom" href="#">回到頂部</a></p>
</body>
</html>這是我的第一個網頁，后面繼續學習CSS后將會結合CSS樣式，寫出更好看的頁面。運行這段代碼很簡單，復制我們的代碼到你的記事本中，另存為.html文件。最后打開就可以看到效果了。
©原文鏈接：https://blog.csdn.net/smile_Running/article/details/81505627
@作者博客：_Xu2WeI
@更多博文：查看作者的更多博文