你所不知道的html5與html中的那些事（一）

時間 2019-11-12

標籤所不知道 html5 html 那些欄目 HTML5 简体版

原文原文鏈接

文章簡介：css

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

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

回到今天的正題css3

今天這篇文章主要講到的您可能不知道的事有：程序員

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

2)html5中最看重的理念「語義化」相比html有什麼區別？微信

3)網頁文件的命名您想到過會影響您網站的體驗麼？微信公衆平臺

第一個問題：工具

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

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

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

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

第一點：

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

一、告訴瀏覽器這個文件是html文件；

二、告訴瀏覽器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便可關注,咱們能夠在線交流。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。