HTML學習總結

來源:互聯網
上載者:User

標籤:使用者輸入   檔案的   資源   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特殊字元

 

註:&copy是著作權聲明前的圈

 

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學習總結

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.