你所不知道的html5與html中的那些事(一)


文章簡介:

      關於html5相信大家早已經耳熟能詳,但是他真正的意義在具體的開發中會有什麼作用呢?相對於html,他又有怎樣的新的定義與新理念在裏面呢?爲什麼一些專家認爲html5完全完成後,所有的工作都可以達到真正的雲方式呢?這一系列的問題你是否已經想明白了呢?

      本系列文章將爲您一一解答你所不知道的關於html5與html中的那些事;具體會包括如:html5新的理念與想法,html5的新標籤的用意與具體開發中場景應用,html5與css3的感情經歷(用法搭配),包括html5的父親html的一些小隱私(您在開發中可能不知道的事);

回到今天的正題

今天這篇文章主要講到的您可能不知道的事有:

1)html頁面基本結構中您所沒有注意到的內容有那些?

2)html5中最看重的理念“語義化”相比html有什麼區別?

3)網頁文件的命名您想到過會影響您網站的體驗麼?

第一個問題:

     html頁面基本結構中您所沒有注意到的內容有那些?

     下面我們看一個標準的html頁面代碼


spacer.gif

這個是個最基本的html頁面了,你也許一看感覺熟悉的不能在熟悉了,還有什麼是我不知道的呢?

如果下面我說的幾點您都知道那就證明您真的用心研究過html與瀏覽器了;

第一點:

     <!DOCTYPE html>這個標籤的用法,也許您發現一個html頁面您不寫這個標籤也是正確的,爲什麼還要加上他呢?用途是什麼呢?其實它的用途是

      1、告訴瀏覽器這個文件是html文件;

      2、告訴瀏覽器html的版本,

    這個標籤的寫法標準的就是我上面寫的,當然您可以小寫瀏覽器不會出錯,但是標準就是大寫可以說整個html

標籤就這個doctype標籤標準是大寫其餘的標準都是小寫;當然您也可以不按標準來畢竟html規則相對寬鬆;

小編認爲越是寬鬆的規則開發人員就應該越按照標準來;

ps:html5中一定要有這個標籤哦,具體的原因在後續的文章中會詳解關於改進後的HTML5DOCTYPE;

第二點:

    <html lang="ch"> 這個標籤中的lang屬性,在一些頁面中並沒有這個屬性,那麼它又是幹什麼的呢?

其實它就是告訴瀏覽器我這個頁面是什麼語言的,注意是語言不是編碼格式哦,您是否見過下面的場景:

瀏覽器提示“檢測到當前頁面爲英文是否翻譯爲中文  ”這個就是因爲這個屬性造成的,目前不是所以的

瀏覽器都有這個功能的;

第三點:

<head>標籤中其實都是用戶不可見的東西,他所包含的東西都是給瀏覽器或是搜索引擎用的,但是除了<title>標籤,他是用戶在head中唯一可以看到的標籤,說到title就先說他吧,給我們感覺好像就是一個頁面名字一樣可以顯示在瀏覽器的tag欄中;其實它對於瀏覽器來或是搜索引擎來說功能還是非常大的;

       1,對瀏覽器來說title是書籤或是收藏夾默認的名稱(一般來說 ,也有例外)

       2,對搜索引擎來說,他是搜索頁面的最優先關鍵字哦;

下面是meta標籤的charset屬性.這個大家應該都知道是告訴瀏覽器我們的文件的編碼字符集,但是需要我們注意的是這個字符集與你所用的開發工具字符集是不是對應的?如果不對應可能會出現亂碼的這個問題小編就遇到過,費

了好大的勁才找到這個問題

       haed中其它的一些標籤我們在之後的文章中會一個一個的說明今天就說這兩個吧;

第二個問題:

        html5中最看重的理念“語義化”相比html有什麼區別?

      語義化這個概念應該說是伴着html5應運而生,什麼是html5 中的所的語義化?簡單來說就是"描述內容的含義(meaning)"

比如說<p>標籤就是段落的意思,在html5中所有的標籤都有它看書的語義的。而沒有語義的標籤在html中有,在html5中就沒有了;比如<font>標籤;而html5又爲了補充html現在的不足加上一些新的標籤如article,footer,header等等;

      而些標籤的分類叫法也從“塊級元素”與“行內元素”變成了“外圍內容”與“短語內容”

      在html5中最基本的理念就是語義與顯示分離,html代碼中出現的標籤都讓開發人員或瀏覽器一看就知道是幹什麼用的東西,至於顯示效果那是ccs3(Cascading Style Sheet)需要乾的事情,所以在html5中這個兩個好基友終於距離產生了美;

      那麼語義化以後對html文檔有什麼好處麼?

      1.可以提升可訪問性與互操作性(兼容性會更好)

      2.改進搜索引擎的優化

      3.一般來說可以讓 html文件更小;

      4.讓代碼更好唯護,與css3的關係更和諧;

第三個問題:

網頁文件的命名你想到過會影響你網站的體驗麼?

這個一聽第一感覺就是不靠譜,一個文件的名字還會影響到網站的體驗?

正確的答案確實是:是的

如 :文件名:Html_First_Blog.htm 與html-first-blog.html

這個兩個文件名不管是在用戶的體驗上與搜索引擎上都第二個完勝第一個。是不是有人會問爲什麼 ??

下面我就說一下有如下幾點是需要我們注意的:

 1,文件名需要用小寫字母:

       場景就是最簡單的輸入地址吧,你認爲寫

                           http://192.168.0.1/TestHtml/The_First/Html5.html

      方便還是寫    http://192.168.0.1/testhtml/the-first/html5.html方便呢?

      這個自己體會吧

2,用短橫線分隔單詞;

     大家一定會認爲,用"_"挺好,其實這是做c開發時候的寫法,也可以說是習慣,但是在網站中“-”是搜索引擎更喜歡的style;

3,使用標準的擴展名:

     現在用好多的網站都是用.htm的擴展名,這個瀏覽器也不會報錯,但是標準的擴展名就是.html的所以大家以後寫的時候就不要省時間少寫一個字母“l”了;

記住以上幾點才正確的寫網頁文件的命名方法哦,不要把寫其它語言的方法放進來。

今天講了一些平時我要經常見到,但是不會去注意的地方(只是冰山一角),不知道對讀到這篇文章的您有什麼幫助沒有?

其實這些細節平時如果不關注也許也不會出什麼大的錯誤,但是一個好的開發人員需要有一個好的習慣,一款好的軟件需要用良好的細節體驗,一個好的網站同樣也需要更好規範與細節(您說呢?)

下次文章我們會講一些關於網站製作的小巧門與html的<h>標籤的用法;也許還會有一些你所不知道的好玩的小問題,幫您解答;

感謝您的閱讀,期待下次與您見面;


轉載請註明出處:謝謝合作!

如果有什麼不同的想法與建議,或是想第一時間獲得博客更新提醒,以及更多技術信息分享,歡迎關注個人微信公衆平臺:程序員互動聯盟(coder_online),掃一掃下方二維碼或搜索微信號coder_online即可關注,我們可以在線交流。


 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章