Head First深入淺出HTML、CSS與XHTML_學習筆記#1

#1_〖你和Web之間的唯一障礙就是學習使用其中的語言〗

【本文章為「Head First深入淺出HTML、CSS與XHTML」的學習心得。若有侵犯或不妥之處請告知。】
HTML是瀏覽器顯示網頁的關鍵,所以,首要學習的就是瀏覽器怎麼看HTML的內容以及顯示內容。
HTML是「超文字標記語言」(Hyper-Text Markup Language)的簡稱,寫出結構給瀏覽器看。
CSS是「串接樣式表」(Cascading Style Sheets)的簡稱,語法和HTML不同。是控制HTML的呈現方式。
所以,簡單來說:「HTML是房子的鋼骨架構,CSS是裝潢。」(應該可以這樣講吧)

標記
用雙尖括號起來的字母或單字,例如:<head>,<p>,<h1>等。他會告訴瀏覽器其結構和意義。標記是成對的,例如:<head>開始標記,</head>結束標記。
元素=開始標記+內容+結束標記。
例如:<h1>Staruzz Coffee Beverages</h1>
改善外觀
CSS(Cascading Style Sheet)串接樣式表
樣式元素
<style>。但需要一個名為type的屬性,來告訴瀏覽器其所使用樣式的種類。例如:<style type=“text/css”>樣式</style>。
屬性
用來為一個元素提供附加信息。
文本內容一定要有三大元素:<html>元素、<head>元素、<body>元素。
網頁的相關資訊放在<head>元素裡,寫在<body>元素裡的內容會顯示在瀏覽器上。(如果你寫對的話…)
練習:
Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

結果:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML
結果並沒有如期出現加上樣式之後該有的結果,在第壹章節裡,就開始找Bug了!很好!(握拳)
再透過與友人的討論之後,總算發現了問題點。(果然找局外人的眼睛比較雪亮~)我的雙引號是大寫的,導致這段<style type="text/css">是沒有作用的。(下方選取處)
Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

原因在於,我的MAC 有「使用智慧型引號和破折號」,會自動幫我修正為「大寫」的雙引號跟單引號。

修改單雙引號|Head First深入淺出HTML、CSS與XHTML
修改單雙引號|Head First深入淺出HTML、CSS與XHTML
修改單雙引號|Head First深入淺出HTML、CSS與XHTML
修改單雙引號|Head First深入淺出HTML、CSS與XHTML
修改為「小寫」的雙引號跟單引號之後,再次查看結果。
再次看結果:
Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML
叮咚,叮咚~很好!
第一步踏穩了,迎接下一步吧!
【本文章為「Head First深入淺出HTML、CSS與XHTML」的學習心得。若有侵犯或不妥之處請告知。】

You may also like

2 篇迴響

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *