Jill 筆記 - 線上書籍

:::

PHP從入門到放棄實戰班
============

### 一、基礎HTML5頁面：（先切成HTML，輸入!）

```markup

</body>
</html>
```

<div contenteditable="false" tabindex="-1"> </div>1. 簡潔的DOCTYPE：HTML5 只有一個簡單的文檔類型：<!DOCTYPE html>
2. 簡單易記的語言標籤：<html lang="en">或<html lang="zh-Hant-TW">或如果網頁主要推廣區域在台灣，想在台灣地區易被搜尋，那可以寫成 <html lang="zh-TW">
3. 簡單易記的編碼類型：<meta charset="utf-8">
4. `viewport` 的作用是告訴瀏覽器，目前裝置有多寬(或多高)，以便在縮放時有個基準。尤其當設定頁面寬度需自動調整時，如寬度100%或螢幕由垂直轉為水平， `viewport` 大小是一個根據。 
  ```markup
  // 指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" >
  ```
  
  網頁寬度 `width` 通常設為手機寬度` device-width`，用意是適應各家裝置的大小，這樣寫CSS時就能放心的把版面寬度設為100%。  
     
   蘋果在iOS9更新中更改了initial-scale 的用途，故使用`shrink-to-fit=no` 來替代，以讓網頁的寬度自動適應手機螢幕的寬度。
5. HTML標籤通常是一對的： 
  - <html></html>一整個HTML頁面
  - <head></head>通常裡面會有 `meta `標籤，及<title></title>來設定頁面名稱
  - <body></body>主要內容區。
  - `meta `標籤主要用於網頁的內容說明，以利自己或搜索引擎使用，有無 `meta `標籤，並不影響網頁正常顯示，其最大目的在於提供網頁各種資訊及產生特殊效果。
 
### 二、HTML常用基本標籤

1. 完整標籤列表：<http://www.runoob.com/tags/html-reference.html>
  - [https://www.twcode01.com/tags/html-reference.html繁體版](https://www.twcode01.com/tags/html-reference.html)
2. 常用基本標籤： <div style="table-responsive"> <table class="table table-condensed table-hover table-striped table-bordered table-striped"> <tbody> <tr valign="TOP"> <td><div style="table-responsive">標題</div> </td> <td colspan="5"><h1></h1>（1~6）除了作為標題外，一般也拿來當作網站的架構或大綱。</td> </tr> <tr valign="TOP"> <td>段落</td> <td><p></p></td> <td>區塊容器</td> <td><div></div></td> <td>行內容器</td> <td><span></span></td> </tr> <tr valign="TOP"> <td>換行</td> <td><br></td> <td>輸出標籤</td> <td><pre></pre></td> <td>引用</td> <td><blockquote></blockquote></td> </tr> <tr valign="TOP"> <td>水平線</td> <td><hr></td> <td>註釋標籤</td> <td></td> <td> </td> <td> </td> </tr> </tbody> </table>
  
   </div>
3. 練習 
  - 標題一：我的待辦事項清單
  - 水平線
  - 段落：日期
  - ```markup
      <p>
        <span style="margin-left: 2em;">教育部發放400萬份，每份價值500元的「動滋券」，7月20日至7月26日登記抽籤，依身分證尾數單雙數分流。</span><br>但動滋券網站從凌晨起就被塞爆，許多民眾興匆匆上網登記，網頁無法正常運作，持續一片空白轉圈圈，最後顯示「無法連上這個網站」。
      </p>
      ```
 
### 三、項目符號或清單列表

<div style="table-responsive"> <table border="1" bordercolor="#000000" cellpadding="4" cellspacing="0" class="table table-condensed table-hover table-striped table-bordered table-striped"> <tbody> <tr valign="TOP"> <td>有序列表

</td> <td>無序列表

</td> <td>定義列表

</td> </tr> <tr valign="TOP"> <td><ol>

</ol>

</td> <td><ul>

</ul>

</td> <td><dl>

</dl>

</td> </tr> </tbody> </table>

</div>- 常被拿來做選單、列表、縮略圖...等用途。
- 練習：列表今天到期：1、逾期：2
 
### 四、 表格標籤<table>

</table>

</td> <td>1. <table>屬性：border（框寬度）
2. <th>及<td>屬性：colspan（水平合併）、rowspan（垂直合併）、headers（定義表頭關聯）
3. <th>還支援scope（定義表頭）屬性
 
 </td> </tr> </tbody> </table>

</div>- 更複雜的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、 <tfoot> 以及 <tbody> 標籤。
- 練習：表格標籤-表頭、樣式 `border="1"  width="1920"` 及表格
- <table border="1"> <tbody> <tr> <th>是否完成</th> <th>標題</th> <th>到期日</th> <th>優先順序</th> <th>指派對象</th> </tr> </tbody> </table>
 
### 五、 圖片<img src="圖片" alt="說明"> (3-3 說明)

1. 屬性：src（圖片位置）、alt（取代文字）、width（寬）、height（高）、ismap（地圖對應，需有連結）、usemap（使用圖片地圖，需對應map）
2. 網頁圖片支援三種規格jpg（全彩、壓縮、相片）、png（全彩、透明）、gif（256色、透明背景、動畫）
3. 相對路徑（相對於自身html檔）較常用，絕對路徑通常為：http://網址/圖檔.jpg
 
### 六、 連結標籤<a href="連結位置">顯示文字</a> (3-3 說明)

1. 連結位置可以是網頁、圖片、網站、文件、檔案、FTP站、Email...等。
2. 屬性：連結位置href、錨點名稱name、框架位置target（\_blank開新視窗, \_parent上個框架, \_self原視窗, \_top跳出框架）。
3. 錨點名稱用法 
  - (1) 先命名：<a name="top">某元素</a>
  - (2) 連結寫法：<a href="#top">回頂端</a>或<a href="index.html#top">回頂端</a>
4. Email連結：<a href="mailto:主信箱?cc=副本&bcc=密件副本&subject=主題&body=內容">連結呈現文字</a>
 
</body></html>

MarkDown