黃芝晴 / Hedi Huang

HTML


html有tag(標籤)跟attribute(屬性)
attribute要放在tag裡
因為他要用來描述這個標籤
標籤有了屬性才有了意義

:hover
transform
scale: how big
rotate 旋轉 deg
<!doctype html>放在<html>之前
head→ information you won't see on browser
<body>→ header/main/footer
<div>
header
main 與其他頁區別的內容
artical 文章本身 self-contained pieces of content
header ex.title, author
section段落 第一行要有heading來簡介
aside 與文章相關的內容(kind of section)
<q></q> "quotation"
footer ex. published: June 17, 2021
div 無屬性 ex.intro
aside
footer
</div>
</body>
attribute屬性:
src source
alt
class

self closing tag / empty element: <img >
<link >
<p>段落
<a href>超連結</a> 放在段落裡 anchor錨點
targer=_blank 開新視窗 放在網址之後
Untitled 2.png
ul unorderd list
ol ordered list

dl description list
<p>Cryptids of Cornwall:</p>

<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>

<dt>Morgawr</dt>
<dd>A sea serpent.</dd>

<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
nested list
<ul>
<li>front-end</li>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<li>back-end</li>
</ul>
Untitled 3.png
Untitled 4.png
HTML 5c145ce34a28494291b0f02b447b8981.png
分頁超連結 <a href="分頁名字"
Untitled 5.png
<blockquote>
<blockquote>i'm aside information. - <cite><a href="https://cookiesbears.com" target=_blank>cookiesbears</a></cite></blockquote>
Untitled 6.png
file path
root directory 根部目錄
folder → child directory/subdirectory
<a href="folderName/fileName"></a>
<a href="../index.html"></a>
parent folder → subfolder


../ →go up one level
要上兩層就輸入兩次../../
image
jpg. gif. png. svg.
<figure>
<img src="img/featured.jpg" alt="vr glasses" title="This is a VR glasses!">
<figcaption>He is using the VR headset.</figcaption>
</figure>
alt not showing
title showing when put on
Untitled 7.png
break
<address>contact information</address>
(line)<br></br>
<address>
email: 410583038@gms.ndhu.edu.tw<br>
phone: 886-740-560-540<br>
address: 1F., No.17, Aly. 1, Ln. 59,<br>
Sec. 3, NuZhong Rd., Yilan City,<br>
Yilan Country 26059, Taiwan (R.O.C.)
</address>
Untitled 8.png

<hr>
Untitled 9.png
Text Level Element
<strong></strong>
Untitled 10.png
<em></em>
Untitled 11.png
<small></small>
Untitled 12.png
<span></span> inline some words, use CSS to change their appearance.

link
link to some page
Untitled 13.png
link to different page
Untitled 14.png
root-relative paths
Root-relative paths are commonly used when building and testing sites directly on the web or on a local web server.
<a href="/">go to the root page</a>
<a href="/#1st">go to where id#1st is in the root page</a>
mail
Untitled 15.png
Entity & Reserved Characters
ex.
&nbsp 一個空格

<pre></pre>
presented exactly as written in the HTML file

Comment
<!-- --> 快捷鍵ctrl+/
也可以把要註解的文字一次選取 ctrl+/ 就可以全部註解了

utf-8
<meta charset="utf-8">
<!-- 可以顯示中文字 -->

補充
lang 屬性
Untitled 16.png
Untitled 17.png
Untitled 18.png
dir屬性
The dir attribute is used to set the base direction of text for display. dir屬性用於設置要顯示的文本的基本方向。

dir 預設為 ltr ( left-to-right )

那什麼時候會用到呢?
答案是網頁全部或部分用的是特殊語系,例如:阿拉伯文。

google翻譯
Untitled 19.png

※如果你針對一段中文字設定dir="rtl" ,效果會如同 text-align: right 一樣是文字靠右,但是書寫方向仍舊是由左到右。


常用的 meta 標籤
<meta charset="utf-8"> — 這個元素指定了你的文件使用utf-8這種字元編碼, 建議大家都要使用這個元素,它會幫助你免去許多文字無法正確呈現的煩惱。

viewport
Untitled 20.png

hardware pixel = DIPs(device independent pixels) * DPR(device pixels ratio)^2
截圖_2022-06-28_下午10.57.55.png

vscode 自動生成html模板
!+tab
如果無法使用
參考

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.