摘要：元數據是關于數據的信息。標簽提供關于文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。典型的情況是，元素被用于規定頁面的描述關鍵詞文檔的作者最后修改時間以及其他元數據。

                   Web前端的基礎知識

什么是web？
WEB標準是一系列標準的總稱，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。WEB標準不僅僅是大家常說的DIV+CSS。

一、HTML部分
合理的結構
Html4.0的時候我們基本都是用table來布局，但是web2.0時代也是如大家所知道的那樣用div+css來布局，table布局幾乎不必用到css來影響web的表現，但是卻要一層套一層的table，td，tabel…，如此頁面相當難以維護，且不易控制表現；而使用div+css來布局就顯得更加合理，它使得html結構層與css表現層分離，便于維護，但是它也帶來可怕的兼容性問題，特別是ie系列瀏覽器，它有自己的一套解析和渲染頁面的方式與w3c標準實現有著一系列的差異，不過這些差異可以通過hack來解決，而且一旦你掌握了合理的結構，兼容的css，標準的寫法這些差異其實完全可以避免產生。html標簽通常由尖括號包圍的關鍵詞，其標簽通常是成對出現的 和開始和結束標簽也被稱為開放標簽和閉合標簽。

元數據（metadata）是關于數據的信息。
標簽提供關于 HTML 文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。
典型的情況是，meta 元素被用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。
標簽始終位于 head 元素中。
元數據可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。

  //指明文字編碼
   //指明采用的語法
     //指明作者
   //指明版權 
    //對網站的簡單描述
      //說明了本網站的關鍵字。


 


對不起。我們已經搬家了。您的 URL 是 http://www.baidu.com


您將在 5 秒內被重定向到新的地址。

如果超過 5 秒后您仍然看到本消息，請點擊上面的鏈接。

后面2行主要是被百度這些搜索網站檢索的時候用到的，非常重要。

html鏈接： 標簽進行定義的。
例子： baidu href:在href屬性中指定連鏈接的地址，是超文本引用的意思。
style="text-decoration:none"創建一個沒有下劃線的超鏈接
定義沒有下劃線
html圖像： 圖像的名稱和尺寸是以屬性的形式提供的。
tppabs：該軟件是離線瀏覽器。

替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。

設置圖像的對齊方式：

圖像 ,是關閉空元素的方法。使用空的段落標記

html（提示：使用小寫標簽）
屬性為html元素提供附加信息。 屬性總是以名稱/值對的形式出現。Name=value 屬性總是在html元素的開始標簽中規定。

設置在html中字體的格式。

擁有關于對齊 方式的附加信息，居中排列標題。

---

標簽在 HTML 頁面中創建水平線。

html注釋
可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。
注釋是這樣寫的：
實例
注釋列表

html拆行

        如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 
 標簽：

This is
a para
graph with line breaks

瀏覽器忽略了源代碼中的排版（省略了多余的空格和換行）

始終為屬性值加引號。屬性值應該始終被包括在括號內。雙引號是最常用的，若屬性值本身含有雙引號，則必須使用單引號。

1、標頭元素定義title，搜索引擎關鍵字
2、標題元素
3、段落元素

4、字形元素 定義一個粗體字形元素。
5、下劃線字體 :
6、定義斜體字體
7、鏈接元素定義一個錨元素，也就是鏈接元素
8、圖像元素 定義個圖像元素。
9、表格元素

定義表頭元素，需要加入rules=groups
定義表主體元素
定義表尾中的元素。

創建頁面表格：都以像素作為單位；width：設置表格的寬度。

10、列表元素：html中的列表：無序列表以及有序列表

:無序列表 若需要更改列表項的標志，type的屬性可是disc、square 、circle中的任意一個。

 
每一個列表

：有序列表

 每一個列表

11、表單元素：

 表單元素一般作為數據，提交給后臺服務器做處理。它是由
  
來定義的。

如果要在表單中包括一個或多個文件選擇字段，必須把

標簽的enctype屬性設置為multipart/form-data。

最常用的表單標簽 標簽的類型由標簽屬性type決定。


                    "password"  定義密碼輸入框。
                    "radio"用來定義單選按鈕。
                    "checkbox"定義個復選框。
                    "submit"定義個提交按鈕。

input：accpet屬性：可約束瀏覽器允許用戶選擇的文件類型。
的主要屬性：action以及method:
action:用來指定表單數據被提交后，處理這些數據的程序的地址
Method: 1 post:將表單數據放在http數據的正文部分進行傳遞。將與action中指定的表單處理服務器連接；瀏覽器按分段傳輸的方法將數據傳給服務器。

      2 get:將表單數據加到action所指的地址之后進行傳遞。瀏覽器先與表單處理服務器建立鏈接，在一個步驟中發送所有的表單數據。

get：從服務器上獲取數據；
post：向服務器傳送數據。 其中get是form的默認方法。

標簽：定義一個select表單控制中的每個條目，瀏覽器將標簽中的內容作為標簽的菜單或是滾動列表中的一個元素顯示，其內容只能是純文本，不能有任何裝飾。



Volvo Saab Mercedes Audi




selected屬性：在option標簽中包含selected屬性后，就能預定一個或多個選項。

二、CSS部分
對于一條css如何定義，不用多講，但是在定義css的時候我們最好考慮一下是否有必要加上這個className，因為定義css我們完全可以使用標簽來定義，比如上面的例子里，我們想給span里的文字加粗或者換成紅色字體，沒有必要給這個span標簽特意加上一個className，可以直接這樣來定義
.topbar p span{font-weight:bold;color:red;}
這樣我們可以節約很多className名字，避免因為相同的樣式名而覆蓋了之前的屬性，而且層次結構也足夠的清晰。

行內元素和塊級元素
塊級元素生成一個元素框，（默認地）它會填充其父級元素的內容，旁邊不能有其他元素。換句話說，他在元素框之前和之后生成了“分隔”符。我們最熟悉的HTML元素就是是p和div.
行內元素在一個文本行內生成元素框，而不會打斷這行文本。行內元素最好的例子就是XHTML中的a,span元素。strong和em也屬于行內元素。這些元素不會在它本身之前或之后生成“分隔符”，所以可以出現在另一個元素的內容中，而不會破壞其顯示。
注意，盡管“塊”和“行內”這兩個詞與HTML和XHTML中的塊級和行內元素有很多共同點，但也存在一個重要的差別。在HTML和XHTML中，塊級元素不能繼承自行內元素（即不能嵌套在行內元素中）。但是CSS中，對于顯示內容如何嵌套不存在任何限制。

1、內部樣式表 內部樣式表只對所在的網頁有效。

   當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 

2、外部樣式表：將樣式寫在一個以.css為后綴的css文件里面。

  當樣式需要被應用到很多頁面的時候。外部樣式將是理想的選擇，使用外部樣式表，可以通過更改一個文件來改變整個站點的外觀。

rel 屬性規定當前文檔與被鏈接文檔之間的關系
你的例子里rel 屬性指示被鏈接的文檔是一個樣式表只有 rel 屬性的 "stylesheet" 值得到了所有瀏覽器的支持。其他值只得到了部分地支持。

3、內嵌樣式

    當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
 ，用style定義內嵌的。
This is a paragraph