網(wǎng)頁開發(fā)工具
Hbuiler（http://www.dcloud.io/）
WebStorm（https://www.jetbrains.com/webstorm/）
HTML簡介
HTML：Hyper Text Markup Language
html文本的內(nèi)部基本結構
<!--
文檔聲明，標識當前網(wǎng)頁的版本的
該聲明標識網(wǎng)頁是遵循h(huán)tml5語法規(guī)范的
編寫網(wǎng)頁時境肾，一定要編寫的文檔聲明瑞佩，
在某些瀏覽器中荡含，如果不寫文檔聲明调鬓，會導致瀏覽器進入到怪異模式
-->
<!doctype html>
<!-- html網(wǎng)頁中根標簽徙垫，一個頁面中有且只有一個根標簽
網(wǎng)頁中的所有內(nèi)容都應該寫在根標簽的內(nèi)部
-->
<html>
<!--
網(wǎng)頁的頭部，head標簽中的內(nèi)容，不會在頁面中直接顯示
瀏覽器根據(jù)head中的內(nèi)容來解析網(wǎng)頁璃俗，搜索引擎也可以根據(jù)他們來檢索網(wǎng)頁
-->
<head>
<!-- 使用meta來設置頁面的字符集 -->
<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)容，都應該寫在body中 -->
<body>
<h1>這是一個非常漂亮的網(wǎng)頁</h1>
</body>
</html>
html的注釋
<html>
<head>
<title>網(wǎng)頁的標題</title>
</head>
<body>
<!--
注釋 HTML注釋中的內(nèi)容跟磨，
不會在頁面中顯示间聊，
但是可以在源代碼中查看
通過注釋可以對代碼進行解釋說明
一定要養(yǎng)成良好的編寫注釋的習慣
編寫注釋時，要求簡單明了
日期：
作者：
功能：
通過注釋可以將不希望在頁面中顯示代碼隱藏
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>年設立人才實訓中心<br/>
<em>2009</em>年成為教育部軟件工程專業(yè)大學生實習基地<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>
練習 制作發(fā)帖指南
練習 制作書籍列表
圖像標簽
常見的圖像格式
JPG
GIF
PNG
BMP
絕對路徑與相對路徑
絕對路徑
絕對路徑是指文件在硬盤上真正存在的路徑苫拍。例如“bg.jpg”這個圖片是存放在硬盤的“E:\book\網(wǎng)頁布局代碼\第2章”目錄下，那么 “bg.jpg”這個圖片的絕對路徑就是“E:\book\網(wǎng)頁布\代碼\第2章\bg.jpg"旺隙。那么如果要使用絕對路徑指定網(wǎng)頁的背景圖片就應該使用 以下語句：
<img src="E:\book\網(wǎng)頁布局\代碼\第2章\bg.jpg" >
使用絕對路徑的缺點
在網(wǎng)頁編程時绒极，很少會使用絕對路徑，如果使用“E:\book\網(wǎng)頁布\代碼\第2章\bg.jpg”來指定圖片的位置蔬捷，在自己的計算機上 瀏覽可能會一切正常垄提，但是上傳到Web服務器上瀏覽就很有可能不會顯示圖片了榔袋。因為上傳到Web服務器上時，可能整個網(wǎng)站并沒有放在Web服務器的E盤铡俐， 有可能是D盤或H盤凰兑。即使放在Web服務器的E盤里，Web服務器的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服務器的哪個位置惭笑，在瀏覽器里都能正確地顯示圖片。
當圖片在image文件夾里時：
src="image/11ha.jpg" alt="小女孩" />
如果在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
綜合實戰(zhàn)
將本章所有練習做成一個導航
課后作業(yè)
必做任務
1.制作經(jīng)典語錄（p標簽，h2標簽长已，圖片標簽）
2.制作莎士比亞的詩（ p標簽畜眨，h2標簽，br標簽术瓮，hr標簽）
3.制作商品列表（ul標簽康聂，li標簽）
擴展任務
1.制作高數(shù)目錄（標簽嵌套）
2.制作手機app排行榜（標簽嵌套，圖片標簽）
