當前位置:才華齋>設計>網頁設計>

HTML 學習心得整理

網頁設計 閱讀(1.96W)

IT Juck HTML 知識整理

HTML 學習心得整理

開山篇:

何為傳輸協議

簡單的說 計算機的通訊(網路)規則就是一種協議.

FTP 檔案傳輸協議

SMTP 郵件傳送協議

HTTP 用於網頁與網頁間的訪問協議

語言編碼

接下來我們還會發現這樣一句話:

它標示文件的語言編碼。就像我們平時所說的漢語、英語一樣。這裡的gb2312告訴瀏覽器,本文件採用簡體中文編碼;還有一種常用的編碼是UTF-8編碼,它是國際通用的編碼。不管我們採用哪種編碼,有一點就是包含的css樣式表和其它檔案也必須和本文件的編碼一樣,要不就會出現亂碼。

HTML開發工具

1. 記事

2. Editplus

3. Frontpage

4. Dreamweaver [初學者推薦使用,該軟體有提示功能]

下載地址:

/cfusion/tdrc/roduct=dreamweaver&loc=cn

5. Zend Studio

6. MyEclipse

等其他IDE ,這裡就不在介紹了,有興趣可到網上搜索

網頁三劍客

網頁製作三劍客是Macromedia 公司開發的三款開發工具

Flash:用於做動畫

Fireworks :用於圖片處理

Dreamweaver :用於拼接網頁,程式碼程式設計

HTML是什麼

HTML表示: 超文字標記語言(Hyper Text Markup Language) HTML檔案必須有htm 或 html副檔名

HTML檔案可以用一個簡單的文字編輯器建立

HTML文件型別

當我們新建HTML格式文件時,檢視原始碼,會發現程式碼最上部有如下程式碼:

譯:表示本文件是過渡型別,另外還有框架和嚴格型別,目前一般都採用過渡型別,因為瀏覽器對XHTML的解析比較寬鬆,允許使用HTML4.01中的標籤,但必須符合XHTML的語法。許多朋友在製作頁面時,往往喜歡把這句刪除掉,在這裡建議大家一定要保留這句話,刪除它後可能引起某些樣式表失效或其它意想不到的問題。

文件型別標記分五個部分

DOCTYPE 文件型別定義標籤(還可以指定別的型別檔案)

HTML 指定文件型別的名稱

PUBLIC 說明當前檔案所依據的檔案是任何人都可以訪問的還是區域性訪問的 version name 指定該HTML版本的標識名稱。例如HTML 4.0的標識名稱為:

"-//W3C//DTD HTML 4.01 Transitional//EN"版本名稱version name.被改進的iso用+號開頭,沒有被改動過的用–號開頭,最後的兩個斜號是DTD文件的語言種類

url 指定該HTML 語言的定義規範檔案在Internet上的位置,

例如: 。

說明:當前文件可能含HTML4.01嚴格標準定義的元素及不含的元素 說明:當前文件所以的HTML 元素都是嚴格符合標準的

說明:除了以上的倆個共同點還有可能包含一些框架的元素 HTML 4.01中如果沒有下面這個文件型別定義語句是一個無效的HTML檔案

XHTML 1.0文件型別

建立一個HelloWord的XHTML 1.0文件

點此檢視

Hello Word 我的第一個網頁!

首先複製上面的程式碼

在電腦桌面滑鼠右鍵建立一個文字檔案,雙擊開啟把程式碼貼上到裡面儲存關閉 滑鼠右鍵txt檔案重新命名為 [點選回車]

HTML標記解釋

HTML的標記大多都是成對出現的,分開始和關閉如:

每個關閉標記都是以: 斜槓加標記關閉的

表示:這是一個HTML型別的檔案

表示:告訴瀏覽器這是HTML文件的開始

[表示:該標記是HTML頭資訊在瀏覽器標題區域顯示]<title>標題</title>[表示:該標記是文件標題顯示在瀏覽器視窗的標題欄]

表示:關閉HTML 頭資訊區域

網頁正文內容表示:該標記之間的內容會顯示在瀏覽器中表示:記告訴瀏覽器這是HTML文件的`終止

head 區屬性

<link rel="SHORTCUT ICON" href=""/>[位址列網站標誌圖示]

注:圖片的名字最好是:

Meta 標記必須要寫在Head 頭標記區域裡

<meta http-equiv="refresh" content="秒數; url=頁面路徑"/>[自動跳轉] 瀏覽器相容問題解決[告訴瀏覽器使用IE7]

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>頁面編碼型別

GB2312 中國

UTF-8 國際

Ansi 美國國家標準協會,它可以根據作業系統變換

body 標籤屬性

bgcolor="red"[頁面背景顏色]

background="圖片.jpg" [頁面背景圖片]

text="#000FFF" [頁面中所有非連線字型顏色]

link=”顏色” [頁面中所有連線字型顏色

]

alink=” 顏色” [頁面中正要被點選的連線字型顏色]

vlink=” 顏色” [頁面中所有點選過的連線字型顏色]

leftmargin=”0” [設定網頁與瀏覽器視窗左邊沿的間隙,單位為畫素] topmargin=”0” [設定網頁與瀏覽器視窗上邊沿的間隙,單位為畫素] table 表格標籤屬性

table表示定義一個HTML表格


[建立一個無邊框的表格]

cellpadding="10" [該屬性是設定表格的單元格的內邊距]

cellspacing="10" [該屬性是設定表格的單元格間距]

width="10" [控制表格寬度]

height="10" [控制表格高度]

rowspan="2" [合併行(寫在

標籤)]

colspan="2" [合併列(格 寫在

標籤裡)]

border="1" [該屬性可指定邊框大小,數值越大邊框線越粗] bordercolor=”” [邊框線的顏色]

bordercolorright=”顏色值”[亮邊框屬性]

bordercolordark=”顏色值” [暗邊框屬性]

[表格內的行]


[表格開頭格內內容自動到中間位置字型加粗][表示行內的單元格]



[沒有任何邊框的表格頂部]

表格的標題

橫向控制表格方向

align="left" left [左]right [右] center [中間]

豎向控制表格方向

valign="top" top [上] bottom [下] middle [中間]

frame屬性來控制表格周圍的邊框

frame="border" frame=" box"frame=" void"frame=" above"

frame=" below"

frame=" rhs"frame=" hsides" frame=" vsides" frame=" lhs"

表格巢狀例子如下:





我是被巢狀在裡面的 另一個表格

HTML 字元實體編碼

< | < <

> | > >

{ {

& | & &

" | " "

' ‘

| 空格

| 方形空格

× | × x [乘號]

÷| ÷ ÷ [除號]

&copy | 版權符號

HTML 超連結

[錨標籤()來建立一個連線到其他檔案的連結] target=" "

_blank [在新視窗開啟連結地址]

_self [本視窗開啟新連結]

_top [假如你的頁面在框架中,如何跳出框架]

_parent [父視窗]

戶所丟失的資訊