<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>HTML學習之必記</title>
<link rel="parent" href="index.html" target="_blank">
</head>
<body>
<h1>HTML學習之必記</h1>
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<p>上面是分割線</p>
<pre > pre 標籤測試 （保留空格，換行等格式）</pre>
<p> <a href="/index.html" target="_top">本文字</a> 是一個指向本網站中的一個頁面的連結。</p>
<p> <a href="http://www.microsoft.com/">本文字</a> 是一個指向全球資訊網上的頁面的連結。</p>
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<form action="demo_form.asp" id="carform">
<!--規定 <select> 元素所屬的 form 元素。該屬性的值必須是同一文件中的某個 <form> 元素的 id 屬性。-->
Firstname:<input type="text" name="fname">
<input type="submit">
<!-- 表單之外的一個下拉選單（但仍然屬於該表單的一部分） -->
</form>
<select name="carlist" form="carform">
<!---select 屬性->
<!--multiple="multiple" 可以同時選擇多個-->
<!--name 屬性規定 select 元素的名稱。
name 屬性用於對提交到伺服器後的表單資料進行標識，或者在客戶端通過 JavaScript 引用表單資料。-->
<!--size 屬性規定下拉選單中可見選項的數目。如果 size 屬性的值大於 1，但是小於列表中選項的總數目，瀏覽
器會顯示出滾動條(Chrome貌似不是這樣的，size設為2，都顯示了)，表示可以檢視更多選項。-->
<option value="Jarry">Jarry</option>
<option value="Jimmy">Jimmy</option>
<option value="Tom">Tom</option>
<option value="Scott">Scott</option>
</select>
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<h4>一個無序列表：</h4>
<ul style="line-height:120%" type="circle">
<!--compact="compact"-->
<!-- compact 屬性規定列表呈現的效果比正常情況更小巧，這是通過減少行間距以及對列表進行縮排來實現的。
compact屬性通常不用，而是使用css的style="line-height:120%"設定效果 -->
<!--type="square" disc --預設值，實心圓。 circle --空心圓。 square --實心方塊。-->
<!--儘管不贊成使用 type 屬性，不過所有瀏覽器都支援 type 屬性。
最好的方法使用 CSS語法：<ul style="list-style-type:square">-->
<li>陽光</li>
<li>溫度</li>
<li>水</li>
<li>啊！多麼值得感恩！</li>
</ul>
<h4>一個有序列表：</h4>
<ol>
<!--compact屬性 HTML5 中不支援。HTML 4.01 中不贊成使用。規定列表呈現的效果比正常情況更小巧。
reversed 規定列表順序為降序。(9,8,7...)
start number 規定有序列表的起始值。
type 規定在列表中使用的標記型別。儘管不贊成使用 type 屬性，不過所有瀏覽器都支援 type 屬性。
type可選：
1 預設值。數字有序列表。（1、2、3、4）
a 按字母順序排列的有序列表，小寫。（a、b、c、d）
A 按字母順序排列的有序列表，大寫。（A、B、C、D）
i 羅馬字母，小寫。（i, ii, iii, iv）
I 羅馬字母，大寫。（I, II, III, IV）
等效CSS 語法：<ol style="list-style-type:upper-roman">
-->
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<img src="tulip.jpg" alt="上海鮮花港 - 鬱金香" />
<!--alt 屬性是一個必需的屬性，它規定在影像無法顯示時的替代文字。
假設由於下列原因使用者無法檢視影像，alt 屬性可以為影像提供替代的資訊：
網速太慢 src 屬性中的錯誤 瀏覽器禁用影像 使用者使用的是螢幕閱讀器
<img> 標籤的 alt 屬性指定了替代文字，用於在影像無法顯示或者使用者禁用影像顯示時，代替影像顯示在瀏覽器中的內容。
我們強烈推薦您在文件的每個影像中都使用這個屬性。這樣即使影像無法顯示，使用者還是可以看到關於丟失了什麼東西的一些信
息。而且對於殘疾人來說，alt 屬性通常是他們瞭解影像內容的唯一方式。-->
<!--usemap:
usemap 屬性將影像定義為客戶端影像對映。
影像對映指的是帶有可點選區域的影像。
usemap 屬性與 <map> 元素的 name 或 id 屬性相關聯，以建立 <img> 與 <map> 之間的關係。
例：<img src="planets.gif" alt="Planets" usemap="#planetmap" />
<map name="planetmap"> <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
<area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
<area href="venus.htm" shape="circle" coords="180,139,14">Venus</a> </map> -->
<!--ismap
屬性將影像定義為伺服器端影像對映。影像對映指的是帶有可點選區域的影像。
當點選一個伺服器端影像對映時，點選座標會以 URL 查詢字串的形式傳送到伺服器。
註釋：只有當 <img> 元素屬於帶有有效 href 屬性的 <a> 元素的後代時，才允許 ismap 屬性。
例：<a href="demo_form.asp"> <img src="tulip.gif" ismap /> </a> -->
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<div class="news">
<h2>div 新聞標題1</h2>
<p>div標籤 第一部分，隸屬於類 news</p>
</div>
<div class="news">
<h2>div 新聞標題2</h2>
<p>div標籤 第二部分，隸屬於類 news</p>
</div>
<!--正如您看到的，上面這段 HTML 模擬了新聞網站的結構。其中的每個 div 把每條新聞的標題和摘要組合在一起，也就是說，
div 為文件新增了額外的結構。同時，由於這些 div 屬於同一類元素，所以可以使用 class="news" 對這些 div 進行標
識，這麼做不僅為 div 新增了合適的語義，而且便於進一步使用樣式對 div 進行格式化，可謂一舉兩得。-->
<hr align="left" noshade="noshade" size="1px" width="80%"/>
<p><span>some text.</span>some other text.</p>
<!--如果不對 span 應用樣式，那麼 span 元素中的文字與其他文字不會任何視覺上的差異。儘管如此，上例中的 span 元素仍然
為 p 元素增加了額外的結構。可以為 span 應用 id 或 class 屬性，這樣既可以增加適當的語義，又便於對 span 應用樣
式。可以對同一個 <span> 元素應用 class 或 id 屬性，但是更常見的情況是隻應用其中一種。這兩者的主要差異是，class
用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。
使用 span 元素，然後對這個 span 元素的父元素，即 p 元素應用 class，這樣就可以對這個類的子元素 span 應用相應的
樣式了。-->
</body>
</html>
<!-- HTML學習必記標籤(元素)：—>
<!-- <!doctype>
定義和用法：
<!DOCTYPE> 宣告必須是 HTML 文件的第一行，位於 <html> 標籤之前。
<!DOCTYPE> 宣告不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中，<!DOCTYPE> 宣告引用 DTD，因為 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確
地呈現內容。HTML5 不基於 SGML，所以不需要引用 DTD。
—>
<!-- <html>
定義和用法：
此元素可告知瀏覽器其自身是一個 HTML 文件。
<html> 與 </html> 標籤限定了文件的開始點和結束點，在它們之間是文件的頭部和主體。正如您所瞭解的那樣，文件的頭部由
<head> 標籤定義，而主體由 <body> 標籤定義。
提示和註釋：
註釋：即使 html 元素是文件的根元素，它也不包含 doctype 元素。doctype 元素必須位於 html 元素之前。
-->
<!-- <body>
定義和用法：
body 元素定義文件的主體。
body 元素包含文件的所有內容（比如文字、超連結、影像、表格和列表等等。）
-->
<!-- <hr>
定義和用法：
<hr> 標籤在 HTML 頁面中建立一條水平線。
水平分隔線（horizontal rule）可以在視覺上將文件分隔成各個部分。
HTML 與 XHTML 之間的差異
在 HTML 中，<hr> 標籤沒有結束標籤。
在 XHTML 中，<hr> 必須被正確地關閉，比如 <hr />。
在 HTML 4.01 中，hr 元素的所有呈現屬性均不被贊成使用。
在 XHTML 1.0 Strict DTD 中，hr 元素的所有呈現屬性均不被支援。
可選的屬性：
align : center left right 規定 hr 元素的對齊方式。不贊成使用。請使用樣式取代它
noshade : 規定 hr 元素的顏色呈現為純色。不贊成使用。請使用樣式取代它
size : pixels 規定 hr 元素的高度（厚度）。不贊成使用。請使用樣式取代它
width : pixels % 規定 hr 元素的寬度。不贊成使用。請使用樣式取代它。
-->
<!-- <pre>
定義和用法：
pre 元素可定義預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型。
<pre> 標籤的一個常見應用就是用來表示計算機的原始碼。
可以導致段落斷開的標籤（例如標題、<p> 和 <address> 標籤）絕不能包含在 <pre> 所定義的塊裡。儘管有些瀏覽器會把段
落結束標籤解釋為簡單地換行，但是這種行為在所有瀏覽器上並不都是一樣的。
-->
<!-- <a>
定義和用法：
<a> 標籤定義超連結，用於從一張頁面連結到另一張頁面。
<a> 元素最重要的屬性是 href 屬性，它指示連結的目標。
在所有瀏覽器中，連結的預設外觀是：
未被訪問的連結帶有下劃線而且是藍色的
已被訪問的連結帶有下劃線而且是紫色的
活動連結帶有下劃線而且是紅色的
-->
<!-- <link>
定義和用法：
<link> 標籤定義文件與外部資源的關係。
<link> 標籤最常見的用途是連結樣式表。
提示和註釋：
註釋：link 元素是空元素，它僅包含屬性。
註釋：此元素只能存在於 head 部分，不過它可出現任何次數。
-->
<!-- <frame>
定義和用法：
<frame> 標籤定義 frameset 中的一個特定的視窗（框架）。
frameset 中的每個框架都可以設定不同的屬性，比如 border、scrolling、noresize 等等。
-->
<!-- <frameset>
定義和用法：
frameset 元素可定義一個框架集。它被用來組織多個視窗（框架）。每個框架存有獨立的文件。在其最簡單的應用中，frameset
元素僅僅會規定在框架集中存在多少列或多少行。您必須使用 cols 或 rows 屬性。
重要事項：
您不能與 <frameset></frameset> 標籤一起使用 <body></body> 標籤。不過，如果您需要為不支援框架的瀏覽器添
加一個 <noframes> 標籤，請務必將此標籤放置在 <body></body> 標籤中！
-->
<!-- <noframes>
定義和用法
noframes 元素可為那些不支援框架的瀏覽器顯示文字。noframes 元素位於 frameset 元素內部。
註釋：如果瀏覽器有能力處理框架，就不會顯示出 frameset 元素中的文字。
重要事項：如果您希望 frameset 新增 <noframes> 標籤，就必須把其中的文字包裝在 <body></body> 標籤中！
註釋：如果您希望驗證包含框架的頁面，請確保 DTD 被設定為 "Frameset DTD"。
-->
<!-- <form>
定義和用法
<form> 標籤用於為使用者輸入建立 HTML 表單。
表單能夠包含 input 元素，比如文字欄位、核取方塊、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用於向伺服器傳輸資料。
-->
<!-- <input>
定義和用法
<input> 標籤用於蒐集使用者資訊。
根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、核取方塊、掩碼後的文字控制元件、單選按
鈕、按鈕等等。
-->
<!-- <textarea>
定義和用法
<textarea> 標籤定義多行的文字輸入控制元件。
文字區中可容納無限數量的文字，其中的文字的預設字型是等寬字型（通常是 Courier）。
可以通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。
-->
<!-- <button>
定義和用法
<button> 標籤定義一個按鈕。
在 button 元素內部，您可以放置內容，比如文字或影像。這是該元素與使用 input 元素建立的按鈕之間的不同之處。
<button> 控制元件 與 <input type="button"> 相比，提供了更為強大的功能和更豐富的內容。<button> 與
</button> 標籤之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文字或多媒體內容。例如，我們
可以在按鈕中包括一個影像和相關的文字，用它們在按鈕中建立一個吸引人的標記影像。
唯一禁止使用的元素是影像對映，因為它對滑鼠和鍵盤敏感的動作會干擾表單按鈕的行為。
-->
<!-- <select>
定義和用法
select 元素可建立單選或多選選單。
<select&> 元素中的 <option> 標籤用於定義列表中的可用選項。
-->
<!-- <option>
定義和用法
option 元素定義下拉選單中的一個選項（一個條目）。
瀏覽器將 <option> 標籤中的內容作為 <select> 標籤的選單或是滾動列表中的一個元素顯示。
option 元素位於 select 元素內部。
-->
<!-- <ul>
定義和用法：
<ul> 標籤定義無序列表。
-->
<!-- <ol>
定義和用法
<ol> 標籤定義有序列表。
-->
<!-- <li>
定義和用法
<li> 標籤定義列表專案。
<li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。
-->
<!-- <img>
定義和用法
img 元素向網頁中嵌入一幅影像。
請注意，從技術上講，<img> 標籤並不會在網頁中插入影像，而是從網頁上鍊接影像。<img> 標籤建立的是被引用影像的佔位空間。
<img> 標籤有兩個必需的屬性：src 屬性 和 alt 屬性。
-->
<!-- <table>
定義和用法
<table> 標籤定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
屬性 值 描述
align left、center、right 不贊成使用。請使用樣式代替。規定表格相對周圍元素的對齊方式。
bgcolor rgb(x,x,x) #xxxxxx colorname 不贊成使用。請使用樣式代替。規定表格的背景顏色。
border pixels 規定表格邊框的寬度。
cellpadding pixels、% 規定單元邊沿與其內容之間的空白。
cellspacing pixels、% 規定單元格之間的空白。
frame 規定外側邊框的哪個部分是可見的。
rules 規定內側邊框的哪個部分是可見的。
summary text 規定表格的摘要
width %、pixels 規定表格的寬頻
-->
<!-- <tr>
定義和用法
char 屬性規定將表格行中的內容相對某個字元的對齊方式。
僅當 align 屬性設定為 "char" 時，才能使用 char 屬性。
char 屬性的預設值是頁面語言的小數點字元。
幾乎沒有瀏覽器支援 char 屬性。
-->
<!-- <td> -->
<!-- <style>
定義和用法
<style> 標籤用於為 HTML 文件定義樣式資訊。
在 style 中，您可以規定在瀏覽器中如何呈現 HTML 文件。
type 屬性是必需的，定義 style 元素的內容。唯一可能的值是 "text/css"。
style 元素位於 head 部分中。
-->
<!-- <div>
定義和用法
<div> 可定義文件中的分割槽或節（division/section）。
<div> 標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。
如果用 id 或 class 來標記 <div>，那麼該標籤的作用會變得更加有效。
用法
<div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。可以通過 <div>
的 class 或 id 應用額外的樣式。
不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個 <div> 元素應用 class 或 id 屬性，但是更常見的情況是隻應用其中一種。這兩者的主要差異是，class 用於元素
組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。
-->
<!-- <span>
定義和用法
<span> 標籤被用來組合文件中的行內元素。
提示：請使用 <span> 來組合行內元素，以便通過樣式來格式化它們。
註釋：span 沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。
-->
<!-- <head>
定義和用法
<head> 標籤用於定義文件的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用指令碼、指示瀏覽器在哪裡找到樣式表、提供
元資訊等等。文件的頭部描述了文件的各種屬性和資訊，包括文件的標題、在 Web 中的位置以及和其他文件的關係等。絕大多數文件
頭部包含的資料都不會真正作為內容顯示給讀者。下面這些標籤可用在 head 部分：<base>, <link>, <meta>, <script>,
<style>, 以及 <title>。<title> 定義文件的標題，它是 head 部分中唯一必需的元素。
-->
<!-- <title>
標題裡是什麼？
一定要選擇一個正確的標題，這對於定義文件並確保它能夠在 Web 上有效利用來說是十分重要的。
請記住，使用者可以用任何順序、獨立地訪問文件集中的每一個文件。所以，文件的標題不僅應當根據其他文件的上下文定義，而且還要
顯示其自身的特點。
含有文件引用排序的標題通常不是什麼好標題。舉個例子，像“第十六章”或“第五部分”這樣的標題，對讀者理解其內容方面毫無用
處。描述性更強的標題，像“第十六章：HTML 標題”，或者“第五部分：如何使用標題”，這樣的標題不僅表達了它在一個大型文件集
中的位置，還說明了文件的具體內容，吸引讀者更有興趣讀下去。
自我引用的標題也沒有什麼用處。像“主頁”這樣的標題和內容毫無關係，類似的還有“反饋頁”或“常用連結”等。你應該設計一個能夠
傳達一定內容和目的的標題，令讀者憑這個標題就可以判斷是否由必要訪問這個頁面。“HTML <title> 標籤的詳細資訊”，這就是一
個描述性的標題，類似的還有“HTML <title> 標籤的反饋頁”等等。
人們常常會花費大量時間去建立 Web 文件，但卻經常只是因為一個不吸引人或無意義的標題，而把這些努力全都浪費掉了。當自動為
使用者蒐集連結的特殊軟體在 Web 上越來越流行時，只有網頁的標題才會作為與頁面相關的描述性詞語，被插入到龐大的連結資料庫
中。因此，我們怎麼強調這一點都不過分：請為自己的每個文件都認真地選擇一個描述性的、實用的並與上下文獨立的標題。
-->
<!-- <script>
<script> 標籤用於定義客戶端指令碼，比如 JavaScript。
script 元素既可以包含指令碼語句，也可以通過 src 屬性指向外部指令碼檔案。
必需的 type 屬性規定指令碼的 MIME 型別。JavaScript 的常見應用時影像操作、表單驗證以及動態內容更新。
script屬性：
1)、async 屬性規定一旦指令碼可用，則會非同步執行。
註釋：async 屬性僅適用於外部指令碼（只有在使用 src 屬性時）。
註釋：有多種執行外部指令碼的方法：
如果 async="async"：指令碼相對於頁面的其餘部分非同步地執行（當頁面繼續進行解析時，指令碼將被執行）
如果不使用 async 且 defer="defer"：指令碼將在頁面完成解析時執行
如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取並執行指令碼
2)、charset 屬性規定在外部指令碼檔案中使用的字元編碼。
如果外部檔案中的字元編碼與主檔案中的編碼方式不同，就要用到 charset 屬性。
預設的字元編碼是 ISO-8859-1。
charset 屬性與 src 屬性一起使用，告訴瀏覽器用來編碼這個 javascript 程式的字符集。它的值是任何一個 ISO 標準字符集編碼
的名稱。
3)、defer 屬性規定是否對指令碼執行進行延遲，直到頁面載入為止。
有的 javascript 指令碼 document.write 方法來建立當前的文件內容，其他指令碼就不一定是了。
如果您的指令碼不會改變文件的內容，可將 defer 屬性加入到 <script> 標籤中，以便加快處理文件的速度。因為瀏覽器知道它將能夠
安全地讀取文件的剩餘部分而不用執行指令碼，它將推遲對指令碼的解釋，直到文件已經顯示給使用者為止。
--></span><span style="font-size: 21px !important;">
</span>