Day02 | html css
本文已搬家到筆者自己的部落格嘍,有興趣的可以點這個連結[1]~網頁架構在正式進入網頁教學之前先來簡單介紹一下構成網頁三大元素:HTML、CSS、JavaScript[2][3][4]由上圖可以發現HTML負責的就是把網頁的結構生出來,所以看起來都方方正正的不是那麼美觀,而CSS就是負責把外貌給顯示出來,讓網頁的外貌看起來美觀一些,最後JavaScript再負責去控制網頁裡面的內容以及使用者的操作行為。HTMLHTML就是管理網頁的架構,一個好的網頁其HTML可以說是相當單純且具有易讀性,這種網頁不但方便前端工程師進行後續的維護外,也比較容易讓你的網...
本文已搬家到筆者自己的部落格嘍,有興趣的可以點這個連結[1]~
網頁架構在正式進入網頁教學之前先來簡單介紹一下構成網頁三大元素:HTML、CSS、JavaScript[2][3][4]
由上圖可以發現 HTML 負責的就是把網頁的結構生出來,所以看起來都方方正正的不是那麼美觀,而 CSS 就是負責把外貌給顯示出來,讓網頁的外貌看起來美觀一些,最後 JavaScript 再負責去控制網頁裡面的內容以及使用者的操作行為。
HTMLHTML 就是管理網頁的架構,一個好的網頁其 HTML 可以說是相當單純且具有易讀性,這種網頁不但方便前端工程師進行後續的維護外,也比較容易讓你的網頁增加曝光率讓搜尋引擎能把你的網頁擺在最前面,此種行為稱為 SEO[5],而目前 HTML 已經發布到第五版同時也是目前最廣為使用的版本,因此大家常聽到的 HTML5 其實就是指第五版的 HTML 喔!
HTML 基本觀念HTML 內的 元素(element) 有兩個重要的基本觀念:巢狀結構以及 屬性(attribute)。
巢狀結構HTML 內的 element 排序屬於巢狀結構,巢狀結構簡單來說就是一層一層的概念,舉例來說
<div> <p>Hello World</p> </div>可以看到 <p> 這個 element 被 <div> 這個 element 包起來,代表 <div> 在 <p> 的上層,這邊會用兩個專有名詞來稱呼上下層之間的關係,上層稱為 父元素 下層稱為 子元素 ,更多詳細的 父元素 以及 子元素 的觀念將會在明天的文章加以敘述。
AttributeAttribute 簡單來說就是用來敘述 element 的相關性質,舉例來說
<div class="txt" id="uniqueTxt">Hello World</div> <!-- placeholder為提示文字 --> <i...