or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing
xxxxxxxxxx
前端「超」入門
前端是甚麼可以吃ㄇ
YuSheng
貼心共筆
前後端的概念
NOTE:
網站的前後端如何運作,可以想像網頁是文件,一開啟瀏覽器的時候,我們會跟遠方的電腦(對方放網頁的地方)請求一個網頁,過程中用文字的方式傳過來(也就是我們接收到,之後要教學的html/css/js),這些程式碼去構成我們看到的視覺樣子,由瀏覽器接收到這些之後,三者相輔相成變成我們看到的網頁。
NOTE:
前端的重點是網頁構型、圖像呈現跟資料產出,除了讓網頁美美的很炫會動之外,在不同的裝置也要能順暢轉換。
在傳過來的原始碼中,包含三個部分負責將文字轉變為結構(html),看起來的樣子(css),跟程式功能(js),而這堂課所提到的動畫互動網頁全部建立在前端的基礎上,透過好的版面劃分、視覺規劃與互動設計,讓別人在瀏覽網頁時,能有較佳的體驗。
今天我們就是來當櫃台的 :D
工作前要先應徵
所以我們來註冊一下這個網站ㄅ
基礎 HTML / CSS
HTML 部分
CSS 部分
CSS 選擇器
概念釐清
CSS Reset
NOTE:
在 W3C 制訂 HTML 與 CSS 規格時,並沒有強制規定各家瀏覽器應該怎樣實作每一個 HTML tag 的 CSS 預設樣式
Flex 排版
來練習一下吧
講完終於可以開始實做惹
先來打開這份檔案ㄅ
圖片在這
開始分析一下結構
你可能會想說
我知道!剛剛有教過
finish