育將電腦工作室 - 線上書籍

111網頁前端設計工程師培訓班
===============

### 一、建立 HTML文件

HTML與CSS是網頁最基礎的技術，HTML是用來組織架構並呈現網頁內容的標籤語言(Markup Language)，而CSS是網頁排版與美化不可或缺的樣式表語言(Style Sheet Language)。

1. 瀏覽器
2. 文字編輯器(VS CODE)
 
### 二、HTML語法概念與架構

HTML文件有固定的基本架構，包含html宣告、html、head、body

1. html：lang='en'目前最主要的規範是依照IETF(Internet Engineering Task Force 國際網路工程研究團隊)的RFC 4646 (<http://www.ietf.org/rfc/rfc4646.txt> )的Tags for Identifying Languages所定義。它的要求為 language-script-region-variant-extension-privateuse 就是 語言 - 字體 - 地區 - 方言 - 特殊附加資訊。以台灣繁體標示即為zh-Hant-TW 
2. 所有的HTML標籤都有固定格式，必須由「<」、「>」符號括住，例如<html>，其標籤有「圍堵標籤Container Tags」、「單一標籤Single Tag」 
 圍堵標籤：<起始標籤>.....<結束標籤>，例<title>我的網站</title> 
 單一標籤：有些標籤沒有內容，因此只有起始標籤，例<hr><img> 
 每個標籤都有它的屬性(Attributes), 來改變其在網頁呈現的方式，若有多個屬性，則用空白隔開
3. 例如 
 ```javascript
 <meta name="keywords" content="公司自動化流程專案設計、網站購物車、商品詢問車、商品展示、學校成績查詢、進銷存、進銷存特殊流程,xoops,xoops modules,xoops thems">
 <meta name="description" content="育將電腦工作室專營：公司自動化流程專案設計、網站購物車、商品詢問車、商品展示、學校成績查詢、進銷存、進銷存特殊流程。TEL：0921560421、Line：webugm、地址：台南市永康區大灣路158號">
 ```
 
 meta標籤是用來描述網頁，提供給搜尋引擎，因此正確的定義meta,有助於搜尋引擎優化(SEO), 讓搜尋引擎快速找到網站且正確分類 
 name="keywords"：Google 有說過它現在已經不看 meta keywords 的內容了 ，簡單來說就是 keywords 完全沒用了，但你可以將關鍵字放在 meta description 中。 
 name="description"：搜尋結果中所顯示的網頁摘要
4. 標籤它不區分大小寫，但考慮有些作業系統，對檔案名稱會區分大小寫(top.jpg、top.JPG會視不同檔案)，因此強列建議一律用小寫來編寫
 
 
### 三、HTML5文件結構與語意標籤

下面內容參考 <https://ithelp.ithome.com.tw/articles/10240446>

flex box： 
 [https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS\_Flexible\_Box\_Layout/Basic\_Concepts\_of\_Flexbox](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)

<https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap>

![](https://ithelp.ithome.com.tw/upload/images/20200920/20129094OfFCWINZkD.png)

<table border="1" cellpadding="0" cellspacing="0" class="table table-bordered table-hover table-condensed" style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td>標籤</td> <td>說明</td> </tr> <tr> <td><header></td> <td>顯示網站名稱，主題或是主要資訊</td> </tr> <tr> <td><nav></td> <td>網站的連結選單，導航列</td> </tr> <tr> <td><aside></td> <td>使用於則邊欄</td> </tr> <tr> <td><main></td> <td>網頁主要內容，每個頁面只能有一個<main></td> </tr> <tr> <td><article></td> <td>用於定義主內容區</td> </tr> <tr> <td><section></td> <td>具有標題的章節或段落</td> </tr> <tr> <td><footer></td> <td>位於頁尾，用來放置版權宣告、作者資訊</td> </tr> <tr> <td><figure></td> <td>指獨立的內容，例如圖片、圖表等等，可以使用<figcaption>標記定義標題</td> </tr> <tr> <td></td> <td>用在要凸顯強調的文字</td> </tr> </tbody> </table>

1. HTML5宣告與編碼設定 
 ```javascript
 
 ```
 
 
 ```javascript
 <meta charset="UTF-8">
 ```
2. Viewport宣告 
 Viewport是為了自適應(RWD)所加入的宣告，目的是告訴瀏覽器，行動裝置的寬度及高度，頁面畫面與字體比例，使用者是否可以透過平移(Scroll)和縮放(Zoom), 來瀏覽整個頁面等等 
 ```javascript
 <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 ```
 
 width：控制寬度，或入「device-width」表示寬度隨著設備寬度自動調整 
 height：控制高度，或輸入「device-height」 
 initial-scale：初始縮放比例，最小0.25，最大5 
 minimum-scale：允許使用者縮放的最小比例，最小0.25，最大5 
 maximum-scale：允許使用者縮放的最大比例，最小0.25，最大5 
 user-scale：是否允許使用手動縮放，可以輸入0 or 1也可以輸入 yes or no
3. 練習：請根據上面圖片，建立一個頁面
 
### 三、認識CSS基本架構

CSS全名「Cascading Style Sheets」，中文名稱為「樣式表」，它可以用定義HTML網頁上物件的大小、顏色、位置與間距，甚至是為文字、圖片加上陰影等等功能，就像網頁美容師一樣，可賦予網頁豐富漂亮且一致的外觀

將CCS樣式表套於網頁的方法有三種：

1. 樣式套用於行內 
 ```javascript
 <header style="height: 50px;">
 ```
 
 
2. 樣式套用於整頁 
 ```
 <style>
 header,nav,article,section,aside{
 background: rgb(113, 214, 82);
 
 /* font-family: 'Arvo', serif; */
 font-family: 'Noto Sans SC', sans-serif;
 }
 </style>
 ```
 
 
3. 連結外部CSS樣式表 
 ```javascript
 <link href="https://www.ugm.com.tw/themes/theme_2/css/custom.css" rel="stylesheet" type="text/css">
 ```
 
 或 
 ```
 
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Arvo&family=Noto+Sans+SC:wght@900&display=swap');
 header,nav,article,section,aside{
 background: rgb(113, 214, 82);
 
 /* font-family: 'Arvo', serif; */
 font-family: 'Noto Sans SC', sans-serif;
 }
 </style>
 ```
 
 絕對路徑、相對路徑 
 /：根目錄 
 ./ ：同一層路徑下 
 ../：上一層路徑
4. 一般會建立各式目錄來放置相同類型的檔案，例：img、css、js
5. HTML、CSS的註解

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown