Lu-yeom
commented
3 years ago 日期：110年5月18日(星期二)20:00~22:30
今日進度：[FE101] 前端基礎：HTML 與 CSS
課程筆記：
一、網頁其實是文字檔，其內容是瀏覽器可以讀懂的結構。
二、絕對會用到的標籤：html、head 與 body
- HTML→HyperText Markup Language超文本標記語言
- HTML基本組成：
<!DOCTYPE HTML>、<html>、<head>、<body> - 標籤都是成雙成對出現的，例如：
<head>(開)</head>(合) - HTML基本結構組成：
<!DOCTYPE HTML>
三、HTML最早最常見的用途為「顯示文章」，標籤如下：
* ```<h1>```→heading標題，有1~6的分別，代表字體的大小，數字越大字體越小
* ```<p>```→paragraph段落，可呈現文章(可利用Loren ipsum網頁上的文章來測試字型和字體的呈現)<!DOCTYPE HTML>
I am title
介紹
四、很常見的標籤：div 與 span
* ```<div>```→division，分組，在網頁上不會有視覺上的變化，但是可以把一個區塊包起來變成一組，對於要上色、造型都很方便 <!DOCTYPE HTML>
I am title
介紹
* ```<span>```也是分組，可以單獨針對一個字做變化
* 顯示圖片就靠它：img
* img的結構→```<img src=”圖片網址” />``` (src是source來源)
* 也可以幫圖片作註解→```<img title=”名稱” src=”圖片網址” />```
* 如果圖片無法顯示，也可以用文字替代→```<img alt=”I am image” title=”名稱” src=”圖片網址” />```
六、顯示清單：ul、ol 與 li
* ```<ul>```→unorderd list
* ```<ol>```→ordered list
* ```<li>```→list item<!DOCTYPE HTML>
I am title
介紹
- h1 //顯示的樣子會是・1
- h2 //顯示的樣子會是・2
- h3
- //顯示的樣子會是・3
如果改成:- h1 //顯示的樣子會是1.h1
- h2 //顯示的樣子會是2.h2
- h3
- //顯示的樣子會是3.h3
六、保留完整格式：pre
* ```<pre>```→preformatted text，例如程式碼會有換行、空格，用```<pre></pre>```框起來就可以原封不動地顯示出來
* ```<br>```→line break換行，在要換行的段落後方加上```<br>```(或```<br />```)
七、表格必備標籤：table、th、tr 與 td
* ```<table>```→表格
* ```<tr>```→table row橫向的列
* ```<td>```→table cell表格的值
* ```<th>```→table header可將表格標題加強顯示 I am title
| 姓名 | //改成會變成粗體的標題，可更清楚表示 | 國文分數 | 英文分數 |
|---|---|---|---|
| 小明 | 70 | 90 |
八、```<a>```→anchor錨點，可連結到網頁內或外的位置
* href→hypertext reference I am title
take me to google* 如果要設定是當前視窗跳至其他網頁：
```<a href="網址" target=’_self’>take me to google</a>```
* 如果要設定是開其他分頁：
```<a href="網址" target=’_blank’>take me to google</a>```
* 也可以在頁面間跳轉： I am title
九、語意化的 UI 標籤：main、nav、footer 等等
* ```<main>```
* ```<nav>```navigator導覽列
* ```<footer>```
十、直接用別人的網頁：iframe
日期：110年5月17日(星期一) 今日進度：無
課程筆記：無
今日心得：下班回來要看課程時很衰的遇到停電...沒辦法好好跟課...明天要多趕一點進度了。