前言
在做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 postaccept-charset：提交表單時的字符編碼 如utf-8
target：頁面跳轉方式autocomplete：自動完成表單 off關閉 on開啟enctype:表單數據的編碼 如Application/x-www-form-urlencoded(默認),multipart/form-data(文件上傳),text/plainnovalidate：瀏覽器不驗證表單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 提交表單時處理該輸入控件的文件的URLform 規定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 設置cookiecharset 編碼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/
