網(wǎng)頁開發(fā)工具
Hbuiler（http://www.dcloud.io/）
WebStorm（https://www.jetbrains.com/webstorm/）
HTML簡介
HTML：Hyper Text Markup Language
html文本的內(nèi)部基本結(jié)構(gòu)
<!--
文檔聲明蔬捷，標(biāo)識當(dāng)前網(wǎng)頁的版本的
該聲明標(biāo)識網(wǎng)頁是遵循h(huán)tml5語法規(guī)范的
編寫網(wǎng)頁時诚卸，一定要編寫的文檔聲明酣倾，
在某些瀏覽器中永脓，如果不寫文檔聲明髓窜，會導(dǎo)致瀏覽器進(jìn)入到怪異模式
-->
<!doctype html>
<!-- html網(wǎng)頁中根標(biāo)簽震桶，一個頁面中有且只有一個根標(biāo)簽
網(wǎng)頁中的所有內(nèi)容都應(yīng)該寫在根標(biāo)簽的內(nèi)部
-->
<html>
<!--
網(wǎng)頁的頭部竣况，head標(biāo)簽中的內(nèi)容鹊杖，不會在頁面中直接顯示
瀏覽器根據(jù)head中的內(nèi)容來解析網(wǎng)頁坯沪，搜索引擎也可以根據(jù)他們來檢索網(wǎng)頁
-->
<head>
<!-- 使用meta來設(shè)置頁面的字符集 -->
<meta charset="utf-8" />
<!--
網(wǎng)頁的標(biāo)題绿映，一般會在頁面的標(biāo)簽頭部顯示
所屬引擎在檢索一個網(wǎng)頁時，會主要檢索title中的內(nèi)容
并依據(jù)該內(nèi)容腐晾，來判斷網(wǎng)頁的主要內(nèi)容叉弦，
title中的內(nèi)容會影響到網(wǎng)站在搜索引擎中的排名
-->
<title>我是title</title>
</head>
<!-- 網(wǎng)頁的主體，網(wǎng)頁中所有的可見內(nèi)容藻糖，都應(yīng)該寫在body中 -->
<body>
<h1>這是一個非常漂亮的網(wǎng)頁</h1>
</body>
</html>
html的注釋
<html>
<head>
<title>網(wǎng)頁的標(biāo)題</title>
</head>
<body>
<!--
注釋 HTML注釋中的內(nèi)容淹冰，
不會在頁面中顯示，
但是可以在源代碼中查看
通過注釋可以對代碼進(jìn)行解釋說明
一定要養(yǎng)成良好的編寫注釋的習(xí)慣
編寫注釋時颖御，要求簡單明了
日期：
作者：
功能：
通過注釋可以將不希望在頁面中顯示代碼隱藏
HTML注釋不能嵌套（所有的多行注釋都不能嵌套）
-->
<!-- 這是頁面的1級標(biāo)題 -->
<h1>這是我的第二個網(wǎng)頁</h1>
<!-- 我是一個注釋 <!-- 我是注釋中的注釋 --> -->
</body>
</html>
標(biāo)題標(biāo)簽 榄棵，段落標(biāo)簽，水平線潘拱，換行疹鳄，加粗，斜體
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>常用的標(biāo)簽</title>
</head>
<body>
<!-- 標(biāo)題標(biāo)簽
在HTML一共有h1 ~ h6 六級標(biāo)題
6級標(biāo)題中 h1最大 h6最小
從h1 到 h6 重要性依次降低
h1最重要芦岂，h2其次 依次遞減
搜索引擎檢索頁面時瘪弓，h1僅次于title，也會影響到頁面在搜索引擎中的排名
一個頁面一般只有一個h1標(biāo)簽
一般頁面中只會使用h1 ~ h3
-->
<h1>一級標(biāo)題標(biāo)簽</h1>
<h2>二級標(biāo)題標(biāo)簽</h2>
<h3>三級標(biāo)題標(biāo)簽</h3>
<h4>四級標(biāo)題標(biāo)簽</h4>
<h5>五級標(biāo)題標(biāo)簽</h5>
<h6>六級標(biāo)題標(biāo)簽</h6>
<!-- 段落標(biāo)簽 使用p標(biāo)簽來表示一個段落
段落標(biāo)簽會獨占一行禽最，并和其他內(nèi)容會有一個距離
-->
<p>第一次</p>
<p>今天天氣真不錯</p>
<hr />
<!--
在HTML中腺怯，默認(rèn)將多個空格和換行認(rèn)為是一個空格
使用br標(biāo)簽來表示一個換行
-->
<p>
床前明月光<br />
疑是地上霜<br />
舉頭望明月<br />
低頭思故鄉(xiāng)<br />
</p>
<!-- 水平線，可以在頁面的指定位置輸出一條水平線 -->
<hr />
<!--加粗：<strong>…</strong>-->
<!--斜體：<em>…</em>-->
<strong>簡介</strong>
<p>
<em>2008</em>年設(shè)立人才實訓(xùn)中心<br/>
<em>2009</em>年成為教育部軟件工程專業(yè)大學(xué)生實習(xí)基地<br/>
</p>
</body>
</html>
列表標(biāo)簽
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>列表</title>
</head>
<body>
<!--
HTML中一共有三種列表
1.無序列表
- 使用ul標(biāo)簽來創(chuàng)建一個無序列表
- 使用li向無序列表中添加列表項
- 無序列表默認(rèn)使用 圓點 來作為項目符號
2.有序列表
- 有序列表和無序列表類似川无，不同的是它使用ol來創(chuàng)建其他的都和無序列表一樣
- 有序列表使用有序的序號 作為項目符號
3.定義列表
- 定義列表用來對一些內(nèi)容做解釋說明的
- 使用 dl 來創(chuàng)建一個定義列表
- 在dl中使用dt呛占，來創(chuàng)建一個定義項
- 使用dd來創(chuàng)建一個對定義項的描述
- 列表之間可以互相嵌套，可以在有序列表中放無序列表懦趋，也可以在無序列表放有序列表
-->
<ul>
<li>西紅柿</li>
<li>大茄子</li>
<li>小辣椒</li>
</ul>
<ol>
<li>桃花源記</li>
<li>岳陽樓記</li>
<li>小石潭記</li>
<li>醉翁亭記</li>
</ol>
<p>菜譜</p>
<ul>
<li>
魚香肉絲
<ol>
<li>魚</li>
<li>香</li>
<li>肉絲</li>
</ol>
</li>
<li>宮保雞丁</li>
<li>青椒肉絲</li>
</ul>
<dl>
<dt>武松</dt>
<dd>景陽岡上的大虎英雄晾虑，戰(zhàn)斗力99</dd>
<dd>后來打死西門大官人，后逃逸仅叫，出家為僧</dd>
<dt>武大</dt>
<dd>著名餐飲企業(yè)家帜篇，戰(zhàn)斗力0</dd>
</dl>
</body>
</html>
圖像標(biāo)簽
絕對路徑與相對路徑
絕對路徑
絕對路徑是指文件在硬盤上真正存在的路徑。例如“bg.jpg”這個圖片是存放在硬盤的“E:\book\網(wǎng)頁布局代碼\第2章”目錄下诫咱，那么 “bg.jpg”這個圖片的絕對路徑就是“E:\book\網(wǎng)頁布\代碼\第2章\bg.jpg"笙隙。那么如果要使用絕對路徑指定網(wǎng)頁的背景圖片就應(yīng)該使用 以下語句：
<img src="E:\book\網(wǎng)頁布局\代碼\第2章\bg.jpg" >
使用絕對路徑的缺點
在網(wǎng)頁編程時，很少會使用絕對路徑坎缭，如果使用“E:\book\網(wǎng)頁布\代碼\第2章\bg.jpg”來指定圖片的位置竟痰，在自己的計算機上 瀏覽可能會一切正常签钩，但是上傳到Web服務(wù)器上瀏覽就很有可能不會顯示圖片了。因為上傳到Web服務(wù)器上時凯亮，可能整個網(wǎng)站并沒有放在Web服務(wù)器的E盤边臼， 有可能是D盤或H盤。即使放在Web服務(wù)器的E盤里假消，Web服務(wù)器的E盤里也不一定會存在“E:\book\網(wǎng)頁布局\代碼\第2章”這個目錄柠并，因此在瀏 覽網(wǎng)頁時是不會顯示圖片的。
相對路徑
所謂相對路徑富拗，就是相對于自己的目標(biāo)文件位置臼予。例如上面的例子，“11111111.html” 文件里引用了“11ha.jpg”圖片啃沪，由于“11ha.jpg”圖片相對于“11111111.html”來說粘拾，是在同一個目錄的，那么在“11111111.html”文件里使用以下代碼后：
<img src=“11ha.jpg” alt=“小女孩” />
只要這兩個文件的相對位置沒有變(也就是說還是在同一個目錄內(nèi))创千，那么無論上傳到Web服務(wù)器的哪個位置缰雇，在瀏覽器里都能正確地顯示圖片。
當(dāng)圖片在image文件夾里時：
<img src="image/renwu/11ha.jpg" alt="小女孩" />
鏈接標(biāo)簽
<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>
href: 鏈接路徑
target:鏈接在哪個窗口打開,常用值：_self（在自身窗口打開）追驴、_blank（在新窗口打開）
不添加href 沒有下劃線也不能鏈接
