前言
最近在學習HTML網頁編程，具體作爲一個學機械的，爲啥突然有閒心來學HTML，就不在這裏贅述啦，大家可以看我HTML學習筆記摘要目錄參考，這篇博文裏也有我HTML學習筆記的其他章節，大家有興趣的可以去看一看~
初識
就像學C語言的hellow word一樣，下面這個簡單至極的小框架就是第一個程序啦，
- 先看首行，<!doctype html>聲明，該聲明必須位於HTML5文檔的第一行，該標記告知瀏覽器文檔所使用的HTML規範。
- 標記。HTML的頭部標記，頭部信息不顯示在網頁中，次標記可以包含一些其他的標記，用於說明文件標題和整個文件的一些公用屬性，可以通過
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>練習1</title>
</head>
<body>
<h1>我的第一個網頁！</h1>
</body>
<footer>
<h1>作者：周旋 聯繫方式：1110000000 </h1>
</footer>
</html>
下面我們看一下這個代碼打出的樣子：
編程軟件
編寫網頁程序，當然，你可以用萬能的記事本啦，但還有更好用的，Dreamweaver CC,好多書都推薦使用這個，我用了用，確實非常方便，就不多說了。
基本標記
頭標記
頭標記（head）就是用來說明文檔頭部的相關信息。頭標記內包含標題標記和元信息標記。
標題標記
標題標記沒啥好說的，直接
元信息標記
這個就比較麻煩了，不過想來以後寫HTML程序多了，應該也很好說。
1）：字符集charset屬性
在HTML5中，有一個新的charset屬性，它使字符集的定義更加容易。例如，下面代碼告訴瀏覽器，網頁使用ISO-8859-1字符集顯示：
<meta charset="ISO-8859-1">
2）：搜索引擎的關鍵詞
關鍵詞定義：
<meta name="Keywords" content = "HTML,CSS,XHTML"/>
首先聲明在定義name屬性的哪個值，再用屬性content來描述這個值。
3）：頁面描述
<meta name="Description" content="網頁的介紹"/>
和定義關鍵詞一樣的套路，頁面描述通常是被搜索引擎用在搜索結果也上展示給最終用戶看的一段文字。頁面描述也不在網頁上顯示。
4）：頁面定時跳轉
通過將http-equiv的屬性值設置爲refresh可以實現網頁在經過一定時間後進行自動刷新。
<meta http-equiv="Refresh" content="5;[url=https://hao.360.com/?a1004]"/>
這行代碼可以實現在進入網頁5秒後跳轉到https://hao.360.com/?a1004；
<meta http-equiv="Refresh" content="5" />
這行代碼可以實現網頁每5秒刷新一次。
頁面註釋
在HTML中，代碼可以用如下方式註釋：
<!-- 註釋內容 -->
代碼編寫
代碼一：簡單示例程序
<body>
<h1>清明</h1>
<!-- 註釋內容 -->
<p>
清明時節雨紛紛，<br>
路上行人慾斷魂，<br>
借問酒家何處有，<br>
牧童遙指杏花村。<br>
</p>
<img src="../2.jpg">
</body>
代碼二：添加文本
添加文本有兩種方法，一種是像上面的詩一樣自己自己打代碼，還有一種是在軟件的設計頁面進行添加：
我們可以在設計頁面進行添加文本，軟件會自行給我們添加相應代碼：
文本還可以調整字體：
<body>
<!-- 註釋內容 -->
<p><b>粗體文字顯示效果</b></p>
<p><em>強調文字的顯示效果</em></p>
<p><strong>加強強調文字的顯示效果</strong></p>
<p><i>斜體文字的顯示效果</i></p>
<P>a<sup>上標顯示</sup></P>
<P>b<sub>下標顯示</sub></P>
<img src= "../3.jpg">
</body>
文本排版
1）：換行標記< br >
換行標記是一個單標記，沒有結束標記，是英文單詞break的縮寫。一個< br >標記代表一個換行
2）：段落標記< p >< /p >
這一對標記中間的文字爲一段。
3）：標題標記< h1 >< /h1 >
標題標記中的數字表示幾號標題，可取從1-6；
文字列表
文字列表分爲有序列表和無序列表
無序列表使用< ul >< /ul >來標記，其中每一個列表項使用一對< li >< /li >標記，語法結構如下:
<ul>
<li>項目需求</li>
<li>系統分析</li>
<ul>
<li>網站的定位</li>
<li>內容的收集</li>
<li>欄目規劃</li>
</ul>
</ul>
效果圖：
有序列表使用< ol >< /ol >來標記，列表項也使用一對< li >< /li >標記，有序列表有前後順序之分，多數用數字表示，也可以用字母ABCD表示：
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
使用設置屬性type可以改變列表類型;
<h4>Disc 項目符號列表</h4>
<ul type="disc">
<li>蘋果</li>
<li>香蕉</li>
</ul>
<h4>Circle 項目符號列表</h4>
<ul type="circle">
<li>蘋果</li>
<li>香蕉</li>
</ul>
<h4>Square 項目符號列表</h4>
<ul type="square">
<li>蘋果</li>
<li>香蕉</li>
</ul>
<h4>數字列表</h4>
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
<h4>字母列表</h4>
<ol type="A">
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
<h4>羅馬字符列表</h4>
<ol type="I">
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
代碼三：超鏈接標記
超鏈接標記爲< a >< /a >。超鏈接最重要的要素有兩個，設置爲超鏈接的網頁元素和超鏈接指向的目標地址。超鏈接基本語法如下：
<a href=URL>網頁元素</a>
我們可以使用圖片或者文字來做鏈接：
<a href="Untitled-2.html"><img src="../4.jpg"></a>
<a href="Untitled-2.html">網頁連接</a>
鏈接的對象除了網頁對象外，還可以鏈接圖片，word文檔，視頻文件，音頻文件，FTP服務器，電子郵件等。
設置以新窗口顯示超鏈接頁面
在默認情況下，單擊超鏈接時，目標頁面會在當前窗口中顯示，替換當前頁面的內容。如果要在單機某個鏈接以後，打開一個新的瀏覽器窗口，在這個新窗口中顯示目標頁面，就需要使用< a >標記的target屬性。
target屬性四個值，分別是_blank,_self,_top和_parent.常用的爲_blank,_self 這兩個。當省略target屬性時，默認爲_self .
<a href="../1.jpg" target="_blank">圖片鏈接</a>
代碼四：圖片
網頁支持多種圖片格式，並寫可以對插入的圖片設置寬度和高度，插入圖像使用單標記< img >
1）：插入圖像
<img src="路徑">
2）：從不同來源插入圖像
在插入圖像時，還可以將其他文件夾或服務器中的圖片顯示到網頁中。
3）：設置圖像的寬度和高度
<img src="../2.jpg" width="350" height="500">
若只改變高度或寬度中的一個，則另一個按等比例縮放。
4）：設置圖像的提示文字
設置圖像的提示文字可以方便搜索引擎的檢索。除此之外，
- 當瀏覽網頁時，如果圖像下載完成，將鼠標放到該圖像上時，鼠標指針旁會顯示title標籤設置的文字。
- 如果圖像未下載成功，在圖像的位置上會顯示alt標記設置的提示文字。
<img src="../1.jpg" alt="未加載完成時顯示的文字" title="gril">
5）：將圖片設置未網頁背景
<body background="../6.jpg">
</body>
結束語
好了，看到這裏已經可以感覺到,HTML又好玩又簡單，至少目前爲止時這樣，怪不得他們說HTML和css,js是軟工專業的玩具，確實是玩具，，對機械專業的來說，也是~