Web网页制作（静态网页）：千年之恋

一、是用的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>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;<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" />足球&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" />篮球&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" />游泳&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" />唱歌&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" />跑步&nbsp;&nbsp;&nbsp;&nbsp;<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 &copy 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像素 */
}