1.第壹步:打開記事本:開始，單擊所有程序，然後單擊附件，然後打開記事本。
2.第二步，在記事本中編輯HTML語言，如下圖所示:
3.第三步:保存HTML:在記事本的文件菜單中選擇“另存為”。當妳保存壹個HTML文件時，妳可以使用。htm或者。html擴展。
4.第四步:在瀏覽器中運行這個HTML文件:啟動瀏覽器，選擇“文件”菜單上的“打開文件”命令，或者雙擊文件夾中的HTML文件。結果應該是這樣的:
這樣，壹個簡單的網頁就變成了。
：
HypertextMarkupLanguage，中文也是超文本鏈接標記語言。HTML(HyperTextMark-upLanguage)，即超文本標記語言，是WWW的描述語言。設計HTML語言的目的是將存儲在壹臺計算機中的文本或圖形與存儲在另壹臺計算機中的文本或圖形連接起來，形成壹個有機的整體。人們不必考慮具體信息是在當前計算機上還是在網絡上的其他計算機上。我們只需要用鼠標點擊文檔中的壹個圖標，互聯網就會立即轉到與這個圖標相關的內容，這些內容可能存儲在網絡上的另壹臺計算機中。HTML文本是由HTML命令組成的描述性文本，可以解釋文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭和體兩部分，其中頭描述瀏覽器需要的信息，體包含要說明的具體內容。
關於html頁面制作的網頁:
總體思路:
先布局再CSS控制。
建立骨架，初始化樣式，
然後做CSS風格。註意:將CSS樣式導入外部樣式表時，請註意圖片的位置，以及
外部樣式表介紹
1，頭部背景圖片的高度128px來自素材的圖片高度，容器的寬度也來自圖片。
這裏的背景圖有意思嗎？不設置效果也壹樣！！
2、圖片的位置:當妳在寫頁面代碼的時候，有壹些圖片路徑，那麽
首先，區分哪些是同級目錄文件。
我現在在操作主頁。html，其中包含圖片1的路徑。從上面，我們可以看到，主頁。html和img文件夾是同壹級別的目錄，所以路徑應該寫成IMG/1.jpg
翻譯
& lt！DOCTYPEhtml & gt
& lthtml & gt
& lthead & gt
& lt元字符集="UTF-8 " >
& lttitle & gt& lt/title & gt；
& ltstyletype="text/css " >
#容器{
寬度:1002 px；
背景色:灰色；
}
#header{
身高:120 px；
背景色:_ quamarine
}
#main{
高度:600px
背景:_ arkgoldenrod
}
#頁腳{
身高:120 px；
背景:_ ellowgreen
}
#main-left{
float:_ eft；
背景:_ ellow
寬度:700px
身高:100%；
}
#主-右{
float:_ right；
背景:_墨水；
寬度:302px
身高:100%；
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& ltdivid = " container " & gt
& ltdivid = " header " & gt& lt/div & gt；
& ltdivid = " main " & gt
& ltdivid="main-left " >& lt/div & gt；
& ltdivid="main-right " >& lt/div & gt；
& lt/div & gt；
& ltdivid="footer">。& lt/div & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；
註意:這裏，對於id為main的div中的子div，
main-left和main-right設置浮動樣式時，要設置寬度和高度否則不起作用(設置單壹寬度或高度不起作用，這裏的背景色只是父div的背景色)。可能的原因是div中沒有內容，沒有長度和寬度，自然不會顯示背景色。
3.當壹個div包含兩個左右浮動div，後跟壹個普通div時。
& ltdivid = " main " & gt
& ltdivid="lside " >
& lt/div & gt；
& ltdivid="rside " >
& lt/div & gt；
& lt/div & gt；
& ltdivid="footer">。
& lt/div & gt；
因為兩個浮動div浮在水面上，但是父div(也就是id為main的div)沒有高度，所以父div沒有打開。Footer的div會在水平面上，所以添加背景色和高度後，可以看到這個div在這兩個浮動div的下面。要使頁腳的div出現在下面而不被覆蓋，
第壹種方法:給main的div加上height:800 px；讓他打開它
第二種方法:在兩個浮動div後添加壹個帶有cl類的div，樣式明確:both
網頁制作初步完成:
Html代碼:
& lt！DOCTYPEhtml & gt
& lthtml & gt
& lthead & gt
& lt元字符集="UTF-8 " >
& lttitle & gt& lt/title & gt；
& ltlinkrel = " style sheet " type = " text/CSS " href = " CSS/"/& gt；
& ltlinkrel = " style sheet " href = " CSS/home page-2 . CSS "/& gt；
& lt/head & gt；
& ltbody & gt
& ltdivid = " container " & gt_ _ _ _ _ _ _ & lt！-div #容器-& gt；
& ltdivid = " header " & gt_ _ _ _ _ _ & lt！-div #頁眉+div # main+div #頁腳-& gt；
& ltimg src = " img/" alt = " " id = " logo "/& gt。
& ltulid = " nav " & gt
& lt李& gt& ltahref = " # " & gt導航1& lt/李& gt
& lt！-李* 7 & gta & gt{導航$}->
& lt李& gt& ltahref = " # " & gt導航2
& lt李& gt& ltahref = " # " & gt導航3
& lt李& gt& ltahref = " # " & gt導航4
& lt李& gt& ltahref = " # " & gt導航5
& lt李& gt& ltahref = " # " & gt導航6
& lt李& gt& ltahref = " # " & gt導航7
& lt/ul & gt；
& lt/div & gt；
& ltimg src = " img/about _ " alt = " " id = " banner "/& gt；
& ltdivid = " main " & gt
& ltdivid="lside " >
& ltdivclass = " subtitle " & gt
& ltimg src = " img/"/& gt；
& lth 1 & gt；核心業務
& ltahref = " " & gt更多& gt& gt& lt/a & gt；
& lt/div & gt；
& ltdivclass="four " >
& lth2 & gt電子商務網站建設
& ltimg src = " img/eshop _ " alt = " "/& gt；
& ltul & gt_ _ _ _ _ _ _ _ _ _ _ _ _ _ & lt！-ul & gt；李* 5 & gt{便捷的商品管理$}->
& lt李& gt& ltahref = " # " & gt便捷的貨物管理
& lt李& gt& ltahref = " # " & gt自定義成員類型
& lt李& gt& ltahref = " # " & gt在線支付功能
& lt李& gt& ltahref = " # " & gt豐富的訂單統計
& lt李& gt& ltahref = " # " & gt財務報表的生成
& lt/ul & gt；
& lt/div & gt；
& ltdivclass="four " >
& lth2 & gt電子商務網站建設
& ltimg src = " img/eshop _ " alt = " "/& gt；
& ltul & gt_ _ _ _ _ _ _ _ _ _ _ _ _ _ & lt！-ul & gt；李* 5 & gt{便捷的商品管理$}->
& lt李& gt& ltahref = " # " & gt便捷的貨物管理
& lt李& gt& ltahref = " # " & gt自定義成員類型
& lt李& gt& ltahref = " # " & gt在線支付功能
& lt李& gt& ltahref = " # " & gt豐富的訂單統計
& lt李& gt& ltahref = " # " & gt財務報表的生成
& lt/ul & gt；
& lt/div & gt；
& ltdivclass="four " >
& lth2 & gt電子商務網站建設
& ltimg src = " img/eshop _ " alt = " "/& gt；
& ltul & gt_ _ _ _ _ _ _ _ _ _ _ _ _ _ & lt！-ul & gt；李* 5 & gt{便捷的商品管理$}->
& lt李& gt& ltahref = " # " & gt便捷的貨物管理
& lt李& gt& ltahref = " # " & gt自定義成員類型
& lt李& gt& ltahref = " # " & gt在線支付功能
& lt李& gt& ltahref = " # " & gt豐富的訂單統計
& lt李& gt& ltahref = " # " & gt財務報表的生成
& lt/ul & gt；
& lt/div & gt；
& ltdivclass="four " >
& lth2 & gt電子商務網站建設
& ltimg src = " img/eshop _ " alt = " "/& gt；
& ltul & gt_ _ _ _ _ _ _ _ _ _ _ _ _ _ & lt！-ul & gt；李* 5 & gt{便捷的商品管理$}->
& lt李& gt& ltahref = " # " & gt便捷的貨物管理
& lt李& gt& ltahref = " # " & gt自定義成員類型
& lt李& gt& ltahref = " # " & gt在線支付功能
& lt李& gt& ltahref = " # " & gt豐富的訂單統計
& lt李& gt& ltahref = " # " & gt財務報表的生成
& lt/ul & gt；
& lt/div & gt；
& lt/div & gt；
& ltdivid="rside " >
& ltdivclass = " subtitle " & gt
& ltimg src = " img/"/& gt；
& lth 1 & gt；文章視圖
& ltahref = " " & gt更多& gt& gt& lt/a & gt；
& lt/div & gt；
& ltulid = " art " & gt_ _ _ _ _ _ _ & lt！-ul # nav & gt；李* 7 & gt{Article $}->
& lt李& gt& ltahref = " # " & gt這是壹篇好文章1
& lt！-李* 5 & gta & gt{這是壹篇好文章$}->
& lt李& gt& ltahref = " # " & gt這是壹篇好文章
& lt李& gt& ltahref = " # " & gt這是壹篇好文章
& lt李& gt& ltahref = " # " & gt這是壹篇好文章
& lt李& gt& ltahref = " # " & gt這是壹篇好文章
& lt/ul & gt；
& ltdivclass = " subtitle " & gt
& ltimg src = " img/"/& gt；
& lth 1 & gt；聯系我們
& ltahref = " " & gt更多& gt& gt& lt/a & gt；
& lt/div & gt；
& ltdivid = " contact " & gt
& lt/div & gt；
& lt/div & gt；
& lt/div & gt；
& ltdivid="footer">。
& ltul & gt_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ & lt；！-ul & gt；李* 7 & gta & gt{聯系我們}->
& lt李& gt& ltahref = " # " & gt聯系我們
& lt李& gt& ltahref = " # " & gt聯系我們
& lt李& gt& ltahref = " # " & gt聯系我們
& lt李& gt& ltahref = " # " & gt聯系我們
& lt李& gt& ltahref = " # " & gt聯系我們
& lt李& gt& ltahref = " # " & gt聯系我們
& lt李& gt& ltahref = " # " & gt聯系我們
& lt/ul & gt；
& lt地址& gt2006-2009北京靈犀匯通科技有限公司版權所有。
京ICP備no . 07020337 W3CValidcssw3CValidxHTML 1.0嚴格
& lt/div & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；
樣式代碼:
#容器_
margin:0 _ uto；
寬度:1002 px；
}
#header_
身高:128 px；
背景:_rayurl(../img/top_)不重復；
}
#nav_i_
float:_ eft；
/*1，使導航水平*/
/*背景:紫色；_*/
/*2.展開導航*/
寬度:90px
邊距-右邊:1px；
}
#導航__
字體大小:16px；
字體系列:“微軟雅黑”；
顏色:# 363636；
/*8，文本顏色*/
顯示:_ lock
/*5.鼠標上移後，背景色僅限於標簽A */的內容
高度:37px
/*6.這些高度是指定的*/
寬度:90px
text-align:_ enter；
/*7.將文本居中*/
}
#nav_:hover_
/*3.鼠標放上去後樣式就變了*/
顏色:_海特；
背景:_rl(../img/nav _)；
/*4.鼠標移動後的背景顏色*/
}
#橫幅{
保證金:10px 0；
}
#main{
/*高度:800px*/_ _ _ _ _ _ _ _/* 9，打開*/
}
。副標題{
高度:37px
背景:_rl(../img/index _ main _ top _)；_/*14更改原始背景色*/
}
。subtitle_mg{
float:_ eft；
/*10將初始化的圖片向左浮動*/
保證金:5px 0010px；
/*11微調圖片*/
}
。subtitle_1{
浮動:左；
字體大小:16px；
/*12設置標題中的字體*/
Font-family:“微軟雅黑”，simhei，sans-serif；
左邊距:10px；
}
。副標題_{
float:_ right；
font-size:12px；
/*13微調超鏈接*/
顏色:_射線；
}
。四個
寬度:326px
高度:200px
背景:# EEE；_ _ _ _ _ _ _ _ _ _ _ _/*此處將原背景改為其他顏色(QQ截圖下方顯示RGB的顏色，僅轉換為16) */
float:_ eft；
保證金:10px；
}
。四_2{
字體大小:16px；
字體系列:“微軟雅黑”；
邊距:6px 06 px 10px；
/*16修改h2標題*/
}
。四毫克
float:_ eft；_ _ _ _ _ _ _ _ _ _ _ _/* 11，讓帶有四級標記的img向左浮動*/
左邊距:10px；
/*15圖片後面的背景色是白色*/
填充:6px
背景:_海特；
}
。四個l{
float:_ eft；
左邊距:10px；
}
。四_i{
背景:_rl(../img/service_intro_)不重復；_ _/* 16標簽前面的小黑點*/
左填充:10px；
/*17小黑點在單詞的下面*/
高度:20px
}
。四個_{
顏色:_射線；_ _ _ _ _ _ _ _ _ _ _ _ _/* 18A標簽的顏色*/
}
#lside{
高度:480px
寬度:694px
border:1px _ olid # EEE；
float:_ eft；_ _ _ _ _ _ _ _ _ _ _ _/* 8.讓左div和右div並排站立*/
/*背景:矢車菊藍；*/_ _ _ _ _ _/*這裏的設置是為了區分9 */_ * 19刪除背景圖片*/
邊框-