5. HTML BASIC
HTML (Hypertext Markup Language),中⽂為「超⽂字標⽰語⾔」
可以簡單的把 HTML 想像成是種排版⼯具:
它其實就是⽤來組織架構並呈現網⾴內容的程式語⾔。
網⾴內容的組成,可能包含了段落、清單、圖⽚或表格...等。
6. HTML 元素的組成
➤ HTML 包含了元素(element)
➤ 元素又包含了標籤(tag)及內容(content)
I Love Shiba Inu <p>I Love Shiba Inu</p>
<p>I Love Shiba Inu</p>
Closing
Tag
Opening
Tag Content
Element
在 HTML 下顯⽰為
所有的開始皆為 ⼩於元素⼤於 <元素>
所有的結束皆為 ⼩於左斜線元素⼤於 </元素>
在開始和結束中間放內容不需空格。
7. 元素可以有屬性
➤ 屬性不會呈現在網⾴上,只是幫助編輯
➤ 屬性包含了屬性名稱、等於符號與值
➤ 可以利⽤屬性設定元素的⾊彩、對齊⽅式、圖表的格線等。
(Attribute)
<p class=“editor-note”>I Love Shiba Inu</p>
範例:屬性 class 幫助編輯元素 p
屬性只包在起始標籤內
屬性名稱後直接接著等於=
元素後屬性之間空⼀格
若有兩個屬性,中間需空格
屬性
名稱
值
8. 巢狀元素
➤ 元素裡⾯再放⼀個元素,像個巢⼀樣,故稱之。
原為 <p>I Love Shiba Inu</p>
範例:想要在這句話 I Love Shiba Inu 中強調 Shiba Inu,
希望將其⽤粗體顯⽰。
已知:粗體的元素寫法為 <strong>
更為 <p>I Love <strong>Shiba Inu</strong> </p>
粗體
開始
粗體
結束
強調
內容
I Love Shiba Inu
I Love Shiba Inu
Before
After
(nesting element)
11. 標記⽂字
➤ ⽂件標題(heading)
⼀份HTML⽂件最多有六個標題。
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My sub heading</h3>
<h4>My sub-subheading</h4>
。。。以此類推。。。
➤ 段落(paragraph)
在呈現⼀般⽂字段落最常使⽤的。
<p>This is a single paragraph</p>