Skip to content
黃芝晴的軟體工程師之路
黃芝晴 / Hedi Huang
想邀請你成為我踏上軟體工程師之路的貴人
解決問題的好習慣
關於我
More
Share
Explore
黃芝晴 / Hedi Huang

icon picker
HTML

⁠
https://placeimg.com/
⁠
⁠
⁠
HTML elements reference
⁠
⁠
⁠
atom snippets
⁠
⁠

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

⁠
mailto-links CSS tricks
⁠
⁠
⁠
Untitled 15.png
⁠
⁠

Entity & Reserved Characters

⁠
https://dev.w3.org/html5/html-author/charref
⁠
⁠
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
如果無法使用
參考
⁠
https://pinkymini.pixnet.net/blog/post/40563850-【亂亂寫筆記】vscode---無法用tab鍵自動生成htm
⁠
⁠

file path
image
break
Text Level Element
link
mail
Entity & Reserved Characters
Comment
utf-8
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.