# HTML tag標籤介紹 - 區塊元素(display: block)， - 盡可能佔滿整個版面的元素 - 就算改變第一個元素的寬度，第二個元素不會接在第一個元素後，會另起一行進行呈現。 - 可以以 `display:inline`變成行內元素 - 常見標籤`<h1 ~ h6>`、`<div>`、`<p>` - 行內元素(display:inline) - 常用在段落裡 - 原本內建設定是行內元素設定無法改寬高，若要更改可以使用`display :block` 變成區塊元素的設定 - 常見標籤`<span>`、`<a>` ## <head> 標籤 就是整個程式碼的"頭"，頭是給機器去搜尋與運作用的。控制你的html跟你想要連結的程式碼，裡面可以放reset＊，也可以放連結連到你所設定的css style裡。 - 常出現在head標籤裡的tag：`<title>`、`<meta>`、`<link>`、`<script>`(script也有人放在body)。 ### `<title>` 網頁的名字。就是會出現在你瀏覽器上不論是Safari/ Chrome/ Firefox… 最上列的那個名字，每個網頁只會有一個title。 ### `<link>` 當學習連接外部程式css的程式碼時，會用到的： `<link rel="stylesheet" type="text/css" href="xxxx.css"/>` ### `<script>` 當需要連接外部程式script檔時，會將以下內容放入head 或body，有人覺得放在body比較好，程式跑起來比較有效率。 `<script src ="xxxx.js"/></script>` ### `<meta>` 根據W3school對meta的介紹 "Metadata is data (information) about data" 資料中的資料，我們可以在meta介紹這資料的name/ author/ description/ 還有可以讓搜尋引擎找的到你！ ## <body>標籤 在body裡面就是放置你想要放在網頁上面的內容，你可能需要給他一個容器，容器裡面裝載文字、圖片、超連結 - 容器標籤常見的有`<header>`、`<div>`、`<span>`、`<nav>`、`<table>`、`<ul><li>`、`<form>`、`<input>`及`<footer>` #### `<header>` header就是指整個body部分的頭部資訊，通常放置網站標題，例如：在header裡會裝，<nav>爸（標題列）。 #### `<div>` 常見容器標籤，用來包裹html程式碼，本身為block元素，本身沒有任何標籤意義也不帶特殊容器語意，div加個class/ id屬性，即可在css/JS上做設定. ### `<ul><li>`、`<ol><li>`項目表單 - ul是無序項目表單 - ol是有序項目表單 ```.html <body> <ul> <li>這是一</li> <li>這是二</li> <li>這是三</li> </ul> <ol> <li>這是四</li> <li>這是五</li> <li>這是六</li> </ol> </body> ``` 瀏覽器跑出來的結果： ![](https://i.imgur.com/ba1iJSR.png) ### `<nav>` 標籤語意就是導覽列的意思，最常見的是網站最上面的主菜單 (menu)。一個 HTML 頁面可以有很多個 `<nav>` 元素，例如一個用做網站導覽、另一個用做頁內導覽。 ### `<table>` 表格標籤`<table>`用來包覆整個表格`（<tr>橫列+<td>直行)`，`<tr>`包覆td（表格裡的資料） ```.html <body> <table> <tr> <td>姓名</td> <td>電話</td> <td>居住地</td> </tr> <tr> <td>Chris</td> <td>0912345678</td> <td>桃園</td> </tr> <tr> <td>Hsuan</td> <td>0987654321</td> <td>台北</td> </tr> <tr> <td>Sarah</td> <td>0913572468</td> <td>新北</td> </tr> </table> </body> ``` 瀏覽器跑出來的結果： ![](https://i.imgur.com/ktoppbn.png) 若想要合併儲存格有分水平合併儲存格colspan/ 垂直合併儲存格rowspan `<td rowspan = “x（數字看你要合併幾格）”>xxxx</td>` `<td colspan = “x（數字看你要合併幾格）”>xxxx</td>` #### `<thead>`表格的頭，`<tbody>`表格的內容，`<tfoot>`表格的尾巴 他們主要是增強表格在html裡的語意性，表達不同區塊表格目的也不盡相同。 #### `<footer>` 網頁的頁尾，通常放置聯絡方式、著作權宣告等等。 ### 文字標籤 #### `<h1>~<h6>` 都是系統預設的字體，能夠隨著之後的css設定改變，你可能會覺得阿我就全部都用h1就好拉，**不行**！這方式會讓瀏覽器覺得你是故意的，然後會有一些懲罰機制（讓你的網頁在搜尋引擎排名往後掉） 所以，最好一個`<h1>`，`<h2>-<h6>`也別太多適當的分散。 ![](https://i.imgur.com/aAENi6H.png) 瀏覽器跑出來的結果： ![](https://i.imgur.com/QRBUPpL.png) #### `<p>` 預設是**block**元素，不管你字多少他就是佔據一整行。 #### `<span>` 系統預設是**inline**元素，第一個字會跟第二個字貼著。 ![](https://i.imgur.com/DTMKTOo.png) 瀏覽器跑出來的結果： ![](https://i.imgur.com/Ldaf81S.png) 每打一行p不論有多少字，一個p自己就是一行 但span會把字接再一起 當然我們可以透過css設定把`<p>`變成inline屬性，`<span>`變成block屬性. #### `cite` 表示一个作品的引用，且必需包含作品的標题。這個引用可能是一個根據適當的上下文約定關聯引用的元素數據的縮寫。 ![](https://i.imgur.com/RpYJLzR.png) #### button 按鈕標籤，點擊button會自動刷新頁面。 - 解決方式 1、將`<button></button>`改為`<input type="button">` 或者直接在<button>中添加屬性 `type="button"`. 2、在button的點擊事件中加入 ==e.preventDefult()==，阻止冒泡事件 ```.js= $('btn').click(function(e){ e.preventDefult(); }); ``` ###### tags: `html`