天天看點
傳回

html 重點回顧（自學總結）

基本的注意事項 -      
    有益的提示 當您寫 HTML 文本的時候，你永遠也沒法确定這些文本在另一台顯示器上是如何顯示的。一些人使用大顯示器，而另一些使用小的。當用      
戶調整視窗的分辨率時，這些文本就會被重新格式化。是以不要通過在文本中添加空行和空格的辦法在你的編輯器中格式化文本。      
HTML 會裁掉文本中所有的空格。任何數量的空格都被按一個空格計數。另外，在 HTML 中，一個空行也被當作一個空格。      
使用空的段落标記 <p> 去插入一個空行是個壞習慣。用 <br> 标簽代替它！（但是不要用 <br> 标簽去建立清單。不要着急，您将在稍後      
的篇幅學習到 HTML 清單。）      
您也許已經注意到了，在沒有結束标簽 </p> 的情況下，<p> 标簽依然可以正常工作。不過不要這樣做！下一個版本的 HTML 将不允許忽      
略任何的結束标簽。      
HTML 會自動地在某些元素前後添加一個額外的空行，比如段落、标題元素前後。      
使用水準線 (<hr> 标簽) 來分隔文章中的小節是一個辦法（但并不是唯一的辦法）。      
==================================      
最常用的字元實體       
顯示結果      描述        實體名稱     實體編号        
                  空格       &nbsp;       &#160;       
     <          小于号       &lt;          &#60;       
     >         大于号       &gt;          &#62;      
     &         和号          &amp;       &#38;       
     "           引号         &quot;        &#34;       
     '            撇号         &apos;     (IE不支援) &#39;      
=================================       
錨标簽      
Target 屬性 使用 Target 屬性，你可以定義被連結的文檔在何處顯示。      
下面的這行會在新視窗打開文檔：      
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>      
 ********      
錨标簽和 Name 屬性 Name 屬性用于建立被命名的錨（named anchors）。當使用命名錨（named anchors）時，我們可以建立直接跳至頁面中某個節的連結，這      
樣使用者就無需不停的滾動頁面來尋找他們需要的資訊。      
以下是命名錨的文法：      
<a name="label">Text to be displayed</a>name 屬性用于建立命名錨。錨的名稱可以是任何你喜歡的名字。      
下面這行定義了命名錨：      
<a name="tips">Useful Tips Section</a>你會注意到，命名錨會以特殊的方式來顯示。      
将 # 符号和錨名稱添加到 URL 的末端，就可以直接連結到 tips 這個節，就像這樣：      
<a href="http://www.w3school.com.cn/html_links.asp#tips"> Jump to the Useful Tips Section </a>從檔案 html_links.asp 内部連結到 Useful Tips 節的超級連結是這樣的：      
=================================      
架構      
通過使用架構，你可以在同一個浏覽器視窗中顯示不止一個頁面。每份HTML文檔稱為一個架構，并且每個架構都獨立于其他的架構。      
使用架構的壞處：      
開發人員必須同時跟蹤更多的HTML文檔 很難列印整張頁面 架構結構标簽（<frameset>） 架構結構标簽（<frameset>）定義如何将視窗分割為架構 每個 frameset 定義了一系列行或列 rows/columns 的值規定了每行或每列占據螢幕的面積 編者注：frameset 标簽也被某些文章和書籍譯為架構集。      
架構标簽（Frame） Frame 标簽定義了放置在每個架構中的 HTML 文檔。      
在下面的這個例子中，我們設定了一個兩列的架構集。第一列被設定為占據浏覽器視窗的 25%。第二列被設定為占據浏覽器視窗的 75%。      
HTML 文檔 "frame_a.htm" 被置于第一個列中，而 HTML 文檔 "frame_b.htm" 被置于第二個列中：      
<frameset cols="25%,75%">    <frame src="frame_a.htm">    <frame src="frame_b.htm"> </frameset>      
基本的注意事項 - 有用的提示： 假如一個架構有可見邊框，使用者可以拖動邊框來改變它的大小。為了避免這種情況發生，可以在 <frame> 标簽中加入：      
noresize="noresize"。      
為不支援架構的浏覽器添加 <noframes> 标簽。      
重要提示：不能将 <body></body> 标簽與 <frameset></frameset> 标簽同時使用！不過，假如你添加包含一段文本的 <noframes> 标簽      
，就必須将這段文字嵌套于 <body></body> 标簽内。（在下面的第一個執行個體中，可以檢視它是如何實作的。）      
===============================      
基本的注意事項 - 有用的提示：      
<thead> 定義表格的頁眉。, <tbody> 定義表格的主體。 和 <tfoot> 定義表格的頁腳；很少被用到，這是由于浏覽器對它們的支援不太好。希望這種情況在未來版本的 XHTML 中會有所改觀。      
===============================      
表格      
<table          >     //表格邊框                
</table>      
 ******      
<table >
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
         <td></td>                
</tr>
</table>      
注意：這個空的單元格的邊框沒有被顯示出來。（不過 Mozilla Firefox 
可以将整個邊框顯示出來。）為了避免這種情況，在空單元格中添加一個空格占位符，就可以将邊框顯示出來。      
*******      
清單 ul/ol      
1.無序清單      
無序清單是一個項目的清單，此列項目使用粗體圓點（典型的小黑圓圈）進行标記。      
2.有序清單

同樣，有序清單也是一列項目，清單項目使用數字進行标記。

3.自定義清單

自定義清單不僅僅是一列項目，而是項目及其注釋的組合。

自定義清單以 <dl> 标簽開始。每個自定義清單項以 <dt> 開始。每個自定義清單項的定義以 <dd> 開始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

輸出：

Coffee

Black hot drink

Milk

White cold drink

========================================

HTML 表單 form 和 輸入input

表單下的輸入：文本域： 單行

<input type="text" name="firstname"> 多行：<textarea rows="10" cols="30"> 單選按鈕：

<input type="radio" name="sex" value="male">

複選按鈕：

<input type="checkbox" name="bike">

表單的動作屬性（Action） <form name="input"

action="html_form_action.asp" method="get">

</form> 确認按鈕：

<input type="submit" value="Submit"> ======================================== 圖檔 img

　　提示：如果你打算使用背景圖檔，你需要緊記一下幾點：

　　背景圖像是否增加了頁面的加載時間。小貼士：圖像檔案不應超過 10k。

     背景圖像是否與頁面中的其他圖象搭配良好。

     背景圖像是否與頁面中的文字顔色搭配良好。

     圖像在頁面中平鋪後，看上去還可以嗎？

     對文字的注意力被背景圖像喧賓奪主了嗎？

==============================

HTML 樣式

外部樣式表

當樣式需要被應用到很多頁面的時候，外部樣式表将是理想的選擇。使用外部樣式表，你就可以通過更改一個檔案來改變整個站點的外觀。

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" target="_blank" rel="external nofollow" >

</head> 

内部樣式表

當單個檔案需要特别樣式時，就可以使用内部樣式表。你可以在 head 部分通過 <style> 标簽定義内部樣式表。 

 <head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内聯樣式 當特殊的樣式需要應用到個别元素時，就可以使用内聯樣式。使用内聯樣式的方法是在相關的标簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下執行個體顯示出如何改變段落的顔色和左外邊距。

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

 ======================

針對搜尋引擎的關鍵字

某些網際網路搜尋引擎使用 meta 标簽的 name 和 content 屬性來索引頁面。

然而，由于非常多的網管們使用 meta 标簽制造垃圾資訊，比方說在頁面重複關鍵詞以達到提高排名的目的，一些搜尋引擎已經徹底放棄了使用它們。

======================

URL（統一資源定位器）

一個稱為 URL（統一資源定位器）的東西用于對網際網路上的文檔（或其他資料）進行尋址。一個完整的網址，例如：http://www.w3school.com.cn/html/lastpage.html

使用 FTP 進行下載下傳 以下 HTML 代碼建立一個下載下傳檔案的連結：

<a href="ftp://www.w3school.com.cn/ftp/winzip.exe">Download WinZip</a>

連結到郵件系統

以下 HTML 代碼建立一個指向您的郵件系統的連結：

<a href="         mailto:[email protected]                " target="_blank" rel="external nofollow" >[email protected]</a>

轉載于:https://www.cnblogs.com/zdqbk/archive/2013/05/08/3066968.html

xhtml
上一篇: ZendStudioForEclipse-6實用快捷鍵大全
下一篇: 第六章python作業

繼續閱讀