超文件標示語言（英語：HyperText Markup Language，簡稱：HTML），是一種純文字的標籤(tag)，副檔名為.html，又稱為網頁檔。
HTML常與CSS、JavaScript一起使用。
HTML的語言形式以尖括弧<>包圍的HTML元素。
HTML標籤都是成對的。
我們來看看在PHP中的HTML吧！
當然囉，在程式碼旁邊也增加了註解(希望大家都可以看懂喲!!!)
|
|
|
<html></html> <head></head> <body></body> |
一份網頁文件 網頁檔頭 可編輯內容區 |
區塊元素(Block Element)VS行內元素(inline Element)
區塊元素自成一排，無法和其他元素擺在同一列上。
行內元素若沒有特別去做換行，育社會放在同一列上。
|
<body> <div>區塊元素1</div> <div>區塊元素2</div> <span>行內元素1</span> <span>行內元素2</span> </body> |
|
|||||||||
區塊層級標籤
- <h1>~<h6>標題
常使用於頁面標題上。
<body>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h3>標題6</h6>
</body>
標題1
標題2
標題3
標題4
標題5
標題6
- <div>區域</div>
常用來規劃一個區塊，或者將幾個網頁元件包在一起。
BootStrap是利用<div>標籤來替代整個畫面分欄位並進行排版。 - <p>段落</p>
顯示文章內容。
<body>
<div>段落1 段落1 段落1</div>
<div>段落2 段落2 段落2</div>
<p>區域1 區域1 區域1</p>
<p>區域2 區域2 區域2</p>
</body>
段落1 段落1 段落1
段落2 段落2 段落2
區域1 區域1 區域1
區域2 區域2 區域2
◎<p>與<div>的差別在於下一個段落會不會空格 - <pre>程式碼</pre>
不常使用，放在裡面的內容會連同空格、換行都原原本本都留下，連文字都會用等寬字體呈現。
<body>
<pre>
這是段落1 這是段落1 這是段落1
這 是 段 落 1
</pre>
</body>
這是段落1 這是段落1 這是段落1
這 是 段 落 1
- <ol>有序清單</ol>、<ul>無序清單</ul>
<ol>和<ul>會搭配<li></li>項目標籤使用。
<ol></ol>會呈現有編號的項目。
<ul></ul>會呈現單純項目符號。
<body>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
- <table>表格</table>
古早<table>表格常被作為排版用，現代請用<div>搭配CSS來做排版的事，表格就做完正常表格來使用就好。
表格通常會搭配幾個標籤來使用
<caption>表格標題</caption>，不見得要使用。
<tr>產生一個橫列</tr>，<tr></tr>中有兩種標籤：<th>儲存格標題</th>與<td>儲存格內容</td>。
clospan水平合併儲存格，rowspan垂直合併儲存格。<body>
<table border = 1>
<caption>表格範例</caption>
<tr>
<th>標題1</th> <th>標題2</th><th>標題3</th>
</tr>
<tr>
<td>內容1</td><td>內容2</td><td>內容3</td>
</tr>
<tr>
<td cospan = 2>內容1</td><td>內容3</td>
</tr>
<tr>
<td rowspan = 2>內容1</td><td>內容2</td><td>內容3</td>
</tr>
<tr>
<td>內容2</td><td>內容3</td>
</tr>
</table>
</body>
表格範例
標題1
標題2
標題3
內容1
內容2
內容3
內容1
內容3
內容1
內容2
內容3
內容2
內容3
- <form>表單</form>
§action送出位置，表單填完後，將表單送到甚麼地方，一般會指定一個用來接收表單php檔。
§method傳遞方式，預設使用get，除了搜尋外，一般會建議改完post。
§enctype內容編碼格式，一般不需要特別填寫，若有藥傳送檔案時，就必須指定為「mulitipart/form-data」，這樣檔案才有辦法上傳。
通常會搭配<input>、<select>與<textarea>三種標籤：
- <input>元件，可依據類型(type)屬性設定的不同，延伸出許多不同表單元件。
- <select>下拉選單，很有彈性的表單元件，可以單選也可以複選(按下ctrl就可以同時取多個選項)。
- <textarea>大量文字區，是用於讓使用者輸入大量文字時使用。
※關於form的範例，等往後有遇到比較詳細的在跟大家做介紹。
行內層級元素
- <a></a>
網頁裡面最重要的標籤，串起整個網際網路的大功臣。
<a herf = "網址" target = "_blank">
herf要連結到的檔案位置。
target指點擊後，指定是穿要用甚麼方式開啟(_blank新視窗開啟、_parent父視窗開啟_self原視窗開啟為預設、_top跳脫框架開啟，有用Frame時才有作用)。 - <br>換行
一般用來作斷行，或者說是強迫換行的標籤，是一個單獨的標籤。 - <img>圖片
放置圖片用的標籤
<img src = "圖片位置" alt = "圖片說明">
src指定圖片的來源，alt圖片萬一出不來時，呈現在網頁上的文字。 - <span>區域</span>
<span></span>和<div></div>都是一個容器標籤，都做為排版用。
HTML常用標籤
|
標籤 |
類型 |
常用屬性 |
作用 |
|
文件標籤 |
|||
|
<html> |
成對 |
|
讓瀏覽器知道這是HTML文件 |
|
<head> |
成對 |
|
提供文件整體資訊 |
|
<meta> |
|
|
網頁資訊標籤 |
|
<title> |
成對 |
|
定逸文字標題，將顯示於瀏覽器頂端 |
|
<body> |
成對 |
|
設計文件格式及內文所在 |
|
排版標籤 |
|||
|
<!- -註解- - > |
|
|
註解標籤，不會顯示在網頁上 |
|
<p> |
成對 |
|
段落標籤 |
|
<br> |
|
|
段行標籤 |
|
<hr> |
|
noshade |
插入一條水平線 |
|
<pre> |
成對 |
Width每行最多的字數(通常40、80或132) |
令文件按照原始碼的排列方式顯示 |
|
<div> |
成對 |
|
區塊標籤 |
|
字體標籤 |
|||
|
<h1>~<h6> |
成對 |
|
文字標題大小，等級從1-6，數字越小標題越大 |
|
清單標籤 |
|||
|
<ol> |
成對 |
reverded降序排列 start=”起始編號” type=”類型” (A,a,l,I,1) |
清單項目將以數字、字母順序排列 |
|
<ul> |
成對 |
|
清單項目將以圓點排列 |
|
<li> |
成對 |
|
每一標籤標是一項清單項目 |
|
<dl> |
成對 |
|
清單分層出現 |
|
<dt> |
成對 |
|
|
|
<dd> |
成對 |
|
|
|
表格標籤 |
|||
|
<table> |
成對 |
cellpadding=”文字距” celllspacing=”框間距” |
設定表格的各項目參數 |
|
<caption> |
成對 |
|
表格標題 |
|
<tr> |
成對 |
|
設定該表格的列 |
|
<td> |
成對 |
nowrap clospan=”右合併” rowspan=”下合併” |
設定該表格的欄 |
|
<th> |
|
|
相當於<td>，但其內之字體會變粗 |
|
表單標籤 |
|||
|
<form> |
成對 |
|
決定單一表單的運作 |
|
<textarea> |
成對 |
|
提供文字方盒以輸入最大文字量 |
|
<input> |
|
|
決定輸入形式 |
|
<select> |
成對 |
|
建立pop-up捲動清單 |
|
<option> |
成對 |
|
每一標籤標示一個選項 |
|
圖形標籤 |
|||
|
<img> |
|
scr=”圖檔位置” alt=”圖檔說明” |
用以插入圖形及設定圖形屬性 |
|
連結標籤 |
|||
|
<a> |
成對 |
href=”連結位置” target=”目標” (_blank、_parent、_self、_top) |
加入連結 |
|
框架標籤1 |
|||
|
<iframe> |
成對 |
|
於網頁中間插入框架 |
留言列表
