# html 1/14 概念
###### tags: `html`
紀宜昕
chiyihsin@gmail.com
# 1-1 html
Berners-Lee 1991發明
html=超文字標記(標籤)
w3c組織 國際標準
2014/10/28 改為html5
html5技術=html+css+js apls
http://html5test.com/
看不同瀏覽器的支援html
https://caniuse.com/
CSS3 Border-radius 邊框圓角
CR標準階段
WD-> CR-> PR-> REC
工作草案->候選推薦->提議推薦->推薦
(有可能會退回前面)
https://www.w3.org/ (官網)
https://www.w3schools.com/ (學習平台)
# 1-2 安裝與熟悉 VS Code
電腦內建(瀏覽器&記事本)
Visual Studio Code(Vs Code)支援Emmet(類似css Selectors的語法)
https://docs.emmet.io/cheat-sheet/
``ul>li*5(不能分開)元素>元素*數目``
安裝VS Code https://code.visualstudio.com/
# 16 兩種瀏覽方式
# 17 中文化
必須重啟
# 18 修改VS Code喜好設定
修改大小或內容
新增瀏覽器&port:8080(可改)
# 1-3 html標籤語法--標籤與元素
html標籤必須有[<],[>]以及標籤名稱
標籤有:開始標籤，結束標籤需加/```<h1>,</h1>```
單一標籤```<br>```
單一標籤結束寫法```<br/>```
# 21 屬性(attribute)與屬性值(attribute value)
元素的屬性只能加在標籤中(帶屬性的語法可多個 多屬性+空白)
```<h2 title="fruit" style="color:red;">a</h2>```
fruit自己定義
title=說明文字方塊(內容)
style=css語法
# 2-1 html文件架構與常用元素
```<!DOCTYPE html>``` DOCTYPE宣告(告知瀏覽器html標籤版本)
```<head></head>```head網頁檔頭
```<body></body>```body網頁內容
# 26 html根元素
`<html>`元素支援lang屬性
`<html lang="zh-Hant-TW">`
(zh=語言 Hant=字體 TW=地區)不能變動
舊寫法zh-TW相容性高一些
```
<html>
<head>
<title> </title>
</head>
</html>
```
html=父元素 head=子元素 title=元素
head元素裡只能有一個title元素
寫在head的內容通通不會顯示在網頁上
meta元素:描述html文件的相關內容，資訊有name,content屬性決定
# 28 meta元素常用的屬性
name屬性有 author description generator keywords
content屬性(中介資料項目)
keywords(關鍵字)
description(透過關鍵字收尋的相關描述)
網頁右鍵檢視(原始碼)
http-equiv="Refresh"(刷新)content="300"秒
這個網站3秒後跳轉yahoo網站:
` <meta http-equiv="Refresh" content="3; url=http://tw.yahoo.com">`
這行越前面越好 怕產生亂碼:
`<meta charset="UTF-8">`
# body元素
文字與段落元素
清單元素
超連結元素
圖片元素
其他..(表格)(表單)..
# 2-2 認識html與css
網頁上都是用html標籤所製作
每一個html標籤都有預設樣式
css:用來修改html標籤
# 2-3 html基本元素-文字與段落元素(一)
粗體字有預設大小`<h1>`最大`<h6>`最小
如圖:
超過6以後 都是瀏覽器預設(無效標籤)
每個標籤都有預設空白
元素列 block(區塊):`<h1>...<h6>`
# 2-3 文字與段落元素(二)
有預設空白 p元素=block(區塊)
內容元素:內含文字及其它元素--div，span，p
強迫換行及分隔:--br，hr
div也是block元素
`<p><div>`
inline:``<span>``
元素裡面放其他元素 要看容器
如果是block通通能裝
inline只能裝inline
``<br><br>``(強迫換行)也能產生小空白
不要拿來做樣式調整
特殊距離調整用css做
參考:https://hackmd.io/TGB0hghKTdS3HdUl3ivrow
# 3-1 清單元素
``<ul></ul>``:清單
``<li></li>``:文字寫清單在裡面
``<ol></ol>``:有序號清單
ol:的type可用"1,a,A,i,I"
整個清單:dl
清單項目:dt
清單項目說明:dd
dd裡面用ul->li
# 3-2 超連結(Hyperlink)元素
``<a href="list.html">作業1</a>``
找相對路徑:
連接電子郵件位址:
``<a href="mailto:">信箱</a>``
連接同一個網頁特定位址(書籤)
使用id屬性建立書籤
id的屬性值自行定義
再做超連結:``<a href="first.html#book">#book</a>``
``<h1 id="book">book</h1>``
# 3-3 圖片(image)元素
src=第一個屬性
alt=第二文字
title=滑鼠移到圖片上的說明文字
width,width=圖高寬，單位px(像素)
圖片超連結=inline元素
``<img src="dd.jpg">`` 載入圖片
``<img src="../dd.jpg">``返回上一個
``<img src="xx/dd.jpg">``檔案下的圖片
``<img src="/xx/dd.jpg">``+/會根據使用者開啟的位址從根目錄找檔案(不建議用)
# 40 figure/figcaption
figure本身是一個block(開始的位置不同)
figcaption屬於figure的元素(一個figure只需要放置一個figcaption即可)
# 4-1 css的基本語法
Selector{屬性:屬性值;屬性:屬性值}
css註解:/* */
style裡面再寫css
# 43 CSS Selectors(選取器)
標籤(type)
類別(class)
物件(id)
# 4-2 CSS的基礎設定
瀏覽器預設文字大小
1em=16px
em,px,%
# 45 CSS顏色設定
Color name =black
hex rgb(16進位) = #000000
rgb(Decimal)=rgb(0,0,0)
https://www.ifreesite.com/color/
# 46 文字樣式屬性
文字修飾:text-decoration:none|underline|overline|line-through
英文大小寫: text-transform:none|capitalize(字首大)|uppercase(小->大)|lowercase(大->小)
文字色彩:color
# 47 字形樣式(1)
字形粗細:font-weight:100(細)~900(粗)|normal(400)|bold(700)|bolder|lighter
# 48 字形樣式(2)
em px large
# 49 將css套用html寫法
直接加入樣式(inline)
自訂樣式表(embedding)
外掛樣式表(linking)
# 4-3 直接加入樣式(Inline)
CSS語法=屬性:屬性值
color =字體顏色 decoration字形
# 5-1-2 自訂樣式表(embedding) 標籤(Type)選擇器
宣告head之間(embedding)
相同樣式 +上,
# 5-3 類別(class)選擇器(一)
css設定樣式 .類別名{樣式一;樣式二;} .st1{xx;xx;}
html套用 ``<h1 class="st1">xxx</h1>``
# 55 類別(class)選擇器(二)
只讓特定標籤使用
tag.類別名{樣式1;樣式2;}
h2.st1{xxx}
# 6-1 ID物件選擇器
id物件只能套用一次 id名稱前加#id{樣式1;樣式2;}
javascript動態只能一次
# 6-2 外掛樣式表(Linking)
事先定義好標籤樣式，並存副檔名.css
link href
# 6-3 CSS執行順序
要覆蓋的寫下面
Sign in with Wallet
Connect another wallet