前言
在做web開發時，我們必不可少的要使用到Html,因爲它包含了最基礎的網頁結構，雖然Html只能幫助我們構建靜態網頁，但是卻是我們最不能缺少的部分，如果把網頁比作一個房子，那麼Html就是地基，也就是第一件要做的事，可見它的重要性。那麼，現在大家就跟隨我的腳步去學習下吧。
一、Html基本語法
要想知道Html的語法規則，首先我們得創建一個以Html爲後綴的文件，當然也可以是Htm 或者是XHtml,這裏不講述它們的區別。
在寫Html之前容我給大家介紹一個神器，它擁有所見即所得的神器效果，也就是說有了它，我們可以編寫Html代碼邊看結果，完全不用瀏覽器，可以說是相當方便，它就是ExHtmlEditor。
下載地址：
https://u062.com/file/7715018-445508413
下載解壓後即可使用，無需安裝，方便快捷。
下面就讓我們通過這個軟件來正式敲開Html的大門吧。
1.標題
我們經常寫文章的時候，常會使用標題，可以發現標題的字體一般比段落的字體要大，因爲它要突出整篇文章的核心，用最簡短的文字描繪出來。Html中設置標題的相關代碼就是<h1>~<h6>,注意一定要寫</h1>關閉它們，否則會引發位置的錯誤。我們常常將這些尖括號裏的東西叫做標籤，下面我們來看下：
可以看到，標題的字體越來越小。
2.段落
一篇文章除了標題，當然就是一個個段落了，段落中我們常常使用的標籤有p標籤，寫法同上，只是標籤名不同而已。
3.段落中的文本樣式
我們都知道，一個段落裏的文字總是比較多的，這就不乏會有一些比較大的引人注目的文字，也會有比較小的文字，更有帶顏色的文字。那麼這是怎麼實現的了，下面我們來看看：
<b>粗體</b>
<big>大號字</big>
<em>着重文字</em>
<i>斜體字</i>
<small>小號字</small>
<strong>加重語氣</strong>
<sub>下標</sub>
<sup>上標</sup>
<ins>插入字</ins>
<del>刪除字</del>
<u>下劃線</u>
<code>計算機代碼</code>
<kbd>鍵盤文本</kbd>
<samp>計算機代碼樣本</samp>
<tt>打字機代碼</tt>
<var>變量</var>
<pre>預格式文本</pre>
<abbr>縮寫</abbr>
<address>地址</address>
<acronym>首字母縮寫</acronym>
<bdo>文字方向</bdo>
<blockquote cite='www.baidu.com'>長引用</blockquote>
<q>短引用</q>
<cite>引用</cite>
<dfn>定義項目</dfn>
別看着挺多的內容就被嚇到了，其實這些東西很好學的，主要是現在的Html編輯器都有自動提示功能，所以你根本不需要記住它們的全稱就可以很輕鬆寫出代碼來，不過，光是這樣還不行。
4.換行，水平線
當我們寫文章時必須要換行，有時候還要使用水平線進行分割才能讓文章顯得更有層次感，那麼該怎麼做了，也是很簡單的。
5.註釋代碼
在寫代碼時難免會寫註釋，這個時候我們需要寫一寫註釋來說明代碼的作用。格式爲：
<!-- 這是註釋 -->
<!-- 註釋完畢-->
6.鏈接
我們在瀏覽網頁時點擊一個地方的按鈕它會跳到另一個地方，那麼這就是所謂的鏈接了。
一般它用a標籤包裹，裏面有標籤名，標籤跳轉的地址等信息，我們來看看。
1).鏈接的表現形式
<a href="https://www.baidu.com">百度</a> #可以是一個url地址，點擊即可打開百度首頁
<a href="1.Html">百度</a> #也可以是一個Html文件
<a href="mailto:[email protected]">發送郵件</a>#創建電子郵箱鏈接
2).鏈接的跳轉方式
另外，它還可以定義你打開的頁面是當前頁面還是新的頁面或者說是上一個頁面：
<a href="https://www.baidu.com" target="_blank">百度</a> #新窗口打卡百度
<a href="https://www.baidu.com" target="_top">百度</a> #上一個窗口打開百度
<a href="https://www.baidu.com" target="_parent">百度</a> #父窗口打開百度
<a href="https://www.baidu.com" target="_self">百度</a> #當前窗口打開百度
3).錨鏈接
它可以快速定位頁面中的某些標題，可以通過設置name屬性來設置錨鏈接。
<a href='#mao'>錨鏈接創建</a>
<p><a name='mao'>這是一個錨鏈接</a></p>
7.圖片
爲了美化我們的網頁，有時候肯定會添加圖片，那麼該怎樣添加圖片了，下面請看：
1).插入圖片
#我們只需輸入圖片地址即可，後面兩項爲鼠標放在圖片上顯示的內容和圖片顯示不出來的時候的替代文本
<img src="1.jpg" title='圖片' alt='圖片無法顯示'/>
2).設置背景圖片
需要在body標籤中設置背景爲圖片地址。
<body background="1.jpg">
3).圖片映射
通過點擊圖片跳轉到相應鏈接頁面。
<a href="https://www.baidu.com"><img src="1.png" title='圖片' alt='圖片無法顯示'/></a>
8.表格
有時候我們也需要插入表格來展示一些數據，表格的製作稍微有點麻煩，不過用Sublime Text 3它可以十分輕鬆的創建表格。表格一般由表頭，表的標題，表的內容組成。最常用的就是Table標籤了。
<!-- 表格邊框1px,單元格邊距5px,單元格間距10px,背景顏色灰色,背景圖片1.jpg-->
<table border="1" cellpadding="5" cellspacing="10" bgcolor="gray" background='1.jpg'>
<col bgcolor='red'/> <!-- 設置表格列的屬性 -->
<colgroup bgcolor='blue'></colgroup> <!-- 設置表格列組的屬性 -->
<caption>表格標題</caption>
<!-- 頁眉 -->
<thead>
<tr> <!-- 表格的行 -->
<th colspan="2">1--one</th> <!-- 表格表頭，相當於列 跨兩行 -->
<th>2--two</th>
<th>3--three</th>
<th>4--four</th>
</tr>
</thead>
<!-- 表格主體 -->
<tbody>
<tr>
<td>a</td> <!-- 表格單元 -->
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</tbody>
<!-- 表格頁腳 -->
<tfoot>
<tr>
<td>h</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</tfoot>
</table>
9.列表
列表就是我們常常見到的一篇文章的目錄，它一般以一種樹型狀存在着，它可以分爲有序列表和無序列表。
1).有序列表
以標籤ol爲主體，li爲父目錄，具體表現爲：
<ol>
<li>任性</li>
<li>90後</li>
<li>boy</li>
</ol>
<ol start="45">
<li>90後</li>
<li>boy</li>
<li>任性</li>
</ol>
<ol type="a">
<li>90後</li>
<li>boy</li>
<li>任性</li>
</ol>
<ol type="A">
<li>90後</li>
<li>boy</li>
<li>任性</li>
</ol>
<ol type="I">
<li>90後</li>
<li>boy</li>
<li>任性</li>
</ol>
<ol type="i">
<li>90後</li>
<li>boy</li>
<li>任性</li>
</ol>
可以看出有序列表支持多種排序前綴，它就好比Word中的項目符號一樣。
2).無序列表
與有序列表唯一不同的就是沒有數字也沒有字母，只有圖形，也是猶如項目符號一樣。
<ul>
<li>任性</li>
<li>90後</li>
<li>boy</li>
</ul>
<ul type="disc">
<li>90後</li>
<li>boy</li>
<li>任性</li>
</ul>
<ul type="circle">
<li>90後</li>
<li>boy</li>
<li>任性</li>
</ul>
<ul type="square">
<li>90後</li>
<li>boy</li>
<li>任性</li>
</ul>
可以看出無序列表的默認項目符號就是類型就是黑圓圈
3).自定義列表
<dl>
<dt>1</dt>
<dd>計算機</dd>
<dt>2</dt>
<dd>電腦</dd>
<dt>3</dt>
<dd>PC</dd>
</dl>
可以看到自定義列表由我們自己定義列表項目符號，項目的內容
10.塊級元素和內聯元素
1).塊級元素
什麼是塊級元素，其實就是這個元素在進行顯示後會換行輸出下一個元素，比如我們的P標籤，還有Blockquote 標籤都是，不過今天我們要說的是Html中運用的最廣的塊級元素，它就是Div。
<div align="center">
<p>小花貓</p>
<a href="">小色貓</a>
<img src="1.png" />
<a href="">小白貓</a>
<blockquote>小懶貓</blockquote>
</div>
可以看到在Div中的塊級元素都換行了，然而內聯元素都沒有換行。
2).內聯元素
和塊級元素正好相反，不用換行輸出的那種，比如a標籤，或者是Big Small這些段落中的文本標籤都是內聯元素，當然也有例外，比如Pre標籤，這裏不再細說。今天我們要着重討論的是Span標籤。
<span>
<p>小花貓</p>
<a href="">小色貓</a>
<img src="1.png" />
<a href="">小白貓</a>
<blockquote>小懶貓</blockquote>
</span>
注意:Span標籤是沒有Align屬性的。
11.框架
框架是什麼？框架就是在一個窗口可以顯示多個頁面內容的一個容器。框架又分爲垂直和水平框架。
1).垂直框架
不可與Body標籤同時出現
<frameset cols="50%,50%"> #設置框架的列佔有比例
<frame src="1.png" noresize="noresize"> #無法調整框架的大小
<frame src="1.png">
</frameset>
2).水平框架
不可與Body標籤同時出現
<frameset rows="50%,50%"> #設置框架的行佔有比例
<frame src="1.png" noresize="noresize"> #無法調整框架的大小
<frame src="1.png">
</frameset>
3).內聯框架
#存在body標籤中
frameborder：是否顯示框架周圍的邊框 0隱藏 1顯示
scrolling：是否顯示滾動條 yes顯示 no隱藏 auto自動
width：寬度
height：高度
name：錨點名稱
<iframe src="" frameborder="0" scrolling='no' width=500 height=400 name='if'>
<img src='1.jpg'/>
</iframe>
<a href="https://www.baidu.com" target="if">fadf</a>
4).判斷是否支持框架
<noframes>
<body>您的瀏覽器不支持框架</body>
</noframes>
12.表單元素
這個算是Html中的重中之重了，因爲用的比較多，基本上所有的表單元素都包含在Form標籤中。每一個表單中的空間要麼獨立存在，要麼處於Input中，下面我們來詳細瞭解下：
<form action='' method='get' accept-charset="" target="" autocomplete="" enctype="" novalidate>
<fieldset> #字段組
<legend>表單數據</legend> 字段組名
表單控件的標記
<label for='sex'> for必須指向id
<input type="text" name="sex" id='sex'>
</label>
文本輸入框：<input type="text">
密碼輸入框：<input type="password" name="">
單選框：<input type="radio" name="性別" value="男" checked>
<input type="radio" name="性別" value="女">
多選框：<input type="checkbox" name="愛好" value='踢足球'>
<input type="checkbox" name="愛好" value='打籃球'>
<input type="checkbox" name="愛好" value='打排球'>
<input type="checkbox" name="愛好" value='羽毛球'>
<input type="checkbox" name="愛好" value='橄欖球'>
按鈕：<button>button1</button>
下拉列表：
<select name='seq'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
文本域：
<textarea name='area' rows=10 cols=20> 行佔10個字符 列佔20個字符，一個漢字等於兩個字符
hello world
</textarea>
菜單：
<menu type="list"> 列表菜單 還有上下文菜單(context) 工具欄菜單(toolbar)
<menu label="文件">
<button type="button">新建</button>
<button type="button">打開</button>
<button type="button">退出</button>
</menu>
</menu>
<menu type="context" id="menu">
<menuitem label="menu" type='checkbox' icon="1.png"> 多選菜單項目 還有單選(radio)和命令(command)
</menuitem>
</menu>
<input type="button" name="" value='button2'>
提交：<input type="submit" name="" value="Submit">
</fieldset>
Html5表單類型
預定義選項列表
<input list="rice">
<datalist id="rice">
<option value="1">
<option value="2">
<option value="3">
<option value="4">
<option value="5">
</datalist>
表單的密鑰對生成器字段
當提交表單時，私鑰存儲在本地，公鑰發送到服務器。
<keygen name="security" keytype="rsa" disabled="disabled"/>
輸入框只允許數字輸入
<input type="number">
日期
<input type="date" name="">
顏色
<input type="color" name="">
範圍
<input type="range" name="">
月份和年份
<input type="month" name="">
星期和年份
<input type="week" name="">
時間
<input type="time" name="">
日期時間選擇(有時區)
<input type="datetime" name="">
日期時間選擇(無時區)
<input type="datetime-local">
郵箱
<input type="email" name="">
搜索
<input type="search" name="">
電話
<input type="tel" name="">
url
<input type="url" name="">
</form>
action：處理表單數據的服務器腳本語言（如php）
method：請求方法 如get post
accept-charset：提交表單時的字符編碼 如utf-8
target：頁面跳轉方式
autocomplete：自動完成表單 off關閉 on開啓
enctype:表單數據的編碼 如application/x-www-form-urlencoded(默認),multipart/form-data(文件上傳),text/plain
novalidate：瀏覽器不驗證表單
formtarget 覆蓋target屬性,用於type="submit"和type="image"。
formnovalidate覆蓋novalidate屬性,用於 type="submit"
formmethod 覆蓋method 屬性,用於 type="submit"以及type="image"
formenctype 覆蓋enctype屬性,用於type="submit"以及type="image",僅針對method="post"的表單
formaction 提交表單時處理該輸入控件的文件的URL
form 規定input元素所屬的一個或多個表單
autofocus 當頁面加載時自動獲得焦點
disabled 輸入字段應該被禁用
max 輸入字段的最大值
maxlength 輸入字段的最大字符數
min 輸入字段的最小值
pattern 通過其檢查輸入值的正則表達式
readonly 輸入字段爲只讀
required 輸入字段是必需的
size 輸入字段的寬度
step 輸入字段的合法數字間隔
value 輸入字段的默認值
multiple 常用於郵箱和文件，可多個上傳文件
placeholder 提示用戶該如何正確輸入
13.Html 頭部，標題
之所以現在講這個，是不想一開始就長篇大論，增加一些沒必要的修飾，免得擾亂學習的進度。
我們都知道Html，既然是Html，怎麼可以沒有Html標籤了，當然是有的，只是我一開始沒有寫罷了，當然也可以不用寫，不過爲了美觀爲了不出錯，建議寫上。瀏覽器標題在瀏覽器頭部裏面被它包裹着。
<Html>
<head> 瀏覽器頭部
<title>瀏覽器標題</title>
<base href="https://www.baidu.com"> 規定所有鏈接的默認地址
<link rel="stylesheet" type="text/css" href=""> 引入外部css文件
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<meta http-equiv="Content-Type" content="text/Html" charset="utf-8">設置瀏覽器內容類型爲Html，編碼爲utf-8
<meta http-equiv="Refresh" content="5" /> 五秒刷新
<meta http-equiv="Refresh" content="5;url=https://www.baidu.com" /> 五秒後跳轉到百度
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡"> 設置搜索關鍵字 SEO
http-equiv 瀏覽器的內容頭部
content-type 內容類型
expires cookie過期時間
refresh 刷新
set-cookie 設置cookie
charset 編碼
name 一般做搜索關鍵詞
author 作者
description 頁面描述內容
keywords 關鍵詞
generator 生成器
revised 修改後的值
others 其它
scheme 用於翻譯網頁文本的格式
http https 協議
YYYY-MM-DD 日期格式
<script type="text/javascript">編寫腳本</script>
<style type="text/css">編寫css樣式</style>
</head>
<body>
瀏覽器主體內容
</body>
</Html>
14.音、視頻
在Html中也是可以播放音頻和視頻的，不過這項功能添加在了Html最新版5.0版中的，下面來看看：
1).音頻
比如說我們經常熟知的Mp3,Wav,可以通過Audio標籤來進行播放。
1)).embed
<embed src="1.mp3" /> 還可播放Flash動畫 只需將src屬性中的內容換位1.swf即可，不過得先保證你有1.swf這個文件
2)).object
<object data="1.mp3"></object>
3)).audio
<audio controls="controls"> h5中的標準,帶有播放控制按鈕 支持mp3 wav wma等格式
<source src="1.mp3" type="audio/mp3" />
</audio>
4)).a標籤
<a href="1.mp3">播放</a>
2).視頻
1)).embed
<embed src="qw.mp4" />
2)).object
<object data="qw.mp4"></object>
3)).video
<video controls="controls"> 支持MP4 avi wmv flv格式播放
<source src="qw.mp4" type="video/mp4" />
</video>
4)).a標籤
<a href="qw.mp4">播放</a>
15.Html5中的文章佈局
可以幫我們省去一些不必要的排版標籤，利用新式佈局標籤會顯得更加專業，而且代碼量更少。
header 頁眉
nav 導航
section 文檔中的節
article 獨立的自包含文章
aside 側欄
footer 頁腳
details 額外的細節
summary details的標題
<header>
<h1>CCTV</h1>
</header>
<nav>
CCTV-1<br>
CCTV-2<br>
CCTV-3<br>
</nav>
<section>
<h1>新聞聯播</h1>
<p>
大家好，歡迎來到新聞聯播。下面請看簡訊
</p>
<p>
一男子每天靠擺地攤賺錢，這是怎麼回事呢？
</p>
</section>
<summary>
<h3>其它簡訊</h3>
<details>
後浪們，擺攤吧~
</details>
<details>
擺攤入門知識
</details>
</summary>
<footer>
商務合作www.這你都信.com
</footer>
可以看到，文章結構緊湊，排版更加讓人覺得一目瞭然。
二、總結
雖然Html總體來說，可能難度不是很大，但是要想學好，也不是一件容易的事，把一件小事做好，定能出彩。
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/