html+css教學

--- title: html+css教學 tags: web, Tutorial slideOptions: transition: slide --- # 利用html混合css刻出簡易網頁 --- # 先備環境 ![](https://i.imgur.com/sRlUvFD.png =250x) ![](https://i.imgur.com/FRDkQBi.png =250x) ---- ### **使用vscode + Live Server插件進行開發** - VScode 大眾編輯器可以編寫大部分文字檔案 - Live Server 能夠即時預覽結果 - 跨平台可使用 --- # HTML ## 認識HTML HTML是HyperText Markup Language的縮寫中文翻譯為==超文本標記語言== 是網頁顯示最基本的骨架 **它並非程式語言** ---- 目前主流使用的版本是HTML5 最著名的功能就是對多媒體的支援以往若要在網頁嵌入影片等多媒體是相對麻煩的事情現在能夠透過\<video>等標籤輕易完成 ---- HTML網頁主要由標籤(tag)構成而標籤**通常**是成對的會由"起始標籤"和"結束標籤"組成少部分的標籤會單獨存在如換行的\<br>與\<img>等例如 ```htmlmixed= <h1>這是1級標題</h1> <br> <img src="https://i.imgur.com/NCimijS.png" \ style="width:250px"/> ``` --- ## 基本架構我們可以將HTML的結構視為一個人的頭和身體 - html - 頭 (head) : 負責紀錄屬性和連結css檔案等作用 - 身體 (body) : 使用者可以看到的部分 ---- 實例上大概可以看成這樣 ```htmlmixed= <html> <head> </head> <body> </body> </html> ``` --- ## 網頁的內容前面提過網頁可以透過不同標籤去呈現這裡簡略介紹部份常用的標籤 ---- ### 網頁標題可以在瀏覽器上面看到的標題會放在\<head>裡面 ```htmlmixed= <title>這是網頁的標題</title> ``` ---- ### 文字排印 #### \<h1> ~ \<h6> : 標題(heading) 用於呈現出不同等級的標題 ```htmlmixed= <h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6> ``` ---- #### \<p> : 段落(paragraph) 用於將文字進行分段 ```htmlmixed= <p>第一段文字</p> <p>第二段文字</p> ``` ---- #### \<img> : 圖片(images) ```htmlmixed= <img src="#" /> ``` src : 來源(source)路徑連結需直接連結至檔案本身範例: ```htmlmixed= <img src="https://i.imgur.com/NCimijS.png" style="width:250px"/> ``` 這樣將會顯示一張Rick Astley的圖片在網頁上 <img src="https://i.imgur.com/NCimijS.png" style="width:250px"/> --- # CSS ## 認識CSS CSS是Cascading Style Sheets的縮寫中文譯為==層疊樣式表== 用來為HTML網頁添加樣式 (如顏色、大小、背景等等) ---- 可以將網頁想像成捏臉系統 html就是他的骨架 css就是那些調整五官、頭髮、身材等等的參數 ---- 目前主流使用的版本為css3 能夠處理立體和動畫等等功能 --- ## 套用CSS 目前使用CSS主要有3種方式分別是 - 行內(標籤內)套用 - 連結CSS檔案套用 - style標籤套用 --- ### 標籤內套用在起始標籤中，加入`style=""` 中間替換為欲使用的樣式。例: ```htmlmixed= <font style="font-family: 'Ubuntu Mono', \ monospace;">$whoami</font> ``` <h4 style="font-family: 'Ubuntu Mono', monospace;">$whoami</h4> --- ### 連結CSS檔案在\<head>標籤中加入\<link>標籤連結至CSS檔。 ```htmlmixed= <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> ``` ---- 其中： - \<link> 為連結檔案的標籤 - rel 為連結關係，這裡選擇”樣式表”(stylesheet) - type 為類型，由於是css文本，所以填入”text/css” - href 內填入連結位址 --- ### Style標籤利用\<style>標籤直接嵌在html裡面例： ```htmlmixed= <style> .h { font-family: 'Ubuntu Mono'; } </style> <h1 class="h">owo</h1> ``` --- ### CSS 用法首先先介紹CSS的基本語法 ```css= 選擇器(selector) { 屬性(property) : 值(value) ; } ``` - 選擇器: 在這裡我們填入標籤名(如h1) - 屬性: 填入想要更改的樣式名(如color) - 值: 屬性對應的數值(如color可以填入red) > 注意: 大括號( {} ) 和分號( ; ) ---- 例如這樣 ```css= .h { font-family: 'Ubuntu Mono'; } ``` --- ### CSS 常用屬性 ---- #### color: 文字/前景顏色 color的值有現成的色彩英文可以輸入像是常見的green.red.blue.black.white等等也支援用RGB色光來表示色彩例如白色可以表示為rgb(255,255,255) 最常見的是以十六進位標籤表示顏色例如白色也可表示成#FFFFFF。 ```htmlmixed= <font color='red'>紅色ㄉ字</font> ``` <font color='red'>紅色ㄉ字</font> ---- #### font-size: 文字大小絕對單位習慣用"像素"(px)來設定如果考慮到對不同裝置的支援也可以用相對的百分率(%)來表示。 ---- #### text-align: 對齊文字常見有向左(left)、向右(right)、置中(center) ---- #### background-color: 背景顏色這部分類似於前面所提到的設定文字顏色部分。 ---- #### background-image: 背景圖片在CSS中，要提供圖片的位址，可以使用url()。 ---- #### background-size: 調整背景大小可以使用寬度和高度來調整，單位仍然支援絕對與相對。 --- ## 參考資源英文資源 - [W3Schools](http://www.w3schools.com/)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.