HTML教程css

第一章 HTML基礎知識html

Web頁是由HTML（Hypertext Markup Language，超文本標記語言）組織起來的，由瀏覽器解釋顯示的一種文件。web

最初的HTML語言功能極其有限，僅可以實現靜態文本的顯示，人們遠遠不知足於死板的相似於文本文件的Web頁。後來加強的HTML語言擴展了對圖片、聲音、視頻影像的支持。經過瀏覽器訪問到的Web頁面，一般是基於HTML的基礎上所造成的。api

1、HTML的概述瀏覽器

HTML的英語意思是：Hypertext Marked Language，即超文本標記語言,是一種用來製做超文本文檔HTTP的簡單標記語言。超文本傳輸協議規定了瀏覽器在運行 HTML 文檔時所遵循的規則和進行的操做.協議的制定使瀏覽器在運行超文本時有了統一的規則和標準.用HTML編寫的超文本文檔稱爲HTML文檔，它能獨立於各類操做系統平臺，自1990年來HTML就一直被用做ＷＷＷ（是World Wide Web的縮寫，也可簡寫WEB、中文叫作萬維網) 的信息表示語言，使用HTML語言描述的文件，須要經過WEB瀏覽器顯示出效果。緩存

所謂超文本，是它能夠加入圖片、聲音、動畫、影視等內容，HTML文檔都是一種靜態的網頁文件，這個文件裏面包含了HTML指令代碼，這些指令代碼並非一種程序語言，它只是一種排版網頁中資料顯示位置的標記結構語言，易學易懂，很是簡單。HTML的廣泛應用就是帶來了超文本的技術經過單擊鼠標從一個主題跳轉到另外一個主題，從一個頁面跳轉到另外一個頁面與世界各地主機的文件連接。以下所示：服務器

經過HTML能夠表現出豐富多彩的設計風格：網絡

圖片調用：<IMG SRC="文件名"> 文字格式： <FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT>框架

經過HTML能夠實現頁面之間的跳轉：ssh

頁面跳轉：〈A HREF="文件路徑/文件名"></A>

經過HTML能夠展示多媒體的效果：

聲頻：<EMBED SRC="音樂地址" AUTOSTART=true> 視頻：<EMBED SRC="視頻地址" AUTOSTART=true>

從上面HTML超文本文件時須要用到的一些標籤。在HTML中每一個用來做標籤的符號都是一條命令、它告訴瀏覽器如何顯示文本。這些標籤均由"<"和">"符號以及一個字符串組成。而瀏覽器的功能是對這些標記進行解釋，顯示出文字、圖像、動畫、播放聲音。這些標籤符號用「<標籤名字屬性>」來表示。

HTML只是一個純文本文件。建立一個HTML文檔，只須要兩個工具，一個是HTML編輯器，一個WEB瀏覽器。HTML編輯器是用於生成和保存THML文檔的應用程序。WEB瀏覽器是用來打開WEB網頁文件，提供給咱們查看WEB資源的客戶端程序。

2、HTML的基本結構：

一個HTML文檔是由一系列的元素和標籤組成.元素名不區分大小寫.HTML用標籤來規定元素的屬性和它在文件中的位置， HTML超文本文檔分文檔頭和文檔體兩部分，在文檔頭裏，對這個文檔進行了一些必要的定義，文檔體中才是要顯示的各類文檔信息。下面是一個最基本的html文檔的代碼:

<HTML></HTML>在文檔的最外層，文檔中的全部文本和html標籤都包含在其中，它表示該文檔是以超文本標識語言（HTML）編寫的。事實上，如今經常使用的Web瀏覽器均可以自動識別HTML文檔，並不要求有 <html>標籤，也不對該標籤進行任何操做，可是爲了使HTML文檔可以適應不斷變化的Web瀏覽器，仍是應該養成不省略這對標籤的良好習慣。

<HEAD></HEAD>是HTML文檔的頭部標籤, 在瀏覽器窗口中，頭部信息是不被顯示在正文中的,在此標籤中能夠插入其它標記, 用以說明文件的標題和整個文件的一些公共屬性。若不需頭部信息則可省略此標記，良好的習慣是不省略。

<title>和</title>是嵌套在<HEAD>頭部標籤中的，標籤之間的文本是文檔標題，它被顯示在瀏覽器窗口的標題欄。

<BODY> </BODY>標記通常不省略，標籤之間的文本是正文，是在瀏覽器要顯示的頁面內容。

3、 HTML的標籤與屬性

對於剛剛接觸超文本，最大的障礙就是一些用「<」和「>」括起來的句子，咱們稱它爲標籤，是用來分割和標籤文本的元素，以造成文本的佈局、文字的格式及五彩繽紛的畫面。標籤經過指定某塊信息爲段落或標題等來標識文檔某個部件。屬性是標誌裏的參數的選項，HTML的標籤分單標籤和成對標籤兩種。成對標籤是由首標籤<標籤名> 和尾標籤</標籤名>組成的，成對標籤的做用域只做用於這對標籤中的文檔。單獨標籤的格式<標籤名>，單獨標籤在相應的位置插入元素就能夠了，大多數標籤都有本身的一些屬性, 屬性要寫在始標籤內，屬性用於進一步改變顯示的效果, 各屬性之間無前後次序，屬性是可選的，屬性也能夠省略而採用默認值;其格式以下：

<標籤名字屬性1 屬性2 屬性3 … >內容</標籤名字>

做爲通常的原則，大多數屬性值不用加雙引號。可是包括空格、％號，＃號等特殊字符的屬性值必須加入雙引號，對屬性值加雙引號。如：

注意事項：輸入始標籤時，必定不要在「<」與標籤名之間輸入多餘的空格，也不能在中文輸入法狀態下輸入這些標籤及屬性，不然瀏覽器將不能正確的識別括號中的標誌命令，從而沒法正確的顯示你的信息。

第二章 HTML標籤格式

1、基本標記

基本標記是用來定義頁面屬性的一些標記語言。一般一份HTML網頁文件包含3個部分：標頭區<HEAD>„„</HEAD>、內容區<BODY>„„</BODY>和網頁區<HTML>„„</HTML>。

<!DOCTYPE>

做用:聲明是文檔中的第一成分，位於標籤以前。

1．<html>„„</html>

做用:此元素可告知瀏覽器其自身是一個HTML文檔。

屬性:manifest:值(url)爲脫機使用定義緩存信息。

<html>標誌用於HTML文檔的最前邊，用來標識HTML文檔的開始。而</html>標誌偏偏相反，它放在HTML文檔的最後邊，用來標識HTML文檔的結束，兩個標誌必須一塊使用。

2．<head>„„</head>

做用:標籤用於定義文檔的頭部，它是全部頭部元素的容器。

屬性:profile:值(URL)一個有空格分隔的URL列表，這些URL包含着有關頁面的元數據信息。

<head>和</head>構成HTML文檔的開頭部分，在此標誌對之間可使用<title></title>、<script></script>等標誌對。這些標誌對都是用來描述HTML文檔相關信息的，<head>和</head>標誌對之間的內容是不會在瀏覽器的框內顯示出來的，兩個標誌必須一塊使用。

3．<body>„„</body>

做用:元素定義文檔的主體。

屬性:alink:值(rgb(x,x,x),#xxxxxx,colorname)不同意使用，請使用樣式取代它。規定文檔中活動連接(active link)的顏色。

background:值(URL)不同意使用。請使用樣式取代它。規定文檔的背景圖像。

bgcolor:值(reb(x,x,x),#xxxxxx,colorname)不同意使用。規定文檔中的背景顏色。

link:值(reb(x,x,x),#xxxxxx,colorname)不同意使用。規定文檔中未訪問連接的默認顏色。

text:值(reb(x,x,x),#xxxxxx,colorname)不同意使用。規定文檔中因此文本的顏色。

vlink:值(reb(x,x,x),#xxxxxx,colorname)不同意使用。規定文檔中已被訪問連接的顏色。

<body>和</body>是HTML文檔的主體部分，在此標誌對之間可包含<p>„„</p>、<h1>„„</h1>、<br>、<hr>等衆多的標誌。它們所定義的文本、圖像等將會在瀏覽器的框內顯示出來。

引號內的rrggbb用6個十六進制數表示的RGB（即紅、綠、藍3色的組合）顏色，如#ff0000對應爲紅色。

4．<title>„„</title>

做用:元素可定義文檔的標題。

屬性:dir:值(rtl,ltr)規定元素中內容的文本方向。

lang:值(language_code)規定元素中內容的語言代碼。

xml:lang:值(language_code)規定XHTML文檔中元素內容的語言代碼。

使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊藍色部分顯示的文本信息，那些信息通常是網頁的主題。要將網頁的主題顯示到瀏覽器的頂部其實很簡單，只要在<title></title>標誌對之間加入須要顯示的文本便可。下面是一個簡單的網頁實例。經過該實例，讀者即可以瞭解以上各個標誌對在一個HTML文檔中的佈局或所使用的位置。

<html>

<head>

<title>顯示在瀏覽器窗口最頂端中的文本</title>

</head>

</body>

</html> 

注意：<title></title>標誌對只能放在<head></head>標誌對之間。

2、格式標記

這裏所介紹的格式標記都是用於<body></body>標誌對之間的。

1．<p>„„</p>

做用:標籤訂義段落。

屬性:align:值(left,center,right,justify)不推薦使用。請使用樣式取代它。規定標題中文本的排列方式。

<p></p>標誌對是用來建立一個段落，在此標誌對之間加入的文本將按照段落的格式顯示在瀏覽器上。<p>標誌還可使用align屬性，它用來講明對齊方式，語法以下所示。

Align的參數能夠是Left（左對齊）、Center（居中）和Right（右對齊）3個值中的任何一個。

例如<p align="center"></p>表示標誌對中的文本使用居中的對齊方式。

2．<br>

做用:可插入一個簡單的換行符。

屬性:沒有可選屬性。

<br>是一個很簡單的單標記指令，它沒有結束標誌，由於它用來建立一個回車換行，即標記文本換行。 注意：若是把<br>加在<p></p>標誌對的外邊，將建立一個大的回車換行，即<br>前邊和後邊的文本的行與行之間的距離比較大。若放在<p></p>的裏邊則<br>前邊和後邊的文本的行與行之間的距離將比較小。

3．<blockquote>„„</blockquote>

在<blockquote></blockquote>標誌對之間加入的文本將會在瀏覽器中按兩邊縮進的方式顯示出來。

4．<dl>„„</dl>、<dt>„„</dt>、<dd>„„</dd>

<dl></dl>用來建立一個普通的列表；

做用:標籤訂義了定義列表。標籤用於結合<dt>(定義列表中的項目)和<dd>(描述列表中的項目)。

屬性:沒有可選屬性。

<dt></dt>用來建立列表中的上層項目；

做用:標籤訂義了定義列表中的項目。

屬性:沒有可選屬性。

<dd></dd>用來建立列表中最下層項目。

做用:在定義列表中定義條目的定義部分。

屬性:沒有可選屬性。

<dt></dt>和<dd></dd>都必須放在<dl></dl>標誌對之間。經過下面的實例

<html>

<head>

<title>一個普通列表</title>

</head>

</dl>

</body>

</html>

5．<ol>„„</ol>、<ul>„„</ul>、<li>„„</li>

<ol></ol>標誌對用來建立一個標有數字的列表。

做用:標籤訂義有序列表。

屬性:compact:值(compact)HTML5 中不支持。HTML4.01 中不同意使用。規定列表呈現的效果比正常狀況更小巧。 reversed:值(reversed)規定列表順序爲降序。(9,8,7…) ;start:值(number)規定有序列表的起始值。

type:值(1,A,a,I,i)規定在列表中使用的標記類型。

<ul></ul>標誌對用來建立一個標有圓點的列表。

做用:標籤訂義無序列表。

屬性:compact:值(compact)不同意使用。請使用樣式取代它。規定列表呈現的效果比正常狀況更小巧。 type:值(disc,square,circle)不同意使用。請使用樣式取代它。規定列表的項目符號的類型。

做用:標籤訂義列表項目。<li>標籤可以使用在有序列表（<ol>）和無序列表（<ul>）中。

屬性:type:值(A,a,I,i,1,disc,square,circle)不同意使用。請使用樣式代替它。規定使用哪一種項目符號。value:值(number)不同意使用。請使用樣式代替它。規定列表項目的數字。

<li></li>標誌對只能在<ol></ol>或<ul></ul>標誌對之間使用，此標誌對用來建立一個列表項，若<li></li>放在<ol></ol>之間，則每一個列表項加上一個數字；若放在<ul></ul>之間，則每一個列表項加上一個圓點。示例以下所示：

<html>

<head>

</head>

<body text="blue"

<ol>

</ol>

<ul>

</ul>

</body>

</html>

6．<div>„„</div>

<div></div>標誌對用來排版大塊HTML段落，也用於格式化表，此標誌對的用法與<p></p>標誌對很是類似，一樣有align對齊方式屬性。

3、文本標記

文本標記主要針對文本的屬性設置進行標記說明，如斜體、黑體字、加下劃線等。

1．<pre>„„</pre>

<pre></pre>標誌對用來對文本進行預處理操做。

2．<h1></h1>„„<h6></h6>

做用:<h1>-<h6>標籤了定義標題。<h1>定義最大的標題，<h6>定義最小的標題。

屬性:align:值(left,center,right,justify)不推薦使用。請使用樣式取代它。規定標題中文本的排列。

HTML語言提供了一系列對文本中的標題進行操做的標誌對：<h1></h1>、<h2></h2>、„„、<h6></h6>。<h1></h1>是最大的標題，而<h6></h6>則是最小的標題。若是在HTML文檔中須要輸出標題文本，可用這6對標題標誌對中的任何一對。

3．<b>„„</b>、<i>„„</i>、<u>„„</u>

常用Word的人對這3個標誌對必定很快就能掌握。<b></b>用來使文本以黑體字的形式輸出；<i></i>用來使文本以斜體字的形式輸出；<u></u>用來使文本如下加一劃線的形式輸出。

4．<tt>„„</tt>、<cite>„„</cite>、<em>„„</em>、<strong>„„</strong>

這些標誌對的用法和上邊的同樣，差異只是在於輸出的文本字體不太同樣而已。<tt></tt>用來輸出打字機風格字體的文本；<cite></cite>用來輸出引用方式的字體，一般是斜體；<em></em>用來輸出須要強調的文本（一般是斜體加黑體）；<strong></strong>則用來輸出加劇文本（一般也是斜體加黑體）。

5．<font>„„</font>

<font></font>可對輸出文本的字體大小、顏色進行隨意的改變。這些改變主要是經過對它的兩個屬性size和color的控制來實現的。size屬性用來改變字體的大小，它能夠取值爲-一、1和+1；而color屬性則用來改變文本的顏色，顏色的取值是十六進制RGB顏色碼或HTML語言給定的顏色常量名。

文本標記的具體用法如如下代碼所示：

<html>

<head>

<title>文本標記的綜合示例</title>

</head>

<h1>最大的標題</h1>

<h6>最小的標題</h6>

<p><b>黑體字文本</b> </p>

<p><i>斜體字文本</i> </p>

<p><u>下加一劃線文本</u> </p>

<p><tt>打字機風格的文本</tt></p>

<p><cite>引用方式的文本</cite></p>

<p><em>強調的文本</em></p>

<p><strong>加劇的文本</strong></p>

<p><font size="+1" color="red">size取值「+1」、color取值「red」時的文本</font></p>

</body>

</html>

4、圖像標記

再簡單樸素的網頁若是隻有文字而沒有圖像將失去許多活力，圖像在網頁製做中是很是重要的一個方面，HTML語言也專門提供了<img>標誌來處理圖像的輸出。

1．<img>

做用:img元素向網頁中嵌入一幅圖像。

屬性:必需的屬性:src屬性:值(URL)規定顯示圖像的URL和alt屬性:值(text)規定圖像的代替文本。

可選屬性:align:值(top,bottom,middle,left,right)不推薦使用。規定如何根據周圍的文原本排列圖像。

border:值(pixels)不推薦使用。定義圖像周圍的邊框。

height:值(pixels %)定義圖像的高度。

hspace:值(pixels)不推薦使用，定義圖像左側和右側的空白。

ismap:值(URL)將圖像定義爲服務器端圖像映射。

longdesc:值(URL)指向包含長的圖像描述文檔的URL。

usemap:值(URL)將圖像定義爲客戶器端圖像映射。

vspace:值(pixels)不推薦使用。定義圖像頂部和底部的空白。

width:值(pixels %)設置圖像的寬度。

<img>標誌並非真正地把圖像加入到HTML文檔圖1-31 文本標記執行效果圖中，而是將標誌對的src屬性賦值。這個值是圖像文件的文件名，其中包括路徑，這個路徑能夠是相對路徑，也能夠是網址。所謂相對路徑是指所要連接或嵌入到當前HTML文檔的文件與當前文件的相對位置所造成的路徑。

假如網站的HTML文件與圖像文件（文件名假設是logo.gif）在同一個目錄下，則能夠將代碼寫成 <img src="logo.gif">。假如網站的圖像文件放在當前的HTML文檔所在目錄的一個子目錄（子目錄名假設是images）下，則代碼應爲<img src="images/logo.gif">。 

注意：一般圖像文件都會放在網站中一個獨立的目錄裏。必須注意一點，src屬性在<img>標誌中是必須賦值的，是標誌中不可缺乏的一部分。

除此以外，<img>標誌還有alt、align、border、width和height屬性。align是圖像的對齊方式，在上邊已經提到過。border屬性是圖像的邊框，能夠取大於或者等於0的整數，默認單位是像素。width和height屬性是圖像的寬和高，默認單位也是像素。alt屬性是當光標移動到圖像上時顯示的文本。

2．<hr>

做用:標籤在HTML頁面建立一條水平線。

屬性:align:值(center,left,right)不同意使用。請使用樣式取代它。規定hr元素的對齊方式。

noshade:值(noshade)不同意使用。請使用樣式取代它。規定hr元素的顏色呈現爲純色。

size:值(pixels)不同意使用。請使用樣式取代它。規定hr元素的高度(厚度)。

width:值(pixels %)不同意使用。請使用樣式取代它。規定hr元素的寬度。

<hr>標誌是在HTML文檔中加入一條水平線。它能夠直接使用，具備size、color、width和noshade屬性。 size用來設置水平線的厚度，而width用來設定水平線的寬度，默認單位是像素。noshade屬性不用賦值，而是直接加入標誌便可使用，它是用來加入一條沒有陰影的水平線，不加入此屬性水平線將有陰影。圖像標記的使用如如下代碼所示

<html>

<head> <title>圖像標記的綜合示例</title>

</head>

<body>

</body>

</html>

5、表格標記

表格標記對於製做網頁是很重要的，如今不少網頁都是使用多重表格，主要是由於表格不但能夠固定文本或圖像的輸出，並且還能夠任意地進行背景和前景顏色的設置。

1．<table>„„</table>

做用:標籤訂義HTML表格。

屬性:align:值(left,center,right)不同意使用。請使用樣式代替。規定表格相對周圍元素的對齊方式。

bgcolor:值(rgb(x,x,x),#xxxxxx,colorname)不同意使用。請使用樣式代替。規定表格的背景顏色。

border:值(pixels)規定表格邊框的寬度。

cellpadding:值(pixels %)規定單元邊沿與其內容之間的空白。

cellspacing:值(pixels %)規定單元格之間的空白。

frame:值(void,above,below,hsides,lhs,rhs,vsides,box,border)規定外側邊框的哪一個部分是可見的。

rules:值(none,groups,rows,cols,all)規定內側邊框的哪一個部分是可見的。

summar:值(text)規定表格的摘要。

width:值(% pixels)規定表格的寬度。

<table></table>標誌對用來建立一個表格。它的屬性bgcolor、bordercolor、cellpadding等。具體的屬性參數將在使用Dreamweaver整合頁面時做詳細介紹。

2．<tr>„„</tr>

<tr></tr>標誌對用來建立表格中的行。只能在<table></table>標誌之間使用，而此標誌間加入文本無效。

做用:標籤訂義HTML表格中的行。

屬性:align:值(right,left,center,justify,char)定義表格行的內容對齊方式。

bgcolor:值(rgb(x,x,x)#xxxxxx,colorname)不同意使用。請使用樣式取而代之。規定表格行的背景顏色。

char:值(character)規定根據哪一個字符來進行文本對齊。

charoff:值(number)規定第一個對齊字符的偏移量。

valign:值(top,middle,bottom,baseline)規定表格行內容。

2. 1<td>„„</td>

<td></td>標誌對用來建立表格中一行中的每個表格，此標誌對只在<tr></tr>標誌對之間纔有效的。

做用:標籤訂義了定義列表中的項目。td元素內的文本一般是左對齊。

屬性:abbr:值(text)規定單元格中內容的縮寫版本。

align:值(left,right,center,justify,char)規定單元格內容的水平對齊方式。

axis:值(category_name)對單元進行分類。

bgcolor:值(rgb(x,x,x),#xxxxxx,colorname)不同意使用。請使用樣式取而代之。規定單元格的背景顏色。

char:值(character)規定根據哪一個字符來進行內容的對齊。

charoff:值(number)規定對齊字符的偏移量。

colspan:值(number)規定單元格可橫跨的列數。

headers:值(header_cells’_id)規定與單元格相關的表頭。

height:值(pixels %)不同意使用。請使用樣式取而代之。規定表格單元格的高度。

nowrap:值(nowrap)不同意使用。請使用樣式取而代之。規定單元格中的內容是否折行。

rowspan:值(number)規定單元格可橫跨的行數。

scope:值(col,colgroup,row,rowgroup)定義將表頭數據與單元數據相關聯的方法。

valign:值(top，middle，bottom，baseline)規定單元格內容的垂直排列方式。

width:值(pixels %)不同意使用。請使用樣式取而代之。規定表格單元格的寬度。

3．<th>„„</th>

做用:定義表格內的表頭單元格。<th>元素內部的文本會呈現爲居中的粗體文本。

屬性:abbr:值(text)規定單元格中內容的縮寫版本。

align:值(left,right,center,justify,char)規定單元格內容的水平對齊方式。

axis:值(category_name)對單元格進行分類。

bgcolor:值(rgb(x,x,x),#xxxxxx,colorname)不推薦使用。請使用樣式代替它。規定表格單元格的背景顏色。

char:值(character)規定根據哪一個字符來進行內容的對齊。

charoff:值(number)規定對齊字符的偏移量。

colspan:值(number)設置單元格可橫跨的列數。

headers:值(idrefs)有空格分隔的表頭單元格ID列表，爲數據單元格提供表頭信息。

height:值(pixels %)不推薦使用。請使用樣式代替它。規定表格單元格的高度。

nowrap:值(nowrap)不推薦使用。請使用樣式替代它。規定單元格中的內容是否折行。

rowspan:值(number)規定單元格可橫跨的行數。

scope:值(col,colgroup,row,rowgroup)定義將表頭數據與單元數據相關聯的方法。

valign:值(top,middle,bottom,baseline)規定單元格內容的垂直排列方式。

width:值(pixels %)不推薦使用。請使用樣式取而代之。規定表格單元格的寬度。

<th></th>標誌對用來設置表格頭，一般是黑體居中文字。表格標記使用以下代碼示例。

<html>

<head>

<title>表格標記的綜合示例</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

<td width="16%" align="center">桑普多利亞</td>

<td width="17%" align="center">皇家馬德里</td>

</tr>

<tr>

<td width="17%" align="center">米德爾斯堡</td>

<td width="17%" align="center">馬德里競技</td>

</tr>

</table>

</body>

</html>

4.<caption>

做用:標籤訂義表格的標題。<caption>標籤必須直接放置到<table>標籤以後。

屬性:align:值(left,right,top,bottom)不同意使用。請使用樣式取而代之。規定標題的對齊方式。

6、連接標記

連接是HTML語言的一大特點，正由於有了連接，網站內容的瀏覽纔可以具備靈活性和網絡性。

做用:標籤訂義超連接，用於從一張頁面連接到另外一張頁面。<a>元素最重要的屬性是href屬性，它指示連接的目標。

屬性:charset:值(char_encoding)HTML5中不支持。規定被連接文檔的字符集。

coords:值(coordinates)HTML5中不支持。規定連接的座標。

download:值(filename)規定被下載的超連接目標。

href:值(URL)規定連接指向的頁面的URL。

hreflang:值(language_code)規定被連接文檔的語言。

media:值(media_query)規定被連接文檔是爲什麼種媒介/設備優化的。

name:值(section_name)HTML5中不支持。規定錨的名稱。

rel:值(text)規定當前文檔與被連接文檔之間的關係。

rev:值(text)HTML5中不支持。規定連接文檔與當前文檔之間的關係。

shape:值(default,rect,circle,poly)HTML5中不支持。規定連接的形狀。

target:值(_blank,_parent,_self,_top,framename)規定在何處打開連接文檔。

type:值(MIME type)規定被連接文檔的的MIME類型。

1．<a href="„„">„„</a>

該標誌對的屬性href是不管如何不可缺乏的，標誌對之間加入須要連接的文本或圖像（連接圖像即加入<img src="">標誌）。

href的值能夠是URL形式，即網址或相對路徑，也能夠是mailto:形式，即發送E-mail形式。當href爲URL時，語法爲<a href="URL"></a>，這樣就構成一個超文本連接了。

<a href="http://xld.home.chinaren.net/">這是個人網站</a>

當href爲郵件地址時，語法爲<a href="mailto:EMAIL"></a>，這就建立了一個自動發送電子郵件的連接，mailto:後邊緊跟想要自動發送的電子郵件的地址（即E-mail地址）。

例如：<a href="mailto:xiaolida@263.net">這是個人電子信箱（E-mail信箱）</a>

此外，<a href=""></a>還具備target屬性，此屬性用來指明瀏覽目標幀。

2．<a name="„„">„„</a>

<a name=""></a>標誌對要結合<a href=""></a>標誌對使用纔有效果。<a name=""></a>標誌對用來在HTML文檔中建立一個標籤（即作一個記號），屬性name是不可缺乏的，它的值便是標籤名。例如：<a name="標籤名">此處建立了一個標籤</a>。

建立標籤是爲了在HTML文檔中建立連接，以便找到同一文檔中有標籤的位置。必須使用<a href=""></a>標誌對。

例如要找到「標籤名」這個標籤，代碼：<a href="#標籤名">單擊此處將使瀏覽器跳到「標籤名」處</a>。

注意：href屬性賦的值如果標籤的名字，必須在標籤名前邊加一個「#」號。

7、幀標記

幀它可用來向瀏覽器窗口中裝載多個HTML文件。每一個HTML文件佔據一個幀，而多個幀能夠同時顯示在同一個瀏覽器窗口中，它們組成了一個最大的幀。幀一般的使用方法是在一個幀中放置目錄，而後將HTML文件顯示在另外一個幀中。

1．<frameset>„„</frameset>

<frameset></frameset>標誌對用來定義主文檔中有幾個幀而且各個幀是如何排列的。此標誌對放在幀的主文檔的<body></body>標誌對的外邊，也能夠嵌在其餘幀文檔中，而且能夠嵌套使用。

它具備rows和cols屬性，使用<frameset>標誌時這兩個屬性至少必須選擇一個，不然瀏覽器只顯示第一個定義的幀，<frameset></frameset>標誌對也就沒有起到任何做用了。

rows用來規定主文檔中各個幀的行定位，而cols用來規定主文檔中各個幀的列定位。這兩個屬性的取值能夠是百分數、絕對像素值或星號「*」，其中星號表明那些未被說明的空間，若是同一個屬性中出現多個星號，則將剩下的未被說明的空間平均分配。

2．<frame> <frame>

標誌放在<frameset></frameset>之間，用來定義某一個具體的幀。<frame>標誌具備src和name屬性，這兩個屬性都是必須賦值的。

src是此幀的源HTML文件名（包括網絡路徑，即相對路徑或網址），瀏覽器將會在此幀中顯示src指定的HTML文件。name是此幀的名字，這個名字是用來供超文本連接標誌<a href="" target="">中的target屬性指定連接的HTML文件將顯示在哪個幀中。

例如定義了一個幀，名字是main，在幀中顯示的HTML文件名是jc.htm，則代碼是<frame src="jc.htm" name="main">。當單擊這個連接後，文件new.htm將要顯示在名爲main的幀中，則代碼爲<a href="new.htm" target="main">須要連接的文本</a>。

此外，<frame>標誌還有scrolling和noresize屬性，scrolling用來指定是否顯示滾動軸，取值能夠是「yes」（顯示）、「no」（不顯示）或「auto」（若須要則會自動顯示，不須要則自動不顯示）。noresize屬性直接加入標誌中便可使用，不需賦值，它用來禁止用戶調整一個幀的大小。

3．<noframes></noframes>

<noframes></noframes>標誌對也是放在<frameset></frameset>標誌對之間，用來在那些不支持幀的瀏覽器中顯示文本或圖像信息。在此標誌對之間先緊跟<body></body>標誌對，而後纔可使用前面所講過的任何標誌。

8、表單標記

表單在Web網頁中用來給訪問者填寫信息，從而得到用戶信息，使網頁具備交互的功能。

1．<form>„„</form>

做用:標籤用於爲用戶輸入建立HTML表單。

屬性:accept:值(MIME_type)HTML5中不支持。

accept-charset:值(charset_list)規定服務器可處理的表單數據字符集。

action:值(URL)規定當提交表單時向何處發送表單數據。

autocomplete:值(on,off)規定是否啓用表單的自動完成功能。

method:值(get,post)規定用於發送form-data 的http方法。

name:值(form_name)規定表單的名稱。

target:值(_blank,_self,_parent,_top,foamename)規定在何處打開 action URL。

<form></form>標誌對用來建立一個表單，即定義表單的開始和結束位置，在標誌對之間的一切都屬於表單的內容。<form>標誌具備action、method和target屬性。

action的值是處理程序的程序名（包括網絡路徑：網址或相對路徑）。例如：<form action="http://xld. home.chinaren.net/counter.cgi">，當用戶提交表單時，服務器將執行網址http://xld.home.chinaren.net/上的名爲counter.cgi的CGI程序。

method屬性用來定義處理程序從表單中得到信息的方法，可取值爲GET和POST。GET方法是從服務器上請求數據，POST方法是發送數據到服務器。二者的區別在於GET方法全部參數會出如今URL地址中，而POST方法的參數不會出如今URL中。一般GET方法限制字符的大小，POST則容許傳輸大量數據。

事實上POST方法能夠沒有時間限制地傳遞數據到服務器，用戶在瀏覽器端是看不到這一過程的，因此POST方法比較適合用於發送一個保密或者比較大量的數據到服務器。而GET方法會將所要傳輸的數據附在網址後面，而後一塊兒送達服務器，所以傳送的數據量就會受到限制，可是執行效率卻比POST方法好。

target屬性用來指定目標窗口或目標幀。

2．<input type="">

做用:標籤用於收集用戶信息。

屬性:accept:值(mime_type)規定經過文件上傳來提交的文件的類型。

align:值(left,right,top,middle,bottom)不同意使用。規定圖像輸入的對齊方式。

alt:值(text)定義圖像輸入的替代文本。

autocomplete:值(on,off)規定是否使用輸入字段的自動完成功能。

autofocus:值(autofocus)規定輸入字段在頁面加載時是否得到焦點。

checked:值(checked)規定此input元素首次加載時應當被選中。

disabled:值(disabled)當input元素加載時禁用此元素。

form:值(formname)規定輸入字段所屬的一個或多個表單。

formaction:值(url)覆蓋表單的action屬性。

height:值(pixels %)定義input字段的高度。

list:值(datalist-id)引用包含輸入字段的預約義選項的datalist。

max:值(number,date)規定輸入字段的最大值。

maxlength:值(number)規定輸入字段中的字符的最大長度。

min:值(number,date)規定輸入字段的最小值。

name:值(field_name)定義input元素的名稱。

readonly:值(readonly)規定輸入字段爲只讀。

size:值(number_of_char)定義輸入字段的寬度。

type:值(button,checkbox,file,hidden,image,password,radio,reset,submit,text)規定input元素的類型。

value:值(value)規定input元素的值。

width:值(pixels,%)定義input字段的寬度。

<input type="">定義一個用戶輸入區，輸入信息。必須放在<form></form>標誌對之間。<input type="">標誌中共提供了8種類型的輸入區域，具體是哪種類型由type屬性來決定。

3．<select>„„</select>

做用:元素可建立單選或多選菜單。

屬性:data:值(url)供自動插入數據。

disabled:值(true,false)當該屬性爲true時，會禁用該菜單。

form:值(true,false)定義select字段所屬的一個或多個表單。

multiple:值(true,false)當該屬性爲true時，規定可一次選定多個項目。

name:值(unique_name)定義下拉列表的惟一標識符。

size:值(number)定義菜單中可見項目的數目。

<select></select>標誌對用來建立一個下拉列表框或能夠複選的列表框。此標誌對用於<form></form>標誌對之間。<select>具備multiple、name和size屬性。

multiple屬性不用賦值，直接加入標誌中便可使用，加入了此屬性後列表框就成爲可多選的了；name是此列表框的名字，它與上邊講的name屬性做用是同樣的；size屬性用來設置列表框的高度，默認時值爲1，若沒有設置multiple屬性，顯示的將是一個彈出式的列表框。

3．1．<option>

做用:元素定義下拉列表中的一個選項。

屬性:disabled:值(disabled)規定次選項應在首次加載時被禁用。

label:值(text)定義使用<optgroup>時所使用的標註。

selected:值(selected)規定選項表現爲選中狀態。

value:值(text)定義送往服務器的選項值。

<option>標誌用來指定列表框中的一個選項，它放在<select></select>標誌對之間。此標誌具備selected和value屬性：selected用來指定默認的選項；value屬性用來給<option>指定的那一個選項賦值，這個值是要傳送到服務器上的，服務器正是經過調用<select>區域的名字的value屬性來得到該區域選中的數據項的。

4．<textarea>„„</textarea>

做用:標籤訂義多行的文本輸入控件。

屬性:autofocus:值(autofocus)規定在頁面加載後文本區域自動得到焦點。

cols:值(number)規定文本區內的可見寬度。

disabled:值(disabled)規定禁用該文本區。

form:值(form_id)規定文本區域所屬的一個或多個表單。

maxlength:值(number)規定文本區域的最大字符數。

name:值(name_of_textarea)規定文本區的名稱。

placeholder:值(text)規定描述文本區域預期值的簡短提示。

readonly:值(readonly)規定文本區爲只讀。

rows:值(number)規定文本區域的可見行數。

<textarea></textarea>用來建立一個能夠輸入多行的文本框，此標誌對用於<form></form>標誌對之間。<textarea>具備name、cols和rows屬性。cols和rows屬性分別用來設置文本框的列數和行數，這裏列與行是以字符數爲單位的。

5．<button>

做用:標籤訂義一個按鈕。

屬性:disabled:值(disabled)規定應該禁用該按鈕。

form:值(form_name)規定按鈕屬於一個或多個表單。

name:值(button_name)規定按鈕的名稱。

type:值(button,reset,submit)規定按鈕的類型。

value:值(text)規定按鈕的初始值。

6．<optgroup>

做用:標籤訂義選項組。

屬性:label:值(text)爲選項組規定描述。

disabled:值(disabled)規定禁用該選項組。

7．表單域

{

　　單行文本域：<input type=」text」 />

　　密碼文本域：<input type=」password」 />

　　單選按鈕：<input type=」radio」 />

　　多選按鈕：<input type=」checkbox」 />

　　隱藏域：<input type=」hidden」 />

　　提交按鈕：<input type=」submit」 />

　　重置按鈕：<input type=」reset」 />

　　自定義按鈕：<input type=」button」 />

　　文件上傳：<input type=」file」/>

　　多行文本域：<textarea />

　　下拉列表域：<select />

}

9、其它標籤

1.<!– –>

做用:註釋標籤用於在源文檔中插入註釋。

屬性:沒有可選屬性。

2.<nav>

做用:標籤訂義導航連接的部分。

屬性:沒有可選屬性。

3.<audio>

做用:元素可以播放聲音文件或者音頻流。

屬性:autoplay:值(autoplay)若是出現該屬性，則音頻在就緒後立刻播放。

controls:值(controls)若是出現該屬性，則向用戶顯示控件，好比播放按鈕。

loop:值(loop)若是出現該屬性，則每當音頻結束時從新開始播放。

muted:值(muted)規定視頻輸出應該被靜音。

preload:值(preload)若是出現該屬性，則音頻在頁面加載時進行加載，並預備播放，若是使用」autoplay」,則忽略該屬性。

src:值(url)要播放的音頻URL。

4.<video>

做用:HTML5規定了一種經過video元素來包含視頻的標準方式。

屬性:autoplay:值(autoplay)若是出現該屬性，則視頻在就緒後立刻播放。

controls:值(controls)若是出現該屬性，則向用戶顯示控件，好比播放按鈕。

height:值(pixels)設置視頻播放器的高度。

loop:值(loop)若是出現該屬性，則當媒介文件完成播放後再次開始播放。

preload:值(preload)若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。若是使用」autoplay」,則忽略該屬性。

src:值(url)要播放的視頻的url。

width:值(pixels)設置視頻播放器的寬度。

5.<source>

做用:標籤爲媒介元素，定義媒介資源。

屬性:media:值(media query)規定媒體資源的類型。

src:值(url)規定媒體文件的URL。

type:值(numeric value)規定媒體資源的MIME類型。

第三章 WEB標準

     WEB標準不是某一個標準,而是一系列標準的集合。網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行爲(Behavior)。對應的標準也分三方面:結構化標準語言主要包括XHTML和XML,表現標準語言主要包括CSS,行爲標準主要包括對象模型(如W3C DOM)、ECMAScript等。這些標準大部分由W3C起草和發佈,也有一些是其餘標準組織制訂的標準,好比ECMA(European Computer Manufacturers Association)的ECMAScript標準。咱們來簡單瞭解一下這些標準:

1.結構標準語言
(1)XML
    XML是The Extensible Markup Language(可擴展標識語言)的簡寫。目前推薦遵循的是W3C於2000年10月6日發佈的XML1.0,參考(www.w3.org/TR/2000/REC-XML-20001006)。和HTML同樣,XML一樣來源於SGML,但XML是一種能定義其餘語言的語。XML最初設計的目的是彌補HTML的不足,以強大的擴展性知足網絡信息發佈的須要,後來逐漸用於網絡數據的轉換和描述。關於XML的好處和技術規範細節這裏就很少說了,網上有不少資料,也有不少書籍能夠參考。

(2)XHTML
    XHTML是The Extensible HyperText Markup Language可擴展標識語言的縮寫。目前推薦遵循的是W3C於2000年1月26日推薦XML1.0(參考http://www.w3.org/TR/xhtml1)。XML雖然數據轉換能力強大,徹底能夠替代HTML,但面對成千上萬已有的站點,直接採用XML還爲時過早。所以,咱們在HTML4.0的基礎上,用XML的規則對其進行擴展,獲得了XHTML。簡單的說,創建XHTML的目的就是實現HTML向XML的過渡。

2. 表現標準語言
    CSS是Cascading Style Sheets層疊樣式表的縮寫。目前推薦遵循的是W3C於1998年5月12日推薦CSS2(參考http://www.w3.org/TR/CSS2/)。W3C建立CSS標準的目的是以CSS取代HTML表格式佈局、幀和其餘表現的語言。純CSS佈局與結構式XHTML相結合能幫助設計師分離外觀與結構,使站點的訪問及維護更加容易。

3.行爲標準
(1)DOM
    DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規範(http://www.w3.org/DOM/),DOM是一種與瀏覽器,平臺,語言的接口,使得你能夠訪問頁面其餘的標準組件。簡單理解,DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的衝突,給予web設計師和開發者一個標準的方法,讓他們來訪問他們站點中的數據、腳本和表現層對像。

(2) ECMAScript
    ECMAScript是ECMA(European Computer Manufacturers Association)制定的標準腳本語言(JAVAScript)。目前推薦遵循的是ECMAScript 262(http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM)。

這些技巧主要講meta標籤設置的,其實與符合web標準關係不大,只要注意在最後加"/"關閉標籤就能夠,可是既然是入門教程,就寫得詳細一點吧。
收藏夾小圖標
    首先製做一個16x16的icon圖標,命名爲favicon.ico,放在根目錄下。而後將下面的代碼嵌入head區:
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
爲搜索引擎準備的內容
    代碼以下,替換成你本身站點的內容就能夠: 容許搜索機器人搜索站內全部連接。若是你想某些頁面不被搜索,推薦採用robots.txt方法 :<meta content="all" name="robots" />
設置站點做者信息: <meta name="author" content=" aliyunzixun@xxx.com,阿捷" />
設置站點版權信息 ：<meta name="Copyright" content="www.yzci.com,自由版權,任意轉載" />
站點的簡要介紹(推薦)
<meta name="description" content="新網頁設計師。web標準的教程站點,推進web標準在中國的應用" />
站點的關鍵詞(推薦)
<meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />

第四章CSS屬性大全

1、CSS 屬性:字體樣式(Font Style)
序號中文說明標記語法
1.字體樣式 {font:font-style font-variant font-weight font-size font-family}
2.字體類型 {font-family:"字體1","字體2","字體3",...}
3.字體大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4.字體風格 {font-style:inherit|italic|normal|oblique}
5.字體粗細 {font-weight:100-900|bold|bolder|lighter|normal;}
6.字體顏色 {color:數值;}
7.陰影顏色 {text-shadow:16位色值}
8.字體行高 {line-height:數值|inherit|normal;}
9.字間距 {letter-spacing:數值|inherit|normal}
10.單詞間距 {word-spacing:數值|inherit|normal}
11.字體變形 {font-variant:inherit|normal|small-cps }
12.英文轉換 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13.字體變形 {font-size-adjust:inherit|none}
14.字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

2、文本樣式(Text Style)
序號中文說明標記語法
1.行間距 {line-height:數值|inherit|normal;}
2.文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}
3.段首空格 {text-indent:數值|inherit}
4.水平對齊 {text-align:left|right|center|justify}
5.垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6.書寫方式 {writing-mode:lr-tb|tb-rl}

3、背景樣式（background）
序號中文說明標記語法
1.背景顏色 {background-color:數值}
2.背景圖片 {background-image: url(URL)|none}
3.背景重複 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4.背景固定 {background-attachment:fixed|scroll}
5.背景定位 {background-position:數值|top|bottom|left|right|center}
6.背影樣式 {background:背景顏色|背景圖象|背景重複|背景附件|背景位置}

4、框架樣式(Box Style)
序號中文說明標記語法
1.邊界留白 {margin:margin-top margin-right margin-bottom margin-left}
2.補白 {padding:padding-top padding-right padding-bottom padding-left}
3.邊框寬度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}
寬度值: thin|medium|thick|數值
4.邊框顏色 {border-color:數值數值數值數值} 數值:分別表明top、right、bottom、left顏色值
5.邊框風格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6.邊框 {border:border-width border-style color}
上邊框 {border-top:border-top-width border-style color}
右邊框 {border-right:border-right-width border-style color}
下邊框 {border-bottom:border-bottom-width border-style color}
左邊框 {border-left:border-left-width border-style color}
7.寬度 {width:長度|百分比| auto}
8.高度 {height:數值|auto}
9.漂浮 {float:left|right|none}
10.清除 {clear:none|left|right|both}

5、分類列表（list）
序號中文說明標記語法
1.控制顯示 {display:none|block|inline|list-item}
2.控制空白 {white-space:normal|pre|nowarp}
3.符號列表

{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4.圖形列表 {list-style-image:URL}
5.位置列表 {list-style-position:inside|outside}
6.目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}
7.鼠標形狀

{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

第五章網頁理論

1、瀏覽器訪問網頁原理

1.當咱們利用瀏覽器訪問網頁時，有真是的物理文件傳輸。瀏覽器先將網頁上的內容存儲到本地文件夾中，再渲染出來呈現用戶查看。

2.第二次訪問網頁較快。

3.緩存文件夾中除了圖片以外，還緩存了.js,.css.html等文件。即網頁越複雜，組成網頁的文件就越多。

2、瀏覽器請求數據的過程

瀏覽器發送網址（請求報文）給服務器--》服務器處理完畢返回一個（響應報文）給瀏覽器。而後由瀏覽器進行解析後呈現給用戶。

請求報文=請求行+請求頭+空行+請求體 requet

響應報文=響應行+響應頭+響應體 response

3、什麼是URL

咱們在地址欄輸入的地址就是一個URL。

URL格式：

http://127.0.0.1/index.html(瀏覽器會自動添加：80)

http://127.0.0.1:80/index.html（完整的格式）

URL拆分：

http:// 127.0.0.1 :80 URL（http://）協議類型；（127.0.0.1）服務器IP地址；（：80）至關於生活中的地址，服務器的端口號，生活的門牌號碼

index.html 須要訪問的資源名稱

服務器ip地址和端口號的做用是告訴瀏覽器咱們須要訪問的那臺服務器的詳細地址是什麼。

index.html做用：當咱們經過IP地址和端口號找到對應的服務器以後，須要經過資源名稱告訴服務器，咱們須要獲取服務器上的哪一個資源

4、網絡協議http

http協議是 HyperText Transfer Protocol超文本傳輸協議

什麼是協議？

現實生活中有不少協議：像買賣，租房，共同點就是約束某一類事物。

http協議就是用來規範哪類事物呢？

假設兩個不一樣國家的人溝通而且不會說彼此的語言，解決辦法找翻譯。就是規範瀏覽器和服務器之間規定，二者都遵循這個規定

5、HTML做用

用來描述文本的語義的。這些用於描述其餘文本語義的文本，咱們稱之爲標籤。而且這些描述其餘文本語義‘，的標籤是不會被顯示出來的。咱們稱這些文本爲」超文本「，而這些文本又叫作標籤，因此HTML被稱之爲」超文本標記語言「

注意事項：雖然咱們利用<h1>描述一段文本後，這段文本在瀏覽器中顯示出來會被放大和加粗，看上去咱們是利用HTML的標籤修改了被描述的那段文本的樣式，但HTML的做用只有一個，它專門用來給文本添加語義的（添加了讓他變成標題的語義（自動擴大加粗）），而不是用來修改文本的樣式的。

6、HTML 執行原理

1.輸入網址的信息到瀏覽器

2.瀏覽器提交網址信息到服務器：以請求報文的形式傳遞數據信息

3.服務器查找信息

4.把查找的信息以HTML文件提交給瀏覽器

5.覽器解析收到的標籤信息，並依據標籤信息作相應的動做（請求IMG資源等）顯示信息到客戶端瀏覽器

當頁面發生變化是須要從新渲染(reflow) 或者重繪(rePaint) 操做，通常狀況下,重繪比從新渲染節約時間。reflow問題是能夠優化的：好比載入一個圖片時，能夠設置寬度和高度，這樣瀏覽器就知道預留空間，從而節約速度。只要不改變佈局，就會引發重繪操做，相對應，改變頁面的佈局就會產生從新渲染的操做。

HTML基礎教程

6、HTML 執行原理