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