起始內容
<!DOCTYPE html>(文檔類型 html)
用於宣告以下內容文檔類型為HTML。
<html></html>(html)
宣告HTML的範圍。
<head></head>(頭部)
文檔頭部，HTML的頭部，和<body></body>同樣位於<html></html>內部，內部用來宣告瀏覽者看不見的內容。
<title></title>(標題)
文檔標題，位於<head></head>內部，屬於瀏覽者看不見的內容，內部用來宣告文檔的標題。
<body></body>(身體)
文檔身體，HTML的身體，位於<html></html>內部、<head></head>的下方，內部用來宣告瀏覽者看得見的內容。
範例:
<!DOCTYPE html>
<html>
<head>
<title>瀏覽者看不見此標題</title>
</head>
<body>
常用功能標籤
<!--
-->(註解)
程式註解，可邊寫在<html></html>內任何位置，被包裹的內文即使位於<body></body>內也不會編寫者以外人士被看見，可用來標示說明給編寫者瀏覽。
另外，被註解包裹的程式碼也會失去原本的功能，可用來關閉待保留的程式碼。
範例:
<!DOCTYPE html>
<html>
<!--這是1個HTML標籤-->
<head>
<!--<p>第一個段落</p>
<p>第二個段落</p>
<p>第三個段落</p>
以上<p></p>內容暫時廢除不用-->
<p>本文</p>
<p></p>(段落)
文字段落，位於<body></body>內部，瀏覽者能看見的內文，一個段落為連續的一行。
範例:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
(heading 標題1~6)
文章標題，瀏覽者能看見的內文標題，依據重要性從高至低列為1~6，內建字體大小，H1字體最大，H6字體最小。
範例:
<body>
<h6>第六大標題</h6>
<p>以上標題由最大至最小</p>
</body>
<br>(換行)
換行，不需要結尾的獨立標籤，每個<br>代表空幾行。
範例:
<body>
<p>下面空兩行</p>
<br>
<br>
<p>上面空了兩行</p>
</body>
<a></a>(超聯結)
<a href=" "></a>
<a href=" " target="_blank"></a>(外開超聯結)
<a href=" "target="_self"></a>(內連超聯結)
超聯結，連結其他頁面， href=" "內部必須要有網址才能進入，
而<a></a>當中必須要有內文才有辦法被點擊，但內文可以是其他可見的圖片或程式碼。
target="_blank"是宣告外開連結，網址必須要有http:// 。
"target="_self"是宣告內連結，網址不需要有http:// ，因此對象必須是自身伺服器內的.html檔。
範例:
<body>
<a href="http://gamer.com.tw/ ">點此連結巴哈姆特</a>
<a href="http://gamer.com.tw/ ">http://prj.gamer.com.tw/13y/img/baha_logo.jpg</a>
<a href="http://gamer.com.tw/" target="_blank">點此外連結巴哈姆特</a>
<a href="http://gamer.com.tw/"target="_self">點此內連結巴哈姆特</a>
<!--巴哈姆特不是這個伺服器內的.html檔，所以形同外連。-->
</body>
<img src=" "></img>(圖片開放標籤)
<img src=" " />(圖片獨立標籤)
<ul></ul>(無序列表)
<ol></ol>(有序列表)
<li></li>(清單)
無序列表，沒有數字排序、以符號分類的清單列表。
<ul></ul>內部必須要有<li></li>才有完整功能。
無序列表，有數字排序、以1、2、3依序排列分類的清單列表。
<ol></ol>內部必須要有<li></li>才有完整功能。
清單，在<ul></ul>或<ol></ol>內成為符號分類或數字排序分類的標籤。
此外，<ul></ul>和<ol></ol>內可以在寫入其他<ul></ul>和<ol></ol>，變成多層次的清單列表
<body>
<p>這是一份無序列表</p>
<p>這是一份有序列表</p>
<li>有序1</li>
<li>有序2</li>
<li>有序3</li>
<p>這是一份無序列表包有序列表</p>
<ul><li>無序1</li>
<li><ol>
<li>無序2有序1</li>
<li>無序2有序2</li>
</ol></li>
</ul>
<p>這是一份有序列表包無序列表</p><li><ul>
<li>有序2無序1</li>
<li>有序2無序2</li>
</ul></li>
<strong></strong>(粗體字)
<em></em>(斜體字)
粗體字，被<strong></strong>包裹的內文會變成粗體字。
斜體字，被<em></em>包裹的內文會變成斜體字。
強調字體用的標籤不能包裹【!】，像是<em>!</em>。
範例:
<body>
<p>這句子裡使用了<strong>粗體</strong>和<em>斜體</em>。</p>
</body>
表格
<table></table>(表格)
<thead></thead>(表格頭部)
<tbody></tbody>(表格身體)
<tr></tr>(表格橫排)
<th></th>(表格頭部直排)
<td></td>(表格身體直排)
colspan=" "(橫向表格合併" "格)
表格，在<table></table>包裹<thead></thead>和<tbody></tbody>來製定表格內容。
表格頭部，在<thead></thead>包裹<tr></tr>和<th></th>來編寫表格標題。
表格身體，在<tbody></tbody>包裹<tr></tr>和<td></td>來編寫表格本文。
表格橫排，被包裹在<thead></thead>或<tbody></tbody>內，每新增一個<tr></tr>會像下方增加一個橫排，必須要有<th></th>或<td></td>才能填寫內文。
表格頭部直排，位於<thead><tr></tr></thead>，用來填寫表格標題內文，每新增一個<th></th>會像右方增加一個直排，至少要有一個<th></th>才能填寫表格標題。
表格身體直排，位於<tbody><tr></tr></tbody>，用來填寫表格內文，每新增一個<td></td>會像右方增加一個橫排，至少要有一個<td></td>才能填寫表格標題。
橫向表格合併" "格，寫於<th>或<td>起始標籤內，" "填寫數字會合併右邊相當數量的表格。
範例:
<th colspan="3">這是一份九宮格</th>
風格
不同於其他標籤，style(風格)是寫在起始標籤內的程式碼，且幾乎適用於任何標籤。
一個起始標籤能同時寫入多種風格，中間用
;
隔開即可。
style="font-size: px"(字體尺寸)
px是像素單位，代表字體要多少像素大。
<body>
<p style="font-size:100 px">這段文字100像素(px)單位大</p>
</body>
style="font-family:"(字型)
可以上網查詢font-family有的字體，
Cursive 英文草寫
<body>
<p style="font-size:300 px;font-family:Cursive">It's 300 px Cursive!!</p>
<!--這段文字同時運用的字體&字體尺寸->
</body>
style="color:"(文字顏色)
style="background-color:"(背景色)
顏色分為文字顏色和背景色，任何標籤都可以同時共存這兩種顏色屬性。
<body>
<p style="color:black;background-color:White">白底黑字</p>
<p style="color:gray;background-color:gray">灰底灰字</p>
<p style="color:White;background-color:black">黑底白字</p>
<p >灰底灰字需要反白才能看見</p>
</body>
<span></span>(片段)
片段可以被包覆在許多標籤內，對部分的文字做獨立的風格編輯。
<body>
<p >所謂的大人，就是懂得
<span style="color:black;background-color:black>人性的黑暗，</span>
永遠在臉上掛著
<span style="color:black;background-color:black>虛偽的</span>
笑容。</p>
</body>
[bgcolor=rgba(0, 0, 0, 0.0470588)]text-decoration:[bgcolor=rgba(0, 0, 0, 0.0470588)]none
<div></div>(區域)
區域又名區塊，本身是個空白標籤，可以定義長度與寬度花分一個平面空間。
如果沒有定義寬度或高度以及標籤內文，是不會對程式造成視覺上的影響，就如同註解一般。
如果沒以定義屬性本身功能則和<p></p>相同。
<body>
<div>下面其實有三個空區域</div>
<div></div>
<div></div>
<div></div>
<div>上面其實有三個空區域</div>
</body>
style="Width: px"(寬度)
style="Height: px"(高度)
style="text-align:"(文字對齊)
center 中間
left 左
right 右
文字對其能使文字在區域內向左、中、右對齊
<div style="Width:300px;Height:30px;text-align:center">↑</div>
<div style="Width:300px;Height:30px;text-align:center">↑</div>
<div style="Width:300px;Height:30px;text-align:center">↓</div>
<div style="Width:300px;Height:30px;text-align:center">↓</div>
<div style="Width:300px;Height:30px;text-align:left">←</div>
<div style="Width:300px;Height:30px;text-align:right">→</div>
<div style="Width:300px;Height:30px;text-align:left ">←</div>
<div style="Width:300px;Height:30px;text-align:right">→</div>
<p>body當然也能定義背景色!</p>
<body style="background-color:#0096FF">
<br>
<br>
<br>
<div style="Width:400px;Height:30px;background-color:red;color:White;text-align:center">紅</div>
<div style="Width:350px;Height:30px;background-color:Orange;color:White;text-align:center">橙</div>
<div style="Width:250px;Height:30px;background-color:green;color:White;text-align:center">綠</div>
<div style="Width:200px;Height:30px;background-color:blue;color:White;text-align:center">藍</div>
<div style="Width:150px;Height:30px;background-color:Indigo;color:White;text-align:center">靛</div>
<div style="Width:100px;Height:30px;background-color:purple;color:White;text-align:center">紫</div>
<br>
<br>
<br>
<p>這個彩虹同時使用了長度、寬度、背景色、文字色、文字對齊</p>
</body>
border 邊框，用於div區域，使其產生邊框，可另外依序定義邊框寬度、風格、顏色。
border-width:邊框寬度，單位越大則越粗。
border-color:邊框顏色。
border-style:邊框風格
dashed 長虛線
dotted 點虛線
solid 實線
border :5PX dotted RED
[bgcolor=rgba(0, 0, 0, 0.0470588)]border-radius邊框半徑，半徑越大div區域越圓。
{}選擇器，如果需要一口氣對大量同標籤定義相同的屬性，{}可以對相同的標籤一起定義，這個設定必須加開一個stylesheet.css規則。
另外選擇器也可以定義多重條件來篩選
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
連結到一個stylesheet規則，href=""內是規則名稱，這個設定放置於<head></head>內。
HTML分頁
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body><P>全</P><P>都</P>一<P>起</P><P>改</P><P>好</P></body>
stylesheet.css分頁
P
{
background-color:black;
color:White;
font-size:50 px;
}
*{}通用選擇器，
創作內容
html學習筆記
小說 (9)