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

文章簡介：

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

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

 

你們好，又與你們見面了， 今天我會爲你們講到的您可能不知道的事有：

1)html頁面<h>標籤的用法細節?

2)構建網站時候須要作的一些準備？

3)url組成與分類？

4)html5中header的正確用法是什麼 ？

 

第一個問題：

  html頁面<h>標籤的用法細節?

   在如今 的html規範中一共有h1-h6,六級標題它們都有本身的css樣式，並且它們都是爹與兒子的關係，就是說h1包含h2,h2是h1的細化；若是說你在用這個標籤的時候沒有上面我說的關係就證實你用的不標準；

   而<h>的另外一個含意就是是整個文章的骨架；打個比方說明一下 ，就好像你寫word文檔的時候，當你把認爲是標題的空字段用word給的樣式標記上，這樣word就會跟據你作的標記生成對應的目錄；那麼在html中的<h>的做用與word中的是同樣的，固然瀏覽器不會自動生成目錄；

不過搜索引擎但是先找的就是<h>中的內容作匹配哦，固然h1是它們中最受寵愛的；（可是不要認爲你都用h1寫文章就能夠很好的提高搜索排名哦）；

   給各位看一段代碼先：

 

上面的代碼就是一個簡單的用<h>標籤的用法，沒有什麼特別的只是想經過上面的例子給各位一些小建議：

1.建議在整個網站都用一致的標題層級這樣能夠提高用戶體驗；

2.如上面的h2同樣，lang屬性與html 中的lang屬性不同，也就是說能夠對每個標題分別給一種語言格式；

3.若是各位創建錨連接那麼就須要標題中添加id屬性；

4.還有最重要的一點就是在html5中的構建頁面的結構的四大元素都與<h>標籤有關（這裏先說一下這四個元素都是什麼，以後在後面的文章中我很是詳細的說明的它們分別是article,aside,nav和section）

第二個問題：

 構建網站時候須要作的一些準備？

可能一些工做人員，不多想這個問題，通常的時候都是領導給了一些效果圖以後就按照對應的文檔來弄了，這個過程當中可能有一些人會想一想這樣

合理不？也有不少人不想給什麼需求就作什麼需求，反正同樣拿錢，至於網站設計的問題那個網站設計師的事情，好無論你屬於那種，都應該看看下面的內容由於，他直的頗有用，不論是之後對你的客戶或着是本身的網站；

 1.肯定爲何要建立這站點，須要展現的內容是什麼？

 2.考慮站點的訪問者（就是用戶，咱們衣食父母），應該如何調整內容使之吸引這些訪問者；

3.這個網站須要多少個頁面 ，你須要一個怎麼樣的網站結構（這個結構能夠在定網站以前就在紙上畫畫，時間不用太長可是能夠很宏關的知道

這個網站的樹形圖），你但願訪問者怎樣來體驗你的網站，是按照你寫好的走，仍是用戶可能本身慢慢發現其中的祕密；

4.作好網站的目錄結構與命名規則這個重要性對後期的維護是建設性的；

5.若是本身沒有好的想法能夠去對手的網站去觀模一下 ，或者是本身看看與設計相關的書，這個是須要用心研究一下的；（必畢設計師仍是一個 很值得人尊敬的行業）；

6.開發網站前還須要一個必不可少的東西那就是工具，（工預善其事，須要利其器），這個常常作開發的我就不說了，工具用的順手就行，不分哪一個好哪一個壞；若是是剛開始作這方面工做的朋友，那就要好好想一想了，各位平臺都有不錯的工具哦，在文章的結尾我會給你們推薦幾個的；

第三個問題：

  url組成與分類？

  URL（Uniform Resource Locator,統一資源定位符）

  URL格式以下：

        「http://www.baidu.com/test/index.html」

  他是由 模式+服務器名稱+路徑+文件名 組成；

   其中：

     "http://": 就協議模式，最多見的就是http（超文本傳輸協議了）其餘還有https(加密傳輸，用於安全網頁)、ftp（文件傳輸協議，也能夠用於下載哦，很快的一個協議），file(能夠用這個協議訪問本地的硬盤或本地文件)

     " www.baidu.com": 就是服務器名稱了；（如今的瀏覽器可讓你只輸入服務器的名稱就能夠訪問默認的服務器網頁，不須要寫訪問協議，默認的就是「http」）

      "/test/": 就是路徑了，一般的路徑分紅「相對」與「絕對",在咱們寫網頁的時候，加載資源就必不可少的，什麼用相對路徑何時用絕對路徑就顯得至關重要了, 一般咱們會把放在本身服務器上的資源使用「相對路徑」，而放在別人服務器上的資源就用「絕對路徑」;

    「index.html」:這個就是文件名字了；一般index.html這個文件名也是不用寫的，由於web服務器會把平這個頁面設置成默認的頁面，固然你也能夠修改web服務器讓其餘的頁面變成默認的頁面（有關服務器的知識就再也不這裏說明了）

第四個問題：

  html5中header的正確用法是什麼 ？

<header>標籤就HTML5中的新的標籤，可能你們都不熟悉他的用法，也不常常去用由於從比較古老的思惟方式想認爲他沒有什麼特別的樣式，與div可能感受上也沒有什麼的區別；

下面我就爲你們好好分析一下這個header標籤的用法；

header標籤在html5中標準的含義就是 網頁的頁眉，他就用來放一組介紹性或者導航性的內容的區域；你們否則被這個頁眉弄的思惟狹隘了，覺得頁眉就必定要在頁面的頭部或是前面；

其實他能夠放在頁面中的任何位置，也能夠有任意多個，只要他能夠實現他的語意與做用就能夠,那麼他具體須要怎麼用呢？

一般頁面包含網站的標誌、主導航、搜索框和其餘全站連接等；

以下面的代碼：

這個header標籤就表示的是整個網頁的頁眉，他將一組本網頁的導航包括起來，不少曾加了頁面的閱讀性與訪問性，固然上面的用法只是他的用法中的一種，你也能夠在下面的內容中繼續使用header，只要你的頁面看起來語意很明顯就好；

瞭解了他的用法以後下面說說在用他的時候須要注意的東西吧，相信會有不少朋友不知道下面我說的內容的：

1.只在必要時使用header標籤，什麼是必要的時候就是能夠不少提高網頁語意的時候，若是隻有h1~h6而沒有其餘的什麼內容，就沒有必要非要用header了,由於他已是標題了；

2.header是header  h是h ,不要認爲他們很想就能夠互換使用，其實他們仍是頗有本質的區別的，這個但願各位朋友好好體會一下；

3.不要把header標籤嵌套的footer或address標籤中,反之也是同樣的；

4.在老的HTML中其實用div也能夠實現header的效果，可是須要用id作區分來曾加語意，也能夠說header是取代div的一塊功能的一種用法；

5.其實的header標籤不必定要像例子中的那樣包含nav標籤，但通常狀況下用header標籤的時候就能夠包含nav標籤；由於他是頁面的導航。（在後面將nav時候會重點將他的語意用法）

 

 

今天講了一些概念性的東西，不知道對讀到這篇文章的您有什麼幫助沒有？是否是認爲HTML5沒有咱們想的那麼神祕但也沒有咱們想的那樣的簡單？

下篇文章我會講一些與HTML5標籤中，導航相關的（nav）、定義區塊相關的（article,section）;也許還會根據您的評論或提問在下一個文章中解答哦；

感謝您的閱讀，期待下次與您見面；

 

附錄：

網頁編輯器推薦：

若是你是windos版本那就簡單了，菜鳥的話就用：

1）dreamweaver 吧，雖然有點佔內存可是對菜鳥來講是很很少的IDE工具；

果如認爲本身是中級或是高手：

2）Sublime Text是一個不錯的選擇，用不少的插件與很好玩的用法，並且速度超快，流暢感不錯；

3）Text Editor也不錯，也是輕量級的開發工具；

4）Notepad++這個就不過多的解釋了；

若是你是OSX如今流行的工具備：

1）BBEdit（www.barebones.com/products/bbedit）也是一個很強大的開發工具；

2)Sublime Text(www.sublimetext.com) 這個上面說過了；

3）TextMate( http://macromates.com)這個就是BBEdit的簡化版本

 

在這裏簡單的推薦了幾個；還有不少能夠上網上找找，工具這個東西適合本身就好。

轉載請註明出處：謝謝合做！

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