一、是用的PyCharm來寫的代碼
?
二、代碼中所用到的知識點（無 js）
這段HTML代碼展示了一個簡單的注冊頁面，包含了多個HTML元素和CSS樣式的應用。
這段HTML代碼展示了一個典型的注冊頁面，包含了常見的HTML元素和表單控件。通過CSS樣式表，可以進一步美化頁面布局和樣式。雖然代碼中沒有直接使用JavaScript，但可以通過添加JavaScript來實現更復雜的交互功能。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>千年之戀</title><link href="css/style06.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="head"><img src="images/logo.jpg"/>
</div>
<div id="nav_bg"><ul class="nav"><li><a href="#">首頁</a></li><li><a href="#">會員</a></li><li><a href="#">活動</a></li><li><a href="#">直播</a></li><li><a href="#">視頻</a></li><li><a href="#" class="bg">注冊</a></li></ul>
</div>
<div id="banner"><img src="images/banner.jpg"/>
</div>
<div id="content"><h2 class="step">注冊步驟：</h2><form action="#" method="post" class="one"><h3>您的帳號信息：</h3><table class="content"><tr><td class="left">注冊方式：</td><td><label for="one"><input type="radio" name="sex" id="one"/>E-mail注冊</label> <label for="two"><input type="radio" name="sex" id="two"/>手機號碼注冊</label></td></tr><tr><td class="left">注冊郵箱：</td><td><input type="text" class="right" /></td></tr><tr><td class="left">注冊手機：</td><td><input type="text" class="right" /></td></tr><tr><td class="left">登陸密碼：</td><td><input type="password" maxlength="8" class="right" /></td></tr><tr><td class="left">昵稱：</td><td><input type="text" class="right" /></td></tr></table><h3>您的個人信息：</h3><table class="content"><tr><td class="left">性別：</td><td><label for="boy"><input type="radio" name="sex" id="boy" />男</label> <label for="girl"><input type="radio" name="sex" id="girl" />女</label></td></tr><tr><td class="left">學歷：</td><td><select><option>-請選擇-</option><option>中職/高中</option><option>專科/本科</option><option>碩士研究生</option><option>博士研究生</option></select></td></tr><tr><td class="left">所在城市：</td><td><select><option>-請選擇-</option><option selected="selected">北京</option><option>上海</option><option>廣州</option><option>深圳</option></select></td></tr><tr><td class="left">興趣愛好：</td><td><input type="checkbox" />足球 <input type="checkbox" />籃球 <input type="checkbox" />游泳 <input type="checkbox" />唱歌 <input type="checkbox" />跑步 <input type="checkbox" />瑜伽</td></tr><tr><td class="left">自我介紹：</td><td><textarea cols="60" rows="8">評論的時候，請遵紀守法并注意語言文明，多給文檔分享人一些支持。</textarea></td></tr><tr><td colspan="2"><input type="button" class="btn" /></td></tr></table></form>
</div>
<div id="footer"><p>Copyright © 2020-2030 QIANNIANZHLIANcom, All rights reserved.<br />2020-2030,版權所有千年之戀 85CP 備 3333</p>
</div>
</body>
</html>1.?HTML文檔結構
-
<!DOCTYPE html>：聲明文檔類型為HTML5。 -
<html lang="en">：定義HTML文檔的根元素，并設置語言為英語。 -
<head>：包含文檔的元數據，如字符集、標題和外部樣式表鏈接。 -
<body>：包含網頁的可見內容。
2.?元數據
-
<meta charset="UTF-8">：指定文檔的字符編碼為UTF-8。 -
<title>千年之戀</title>：設置網頁的標題，顯示在瀏覽器的標簽頁上。 -
<link href="css/style06.css" type="text/css" rel="stylesheet">：鏈接外部CSS樣式表文件style06.css，用于定義頁面的樣式。
3.?頁面結構
-
頭部 (
<div id="head">)-
包含一個圖片 (
<img src="images/logo.jpg"/>)，用于顯示網站的Logo。
-
-
導航欄 (
<div id="nav_bg">)-
使用無序列表 (
<ul>) 創建導航欄，每個列表項 (<li>) 包含一個鏈接 (<a>)，指向不同的頁面或功能。 -
最后一個鏈接 (
<a href="#" class="bg">注冊</a>) 有一個額外的類bg，可能是用于特殊樣式。
-
-
橫幅 (
<div id="banner">)-
包含一個圖片 (
<img src="images/banner.jpg"/>)，用于顯示網站的橫幅廣告或宣傳圖。
-
-
內容區域 (
<div id="content">)-
包含一個表單 (
<form>)，用于用戶注冊。 -
表單分為兩個部分：
-
賬號信息：包括注冊方式（郵箱或手機）、注冊郵箱、注冊手機、登錄密碼和昵稱。
-
個人信息：包括性別、學歷、所在城市、興趣愛好和自我介紹。
-
-
使用表格 (
<table>) 來布局表單內容，每個表行 (<tr>) 包含表頭 (<td class="left">) 和輸入字段 (<td>)。
-
-
頁腳 (
<div id="footer">)-
包含版權信息 (
<p>)，顯示網站的版權聲明和備案信息。
-
4.?表單元素
-
單選按鈕 (
<input type="radio">)-
用于選擇注冊方式（郵箱或手機）和性別（男或女）。
-
name="sex"?用于將單選按鈕分組，確保同一組中只能選擇一個選項。
-
-
文本輸入框 (
<input type="text">)-
用于輸入注冊郵箱、注冊手機和昵稱。
-
-
密碼輸入框 (
<input type="password">)-
用于輸入登錄密碼，輸入內容會被隱藏。
-
-
下拉菜單 (
<select>)-
用于選擇學歷和所在城市。
-
<option>?定義下拉菜單中的選項，selected="selected"?設置默認選中的選項。
-
-
復選框 (
<input type="checkbox">)-
用于選擇興趣愛好，用戶可以多選。
-
-
文本域 (
<textarea>)-
用于輸入自我介紹，用戶可以輸入多行文本。
-
-
按鈕 (
<input type="button">)-
用于提交表單，但當前代碼中沒有指定按鈕的文本或功能。
-
5.?CSS類
-
class="bg"：可能用于為“注冊”鏈接添加特殊樣式。 -
class="one"：可能用于為表單添加樣式。 -
class="left"?和?class="right"：可能用于對齊表格中的內容。 -
class="btn"：可能用于為按鈕添加樣式。
6.?HTML屬性
-
id：用于唯一標識元素，如id="head"、id="nav_bg"等。 -
name：用于表單元素的名稱，如name="sex"。 -
maxlength：限制輸入框的最大字符數，如maxlength="8"限制密碼長度為8個字符。 -
cols?和?rows：定義文本域的列數和行數。
7.?HTML實體
-
©：顯示版權符號（?）。 -
：表示不換行空格，用于在文本中插入空格。
8.?CSS樣式
-
雖然代碼中鏈接了外部樣式表 (
style06.css)，但具體的樣式規則沒有在代碼中展示。樣式表可能定義了頁面布局、顏色、字體等樣式。
9.?JavaScript交互
-
代碼中沒有直接使用JavaScript，但可以通過
<input type="button">或其他事件觸發JavaScript函數，實現表單驗證或提交功能。
三、CSS代碼（內有注釋詳解）
/* 全局樣式：重置所有元素的外邊距、內邊距、列表樣式、輪廓線、邊框和背景 */
* {margin: 0; padding: 0; list-style: none; /* 去除列表項的項目符號 */outline: none; /* 去除元素聚焦時的輪廓線 */border: 0; /* 去除所有元素的邊框 */background: none; /* 去除所有元素的背景 */
}/* 頁面整體樣式：設置默認字體和字體大小 */
body {font-family: "微軟雅黑"; /* 設置頁面默認字體為“微軟雅黑” */font-size: 14px; /* 設置頁面默認字體大小為14像素 */
}/* 鏈接樣式：設置未訪問和已訪問鏈接的樣式 */
a:link, a:visited {text-decoration: none; /* 去除鏈接的下劃線 */color: #fff; /* 設置鏈接文字顏色為白色 */font-size: 16px; /* 設置鏈接文字大小為16像素 */
}/* 頭部樣式：設置頁面頭部的寬度、高度、居中和頂部內邊距 */
#head {width: 980px; /* 設置頭部寬度為980像素 */height: 70px; /* 設置頭部高度為70像素 */margin: 0 auto; /* 水平居中 */padding-top: 20px; /* 設置頂部內邊距為20像素 */
}/* 導航欄背景樣式：設置導航欄背景的寬度、高度和背景顏色 */
#nav_bg {width: 100%; /* 寬度占滿父容器 */height: 48px; /* 設置高度為48像素 */background: #fe668f; /* 設置背景顏色為粉色 */
}/* 導航欄內容樣式：設置導航欄內容的寬度和居中 */
.nav {width: 980px; /* 設置寬度為980像素 */margin: 0 auto; /* 水平居中 */
}/* 導航欄列表項樣式：設置列表項左浮動（橫向排列） */
.nav li {float: left; /* 左浮動，使列表項橫向排列 */
}/* 導航欄鏈接樣式：設置鏈接的顯示方式、高度、內邊距和文字垂直居中 */
a {display: inline-block; /* 將鏈接設置為行內塊元素 */height: 48px; /* 設置高度為48像素 */padding: 0 50px; /* 設置左右內邊距為50像素 */line-height: 48px; /* 設置行高為48像素，使文字垂直居中 */
}/* 特殊鏈接樣式：為特定鏈接（如“注冊”）設置背景顏色 */
.bg {background: #fe9ab5; /* 設置背景顏色為淺粉色 */
}/* 鏈接懸停樣式：設置鼠標懸停時鏈接的背景顏色 */
a:hover {background: #fe9ab5; /* 鼠標懸停時背景顏色變為淺粉色 */
}/* 橫幅樣式：設置橫幅的寬度和居中 */
#banner {width: 980px; /* 設置寬度為980像素 */margin: 0 auto; /* 水平居中 */
}/* 內容區域樣式：設置內容區域的寬度、高度、背景圖片、居中和左側內邊距 */
#content {width: 830px; /* 設置寬度為830像素 */height: 934px; /* 設置高度為934像素 */background: url(../images/content_bg.jpg) no-repeat; /* 設置背景圖片，不重復 */margin: 0 auto; /* 水平居中 */padding-left: 150px; /* 設置左側內邊距為150像素 */
}/* 注冊步驟標題樣式：設置標題的寬度、高度、字體大小、顏色、背景圖片和文字垂直居中 */
.step {width: 454px; /* 設置寬度為454像素 */height: 80px; /* 設置高度為80像素 */font-size: 20px; /* 設置字體大小為20像素 */font-weight: 100; /* 設置字體粗細為100（較細） */color: #dd8787; /* 設置文字顏色為淺紅色 */background: url(../images/step.jpg) center right no-repeat; /* 設置背景圖片，居中靠右，不重復 */line-height: 80px; /* 設置行高為80像素，使文字垂直居中 */
}/* 表單標題樣式：設置表單標題的寬度、高度、字體大小、顏色、下邊框和文字垂直居中 */
h3 {width: 444px; /* 設置寬度為444像素 */height: 45px; /* 設置高度為45像素 */font-size: 20px; /* 設置字體大小為20像素 */font-weight: 100; /* 設置字體粗細為100（較細） */color: #dd8787; /* 設置文字顏色為淺紅色 */line-height: 45px; /* 設置行高為45像素，使文字垂直居中 */border-bottom: 1px solid #dd8787; /* 設置底部邊框為1像素淺紅色實線 */
}/* 表格單元格樣式：設置單元格的高度和文字顏色 */
td {height: 50px; /* 設置高度為50像素 */color: #dd8787; /* 設置文字顏色為淺紅色 */
}/* 左側單元格樣式：設置左側單元格的寬度和文字右對齊 */
.left {width: 120px; /* 設置寬度為120像素 */text-align: right; /* 文字右對齊 */
}/* 右側輸入框樣式：設置右側輸入框的寬度、高度和邊框 */
.right {width: 320px; /* 設置寬度為320像素 */height: 28px; /* 設置高度為28像素 */border: 1px solid #dd8787; /* 設置邊框為1像素淺紅色實線 */
}/* 輸入框垂直對齊樣式：設置輸入框內容垂直居中 */
input {vertical-align: middle; /* 垂直居中 */
}/* 下拉菜單樣式：設置下拉菜單的寬度、邊框和文字顏色 */
select {width: 171px; /* 設置寬度為171像素 */border: 1px solid #dd8787; /* 設置邊框為1像素淺紅色實線 */color: #dd8787; /* 設置文字顏色為淺紅色 */
}/* 文本域樣式：設置文本域的寬度、邊框、禁止調整大小、字體大小、顏色和內邊距 */
textarea {width: 380px; /* 設置寬度為380像素 */border: 1px solid #dd8787; /* 設置邊框為1像素淺紅色實線 */resize: none; /* 禁止用戶調整文本域大小 */font-size: 12px; /* 設置字體大小為12像素 */color: #aaa; /* 設置文字顏色為灰色 */padding: 20px; /* 設置內邊距為20像素 */
}/* 按鈕樣式：設置按鈕的寬度、高度和背景圖片 */
.btn {width: 408px; /* 設置寬度為408像素 */height: 76px; /* 設置高度為76像素 */background: url(../images/btn.jpg) right center no-repeat; /* 設置背景圖片，靠右居中，不重復 */
}/* 頁腳樣式：設置頁腳的寬度、高度、背景顏色、文字顏色、居中和頂部內邊距 */
#footer {width: 100%; /* 寬度占滿父容器 */height: 68px; /* 設置高度為68像素 */line-height: 26px; /* 設置行高為26像素 */background: #fe668f; /* 設置背景顏色為粉色 */color: #fff; /* 設置文字顏色為白色 */text-align: center; /* 文字居中 */padding-top: 40px; /* 設置頂部內邊距為40像素 */
}
四、運行出來的網頁。
