網(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)
<!--
文檔聲明，標識當(dāng)前網(wǎng)頁的版本的
該聲明標識網(wǎng)頁是遵循h(huán)tml5語法規(guī)范的
編寫網(wǎng)頁時，一定要編寫的文檔聲明昵仅，
在某些瀏覽器中啃憎，如果不寫文檔聲明偷溺，會導(dǎo)致瀏覽器進入到怪異模式
-->
<!doctype html>
<!-- html網(wǎng)頁中根標簽划煮，一個頁面中有且只有一個根標簽
網(wǎng)頁中的所有內(nèi)容都應(yīng)該寫在根標簽的內(nèi)部
-->
<html>
<!--
網(wǎng)頁的頭部裆操，head標簽中的內(nèi)容官地，不會在頁面中直接顯示
瀏覽器根據(jù)head中的內(nèi)容來解析網(wǎng)頁酿傍，搜索引擎也可以根據(jù)他們來檢索網(wǎng)頁
-->
<head>
<!-- 使用meta來設(shè)置頁面的字符集 -->
<meta charset="utf-8" />
<!--
網(wǎng)頁的標題，一般會在頁面的標簽頭部顯示
所屬引擎在檢索一個網(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)頁的標題</title>
</head>
<body>
<!--
注釋 HTML注釋中的內(nèi)容，
不會在頁面中顯示雪情，
但是可以在源代碼中查看
通過注釋可以對代碼進行解釋說明
一定要養(yǎng)成良好的編寫注釋的習(xí)慣
編寫注釋時遵岩，要求簡單明了
日期：
作者：
功能：
通過注釋可以將不希望在頁面中顯示代碼隱藏
HTML注釋不能嵌套（所有的多行注釋都不能嵌套）
-->
<!-- 這是頁面的1級標題 -->
<h1>這是我的第二個網(wǎng)頁</h1>
<!-- 我是一個注釋 <!-- 我是注釋中的注釋 --> -->
</body>
</html>
標題標簽 ，段落標簽巡通，水平線尘执，換行，加粗宴凉，斜體
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>常用的標簽</title>
</head>
<body>
<!-- 標題標簽
在HTML一共有h1 ~ h6 六級標題
6級標題中 h1最大 h6最小
從h1 到 h6 重要性依次降低
h1最重要誊锭，h2其次 依次遞減
搜索引擎檢索頁面時，h1僅次于title跪解，也會影響到頁面在搜索引擎中的排名
一個頁面一般只有一個h1標簽
一般頁面中只會使用h1 ~ h3
-->
<h1>一級標題標簽</h1>
<h2>二級標題標簽</h2>
<h3>三級標題標簽</h3>
<h4>四級標題標簽</h4>
<h5>五級標題標簽</h5>
<h6>六級標題標簽</h6>
<!-- 段落標簽 使用p標簽來表示一個段落
段落標簽會獨占一行炉旷，并和其他內(nèi)容會有一個距離
-->
<p>第一次</p>
<p>今天天氣真不錯</p>
<hr />
<!--
在HTML中签孔，默認將多個空格和換行認為是一個空格
使用br標簽來表示一個換行
-->
<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>
效果
列表標簽
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>列表</title>
</head>
<body>
<!--
HTML中一共有三種列表
1.無序列表
- 使用ul標簽來創(chuàng)建一個無序列表
- 使用li向無序列表中添加列表項
- 無序列表默認使用 圓點 來作為項目符號
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>
效果圖
圖像標簽
絕對路徑與相對路徑
絕對路徑
絕對路徑是指文件在硬盤上真正存在的路徑六孵。例如“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)頁時是不會顯示圖片的散怖。
相對路徑
所謂相對路徑，就是相對于自己的目標文件位置肄渗。例如上面的例子杭抠，“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="小女孩" />
如果html文件在比圖片深一層的文件夾里：
<img src="../11ha.jpg" alt="小女孩" />
如果html文件在比圖片深兩層的文件夾里，就在前面再羅列兩個點“..”硝桩，深幾層羅列幾次沿猜。
<img src=“../../11ha.jpg” alt=“小女孩” />
圖片在html文件上兩級image文件夾中的renwu文件夾里
<img src=“../../image/renwu/11ha.jpg”/>
鏈接標簽
<a href="path" target="目標窗口位置">鏈接文本或圖像</a>
href: 鏈接路徑
target:鏈接在哪個窗口打開,常用值：_self（在自身窗口打開）、_blank（在新窗口打開）
不添加href 沒有下劃線也不能鏈接
