網⾴網站介紹
DD
OUTLINE
introduction HTML5
introduction css3
introduction javascript
introduction web framework
前⾔
前⾔
➤ 1. 此簡報只是本⼈⾃⼰做爽的,有出錯還請直接告訴我,以免誤⼈⼦弟。
➤ 2. ⼤部分資訊皆由本⼈親⾝經歷,所以可能會有很多錯誤,敬請指教。
➤ 3. 本簡報適合完全沒接觸過網⾴的⼈,若是有寫過網站的,請離開謝謝。
introduction HTML5
什麼是HTML呢? 先來看他的全名
HyperText Markup Language
中⽂⼜稱超⽂件標⽰語⾔
這…其實我也不太懂
簡單來說HTML5就是HTML的改版
然後HTML裡⾯有很多可⽤的元素
這些元素就是⽤來讓我們的網⾴
可以顯⽰⼀些不同的東⻄
舉個例⼦:
<button>123</button>
那他在網⾴上就會像這樣
反正⼤概就是可以讓網⾴呈現⼀些好⽤的東⻄
那有哪些元素能⽤呢?
https://www.w3schools.com/html/
請⾃⼰去看 有很多
Q:W3C是什麼?
A:全球資訊網協會
規範了很多有關web的東⻄ 包刮HTML5
順帶⼀提 ⼤部分的東⻄都可以從剛剛那個網站學
HTML5跟HTML差在哪呢?
HTML5⽀援很多新的語法特徵
例如:
<video>、<canvas>、<section>、<nav>
廣義來說HTML5是包刮HTML、javascript、css
的⼀種技術整合
Q:javascript跟css是什麼?
A:下⾯會提到 現在先有個概念就好
那我們直接開始吧
你說要⽤什麼東⻄寫?
vim、sublime、Notepad++…
拜託不要⽤記事本
因為他不會幫你把⼀些關鍵字⽤顏⾊標起來 到時
候會很⾟苦
那在動⼯之前 我們先稍微瞭解⼀下語法規則吧
語法規則
➤ 標籤都曜⼩寫
➤ ⼤部分標籤都是成對出現的
➤ 可以省略⼤部分的標籤 例如:<html><head><body>...
➤ 可以省略⼀些結束標籤後瀏覽器還是看的懂 上⾯跟這個不建議省略
➤ 有些標籤不是成對出現 例如:<img>、<input>...
了解語法規則後 稍微講⼀下HTML5的⽂件宣告吧
基本上 檔案副檔名都是命名成.html
點開後會發現 瀏覽器會打開他 並且顯⽰裡⾯的
內容
那瀏覽器要怎麼知道你這個是HTML5呢?
當然是要對⽂件進⾏宣告啊
根據標準 我們⼀般會在第⼀⾏宣告他是HTML5的
格式
<!DOCTYPE html>
就是這東⻄讓瀏覽器知道說 這份⽂件是HTML5的格式
接下來就先給⼤家看⼀下標準的格式
<html>就是說讓瀏覽器知道這是⼀個html檔
<head>⼀般都是放⼀些在瀏覽器不會顯⽰出來
的東⻄ 最主要都是放meta
<body>就是網⾴本體 曜顯⽰出來的東⻄都會放
這
那我們先從<head>開始吧
東⻄有點多 ⼀⾏⼀⾏慢慢來
<meta>標籤⼀般都是⽤來提供網⾴資訊給瀏覽
器或搜尋引擎的
第⼀⾏就是說 告訴瀏覽器 這份⽂件要⽤ UTF-
8編碼 不加這個中⽂字可能會顯⽰不出來
title就是網⾴的標題
viewport就是告訴瀏覽器⺫前裝置的⼤⼩
裡⾯的width就是設定成當前裝置的寬度
initial-scale=1就是設定當前的畫⾯縮放⽐例
keywords就是讓搜尋引擎可以根據這個關鍵字
去找到你的網站
author就是這個網站的作者
link就是說我要連接外部的東⻄進來
rel就是指⽰曜連接的檔案的樣式
type就是指定連接檔案的類型
href就是檔案的路徑
icon就是可以讓你的網站有⼩圖⽰
type這部分如果圖檔是jpg 那就要寫成這樣
type=“image/jpg”
script就是可以讓你從外部引⼊script檔
src就是檔案路徑
接下來是body裡⾯
這個...東⻄有點多 挑⼀些常⽤的講好了
<p></p>
這個是段落 這個元素預設會把整個網⾴的寬度佔滿 不管有幾個字幾個enter
<span></span>
這是⽂字區域 他跟<p>不⼀樣的在於 不會佔滿整個網⾴
很適合做個別的⽂字處理
<a></a>
可以讓⼀段⽂字變成超連結
連過去的網址放在href裡⾯
<img>
很明顯 這是拿來顯⽰圖⽚
有⼀個很重要的地⽅ 就是這個不⽤結束符號
⽤src來連結圖⽚
<h1>
設定裡⾯的⽂字⼤⼩
h1最⼤ h6最⼩
我們來看看剛剛介紹的組合起來會⻑怎樣
怎麼怪怪的 跟想像中不⼀樣
好像沒有排版 ⽽且圖⽚的位置也怪怪的
最主要是因為 我們沒有⽤到css
css簡單來說像是HTML的⾐服
可以拿來裝飾單調的網⾴
所以我們就進⼊css的章節吧
introduction css3
不知道有沒有⼈發現這些標籤 好像都不是HTML5
的
其實我也發現了這個問題
所以我覺得應該曜改⼀下標題名稱
可是寫到這了 懶的換了 就繼續吧
那這裡就不介紹css3是什麼東⻄
直接開始⽤吧
直接先上code
來⽐較⼀下吧
看出來了嗎?
我在head裡⾯加⼊了style標籤
style標籤內就是放css的
外⾯那個p代表說 選擇到了p這個標籤
那個font-size就是調字的⼤⼩
你們可以調整看看
那還有⼀種寫法
這種寫法⼀般都是拿來測試⽤的 不推薦直接加在
上⾯
可是假設我有很多個p都想要⽤⼀樣的style呢?
那我們就可以給他class 或是 id
class是⽤.
id是⽤#
差別是class可以使⽤在很多元素上 id不⾏
⽤法⼤概是這樣
裡⾯的css就請各位⾃⼰去google摟
順便在這介紹⼀下div
div其實就是⼀個容器 可以想成⼀個框框裡⾯可
以塞很多東⻄
最後給⼤家⼀個⾃我介紹⼿刻的網⾴
很爛 我不會排版 到時候再介紹前端框架
效果是這樣
先介紹到這邊 有空再來更新前端框架
end

HTML introduction