JavaScript Required
We’re sorry, but Coda doesn’t work properly without JavaScript enabled.
Skip to content
黃芝晴的軟體工程師之路
黃芝晴 / Hedi Huang
想邀請你成為我踏上軟體工程師之路的貴人
解決問題的好習慣
關於我
More
Share
Explore
黃芝晴 / Hedi Huang
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 開新視窗 放在網址之後
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>
分頁超連結 <a href="分頁名字"
<blockquote>
<blockquote>i'm aside information. - <cite><a href="https://cookiesbears.com" target=_blank>cookiesbears</a></cite></blockquote>
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
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>
<hr>
Text Level Element
<strong></strong>
<em></em>
<small></small>
<span></span> inline some words, use CSS to change their appearance.
link
link to some page
link to different page
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
Entity & Reserved Characters
https://dev.w3.org/html5/html-author/charref
ex.
  一個空格
<pre></pre>
presented exactly as written in the HTML file
Comment
<!-- --> 快捷鍵ctrl+/
也可以把要註解的文字一次選取 ctrl+/ 就可以全部註解了
utf-8
<meta charset="utf-8">
<!-- 可以顯示中文字 -->
補充
lang 屬性
dir屬性
The dir attribute is used to set the base direction of text for display. dir屬性用於設置要顯示的文本的基本方向。
dir 預設為 ltr ( left-to-right )
那什麼時候會用到呢？
答案是網頁全部或部分用的是特殊語系，例如：阿拉伯文。
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 (
Ctrl
P
) instead.
HTML
