確定風(fēng)格、功能（論壇、留言板、支付、用戶登錄等）。

美工制作網(wǎng)頁效果圖（首頁、列表頁、內(nèi)容頁）。

制作人員切圖排版，排成網(wǎng)頁形式。

后臺程序開始寫程序。

前臺與后臺結(jié)合。

!——注釋內(nèi)容——

注意：注釋只是為了以后維護(hù)用。

 ul li 內(nèi)容 /li li 內(nèi)容 /li li 內(nèi)容 /li /ul 

ul 或 li 的常用屬性

l Type：項(xiàng)目符號的類型，取值：disc（小黑點(diǎn)）、circle（圓圈）、square（實(shí)心方塊）

 ol li 內(nèi)容 /li li 內(nèi)容 /li li 內(nèi)容 /li /ol 

ol 或 li 的常用屬性

Type：編號類型，取值：1、a、A、i、I

Start：從第幾個(gè)開始編號

 marquee 內(nèi)容…..  /marquee 

常用屬性

Direction：滾動方向，取值：up、down、left、right

Width：滾動寬度

Height：滾動高度

BgColor：滾動背景色

ScrollAmount：滾動步長值

ScrollDelay：兩步之間的停留值

Loop：循環(huán)滾動次數(shù)

語法格式： img 屬性=“值”

常用屬性：

Width：圖片寬度。

Height：圖片高度。

Border：圖片的邊框。

Src：圖片的路徑。

Align：left、center、right。（可以實(shí)現(xiàn)圖文混排效果）

Hspace：圖片與文字左右間距。

Vspace：圖片與文字上下間距。

語法格式： a 屬性=“值” 內(nèi)容 /a

常用屬性：

Href：目標(biāo)文件地址URL。

Target：打開方式。 _blank：新窗口、_self：本窗口、_parent:上個(gè)窗口打開、top：最頂級窗口打開。

Name：定義描點(diǎn)名稱。

mailto

#空鏈接。

Js連接： a href=”javascript:window.close()”

表示方法三種：

顏色單詞：blue、green、red、yellow。

10進(jìn)制表示：rgb（255，0，0）

16進(jìn)制表示#FF0000（紅）、#00FF00（綠）、#0000FF(藍(lán))

含義：錨點(diǎn)鏈接，是在一個(gè)網(wǎng)頁的不同區(qū)域進(jìn)行跳轉(zhuǎn)

定義錨點(diǎn)（做記號）： a name=”錨點(diǎn)名稱” /a

例如： a name=”top2” /a

跳轉(zhuǎn)到錨點(diǎn)（記號）：

語法： a href=”#錨點(diǎn)名稱” 內(nèi)容….. /a

作用：提供網(wǎng)頁的元信息。指定網(wǎng)頁的搜索關(guān)鍵詞。

meta 標(biāo)記有兩個(gè)屬性：http-equiv和name

1、 http-equiv屬性

功能：模擬http協(xié)議文件頭信息，告訴瀏覽器怎么打開網(wǎng)頁。

http-equiv屬性一般與content屬性配合使用。Content屬性指定信息的詳細(xì)屬性

設(shè)置網(wǎng)頁的字符集： meta http-equiv=”contengt-type” content=”text/html;charset=utf-8”/

網(wǎng)頁自動刷新： meta http-equiv=”refresh”content=”2” meta http-equiv=”refresh”content=”2;url=”

2、 name屬性

設(shè)置網(wǎng)頁的搜索關(guān)鍵詞、版權(quán)信息、作者等。

（1） 設(shè)置網(wǎng)頁搜索關(guān)鍵詞

meta name=”keywords” content=”網(wǎng)站建設(shè)，企業(yè)網(wǎng)站建設(shè)，網(wǎng)站制作，網(wǎng)上商城”/

（2） 設(shè)置網(wǎng)頁描述信息

meta name=”description” content=”飛虎是否健康空間給你那個(gè)你的手機(jī)功能即可給你個(gè)開朗少女攻堅(jiān)克難暖色開發(fā)功能”

l 所有標(biāo)記和屬性全部小寫

l 單邊標(biāo)記必須關(guān)閉。如： br ----- br/

l 所有的屬性值都必須加引號。

l 所有屬性都必須有值。如： hr noshade --- hr noshade=”noshade”/

l 標(biāo)機(jī)之間要順序嵌套，外層套內(nèi)層。

l Xhtml網(wǎng)頁必須有DTD文檔類型定義代碼

DTD文檔類型定義

三大類型：

（1）結(jié)構(gòu)：(一行四列)

 table border=“1” tr td nbsp; /td td nbsp; /td td nbsp; /td td nbsp;/td /tr /table 

（2）border屬性：

Width：寬度

Height：高度

Border：邊框

Bordercolor：邊框顏色

Bgcolor：表格背景色

Background：背景圖片

Cellpadding：單元格與內(nèi)容距離

Cellspacing：單元格與單元格距離

Rules：合并邊框線，取值：all

（3） tr屬性：

bgcolor

align

height：水平：left、center、right

valign：垂直：top、middle、bpttom

（4） td屬性：

colspan：合并單元格（左右）

rowspan：合并單元格（上下）

background

width

height

bgcolor

align

valign

（1）結(jié)構(gòu)：

 form name=”form1” method=“get” action=“l(fā)ogin.php” 用戶名： input type=”text” name=”username”/ 密碼： input type=”password” name=”userpwd”/ input type=”submit” value=”提交表單”/ /form 

（2） form 標(biāo)記屬性----塊元素

name

method:提交方式 get、post

action：指定表單的處理程序，一般是PHP文件

enctype：指定表單數(shù)據(jù)的編碼方式。只能在method=post情況下。

application/x-www-form-urldecoded //默認(rèn)加密方式

multipart/form-data //上傳文件，值是他自己

（3）get和post方法

Get提交方式：將表單數(shù)據(jù)追加到action指定的處理程序的后面，然后向服務(wù)器發(fā)出請求。不安全

如果某個(gè)表單元素，不想往服務(wù)器傳遞數(shù)據(jù)，那么，name可以不用寫。

POST提交方式：POST提交的數(shù)據(jù)相對安全，可以提交海量數(shù)據(jù)，可以上傳附件。

語法格式： input type=”text” 屬性=“值”

屬性：

name：文本框的名字

Type：表單元素類型

Value：文本框的值

Size：文本框的長度

Maxlength：最多可以輸入多少個(gè)字符。

Readonly：只讀屬性。可以選中，但不能修改。Readonly=“readonly”

Disabled：禁用屬性 同上。

語法格式： input type=”password” name=”userpwd”

屬性：

name：文本框的名字

Type：表單元素類型

Value：文本框的值

Size：文本框的長度

Maxlength：最多可以輸入多少個(gè)字符。

Readonly：只讀屬性。可以選中，但不能修改。Readonly=“readonly”

Disabled：禁用屬性 同上。

語法格式: input type=”radio” name=”sex” value=“男”/ 男

input type=”radio” name=”sex” value=“女”/ 女

屬性：

name：元素名稱

Checked：默認(rèn)選擇checked=“checked”

Value：值

語法格式： input type=”checkbox” name=”like” value=”游戲”/ 游戲

input type=”checkbox” name=”like” value=”殺人”/ 殺人

input type=”checkbox” name=”like” value=”放火”/ 放火

屬性：

name：元素名稱

Checked：默認(rèn)選擇checked=“checked”

Value：值

語法格式：

 select name=”” option value=”北京” 北京 /option option value=”天津” 天津 /option option value=”重慶” 重慶 /option /select 

selectd ：只有一個(gè)name屬性。

ption ：兩個(gè)屬性value、selected

Selected：默認(rèn)選中

層疊樣式表方式改下拉列表寬度：type=”width:100px”

語法格式： textarea name=”名稱” cols=“寬度” rows=“高度” /textarea

屬性：

name：元素名稱

Cols：寬度

Rows：高度

提交按鈕 input type=”submit” value=”提交”/

重置按鈕 input type=”reset” value=“重置”/

圖片按鈕 input type=”image” src=”images/123.jpg”/

普通按鈕 input “button” javascript:window.close()” value=”關(guān)閉窗口”

普通按鈕本身不具備任何功能，需與js配合使用。

語法格式： input type=”file” 屬性=“屬性”/

屬性：

Name：名稱

Value：上傳文件名。Value屬性是只讀屬性，

input type=”file” name=”uploadfile”/ 必須與 form name=”form1” method=”post” action=”login.php” enctype=”multipart/form-data” 配合實(shí)現(xiàn)才能上傳

功能：看不見的框。傳遞一些值，而又不想讓別人看到。主要用于php后臺。如id號。

語法格式： input type=”hidden” name=”id” value=”1263”

語法格式： caption /caption

caption 是 table 的子標(biāo)記。 caption 放在 table 的后面。

網(wǎng)頁視頻一般是flash格式，flash比較小、兼容性好，適合網(wǎng)站播放。

圖片熱點(diǎn)

圖片熱點(diǎn)：給一張圖片加多個(gè)熱點(diǎn)。

語法結(jié)構(gòu)：

 ing src=”inmages/01.jpg” usemap=”#Map”/ map id=”Map” area shap=”熱區(qū)形狀” cords=”熱區(qū)坐標(biāo)” href=”鏈接地址” / area shap=”熱區(qū)形狀” cords=”熱區(qū)坐標(biāo)” href=”鏈接地址” / area shap=”熱區(qū)形狀” cords=”熱區(qū)坐標(biāo)” href=”鏈接地址” / /map 

area 標(biāo)記常用屬性：

Shape：熱區(qū)的形狀，取值：rect（矩形）、circle（圓）、polygon（多邊形）

Coords：熱區(qū)的坐標(biāo)

如果shap=rect時(shí)，那么，coords=“x1,y1,x2,y2”列如：coords=”50,20,200,150”

（x1,y1）為左上角坐標(biāo)，（x2，y2）為右下角坐標(biāo)。

如果shap=circle時(shí)，那么，coords=“x,y,r”,其中（x，y）圓心坐標(biāo)，r為半徑。

框架集和框架頁：

框架集： frameset /frameset :主要用來劃分窗口。

框架頁： frame :主要用來指定默認(rèn)顯示的網(wǎng)頁地址。

frameset 屬性：

Cols:劃分左右型框架。

Cols=”200,*” 左邊為寬度200px，剩下的為右邊。

Cols=”180,*,180” 左右框架為180px，剩下的為中間框架

Rows：劃分上下型框架

Rows=”200,*” 上框架高度為200px，剩下的為下框架。

Frameborder：是否顯示邊框線，取值0或1.

Border：邊框粗細(xì)。

Bordercolor：邊框顏色。

frame 框架頁的屬性 ：

Src：該小窗口中，默認(rèn)顯示的網(wǎng)頁地址。

Noresize：不能調(diào)整大小。Noresize=”noresize”

Scrolling:是否顯示滾動條，取值：auto、yes、no

Name：給當(dāng)前小窗口起個(gè)名字。這個(gè)name就是給 a 標(biāo)記target屬性來用的。

noframes 含義：當(dāng)瀏覽器不支持框架時(shí)，會提示信息。低版本不支持。高版本都支持。

語法格式： noframes 內(nèi)容 /noframes

與普通框架區(qū)別： iframe 是 body 的子標(biāo)記，因此，放在 body 中。

語法格式： iframe 屬性=“值” 對不起，您的瀏覽器版本過低 /iframe

常用屬性：

Src：引入文件地址。

Width：寬度

Height：高度

Frameborder：是否顯示框架的邊框線，取值：yes或no。

Scrolling：是否顯示滾動條。取值：yes、no、auto。

Name：制定小窗口的名稱，改名稱也是給 a 標(biāo)記的target屬性來用。

Align：框架在網(wǎng)頁中對齊方式，取值：left、center、right。

CSS 層疊樣式表。

CSS的主要目的：是給html標(biāo)記添加各種各樣的表現(xiàn)（表格、樣式）。比如：文字樣式、背景、文本樣式、連接樣式。

語法格式：

 style type=”text/css” h1{Color:red; //文本顏色Text-align:center; //對齊方式Border:1px solid #444; //半框樣式Background-color:#ffff00; //背景色} /style 

基本選擇器

(1) “*”選擇器：通配符

描述：將匹配所有的html標(biāo)記，所有標(biāo)記都會改變。

語法：*{color：red；}

（2）標(biāo)簽選擇器

描述：將匹配指定的html標(biāo)記

語法：h1{color：red；}

（3）class選擇器（類選擇器）-----使用最多的選擇器

描述：給一類html標(biāo)記加樣式。這里所指的“一類”是：每個(gè)html標(biāo)記都有的一個(gè)class屬性，且class的一樣。Class屬性是公共屬性，每個(gè)html標(biāo)記都有。

格式： style type=”text/css”

.myClass{Color:red;Background-color:yellow;} /style h1 >
 
 （4）id選擇器
 描述：給指定id的元素添加樣式
 注意：網(wǎng)頁中html標(biāo)記的id屬性的值，必須是唯一的。
style type=”text/css” #myId{Color=red;Background-color:yellow;} /style p id=”myId” /p 
 
組合選擇器
（1）多元素選擇器
 描述：給多個(gè)元素加同一個(gè)樣式，多個(gè)選擇器之間用逗號分開。
 格式：h1,p,div,.p1{ background：red； }
（2）后代元素選擇器(最常用)
 描述：給某個(gè)標(biāo)簽的某一個(gè)后代元素加樣式。選擇器之間用“空格”隔開。
 格式： style type=”text/css” 
 div h1.title{ color:red; }
 Div p.title{ color:yellow; }
 /style 
 div 
 h1 >
 p >
 /div 
（3）子元素選擇器
 描述：給某個(gè)元素的子元素添加樣式
CSS尺寸屬性
 Width：元素寬度，一定要加px單位。
 Height：元素高度。
CSS字體屬性
 Font-size：文字大小。如：font-size：14px；
 Font-family：字體。如：font-family：微軟雅黑；
 Font-style：斜體，取值：italic。如：font-style：italic；
 Font-weight：粗體，取值：bold。如：font-weight：bold；
CSS文本屬性
 Color：文本顏色
 Text-decoration：文本修飾線，取值：none（無）、underline（下劃線）、overline（上劃線）、line-through（刪除線）
 Text-align：文本水平對齊方式，取值：left、center、right
 Line-height：行高，可以固定值，也可以百分比、如：line-height：24px；line-height：150%；
 Text-indent：首行縮進(jìn)。Text-indent：28px；
 Letter-spacing：字間距。
偽類選擇器
一個(gè)超鏈接，有四個(gè)狀態(tài)
 正常狀態(tài)（：link）：鼠標(biāo)沒放上之前鏈接的樣式。
 放上狀態(tài)（：hover）：鼠標(biāo)放到鏈接上時(shí)的樣式。
 激活狀態(tài)（：action）：按住鼠標(biāo)左鍵不松開的樣式。
 訪問過的狀態(tài)（：visited）：按下鼠標(biāo)左鍵，并彈起，這時(shí)的樣式。
在平時(shí)的工作中，會使用以下寫法，來給鏈接加樣式：
A:link,a:visited{ color:#444;text-decoration:none; } //將“正常狀態(tài)”和“訪問過的狀態(tài)”合二為一。
A:hover{ color:#990000;text-decoration:underline; } //”鼠標(biāo)放上” 單做一種效果
CSS列表屬性
List-style：列表樣式，取值：none。去掉項(xiàng)目符號或編號前面的各種符號。
 style type:”text/css” 
 ul,ui{ list-style:none; /*去掉項(xiàng)目符號前面的符號*/ }
 /style 
 ul 
 li 北京市 /li 
 li 東營市 /li 
 li 上海市 /li 
 li 深圳市 /li 
 /ul 
CSS邊框?qū)傩裕好總€(gè)元素都可以加邊框線
 Border-left：左邊框線。
 格式：border-left：粗細(xì) 線型 線的顏色
 線型：none、solid、dashed（虛線）、dotted（點(diǎn)狀線）
 舉例：border-left：5px dashed red；
 Border-right：右邊框線。
 Border-top：上邊框線。
 Border-bottom：下邊框線。
 Border：同時(shí)給四個(gè)邊加邊框線。
CSS內(nèi)邊距屬性：邊框線到內(nèi)容的填充
注意：平時(shí)我們所說的width和height屬性，他們指內(nèi)容的寬度和高度，不含內(nèi)、外邊距、邊框線。
 Padding-left：左內(nèi)填充距離，右邊線到內(nèi)容間的距離。
 Padding-right：右內(nèi)填充距離。同上
 Padding-top：上。
 Paddingbottom：下。
 縮寫形式
 Padding:10px; //四個(gè)邊的內(nèi)填充分別為10px；
 Padding：10px 20px; //上下為10px；左右為20px；
 Padding：5px 10px 20px; //上為5px，左右為10px，下為20px；
 Padding：20px 10px 5px 20px; //順序?yàn)樯嫌蚁伦螅?/p>CSS外邊距屬性：邊線往外的距離
 Margin-left：左邊線往外的距離
 Margin-right：右……
 Margin-top：上…….
 Margin-bottom：下…….
 簡寫式：
 Margin：10px； //四個(gè)外邊距分別為10px。
 Margin：10px 20px； //上下外邊距為10px，左右外邊距為20px。
 Margin：10px 20px 50px； //上外邊距為10px，左右為20px，下為50px。
 Margin：10px 20px 30px 40px； //順序?yàn)樯嫌蚁伦蟆?/p>CSS背景屬性
 Background-color:背景顏色。
 Background-image:背景圖片地址。 Background-image:url(image/banner.jpg)
以上就是分享一個(gè)HTML的學(xué)習(xí)之路的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。