HTML基礎的撿漏

原文連接： http://www.cun-xu.cn/index.ph...

今天這篇是給初學者看的，老手也能夠看看查缺補漏，尤爲是與SEO有關的內容。

一、<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。

在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。

HTML5 不基於 SGML，因此不須要引用 DTD。

二、head元素中存放元數據，用來描述HTML文檔自己的信息

head做用：

1）描述網頁基本信息

2）指向渲染網頁須要其餘文件連接

3）各大廠商根據本身須要定製

三、經常使用字符實體

字符實體能夠有兩種方法表示：一種爲實體名稱、一種爲實體編號。如小於號(<)既能夠用實體名稱lt;表示，也能夠用實體編號<表示。

顯示結果	描述	實體名稱	實體編號
	空格	 	 
<	小於號	&lt;	&#60;
>	大於號	&gt;	&#62;
&	和號	&amp;	&#38;
©	版權（copyright）	&copy;	&#169;
×	乘號	&times;	&#215;
"	雙引號	&quot;	&#34;

更多可參看：HTML Symbol Entities Codes

四、本地路徑方面，如在磁盤裏面訪問，Windows約定使用反斜線（）做爲路徑中的分隔符，如"E:娛樂音樂藍蓮花.mp3"；而UNIX 系統使用正斜線 (/)，如「/users/marvin/music/藍蓮花.mp3」。

五、連接

1. 頁面跳轉：target，定義窗口打開方式，默認是當前窗口打開，有四種取值，分別爲：

   • _self：當前窗口打開，此值爲默認值
   • _blank：新窗口打開（該值是使用最多的）
   • _parent：表示在當前框架的父框架打開（通常用於iframe中）
   • _top：表示頂層框架打開（通常用於iframe）
   • framename：在指定的框架中打開被連接文檔。

2. 頁面內跳轉 ： 當<a>元素用於頁面內的錨點跳轉時，應該先爲該頁面設置一些錨點，而定義錨點有兩種辦法：

   • 經過<a>元素的name屬性來定義，如：<a name="anchor-name">name屬性的值就是錨點的名稱</a>
   • 經過其餘元素的id屬性來定義，如：<div id="anchor-name">id屬性值能夠做爲錨點的名稱</div>

三、當其用於郵件連接時，href屬性的值爲「mailto: + 郵件地址」，示例以下：

<a href="mailto:xuyc_brother@foxmail.com」>發送郵件給我</a>

咱們還能夠把郵件的抄送和主題寫在href中，eg:

<a href="mailto:xuyc_brother@foxmail.com&subject=建議&body=body....」>發送郵件給我</a>

四、客戶器端圖像映射http://www.w3school.com.cn/tags/att_img_usemap.asp

<img src="planets.gif" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
  <area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
  <area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>

上面這段源代碼將一幅圖像 planets.gif 映射爲 3 個區域，當用戶單擊其中某一個區域時，將被連接到不一樣的文檔中。

五、表格 table：
cellspacing：單元格外邊距（單元格與單元格 或 單元格與表格之間的距離）
cellpadding：單元格內邊距（單元格內邊距與內容之間的距離）

六、blockquote中的cite屬性指定了引用的來源。eg:

<blockquote cite="http://www.wwf.org">
WWF's ultimate goal is to build a future where people live in harmony with nature.
</blockquote>

七、嵌入外部資源 eg.

<object type="application/x-shockwave-flash">
    <param name="movie" value="http://pdfReader.swf">
</object>

//或者
<embed type="application/x-shockwave-flash" src="http://pdfReader.swf" width="640" height="480">

八、語義化的做用

• SEO(Search Engine Optimization)
• 可訪問性
• 可讀性

九、經過 <optgroup> 標籤把相關的選項組合在一塊兒：

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

十、input type：email、url、number、tel、search、range、color、date picker等。

十一、6級標題中，h1最重要，表示一個網頁中的主要內容，h2~h6重要性依此下降。對於搜索引擎來講，h1的重要性僅次於title，搜索引擎檢索完title後會當即查看h1中的內容。

十二、搜索引擎能夠經過img標籤的alt屬性來識別不一樣的圖片，若是不寫alt屬性，則搜索引擎不會對img中的圖片進行收錄。

1三、使用meta能夠用來作請求的重定向:

<meta http-equiv="refresh" content="秒數;url=目標路徑"/>