整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天小編帶領大家走進我們華信智原前端老師的課堂，一起了解HTML的相關知識，本次分享是第一節課哦，后續還會陸續更新全部課程知識，歡迎大家點擊關注我們，一起學習前端吧！
這節課的目標是認識HTML是什么以及學會在DW中建立站點，并發布自己的第一個html頁面。
一、認識HTML
HTML概念：超本文標記語言（HyperText Markup Language）
超文本：瀏覽器就可以解釋的，比如http（超文本傳輸協議）。官方解釋：“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標記語言： 由一個一個的標記組成的語言。比如段落是<p>…</p>這個標記表示，圖像是由<img/>這個標記表示。超鏈接是<a>…</a>標記表示。學習標記語言的關鍵是明白網頁的元素（布局、結構、內容等）應該由什么標記來描述是最恰當的。
我們要讓瀏覽器按照人的思維來顯示網頁，就必須掌握瀏覽器解釋網頁的html語言，明白標簽的作用，比如你想產生段落，就必須用<p>段落內容</p>的方式才能實現。
HTML的歷史：
超文本標記語言（第一版）——在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（并非標準）：
HTML 2.0——1995年11月作為RFC 1866發布，在RFC 2854于2000年6月發布之后被宣布已經過時
HTML 3.2——1997年1月14日，W3C推薦標準
HTML 4.0——1997年12月18日，W3C推薦標準
HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準
XHTML1.0——發布于2000年1月26日，是W3C推薦標準，后來經過修訂于2002年8月1日重新發布。
XHTML 1.1，于2001年5月31日發布，W3C推薦標準。
XHTML 2.0，W3C工作草案。
HTML4.01 是常見的版本。
XHTML 5，從XHTML 1.x的更新版，基于HTML 5草案。
HTML 5——2014年10月28日，W3C推薦標準
HTML標記的語法：
標記只有兩種語法結構，一種包容標記，一種空標記。
1、包容標記 <開始標記>...</結束標記>，比如 <h1>...</h1>、<p>…</p>等。
2、空標記 <開始標記/>，比如<img /> <br/> <hr/>等。
標記的屬性只能放在開始標記里面。
1、<a href="URL" target="_blank">被點擊的對象</a>
2、<img src="URL" alt="替換文本"/>
在DW的"插入"菜單——標簽中，可以看到所有的html標簽，如下圖：
并不是所有標簽都是有用的，有些標簽隨著版本的升級會廢除，但是并沒有刪除，所以真正有用的標簽只有那么幾十個。
二、在DW中建立站點，并發布第一個HTML頁面
基本步驟如下：
1、建立站點，設置好根目錄文件夾和默認圖片文件夾（非常重要）。
2、新建html頁面，并保存在根目錄文件夾下面。
3、再往保存好的頁面中添加內容，比如文字和圖片、超鏈接等。
詳細介紹如下：
1、點擊“管理站點”，在彈出的面板中點擊“新建站點”，如圖：
2、設置“站點名稱”和“本地站點文件夾”，本地站點文件夾就是你存放整個網站的根目錄，點擊后面的文件夾小圖標，選擇一個盤符，新建一個文件夾，選擇好就可以了。比如，選擇F盤下面的lianxi文件夾。
3、這一步非常關鍵，必須要設置“默認圖像文件夾”，點擊“高級設置”，再點擊后面的文件夾小圖標，在剛才設置好的“lianxi”根目錄文件夾下面再新建一個“images”文件夾，選擇好。要保證“images”文件夾必須在你設置的根目錄文件夾的下面。
建立這個默認圖像文件夾的好處是從站點以外選擇的圖片，都會自動把圖片復制到這個默認圖像文件夾的下面。保證了站點的所有資源都在站點內部，不會丟失圖片。
否則，如果你沒有設置這個圖像文件夾，每次從站點以外的地方插入圖片，都會有如下提示：
4、站點建立好后，就可以新建html頁面，保存并發布了。
按F12發布的時候，默認是IE瀏覽器，如果想設置為別的瀏覽器，可以編輯瀏覽器列表。如圖所示：
1、點擊小球球，編輯瀏覽器列表。
2、點擊“+”按鈕，添加要發布的瀏覽器。
3、以谷歌為例，找到谷歌的快捷方式，右鍵菜單中選擇“屬性”。
4、復制谷歌的路徑，一定是以“.exe”為后綴名的路徑，這是可執行文件。
5、粘貼到應用程序中，設置為“主瀏覽器”，確定即可。
6、回到DW中，按下F12，即可看到在谷歌中發布了網頁。
怎么樣？這HTML第一課大家學會了嗎？
關注華信智原，樂享更多好課。
TML教程
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。
您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。
在本教程中，您將學習如何使用 HTML 來創建站點。
HTML 很容易學習！相信您能很快學會它！
本教程包含了數百個 HTML 實例。
使用本站的編輯器，您可以輕松實現在線修改 HTML，并查看實例運行結果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>HTML 文檔的后綴名
.html
.htm
都可以。
實例：
<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</html>實例解析
什么是HTML？
標簽
<標簽>內容</標簽>html元素
“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:
HTML 元素:
<p>這是一個段落</p>web瀏覽器
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。
瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶
html網頁結構
<html>
<head>
<title>頁面標題</title>
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
</body>
</html>html的版本：
<!DOCTYPE>聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。
網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。
doctype 聲明是不區分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>html5
<!DOCTYPE html>html4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">xhtml1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">中文編碼
目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。
對路徑-以引用文件之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對。
絕對路徑-以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個文件時，所使用的路徑都是一樣的。
其實絕對路徑與相對路徑的不同之處，只在于描述目錄路徑時，所采用的參考點不同。由于對網站上所有文件而言，根目錄這個參考點對所有文件都是一樣的，因此，運用以根目錄為參考點的路徑描述方式才會被稱之為絕對路徑。
以下為建立路徑所使用的幾個特殊符號，及其所代表的意義。
“.”–代表目前所在的目錄。
“..”–代表上一層目錄。
“/”–代表根目錄。
例：假設讀者所建立的Web站點擁有如下圖所示目錄路徑。假若要在Ref.htm文件中引用BeRef.gif文件時，其相對路徑如下：
./SubDir2/BeRef.gif
上面的引用路徑中，”.”代表目前的目錄(Dir1)，所以”./SubDir2”代表目前目錄下的SubDir2。其實，也可以省略”./”直接用這個式引用。
SubDir2/BeRef.gif
若使用絕對路徑以根目錄為參考點引用該文件時，引用路徑如下：
/Dir1/SubDir2/BeRef.gif
如果Web站點的目錄之結構如下圖示:
引用BeRef.gif文件的相對路徑又是如何呢?假若要在Ref.htm文件中引用BeRef.gif文件時其相對路徑如下：
../SubDir2/BeRef.gif
上面的引用路徑中，”..”代表上一層目錄，所以，/Dir2”代表上一層目錄下的Dir2子目錄。若使用絕對路徑引用時，則引用路徑如下：
/Dir2/BeRer.gif
我們再舉一個比較復雜的例子，來比較一下相對路徑與絕對路徑的使用。假設在讀者所建立的Web站點中，擁有如下圖的目錄路徑。
我們用以一個表格來說明在上圖的情況下，某文件引用另一文件時，所應使用的相對路徑與絕對路徑。
上表中比較需要說明的是”../../”所代表的意義。
“..”代表上一層目錄，而”../../”所代表的是上一層目錄的上一層目錄。所以，從上表中可以看出，如果引用的文件存在于目前目錄的子目錄中，或者存在于上一層目錄的 另一個子目錄中，運用相對路徑是比較方便的。如果不是時，則利用絕對路徑。從上表中，亦可以看出，當被引用的是同一個文件時，引用文件所使用的絕對路徑是一樣的。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
