1.初學或是想要接觸網頁設計的朋友閱讀
2.想要自學不想上補習班的朋友閱讀
2.想要自學不想上補習班的朋友閱讀
本篇文章目的在於協助初學的朋友快速了解一些基本的概念
讓初學的朋友在網路上GOOGLE或是看別人的Code時
能夠更快速了解別人到底在說什麼
再「HTML基本概念」一文中有提到
成對標籤呢就像是<body></body>由一個起始標籤及一個結束標籤組成
而獨立標籤則像是<img>只有一個標籤代表起始於結束
而獨立標籤則像是<img>只有一個標籤代表起始於結束
這邊我們就來針對HTML Tag的結構作一些比較清楚的說明
成對標籤
這邊我們就用Body來介紹成對標籤
<body> Hello World </body>
上面body例子中我們可以看到一個完整的成對標籤結構
是由一個起始標籤與結束標籤組成
並將要顯示/執行的內容放在起始標籤與結束標籤的中間
來形成一個完整的標籤格是
起始標籤是由一個「<」符號跟「>」符號將HTML的Tag夾住形成
結束標籤則跟起始標籤基本上結構一樣只是要在「<」符號之後再加上一個「/」符號
形成「</」符號在跟「>」符號將HTML Tag夾住形成
放在body Tag中的內容都會顯示在瀏覽器的畫面上
所以我們可以看到瀏覽器畫面上顯示出的效果如下圖所示
可以看到「Hello World」顯示在瀏覽器的畫面上了
這邊要提醒大家的地方是成對標籤如果只用起始標籤沒有用結束標籤其實也是可以顯示出來的
那為什麼要還多花力氣去打結束標籤呢?
因為如果只有起始標籤沒有結束標籤那麼瀏覽器的引擎在解析時
就會認為該區塊上未結束 那麼這樣會有什麼影響呢?
其實純粹以HTML來看沒啥影響 但是當你搭配CSS或是JQuery的時候
就可能會出現很多莫名其妙的問題還有SEO時可能也會造成一些問題
所以大家還是多花一點時間乖乖按照規範打比較好
(如果是用XML格式沒有寫結束標籤可是會整個掛掉的喔)
獨立標籤
這邊用<hr />來介紹HTML中的獨立標籤
大家好<hr />Hello World
呈現出來的效果如下圖
獨立標籤是由「<」符號加上與「/」符號及「>」符號組成
將HTML Tag夾在「<」與「/>」之間來表示為獨立標籤
我們可以看到在「大家好」與「Hello World」中間有多了一條灰灰的水平線
HTML中獨立標籤是比較少的，一般獨立標籤都不會有什麼實質內容
都是HTML編輯成元件的API(這樣稱呼我也不確定對不對)，用於引入某些效果，以增加網頁的豐富性
不過CSS現世後這些Tag就越來越少人用了，有一些在HTML5中已經慢慢刪除
希望今天的介紹能幫助大家了解HTML
沒有留言:
張貼留言