標籤:使用者輸入 檔案的 資源 pos pac 滾動 inf 目標地址 通過
HTML學習總結
HTML:Hypertext Marked Language
即超文字標記語言 (HTML),是一種用來製作超文字文件的簡單標記語言。超文字傳輸通訊協定 (HTTP)規定了瀏覽器在運行 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 … >內容</標籤名字>
作為一般的原則,大多數屬性值不用加雙引號。但是包括空格、%號,#號等特殊字元的屬性值必須加入雙引號。為了好的習慣,提倡全部對屬性值加雙引號。如:
<font color="#ff00ff" face="宋體" size="30">字型設定</font>
文字版面的編輯
3-1 換行 <br> 單標籤
3-2 換段落標籤<p> 單獨、成對
格式:
<P>
<P ALIGN= 參數>
其中,ALIGN 是<p>標籤的屬性,屬性有三個參數 left,center,right.這三個參數設定段落文字的左,中,右位置的對齊.
3-3 原樣顯示文字標籤<pre> 成對、
3-4 置中對齊標籤<center> 成對標籤
3-5 引文標籤 (縮排標籤)<blockquote>
<BLOCKQUOTE>
</BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE>
</BLOCKQUOTE></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 背景映像的設定
<body background= "image-url">
5-2 網頁中插入圖片標籤<img>
<IMG> 的格式及一般屬性設定:
<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
5-2 設定上下左右空白位置 hspace/vspace
<img src="../../imge/6-5.gif" align="left" hspace="20" vspace="20">
5-2-3 設定字畫對其方式
映像的對齊:
1) 單獨佔一行時,放在<p>…</p>中,用<p>的對齊屬性進行設定。
2) 與文本在同一行時,用其自身的 align 屬性(top,middle,bottom)設定映像與文本的垂直對齊。其中:bottom為預設值。
3) 圖文混排時,可實現映像的左、右環繞文本,用 align 屬性(left 映像在左、文本在右,right)。
<img src="../../imge/6-2.jpg" align="left">
<img src="../../imge/6-2.jpg" align="right">
<img src="../../imge/6-2.jpg" align="top">
<img src="../../imge/6-2.jpg" align=bottom>
<p><img src="../../imge/6-2.jpg" align="middle">
5-2-4 圖片大小設定
<img src="../../imge/6-3.gif" width="350" height="200">
5-2-5 映像邊框的設定
<img src="../../imge/xjbjtp22.jpg" border="10">
建立超連結
建立超連結的標籤為<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 插入多媒體檔案
<EMBED SRC="音樂檔案地址">
嵌入背景音樂
<BGSOUND src="your.mid" autostart=true loop=infinite>
將音樂做成一個連結,只需用滑鼠在上面單擊,就可以聽音樂了
<A HREF="音樂地址">樂曲名</A>
多視視窗架構
文法格式:
<html>
<head>
</head>
<frameset>
<frame src="url地址1">
<frame src="url地址2">
......
<frameset>
</html>
可以做導航
浮動視窗<iframe>
<iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100"
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>
<input 屬性1 屬性2......>
常用屬性:
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>
HTML學習總結