HTML學習總結

HTML：Hypertext Marked Language

即超文本标記語言,是一種用來制作超文本文檔的簡單标記語言。超文本傳輸協定規定了浏覽器在運作 HTML 文檔時所遵循的規則和進行的操作.

建立一個HTML文檔，需要兩個工具，一個是HTML編輯器，一個WEB浏覽器。

HTML編輯器是用于生成和儲存THML文檔的應用程式。

WEB浏覽器是用來打開WEB網頁檔案，提供給我們檢視WEB資源的用戶端程式。

<HTML></HTML>在文檔的最外層，文檔中的所有文本和html 标簽都包含在其中，它表示該文檔是以超文本辨別語言（HTML）編寫的。

<HEAD></HEAD>是HTML文檔的頭部标簽, 在浏覽器視窗中，頭部資訊是不被顯示在正文中的,在此标簽中可以插入其它标記, 用以說明檔案的标題和整個檔案的一些公共屬性。

<title>和</title>是嵌套在<HEAD>頭部标簽中的，标簽之間的文本是文檔标題，它被顯示在浏覽器視窗的标題欄

<BODY> </BODY>标記一般不省略，标簽之間的文本是正文，是在浏覽器要顯示的頁面内容

HTML的标簽分單标簽和成對标簽兩種

成對标簽：<标簽名> </标簽名>

單獨标簽：<标簽名>

<标簽名字屬性1 屬性2 屬性 3 … >内容</标簽名字>

作為一般的原則，大多數屬性值不用加雙引号。但是包括空格、％号，＃号等特殊字元的屬性值必須加入雙引号。為了好的習慣，提倡全部對屬性值加雙引号。如：

文字版面的編輯

3-1 換行 <br> 單标簽

3-2 換段落标簽<p> 單獨、成對

格式：

<P>

其中,ALIGN 是<p>标簽的屬性,屬性有三個參數 left,center,right.這三個參數設定段落文字的左,中,右位置的對齊方式.

3-3 原樣顯示文字标簽<pre> 成對、

3-4 居中對齊标簽<center> 成對标簽

3-5 引文标簽 (縮排标簽）<blockquote>

</BLOCKQUOTE>

</BLOCKQUOTE></BLOCKQUOTE>

</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>

3-6水準分隔線标簽<hr> 單獨

3-7署名标簽<address> <address></address>标簽之間的文字顯示效果是斜體字。

3-8特殊字元

3-9注釋标簽

<!注釋的内容>

3-10 字型屬性

3-10-1标題标簽的格式：<hn align=參數〉标題内容</hn>

說明：<hn>标簽是成對出現的，<hn>标簽共分為六級，在<h1>...</h1>之間的文字就是第一級是最大最粗的标題；<h6>...</h6>之間的文字是最後一級，是最小最細的标題文字。align 屬性用于設定标題的對齊方式，其參數為 left（左）， enter（中)， right (右）。<hn>标簽本身具有換行的作用，标題總是從新的一行開始。

文字格式控制标簽<FONT>

3-10-2 <FONT>标簽用于控制文字的字型，大小和顔色

3-10-3特定文字樣式标簽

a 實體類型标簽

粗體标簽<b>

放在<b>與</b>标簽之間的文字将以粗體方式顯示。

斜體标簽<i>

放在<i>與</i>标簽之間的文字将以斜體方式顯示。

下劃線标簽<u>

放在<u>與</u>标簽之間的文字将以下劃線方式顯示。

b 常用的邏輯類型标簽有八種，放在标簽之間的文字受其控制

em标簽：<em>用于強調的文本，一般顯示為斜體字</em>

strong标簽：<strong>用于特别強調的文本，顯示為粗體字</strong>

cite标簽：<cite>用于引證和舉例，通常是斜體字</cite>

code标簽：<code>用來指出這是一組代碼</code>

small标簽：<small>規定文本以小号字顯示</small>

big标簽：<big>規定文本以大号字顯示</big>

samp标簽：<samp>顯示一段計算機常用的字型，即寬度相等的字型</samp>

kbd标簽：<kbd>由使用者輸入文本，通常顯示為較粗的寬體字</kbd>

var标簽：<var>用來表示變量，通常顯示為斜體字</var>

dfn标簽：<dfn>表示一個定義或說明，通常顯示為斜體字</dfn>

sup标簽：12<sup>2</sup>=144

sub标簽：硫酸亞鐵的分子式是Fe<sub>2</sub>SO<sub>4</sub>

建立清單

4-1 無序清單<UL>

格式 1:

<UL>

<LI>第一項

<LI>第二項

<LI>第三項

</UL>

格式 2

<ul>

<li type=disc>第一項

<li type=circle>第二項

<li type=square>第三項

</ul>

<LI>的屬性 type

disc 實心園

circle空心園

square小方塊

4-2 有序清單<OL>

有序清單和無序清單的使用格式基本相同，它使用标簽<ol></ol>，每一個清單項前使用<li>。<ol>清單的結果是帶有前後順序之分的編号。如果插入和删除一個清單項，編号會自動調整。

4-3 嵌套清單

4-4 定義清單的标記<DL>/<DT>/<DD>

<dl>

<dt>第 1項 <dd>注釋 1

<dt>第 2項 <dd>注釋 2

<dt>第 3項 <dd>注釋 3

</dl>

第一層為清單項标簽<DT>，第二層為注釋項标簽<DD>。<DT>和<DD>标簽通常是成對使用的。

4-5 目錄清單<DIR>和菜單清單<MENU>

格式 1:

<dir>

<li>第一項

<li>第二項

<li>第三項

</dir>

格式 2

<menu>

<li type=disc>第一項

<li type=circle>第二項

<li type=square>第三項

</menu>

圖像的處理

5-1 背景圖像的設定

5-2 網頁中插入圖檔标簽<img>

<IMG> 的格式及一般屬性設定：

5-2 設定上下左右空白位置 hspace/vspace

5-2-3 設定字畫對其方式

圖像的對齊：

1) 單獨占一行時，放在<p>…</p>中，用<p>的對齊屬性進行設定。

2) 與文本在同一行時，用其自身的 align 屬性（top,middle,bottom）設定圖像與文本的垂直對齊。其中：bottom為預設值。

3) 圖文混排時，可實作圖像的左、右環繞文本，用 align 屬性（left 圖像在左、文本在右,right）。

5-2-4 圖檔大小設定

5-2-5 圖像邊框的設定

建立超連結

建立超連結的标簽為<A>和</A>

格式：<A HREF="資源位址" TARGET="視窗名稱" TITLE="指向連接配接顯示的文字">超連結名稱</A>

屬性“HREF”定義了這個連結所指的目标位址；目标位址是最重要的，一旦路徑上出現差錯，該資源就無法通路

TARGET:該屬性用于指定打開連結的目标視窗，其預設方式是原視窗。

建立目标視窗的屬性

屬性值描述

_parent 在上一級視窗中打開，一般使用分桢的架構頁會經常使用

_blank 在新視窗打開

_self 在同一個桢或視窗中打開，這項一般不用設定

_top 在浏覽器的整個視窗中打開，忽略任何架構

TITLE：該屬性用于指定指向連結時所顯示的标題文字

TABLE

在html 文檔中，表格是通過<table>,<th>,<tr>,<td>标簽來完成的

7-2（2）設定分隔線的顯示狀态 rules

7-2（3）表格的邊框顯示狀态 frame

7-3 表格行的設定

<TR> 的參數設定（常用）：

<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF"

bordercolorlight="#808080" bordercolordark="#FF0000">

7-4 單元格的設定

<th>和<td>都是插入單元格的标簽，這兩個标簽必須嵌套在<tr>标簽内。是成對出現的

7-7 表格的标題标簽<caption>

網頁的動态、多媒體效果

8-1 滾動字幕<marquee>...</marquee>

8-2 插入多媒體檔案

嵌入背景音樂

将音樂做成一個連結，隻需用滑鼠在上面單擊，就可以聽音樂了

多視視窗架構

文法格式：

<html>

<head>

</head>

......

</html>

可以做導航

浮動視窗<iframe>

marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">

表單

表單在Web網頁中用來給通路者填寫資訊，進而能采集用戶端資訊，使網頁具有互動的功能。一般是将表單設計在一個Html 文檔中，當使用者填寫完資訊後做送出(submit)操作，于是表單的内容就從用戶端的浏覽器傳送到伺服器上，經過伺服器上的 ASP 或 CGI 等處理程式處理後，再将使用者所需資訊傳送回用戶端的浏覽器上，這樣網頁就具有了互動性。

表單 <form></form>

屬性 action method和target

form action="用來接收表單資訊的url">，如果這個屬性是空值("")則目前文檔的url 将被使用

method

GET方式是處理程式從目前Html 文檔中擷取資料

POST目前的Html 文檔把資料傳送給處理程式

target用來指定目标視窗或目标幀。可選目前視窗_self,父級視窗_parent,頂層視窗_top,空白視窗_blank。

寫入标記<input>

常用屬性：

1 name 控件名稱

2 type控件類型如：botton 普通按鈕，texe 文本框等

3 align 指定對齊方式,可取top, bottom, middl

4 size 指定控件的寬度

5 value 用于設定輸入預設值

6 maxlength在單行文本的時候允許輸入的最大字元數

7 src 插入圖像的位址

8 event 指定激發的事件

菜單下拉清單框<select></select><option>

多行的文本框.<textarea></textarea>