DHTML【2】--HTML

通過題目,大家已經明確知道,從這一節開始介紹DHTML中的最基礎的部分HTML,對於HTML等概念上一節已經做了概述,這一節不再贅餘。在學習HTML之前,先告訴大家一個好消息,HTML不難,比C++、Java等語言的面向對象簡單很多,並且你也不用安裝龐大的Eclipse和Visual Studio,只要有瀏覽器就可以運行,哈哈哈,慢慢得意去吧,當然你也會慢慢發現的。


HTML是DHTML中最基礎的部分,也是DHTML中最先出現的內容,因爲只有有了HTML標籤內容,DOM纔會產生DOM樹,因爲現在沒有學這些就不再提了,我們就從最簡單的開始。


爲了體驗HTML的神奇,你可以打開一個記事本程序,然後在裏面寫如下代碼:

<html>

<head>

</head>

<body>

Hello HTML!

</body>

</html>

寫完代碼保存,然後把文件的擴展名改爲html,不知道什麼是擴展名的可以繞過啊,最後用你的瀏覽器打開這個文件,奇蹟便出現了,你製作滴屬於你自己的第一個網頁就出來了,當然只有一句Hello HTML,不要急,畢竟出來了,良好的開端便是成功的一半。


簡單的說完了,下面就該介紹難一點的了,先不忙,工欲善其事必先利器,打開上一節給大家共享的HTML幫助文檔。我給大家分享的是HTML5的幫助文檔,HTML5是一個非常強大的標記性語言,在這裏學習HTML用也可以。


打開目錄會發現,全是標籤,沒錯,全是標籤,這未免也太簡單了吧,沒錯就是這麼簡單,再牛逼的網站都是這些標籤組成的,所以牛人和你用的是一套標籤,只是牛人比你更有思想,那麼怎麼纔能有牛人的思想呢?那就學習唄,學習完了再想,沒學想也是白想。


   我這裏主要介紹常用的標籤,不常用的標籤大家自己看幫助文檔自己體驗吧,太簡單了。

如上圖,其實上圖是一個簡單的DOM樹結構,深層次的就不提了,上面的標籤黃色的就不介紹了,主要讓讀者自己探索,接下來我就開始介紹紫色的標籤。


由上圖我們就可以看出來,HTML代碼分爲兩部分,一部分是HEAD(頭),一部分是BODY(身體),各自有各自的子節點,HEAD的Style節點主要用於嵌入CSS樣式的,這裏先不介紹,以後介紹CSS時一起介紹,Script節點主要是嵌入Javascript腳本的,當然也可以嵌入其他腳本,但是這裏只介紹Javascript腳本,因爲Javascript越來越火了,因爲它的存在後續又誕生了很多更好技術,像Jquery和Ajax等了,所以Script節點這裏也不介紹餓了,等以後介紹Javascript時一起介紹。


那麼介紹這些標籤該從哪個開始介紹呢?從最底層的開始吧,因爲沒有最底層的東東,介紹Div比較抽象,由於篇幅問題,本節只介紹<Table>。


在學習之前先看一下Table標籤的層次的結構,上圖就有。Table標籤是幹什麼用的呢?Table是用來定義表格。在標籤內部,你可以放置表格的標題、表格行、表格列、表格單元以及其他的表格。其實早期的網站,爲了看起來非常直觀工整,都是用Table標籤做的。下面我們按着上圖的層次結構把代碼寫下來:


<table>

<tbody>

   <tr>

      <th></th><th></th><th></th>

</tr>

</tbody>

<tbody>

   <tr>

      <td></td><td></td><td></td>

</tr>

</tbody>

</table>

從代碼我們可以看出,tr代表一行,th和td代表的都是單元格,而非列,th和td到底有什麼區別呢?試試就知道了,那麼tbody是什麼作用呢?tbody有一個非常貼心的作用就是,如果我們不加tbody,tbody會默認加到table標籤內,那樣的話,當我們打開一個表格的時候,只有當表格數據全部加載完成時纔會顯示給用戶,如果我們把每行都加tbody標籤,那麼當每行數據加載完成時,加載完的數據就會顯示到表格中,這樣會使用戶感覺更有親和力。


下面給出一個簡單的例子,供大家參考,關於表格的學習,不能只停留在下面的例子,還要根據幫助文檔和常見網站的佈局多練習多體驗,這樣才能做到熟能生巧,纔會變成牛人。什麼是牛人?牛人就是把別人不願意做的事情做了很多遍,於是便成了牛人。

例子:

<table>

<tbody>

   <tr>

      <th>姓名</th><th>年齡</th><th>性別</th>

</tr>

</tbody>

<tbody>

   <tr>

      <td>張三</td><td>13</td><td>女</td>

   </tr>

<tr>

      <td>李四</td><td>14</td><td>男</td>

   </tr>

   <tr>

      <td>王二</td><td>12</td><td>女</td>

</tr>

</tbody>

</table>


運行完後發現,沒有邊框呢?嘿嘿,這就得需要用到table的屬性了,太簡單了,不介紹了,自己看着幫助文檔實現吧。再見。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章