2018-07-02 第五十七天 HTML

1、HTML概要javascript

A、課程介紹css

靜態網頁內容：html

1.HTML：超文本標記語言---顯示內容java

2.CSS：層疊樣式表-------------美化頁面web

3.JavaScript：-----頁面動態交互和特效編程

DHTML=HTML+CSS+JavaScript windows

動態HTML（Dynamic HTML，簡稱DHTML）瀏覽器

只是動態效果，不是動態數據緩存

4.jQuery：對JavaScript的封裝服務器

5.EasyUI：在jQuery基礎上對HTML和CSS的封裝

i.對於一個網頁，HTML定義網頁的結構，CSS描述網頁的樣子，JavaScript設置頁面交互和特效。

一個很經典例子是說HTML就像一我的的骨骼、器官，而CSS就是人的皮膚，有了這兩樣也就構成了一個植物人了，

加上javascript這個植物人就能夠對外界刺激作出反應，能夠思考、運動、能夠給本身整容化妝（改變CSS）等等，成爲一個活生生的人。

ii.若是說HTML是肉身、CSS就是皮相、Javascript就是靈魂。沒有Javascript,HTML+CSS是植物人，沒有Javascript、CSS是個毀容植物人。

iii.若是說HTML是建築師，CSS就是幹裝修的，Javascript是魔術師。

概念介紹

爲何學習HTML（做用）

遇到的問題：隨着技術的發展瀏覽器中的信息量的增大，如何把信息完美的，漂亮的展示到用戶的面前，這就是一個問題。

HTML的做用：格式化展示網頁的信息，相似於人的骨骼。

什麼是HTML

Hyper Text Markup Language 超文本標記語言，是一種用來製做「網頁」的簡單標記語言，用HTML編寫的超文本文檔稱爲HTML文檔，HTML文檔的擴展名是html或者htm。

超文本：不只僅能夠書寫文本還能夠插入圖片、音頻、視頻、超連接等

標記：標籤

HTML版本

HTML1.0——在1993年6月做爲IETF工做草案發布（並不是標準）：

HTML 2.0——1995年11月做爲RFC 1866發佈

HTML 3.2——1997年1月14日，W3C推薦標準

HTML 4.0——1997年12月18日，W3C推薦標準

HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準

HTML 5——2014年10月28日，W3C推薦標準

HTML4.01 是常見的版本。

編輯HTML的工具：

1.手工直接編寫：記事本，UltraEdit；

效率低下，有助於提升編寫水平

2.使用可視化HTML編輯器：Dreamweaver、HBuilder；

開發效率高，支持快捷鍵、代碼提示、顏色區分等，支持可視化編程

顯示HTML的工具：瀏覽器（「解釋和執行」HTML源碼）（IE FireFox Chrome）

三大基石

互聯網三大基石：

HTML：超文本標記語言 HyperText Markup Language

HTTP：超文本傳輸協議 HyperText Transfer Protocol

URL ：統一資源定位符 Uniform Resource Locator

生活案例：多個客戶給一個移動客服打電話

URL：10086 100861111 100861213

HTML：移動客服回覆的內容

HTTP: 客戶和客服的通話規則：都說同一種語言，認真傾聽不打斷等，禮貌交談

互聯網實例：多個客戶經過各自瀏覽器對同一個百度官網服務器進行訪問

URL:網址
http://www.baidu.com/

HTML：開發網頁的語言，服務端響應內容的開發語言，有瀏覽器給解釋並展現

HTTP: 客戶和服務器的通訊規則（數據的格式、含義等）

參考資料

API CHM

http://www.w3school.com.cn/

WWW：英文全稱爲「World Wide Web，中文名字爲「萬維網」，常簡稱爲Web。分爲Web客戶端和Web服務器程序。

WWW可讓Web客戶端（經常使用瀏覽器）訪問瀏覽Web服務器上的頁面。是一個由許多互相連接的超文本組成的系統，經過互聯網訪問。在這個系統中，每一個有用的事物，稱爲同樣「資源」,而且由一個URL標識；這些資源經過超文本傳輸協議HTTP傳送給用戶，然後者經過點擊連接來得到資源。

W3C

World Wide Web Consortium，萬維網聯盟

W3C的職能：負責制定和維護web行業標準

2、head中經常使用標籤

<!DOCTYPE html>

<!--

文檔約束

HTML5的文檔約束：<!DOCTYPE html>

HTML4中的文檔約束：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

-->

<html>

<head>

</head>

<body>

<p class="header_p">head中經常使用標籤</p>

</div>

</header>

Hello World!

</body>

</html>

3、經常使用的小標籤

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p class="header_p">經常使用的小標籤</p>

</div>

</header>

<p>經常使用的小標籤：不會自動的換行</p>

<p>能夠互相嵌套</p>

<b>字體加粗標籤 b</b>

</p>

</p>

<u>下劃線標籤 u</u>

</p>

<del>刪除線標籤 del</del>

</p>

換行 br<br />

</p>

<big><big><big>字體變大big標籤，能夠嵌套更大</big></big>

</big>

</p>

<small>字體變小small標籤</small>

</p>

sup上標標籤<sup>666</sup>

</p>

sub下標標籤<sub>999</sub>

</p>

<i>

font標籤<br />

你有你的腹肌，我有個人肚皮

不是很帥，可是很皮

</font>

</i>

</p>

<span>span標籤</span>

</p>

<hr />

<!--

列表標籤：（3種）

做用：製做頁面的導航、商品的展現（滑動門），樹形菜單等

-->

<p>無序列表--type前面的形狀</p>

<li>javaSE

<ul>

<li>javaSE1</li>

</ul>

</li>

<li>javaEE</li>

<li>javaME</li>

</ul>

<p>有序列表--也能夠是A,數字，I</p>

<li>javaSE</li>

<li>javaEE</li>

<li>javaME</li>

</ol>

<p id="dt">自定義列表</p>

<dl>JAVA：

<dt>javaEE</dt>

<dd>javaEE1</dd>

<dd>javaEE2</dd>

<dd>javaEE3</dd>

</dl>

</div>

</body>

</html>

4、body中經常使用標籤

<!DOCTYPE html>

<html>

<head>

<title>HTML中body中經常使用標籤學習</title>

</head>

<body>

<p class="header_p">body中經常使用標籤</p>

</div>

</header>

百度--原始

<p> 「百度」二字,來自於八百年前南宋詞人辛棄疾的一句詞：<br />衆裏尋他千百度。這句話描述了詞人對理想的執着追求。</p>

<pre>

「百度」二字,來自於八百年前南宋詞人辛棄疾的一句詞：

衆裏尋他千百度。這句話描述了詞人對理想的執着追求。

</pre>

</div>

</body>

</html>

5、Img & Marquee

<!DOCTYPE html>

<!--

img:圖片不會自動的換行

src:圖片的路徑{相對路徑,網絡路徑}

若是寬和高只是指定一個屬性，那麼另外的一個屬性會等比例的放大和縮小

title：圖片的標題

alt：圖片沒法正常顯示的屬性

border：圖片的邊框

-->

<html>

<head>

<title>Img & Marquee</title>

</head>

<body>

<p class="header_p">Img & Marquee</p>

</div>

</header>

</div>

<hr />

</marquee>

</div>

</body>

</html>

6、超連接a標籤

<!DOCTYPE html>

<html>

<!--

超連接標籤的做用：（不會自動的換行）

【1】：實現不一樣頁面的跳轉

href:跳轉到的路徑

target：打開方式{_blank新開，_self當前頁}

【2】：實現錨點功能

一個頁面的錨點：

兩個頁面的錨點：

本頁面：

<a href="small_normal.html##dt">小標籤自定義列表</a>

另外一個頁面：

-->

<head>

<title>超連接a標籤</title>

</head>

<body>

<p class="header_p">超連接a標籤</p>

</div>

</header>

<hr />

<a href="body_normal.html" target="_blank">body中經常使用標籤網頁</a>

<a href="small_normal.html#dt" target="_blank">小標籤自定義列表</a>

</a>

</div>

</body>

</html>