雖然SEO不是簡簡單單一篇就可以說完,但能在開始製作時就注意一些小細節,增加被搜尋的機會,有何不可呢?
閱讀全文
分類彙整: html
HTML的二三事(4)-支援不支援?
現在已經是Html5的時代,因應新規格的來臨,我們要放開胸懷迎接Html5的新標籤….才怪,我還是一直使用div切版,因為舊IE看不懂新標籤(倒)
閱讀全文
HTML的二三事(3)-三思而後行
所謂的三思而後行是指在寫之前要考慮一些小事,像是瀏覽器的支援度或是避免Html的錯誤。
先前文章提過要先確認支援瀏覽器的版本是有理由的,因為先不說CSS3,CSS2的某些功能IE就不支援。當然,要事先考慮還是事後補救決定於開發者,但先查好字典,確定瀏覽器支援的功能,也可避免向下相容的問題,修正一些大方向仍然可以減少後段抓蟲的時間。而好字典之一就是網路上多人大推的Can I use…!其它族繁不及備載,有興趣可以Google看看。
接著就是避免Html錯誤。
像是li是放在ul或是ol底下宣告清單項目的元素,不是直接放在div底下的:
1 2 3 4 5 6 |
; html-script: false ] <ul> <li>我是正確清單</li> <li>我是正確清單</li> <li>我是正確清單</li> </ul> |
1 2 3 4 5 6 |
; html-script: false ] <div> <li>我是錯誤清單</li> <li>我是錯誤清單</li> <li>我是錯誤清單</li> </div> |
一頁裡不能有兩個Id,但是Class可以有很多個:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
; html-script: false ] <div id="id-means-only-one"> ID </div> <div class="i-am-class"> 我們是多胞胎 </div> <div class="i-am-class"> 我們是多胞胎 </div> <div class="i-am-class"> 我們是多胞胎 </div> |
別忘記結尾:
1 2 3 4 5 6 |
; html-script: false ] <div class="test"> 我不是壁虎,斷尾會出問題 </div <div class="test"> 我不是壁虎,斷尾會出問題 |
另外,W3C的驗證網頁(以及CSS的驗證服務)也是debug好幫手!把檔案丟上去就會知道問題囉,嘻嘻。
本文同步發表於
HTML的二三事(2)-大小排列有關係
今天分享的是檔案的分類和檔案的大小。
有秩序的分類跟縮小檔案容量雖然都是小事情,
可是隨著專案時間拉長,內容增加的時候就越顯重要。
閱讀全文
HTML的二三事(1)-Psd to HTML
時間邁入第七天,發現原來我也可以發文連續一個禮拜耶!
真是太感動了,希望可以這樣維持這個勢頭到活動結束。(笑)
不知道各位怎麼切版的呢?Ps跟AI都有切片工具,方式從製作電子報到整頁Html的形式都有,
看起來似乎是不難,但要切出靈活度高的網頁卻又是另外一回事兒。以下分享我的做法:
閱讀全文
button & input
很久以前似乎有為這問題困擾過,於是打算作個筆記記錄一下。
閱讀全文
css hide text
在設計按鈕/連結想隱藏文字的時候,一般來說只要用text-indent:-9999px;把字拋出去就可,
但在舊版瀏覽器上實際測試,按鈕上會出現一個很小很小的點點,看來似乎無法作用。
拜Google大神後找到以下幾種方式:
閱讀全文