week2.md
download docx note 網頁設計第二周.docx
1.element ,2.attribute ,3.paragraphs,4.style,5.formatting,6.quotation, 7.comments ,8.colors, 9.CSS 版面設計,10.link, 11.image,12.table, 13.list, 14.block & inline, 15.form (這是書籤) # HTML ## 1.element : ``` 第一層第二層
…
是段落 //會換行，在裡面換行和空白也不會換 要在裡面空白要用 一個空白一次 ```<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:’….”…”….’
<hr/> //畫水平線，加/表示直接結束，可加可不加
<br/>是換行
<pre>…</pre> //performat預格式化(不要格式化)怎麼輸入怎麼出來
Style 可以用在任何有文字的地方 :<h1>,<p>…
<p style=”color:red;”>This is a red paragraph.</p>// style=”color:red”->是CSS的寫法把字變顏色/*color:red = color:#ff0000”採16進位(ff=255)越大顏色比例越多(光)*/
<body style=”background-color:powderblue;”> //設置背景顏色，也可以用#RGB
<h1 style=”font-size:60px;”>……..</h1> //可以使字形變得更大或更小，px=pixel
<h1 style=”font-size:300%;”>……..</h1> //也可以用倍率調整大小
<h1 style=”font-family:verdana;”>…</h1> || <p style=”font-family:courier;”>…</p> //改變字形verdana,courier是其中一小部分
<h1 style=”tect-align:center;”> //字體向哪裡對齊，向中=center，向左=left (預設)，向右=right
可以用在任何有文字的地方 :<h1>,<p>…
EX : <p><em>………</em></p>
<b> : 粗體
<strong> : 強調(的字體)
<i> : 斜體
<em> : 強調(的字體)
<mark> : 標記(的字體) ，如下
<del> : 加刪除線
<small> : 變小
<ins> : 插入字體
<sub> : 下標
<sup> : 上標
<blockqote cite=”http://www.........”>
Content
</ blockqote > //會縮排來表示這個引用
<p>…<q>…</q></p> //<q>是行內的引用，效果是… :”…”，多了冒號和雙引號
<p>…<abbr title=”World Health Organization”>WHO</abbr>…</p> //<abbr> 是縮寫，但不常用，主要是讓顯示的WHO下面有底線表示
<address>…</address> //算是語意標記，也不常用，會有不同字體
<p><cite>…</cite>…</p> //<cite>也是引用，會有不同字體
<bdo dir=”…”>…</bdo> //<bdo>是把整行倒過來，dir是讓…在尾句以(…)顯示
<!-- ……… --> //註解不會顯示猶如// /**/ 幫我們了解成是在幹嘛
顏色表示不只可以用#ff6347，也可以用rgb(255,99,71,1)/*Red,Green,Blue*/和
hsl(9,100%,64%,1)/*美術常用(原型，彩度，亮度，透明度)*/表示
也可以設邊邊的顏色
?px是外框的厚度，soloid代表外邊是實線，dotted代表外邊是點狀的虛線
dashed代表外邊是點狀(較長)的虛線
<style> //在<head>裡面
body {background-color: powerblue;}; //對於所有body標記的背景都變powerblue
h1 {color: blue;} //對於所有h1標記的文字顏色都變blue
p {color: red;} //對於所有p標記的文字顏色都變red
</style> //一次到用到全部的效果
<link rel=”stylesheet” href=”styles.css”> //在<head>裡面
先設定在外面的一個檔(styles.css)，再用link rel去引用
CSS整體套用就類似上面 EX:
link 可以設 target，¬_blank是開新視窗，self在原本地方開，parent開副視窗，top最頂層的視窗。現在¬_blank最常用
絕對路徑
相對路徑
相對路徑是寫在同一層的，如果要不同就要加/…/如上圖最下面那個一樣
現在他們都在/html/層
如果無法穩定知道根目錄的話可以用下面的這個../回到上一層
<img src=”img_....jpg” alt=”………..” width=”…” height=”…”> //放圖檔，alt是圖片不存在時會顯示的字
//建議用style顯示width和height，如下圖
圖片和超連結做結合
上面是image map，用shap限定形狀再用coord指定位置，來使特定部分才可以超連結(上圖是電腦)，不過這通常需要特殊軟體輔助
預設的表格(沒有用style)
<tr>代表table role是一列(橫的)
<th>代表table head是標頭
<td>是指表格的欄位內容 // 每個th,td都代表一欄
加上style以後
border-collape是使每一欄中間不會有分隔
tr:nth-child(even) : 使偶數列的做裡面的事
其他的就在4.style和 8.colors 之間找
<ul>代表unorder list(點點)
<ol>代表order list(1.2.3….)
<li>代表list item
<div>是一個區塊性元素(會換行)
<span>不會換行in the line
<div> & <span>常用在排版
<label>其實可加可不加
<input>可以使user在裡面打字
type=”submit”有送出其實沒什麼用，因為沒伺服器
value是傳給伺服器的，先不用學
type=”radio” 就會出現這種選項
name有一個出現3次，所以有3個選項
type=”checkbox”出現前面可以打勾的類型
name有三個出現3次，所以有3個選項而且可以複選
<select>會出現者種選項，要改裡面的名子不是改value的，是改它後面的那個
<option>是<select>裡面的項目，
如果在option加selected : <option..... selected >…<option>，...會成為預選項目
如果在select加size : <select …….size=”3”>，代表選項只會同時出現3個項目
如果在select尾句加mutiple代表可以多選
<textarea>代表一個較大的填入區塊 // rows=幾列(橫)，cols=幾行(直)
onclick是代表按了button之後會發生的事
上圖是input的type類型，下列介紹上面的幾個
<datalist>是代表，可以向select一樣選，也可以像input一樣輸入
如果要不同的類型，可以在input後面的type作變更
type="number"，可在最後的min=..，max=..做輸入大小限制
type="range"，一樣min=..，max=..做輸入大小限制
type="search"，純粹搜尋
cd .. : 回到上一層 // ../是回到上一層，打資料夾名是去到下一層
cd name : 到name的資料夾
ls : 顯示根目錄(當前資料夾)裡的物件
cat fileName : 可以將fileName的內容顯示