2018.03.26
author：wills
之前一直幹後端，現在對前端的知識已進行一下了解，爭取以後幹全棧工程師
HTML是用來描述網頁的一種標記語言
HTML：Hyper Text Markup Language
它使用標記標籤來描述網頁，其文檔包含了html的標籤和文本內容
html文檔也叫做web頁面
html的標籤是由尖括號<>包圍的關鍵詞如< html >
這些標籤通常成對出現例如：< head >< /head>前一個表示開始標籤，後一個表示結束標籤多了個斜槓/。
通常格式：<標籤>內容</標籤>
常用的瀏覽器（Google，IE，Firefox，Safari ）則是用於讀取html文檔再將其網頁顯示
HTML語言是比較簡單的，下面是一端html的文檔（注意html的文檔後綴名一般是.htm或者.html），可以直接用瀏覽器打開。
HTML的網頁架構
從上圖可以看出，html的網頁架構注意由2部分構成：head和body就是頭部和身體組成。頭部可以看成網頁的標題，身體就是網頁實際的內容
下面我寫了一些標籤，並且用它做了一個簡單的網頁示例
先看效果吧。
下面每一個標籤我的加了註釋，表明是用來幹什麼，怎麼用
//第一句是聲明我用來html5的標準
<!doctype <!DOCTYPE html>
//最大的文檔頭，最後有個加/的與之配對
<html>
//標題的頭
<head>
// 爲了解決中文問題，使用utf-8的編碼
<meta charset="utf-8">
<title>這裏顯示在網頁頭裏面</title>
</head>
//網頁的主體
<body>
// audio表示播放音樂，loop表示循環播放 ，control表示控制
<audio controls loop>
// src=你要播放的音樂文件的路徑，最好是相對於你的html文檔的路徑
<source src="BlogPicture/tank_picture/tank_music.mp3" type="audio/mp3" >
</audio>
// <p>是用來表示段落，這裏用來換行
<p></p>
//video表示視頻
<video controls >
<source src="BlogPicture/movie.mp4" type="video/mp4">
</video>
// 這裏是設置一個錨，當網頁很長時直接回頂部
<a id="top"></a>
//h1-h6表示不同的文本大小
<h1> hello world</h1>
<hr><!--水平標尺-->
//ins表示給文本加下劃線，sup表示加上標，sub表示加下標，del表示在文本中間加一橫線，表示刪除，但是文本還在，stron表示粗體，em表示斜體，q表示引用，就是幫你加上“”
<ins>牀前</ins>明月光<sup>1</sup><br><!--換行-->
疑是地上霜<sub>2</sub><br>
<p>舉頭望<del>明月</del></p><!--換行 段落方法-->
<p>低頭思<strong><em>故鄉</em></strong></p>
<q>其實地上本沒有路，走的人多了，就有了路</q>
//ul表示無序列表，li表示列表中的項目數
//ol表示有序列表，dl表示層次列表，就是一層層嵌套就(dd/dt表示層次)
<h3>wills 的愛好
<ul>
<li>吃</li>
<li>喝</li>
<li>嫖</li>
</ul>
<ol>
<li>你好</li>
<li>hi</li>
<li>怒麼麼噠</li>
</ol>
<dl>
<dt>吃</dt>
<dd>一天吃三頓</dd>
<dd>雞鴨魚肉不能少</dd>
<dt>嫖</dt>
<dd>每天嫖5個妹子</dd>
<dd>妹子必須要漂亮</dd>
<dt>
//figure給圖片加圖例文字說明
<figure>
<!--路徑最好寫相對路徑-->
//img表示添加圖片，注意圖片的路徑要寫對，alt屬性表示如果圖片因爲路徑錯誤或者網絡原因沒能加載出來，給以文字替代
<img src="BlogPicture/1.jpg" alt="美女">
<figcaption>
這是一位美女
</figcaption>
</figure>
</dt>
</dl>
//table表示建立一個表格，tr和td分別表示行列，th表示這一行顯示粗體，caption是表格的標題，border屬性時表格的邊界線條粗細單位是像素
<table border="10">
<caption>嫖娼被抓年紀表</caption>
//thread表示表格頭，tbody表示表格主體，tfoot表示表格的末尾總結部分。
<thead>
<tr>
<th>班級 </th>
// colspan 表示列合併，後面數字表示合併幾列，rowspan表示行合併，用法與列一樣
<th colspan="2">學生</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1801</td>
<td>wills</td>
<td>25</td>
</tr>
<tr>
<td>flix</td>
<td>23</td>
</tr>
<tr>
<td>1802</td>
<td>sb</td>
<td>32</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" align="center">平均分</td>
<td>22</td>
</tfoot>
</table>
<!-- form 用於製作表單-->
<!-- 上傳文件method使用post，有圖片還要寫編碼enctype-->
<form action="URL" method="post" enctype="multipart/form-data">
//用一個邊框將必填的內容圍起來使用fieldset
<fieldset>
<legend>必填信息</legend>
//顯示一個文本框使用input，type表示文本框的類型，其中text表示純文本，password表示密碼，輸入時會自動轉化爲黑點。radio類型表示單選框，checkbox表示多選框，checked屬性表示默認選擇。required屬性表示這個文本框必填，不然無法提交 placeholder屬性用來提示這個文本框該輸入什麼。email表示輸入郵箱，date表示輸入日期（瀏覽器會提供一個日曆表供你選擇）。
<p><input type="text" name="username" placeholder="請輸入用戶名" required></p>
<p><input type="password" name="password" placeholder="請輸入密碼" required></p>
<p><input type="radio" name="sex" checked>男
<input type="radio" name="sex">女</p>
<p>
<input type="checkbox" name="fav">吃
<input type="checkbox" name="fav">喝
<input type="checkbox" name="fav">嫖
<input type="checkbox" name="fav">賭
<input type="checkbox" name="fav">抽
<input type="checkbox" name="fav">坑
<input type="checkbox" name="fav">蒙
<input type="checkbox" name="fav">拐
<input type="checkbox" name="fav">騙
<input type="checkbox" name="fav">偷
</p>
<p>
<input type='date' name="birthday">
</p>
<p>
<input type='email' placeholder="請輸入郵箱" required>
</p>
</fieldset>
<fieldset>
<legend>可選信息</legend>
<p>
//select表示一個選擇框，選擇不同的省份
<select name="prov">
<option value="北京" seleted>北京</option>
<option value='上海'>上海</option>
<option value='四川'>四川</option>
<option value='蒙古'>蒙古</option>
<option value='山西'>山西</option>
</select>
</p>
<p> // 起一個大的文本框，用於顯示大量的文字。
<textarea rows="5" cols="30" name="intrp"></textarea>
</p>
<p> // type屬性爲file是表示添加文件，會起一個按鈕，點擊即可上傳文件，submit類型表示起一個按鈕用於上傳填寫的表單，reset類型表示將當期頁面全部清空，重新填寫。
<input type="file" name="file">
</p>
</fieldset>
<p>
<input type='submit' value="立即註冊">
<input type="reset" value="重新填寫">
</p>
</form>
//a 表示來一超鏈接，可以鏈接到別的網站，target屬性爲_blank表示在鏈接的網頁在新窗口中打開mailto也表示可以給人發郵件，還可以直接打開一個臨時的qq會話
<a href="http:www.baidu.com" target="_blank">百度一下
</a>
<a href="http:www.qq.com" > QQ </a>
<a href="file:///C:/Users/yqx/Desktop/test.html">我的主頁</a>
<a href="mailto:[email protected]">聯繫站長</a>
<a href="http://shang.qq.com/v3/index.html">進入qq</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=895856250&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:895856250:52" alt="你好，請點擊這裏發消息" title="你好，請點擊這裏給我發消息"/></a>
<a href="#top">回頂部</a>
</h3>
</body>
</html>上面只是提到了一些簡單的標籤的使用，更高級的層次表的渲染，則沒有使用，先了解了解。
