2016.3.17HTML入門瞭解

爲什麼要學習HTML5？

1.從2010年HTML5正式推出以來，它就受到了世界各大瀏覽器的歡迎和支持，根據世界上各大IT界知名媒體的評論，新的web時代，HTML5的時代馬上就要到來。

2.它可以跨平臺運行，在PC，Mark，Linux，手機，iPad都可以完美運行。

3.對硬件的要求低。

4.可以代替flash，尤其是在手機端開發。

HTML5是什麼呢？

html又稱爲超文本標記語言（英文：HyperText Markup Language，HTML）是爲“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。HTML被用來結構化信息——例如標題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。它不是一種編程語言.

HTML5的新特性：用於繪畫的canves標籤，用於媒介回放的video和audio元素，對本地離線儲存的更好支持，新的特殊內容元素（如article，footer，header，nav，section），新的表單控件（如calendar，date，time，email，url, search），瀏覽器的支持（Safari，chrome,Firefox,Opera,IE9基本支持了HTML5）。

環境搭建

常用：webstrom,notepad++,eclipse,text sublime,dreamweaver

推薦：Intellij IDEA

進一步瞭解HTML5

tml文本是由 html命令組成的描述性文本，html 命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。 html網頁結構包括頭部 (head)、主體 (body) 兩大部分。頭部描述瀏覽器所需的信息，主體包含所要說明的具體內容。

　　html是製作網頁的基礎，我們在網絡營銷中講的靜態網頁，就是以html爲基礎製作的網頁，早期的網頁都是直接用html代碼編寫的，不過現在有很多智能化的網頁製作軟件（常用的如frontpage，dream weaver等）通常不需要人工去寫代碼，而是由這些軟件自動生成的。儘管不需要自己寫代買，但瞭解html代碼仍然非常重要，瞭解認識html是什麼？是學習網絡營銷與電子商務的重要技術基礎知識。

自己動手建一個非常簡單的網頁，首先設置電腦顯示擴展名方法，打開我的電腦，然後在欄目工具-》文件夾選項-》查看-》高級設置中找到《隱藏已知文件類型的擴展名》將其不勾選，然後點擊運用確認設置完成。實現建立一個新的文本文件，在桌面新建一個txt文檔（記住，如果你在使用比較複雜的文字處理器，就應該用“純文本”或“普通文本”來保存）在文檔裏寫一些文字，然後將此文件命名爲“xxxx.html”。(隨便你起一個什麼名字,擴展名也可是HTM)。然後你可以用瀏覽器將它打開，你會看見最簡單的自己做的頁面。

DIVCSS5幫您理解：
1）、html首先是就是我們常常所說靜態網頁；
2）、html是以.html或.htm爲擴展名的文件（顯示網頁擴展名）；
3）、html有一定標籤代碼規則，讓內容在瀏覽器中呈現我們需要的樣式；
4）、html可以使用記事本新建，並且以.html或.htm擴展名保存。

Html文件裏代碼具有一定的規則規律標籤與內容組成。通過規定的html結構和內容組成一個完整的Html文件。Html我們可以直接使用IE瀏覽器打開，查看網頁效果。

如果要想在瀏覽器中顯示各式各樣的網頁，這個時候我們就需要HTML文件（html基本結構+內容+標籤組成）和CSS文件（CSS樣式）實現我們要求的漂亮各式各樣的網頁。

這個時候你可能需要了解：
1）、html網頁結構
2）、html代碼是什麼
3）、html常用標籤
4）、記事本怎麼新建html
5）、開發html工具

HTML結構基礎……做一個最簡單的網頁

以下內容來自DIVCSS5

很多時候學網頁製作開發的時候第一看到的印象深刻的就是html或htm後綴結尾的網頁，我們把這類網頁歸結爲靜態網頁，僞靜態除外。

那html或htm與其它如php、asp、aspx、jsp等後綴結尾的網頁有什麼區別呢？
首先，html頁面是靜態的從頭到尾沒有程序的執行是純的html語言，是不經過服務器處理就直接送出給瀏覽器呈現給瀏覽者。
而其他後綴的結尾的網頁相對來說就是動態網頁頁面，動態頁面是經過服務器對各自的程序翻譯處理、數據庫操作等處理然後才由瀏覽器把服務器處理完的數據程序給用戶，而網頁內容數據可以隨後臺數據改變而改變。

那html基本語言機構是怎麼樣的呢？
先看一下的html結構：

<html>
<head>
<title>放置文章標題</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> //這裏是網頁編碼現在是gb2312
<meta name="keywords" content="關鍵字" />
<meta name="description" content="本頁描述或關鍵字描述" />
</head>
<body>
這裏就是正文內容
</body>
</html>

完整HTML包括html DOCTYPE聲明、title標題、head、網頁編碼聲明等內容
最初使用完整的html源代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>標題部分-www.divcss5.com</title>
<meta name="keywords" content="關鍵字" />
<meta name="description" content="本頁描述或關鍵字描述" />
</head>
<body>
內容
</body>
</html>

最新完整HTML結構-HTML源代碼(推薦)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>網頁標題-www.divcss5.com</title>
<meta name="keywords" content="關鍵字" />
<meta name="description" content="此網頁描述" />
</head>
<body>
網頁正文內容-WWW.DIVCSS5.COM -DIVCSS5提供
</body>
</html>

無論是html還是其它後綴的動態頁面其html語言結構都是這樣的，只是在命名網頁文件時以不同的後綴結尾。
1、無論是動態還是靜態頁面都是以“<html>”開始，然後在網頁最後以“</html>”結尾。
2、“<html>”後接着是“<head>”頁頭，其在<head></head>中的內容是在瀏覽器中內容無法顯示的，這裏是給服務器、瀏覽器、鏈接外部JS、a鏈接 CSS樣式等區域，而裏面“<title></title>”中放置的是網頁標題，可在瀏覽器最左上看見如圖：

TITLE顯示位置圖

3、接着“<meta name="keywords" content="關鍵字" /> <meta name="description" content="本頁描述或關鍵字描述" /> ”這兩個標籤裏的內容是給搜索引擎看的說明本頁關鍵字及本張網頁的主要內容等SEO可以用到。
4、接着就是正文“<body></body> ”也就是常說的body區，這裏放置的內容就可以通過瀏覽器呈現給用戶，其內容可以是table表格佈局格式內容，也可以DIV佈局的內容，也可以直接是文字。這裏也是最主要區域，網頁的內容呈現區。
5、最後是以“</html> ”結尾，也就是網頁閉合。

以上是一個完整的最簡單的html語言基本結構，通過以上可以再增加更多的樣式和內容充實網頁。
注意：網頁一般的根據xhtml標準都要求每個標籤閉合，如：以<html> 開始，以</html>閉合；如果沒有閉合如<meta name="keywords" content="關鍵字" />就沒有</meta> 就要<meta 內容。。。 />來完成閉合。

以上就是通俗來講的最簡單的html語言結構，如果需要看更多更豐富的html語言結構，可打開一個網站的網頁，然後點擊瀏覽器的“查看”--然後點擊“查看源代碼”即可看見該網頁的html語言結構，這樣可以根據此源代碼來分析此網頁的HTML語言結構與內容。