靜態(tài)web開發(fā)和案例html

1、HTML基礎如鵬網課程大綱理解什么是HTML了解HTML的發(fā)展史掌握HTML編程規(guī)范掌握HTML常用標簽HTML基本介紹HTML(Hyper Text Markup Language)-超文本標記語言-由瀏覽器解釋執(zhí)行-編寫的超文本文檔稱為網頁XHTML-HTML升級到XML的過渡產品-完全兼容HTML4.01-并且具有XML的語法HTML標簽規(guī)范HTML是通過標簽來定義的語言，代碼都是由標簽組成。HTML代碼不區(qū)分大小寫。HTML代碼由開始結束，里面有頭部分和體部分兩部分組成。頭部分是給HTML頁面增加一些輔助或屬性信息，它里面的內容會最先加載。體部分是真正存放頁面數據的地方。多數標簽都是開

2、始標簽和結束標簽，其中個別標簽只有單一功能，或者沒有要修飾的內容，可以在開始標簽內以 / 結束。想要對被標簽修飾內容進行更豐富的操作，就用到標簽中的屬性，通過對屬性值的改變，增加了更多的效果選擇。 格式：數據內容HTML開發(fā)工具可以使用專業(yè)的 HTML 編輯器來編輯 HTML：Adobe DreamweaverMicrosoft Expression WebCoffeeCup HTML Editor不過對于初學者，我們推薦使用文本編輯器來學習 HTML，比如Editplus，Notepad+HTML常用標簽-字體字體標簽 例：HTML字體標簽,常見屬性size color，還有其它屬性，比如：

3、face標題標簽 .特殊字符如果要在網頁上顯示一些特殊符號，比如 & 等。因為這些符號在代碼中會被瀏覽器識別并解釋，所以用一些特殊的方式來表示。&列表標簽(1)無序列表 游戲 部門注：ul中 type 屬性有三個值 circle|disc|square ，用于規(guī)定列表的項目符號，但不贊成使用。有序列表 游戲 部門注：ol中 type 屬性同樣不贊成使用。如果想做出效果更好的列表，如：黑色圓點用圖片表示，就用到CSS。列表標簽(2)定義列表（definition list） 游戲 穿越火線英雄聯盟 部門 研發(fā)部門銷售部門 圖像標簽圖像標簽 例：src：圖像URL地址；border用來設置圖像的邊

4、框；alt:用來為圖像定義一串預備的可替換的文本,不能超過1024字符。表格標簽(1)表格標簽 用于格式化數據。例： 標題 姓名 年齡 張三20 李四25 表格標簽(2)常用屬性border：框線粗細 0代表無width：寬度 接收整數值、百分數cellpadding：單元格內容與邊框的距離cellspacing：單元格與相鄰單元格之間的距離常用屬性colspan：合并同行單元格rowspan：合并同列單元格表格標簽(3)每個表格可以有一個表頭、一個表尾和一個或多個表體 （即正文）THEADTBODYTFOOTTBODY 可以控制表格分行下載，從而提高下載速度（網頁的打開是先表格的的內容全部下

5、載完畢后，才顯示出來，分行下載可以先顯示部分內容，這樣會減少用戶等待時間）。超鏈接標簽(1)超鏈接標簽 超鏈接(Hyperlink)可以看做是一個“熱點”，它可以從當前Web頁定義的位置跳轉到其他位置，包括當前頁的某個位置、Internet、本地硬盤或局域網上的其他文件，甚至跳轉到聲音、圖片等多媒體文件。瀏覽Web頁是超鏈接最普遍的一種應用，通過超鏈接還可以獲得不同形態(tài)的服務，如文件傳輸、資料查詢、電子函件、遠程訪問等等,通過超鏈接實現這些功能就會很方便。超鏈接標簽(2)用法一：超鏈接 網易href：要打開資源的路徑，可以是URL，也可以是本地文件。target：指定在哪個窗口或者幀中打開。有

6、四個值：_blank：在一個新開的空白窗口中打開鏈接_parent：在父級窗口中打開_self：在自身頁面中打開鏈接（默認）_top：在整個瀏覽器的最頂端(前端)開始打開鏈接超鏈接標簽(3)用法二：定位標記 鏈接到同一文檔中的特定位置叫做定位標記（錨鏈接）。一般在本頁面中使用，當網頁內容過長，定位標記會比拖動滾動條方便快捷。注：定位標記要和超鏈接結合使用才有效。示例：標記位置.返回標記位置注釋：使用定位標記時一定在href值的開始加入#標記名超鏈接標簽(4)例圖：回頂端定位標記點HTML常用標簽-框架所謂框架便是網頁畫面分成幾個框窗，框窗里可以集成很多Url(鏈接地址),方便用戶瀏覽,查看.特

7、別是早期的公司門戶網站基本都是這種frame框架。HTML常用標簽-框架 框架標記，用以劃分框窗框窗標記，設定一個框窗所有框架標記要放在一個總起的 html 檔，這個檔案只記錄了該框架 如何劃分，不會顯示任何資料，所以不必放入 標記。HTML常用標簽-框架常用屬性COLS=20%,*：垂直切割畫面(如分左右兩個畫面)，接受整數值、百分數，* 則代表占用余下空間。數值的個數代表分成的視窗數目且以逗號分隔。ROWS=120,*：就是橫向切割，將畫面上下分開，數值設定同上。frameborder=0：設定框架的邊框，其值只有 0 和 1 ，0 表示不要邊框，1 表示要顯示邊框。border=0：設定

8、框架的邊框厚度，以 pixels 為單位。bordercolor=#999：設定框架的邊框顏色。framespacing=5 ：表示框架與框架間的保留空白的距離。HTML常用標簽-框架常用屬性src=top.html：設定此框窗中要顯示的網頁檔案名稱，每個框窗一定要對應著一個網頁檔案。name=top：設定這個框窗的名稱，這樣才能指定框架來作連結，必須但任意命名。scrolling=auto：設定是否要顯示卷軸，YES 表示要顯示卷軸，NO 表示無論如何都不要顯示，AUTO是視情況顯示。noresize：設定不讓使用者可以改變這個框框的大小，亦沒有設定此參數，使用者可以很隨意地拉動框架，改變其

9、大小。HTML常用標簽-框架當使用的瀏覽器太舊，不支援框架這個功能時，他看到的將會是一片空白。為了避免這種情況，可使用 這個標記，當使用者的瀏覽器看不到框架時，他就會看到 與 之間的提示內容，而不是一片空白。 很抱歉，您使用的瀏覽器不支持框架功能，請轉用新的瀏覽器。 HTML常用標簽-框架它的作用是在一頁網頁中間插入一個框窗以顯示另一個鏈接資源。它是一個圍堵標記，但圍著的字句只有在瀏覽器不支持 iframe 標記時才會顯示。 如果您看到該文字，說明您的瀏覽器不支持IFRAME標簽。 HTML語法-表單表單 表單標簽是最常用的標簽，主要用于采集和提交用戶輸入的信息，與服務器端進行交互。HTML語

10、法-表單標簽：接受用戶輸入信息type標簽指定輸入標簽的類型，共有10個值：文本框text、密碼框password、單選框radio、復選框checkbox、隱藏字段hidden、提交按鈕submit、重置按鈕reset、按鈕button、文件上傳file、圖像image.標簽：定義一個選擇列表北京鄭州注：定義下拉列表中的選項，屬性 selected 沒有屬性值加在其中一個子項上，該子項就變成默認被選中項。HTML語法-表單標簽：多行文本框 cols 和 rows 屬性來規(guī)定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。標簽：MaleFema

11、lelabel 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發(fā)此控件。for的屬性值指向綁定表單元素的 id 值。塊元素大多數 HTML 元素被定義為塊級元素或內聯元素。-塊級元素塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。例子：, , , -內聯元素內聯元素在顯示時通常不會以新行開始。例子：, , , DIVHTML DIV 是塊級元素，它是可用于組合其他HTML元素的容器。DIV元素沒有特定的含義。與CSS一起使用，可用于對大的內容快設置樣式屬性。元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 元素進行文檔布局不是表格的正確用法。 元素的作用是顯示表格化的數據。SPANHTML 元素是內聯元素，可用作文本的容器。 元素也沒有特定的含義，當與 CSS 一同使用時，可用于為部分文本設置樣式屬性。HTML語法-頭標簽title：指定瀏覽器標題欄顯示的內容base：標簽為頁面上的所有鏈接規(guī)定默認地址或默認目標href屬性：規(guī)定頁面中所有