week2.md

HTML 1.element : h1…/h1第一層h2.../h2第二層h3….以此類推

…

是段落 //會換行，在裡面換行和空白也不會換 要在裡面空白要用 一個空白一次

---

2.attribute :

a href=”https:……….”/a //a代表超連結， href = hyper link reference

html lang=”en-US”//指定語言:英文

p title=”….”000/p || h1 title=”….”000/h1 //會在數標移道000時做出….的補充

通常attribute後是雙引號，但想在內容(…)裡打雙引號可以在attribute後名用單引號 EX:’….”…”….’

---

3.paragraphs

hr/畫水平線，加/表示直接結束，可加可不加

br/是換行

…

//performat預格式化(不要格式化)怎麼輸入怎麼出來

---

4.style

Style 可以用在任何有文字的地方 :

,

…

This is a red paragraph.

// style=”color:red”->是CSS的寫法把字變顏色/*color:red = color:#ff0000”採16進位(ff=255)越大顏色比例越多(光)*/ //設置背景顏色，也可以用#RGB

……..

//可以使字形變得更大或更小，px=pixel

……..

//也可以用倍率調整大小

…

||

…

//改變字形verdana,courier是其中一小部分

//字體向哪裡對齊，向中=center，向左=left (預設)，向右=right

---

5.formatting(格式化)

可以用在任何有文字的地方 :

,

…
EX :

………

: 粗體
: 強調(的字體)
: 斜體
: 強調(的字體)
: 標記(的字體) ，如下
: 加刪除線

: 變小 : 插入字體 _{: 下標
^{: 上標}}

---

6.quotation引述 Content blockqote > //會縮排來表示這個引用

……

//是行內的引用，效果是… :”…”，多了冒號和雙引號

…WHO…

// 是縮寫，但不常用，主要是讓顯示的WHO下面有底線表示

…

//算是語意標記，也不常用，會有不同字體

……

//也是引用，會有不同字體

… //是把整行倒過來，dir是讓…在尾句以(…)顯示

---

7.comments 註解 //註解不會顯示猶如// /**/ 幫我們了解成是在幹嘛

---

8.colors

顏色表示不只可以用#ff6347，也可以用rgb(255,99,71,1)/Red,Green,Blue/和 hsl(9,100%,64%,1)/美術常用(原型，彩度，亮度，透明度)/表示

也可以設邊邊的顏色

?px是外框的厚度，soloid代表外邊是實線，dotted代表外邊是點狀的虛線 dashed代表外邊是點狀(較長)的虛線

---

9.CSS 版面設計 <style> //在裡面 body {background-color: powerblue;}; //對於所有body標記的背景都變powerblue h1 {color: blue;} //對於所有h1標記的文字顏色都變blue p {color: red;} //對於所有p標記的文字顏色都變red </style> //一次到用到全部的效果 //在裡面 先設定在外面的一個檔(styles.css)，再用link rel去引用 CSS整體套用就類似上面 EX:

---

---

10.link

link 可以設 target，¬_blank是開新視窗，self在原本地方開，parent開副視窗，top最頂層的視窗。現在¬_blank最常用

絕對路徑

相對路徑

相對路徑是寫在同一層的，如果要不同就要加/…/如上圖最下面那個一樣 現在他們都在/html/層
如果無法穩定知道根目錄的話可以用下面的這個../回到上一層

---

11.image

//放圖檔，alt是圖片不存在時會顯示的字 //建議用style顯示width和height，如下圖

圖片和超連結做結合

上面是image map，用shap限定形狀再用coord指定位置，來使特定部分才可以超連結(上圖是電腦)，不過這通常需要特殊軟體輔助

---

12.table(表格)

預設的表格(沒有用style)

代表table role是一列(橫的) 代表table head是標頭 是指表格的欄位內容 // 每個th,td都代表一欄

加上style以後

border-collape是使每一欄中間不會有分隔 tr:nth-child(even) : 使偶數列的做裡面的事

其他的就在4.style和 8.colors 之間找

---

13.list

代表unorder list(點點)
代表order list(1.2.3….)
1. 代表list item

   ---

   14.block & inline
   是一個區塊性元素(會換行)

   不會換行in the line

   & 常用在排版

   ---

   15.form

   其實可加可不加 可以使user在裡面打字 type=”submit”有送出其實沒什麼用，因為沒伺服器 value是傳給伺服器的，先不用學

   type=”radio” 就會出現這種選項 name有一個出現3次，所以有3個選項

   type=”checkbox”出現前面可以打勾的類型 name有三個出現3次，所以有3個選項而且可以複選

   會出現者種選項，要改裡面的名子不是改value的，是改它後面的那個

   是裡面的項目， 如果在option加selected : …，...會成為預選項目 如果在select加size : ，代表選項只會同時出現3個項目 如果在select尾句加mutiple代表可以多選 <textarea>代表一個較大的填入區塊 // rows=幾列(橫)，cols=幾行(直) onclick是代表按了button之後會發生的事 上圖是input的type類型，下列介紹上面的幾個 是代表，可以向select一樣選，也可以像input一樣輸入 如果要不同的類型，可以在input後面的type作變更 type="number"，可在最後的min=..，max=..做輸入大小限制 type="range"，一樣min=..，max=..做輸入大小限制 type="search"，純粹搜尋

   ---

   ---

   ---

   VS_terminal指令 cd .. : 回到上一層 // ../是回到上一層，打資料夾名是去到下一層 cd name : 到name的資料夾 ls : 顯示根目錄(當前資料夾)裡的物件 cat fileName : 可以將fileName的內容顯示

   ---

   ---

   Please download [網頁設計第二周.docx](https://github.com/stereomp3/wp109b/tree/main/week2) to see the content of homework, thanks.