范例1——Shopping_mall
效果图
HTML代码
无标题文档<！--第一章。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.3 1.1 第一节。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。3
1.1.1 第一课 认识HTML.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.3 1.1.2 第二课 段落及超链接。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。4 1.1.3 第三课 设置背景图及图片。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。6 1.1.4 第四课 表格。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。6 1.1.5 第五课 hr属性、滚动字符、列表。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。8 1.2 第二节。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。10 1.2.1 第一课 表单。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。10 1.2.2 第二课按钮及下拉框。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。11 1.2.3 第三课 框架，标签iframe.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.13 1.2.4 第四课背景音乐，多媒体。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。14 1.3 第三节css.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.15 1.3.1 第一课 了解css.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.15 1.3.2 第二课 属性。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。15 1.3.3 第三课 样式表的三类应用方式。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。.。17
第一章
1.1 第一节 1.1.1 第一课 认识HTML 1.html：超文本标记语言
网页又称WEB页面
2.html：包括文字，表格，图片，声音，视频。以及各种功能按钮 3.首页：进入一个网站第一个显示的页面
4、网页的格式是国际标准组织定义的叫做W3C.具体标准是HTML，标记语言格式
5、标记的基本语法： 6.新建一个网页：先新建文本文档，然后把后缀名改成“***。html”即可
7.html文件的后缀名：***。html或***。htm 用html语言编写的文档就是html文档，也常被称为“静态网页”文件
8.html标记语言规定：（1）html标签必须是成对出现
（2）html标签不区分大小写 9.常用标签
加粗 斜体下划线
换行下标上标
color:可以设置水平线的颜色
width:可以设置水平线的宽度
align:可以设置水平线的位置，左，中，右 2.滚动字符 ：marquee
要滚动的字体
属性：
bgcolor:滚动轨迹的颜色
direction:设置内容滚动的方向
Behavior：设置内容滚动的方式
Height：高度
Width:宽度
scrolldelay：设置二次滚动的时间间隔
Loop：滚动的次数 3.列表
无序列表:列表内容前面的符号是一样的 有序列表:列表内容前面的符号是自动排列的 自定义列表: 自己设置列表内容前面的符号
无序列表的标签:
无序列表内容项的标签：
在无序列表中有一个重要的属性：type
第一个
第八个
type的值有： circle：空心圆
disc：实心圆
square：方块
有序列表的标签:
有序列表内容项的标签：
在有序列表中有一个重要的属性：type
童年
老年
自定义列表的标签：
设置自定义列表的图标标签：
自定义列表内容项的标签:
把一张图片分为多个区域进行超链接
1.2 第二节 1.2.1 第一课 表单
1、表单标签：
标签的属性：
id:编号（不能重复）
name:名称（可以重复）
method:数据提交的方式，只有二个值
get:显示的提交数据
post:隐式的提交数据
action:提交的路径 类似于
2、输入标签：
分类：
文本框:
maxlength:在文本框中可输入的最大长度
value：文本框中的默认值
密码框：
单选框：
checked:代表默认选中的选项，值true false
true :选中，false代表不选中。
注意点：要想多个单选框成为一组，必须把name的值设置为相同。
复选框：
1.2.2 第二课按钮及下拉框
1.type=”button“ 普通按钮
2.type=”submit“ 提交按钮
注意点：当使用提交按钮时，需要把form表单标签中的action属性赋值。3.type=”image“ 图片提交按钮
4.type=”reset“ 重置按钮
作用：把页面中所有用户输入的内容恢复到
初始状态。
5.type=”file“ 上传文件标签（可以选择要上传的内容）
6.type=”hidden“ 隐藏内容标签
7、下拉框标签：
值
值
标签的属性：
说明：id是option的编号
value：一般去保持编号如（张三的编号是：s10010）
张三 8.多行文本框：标签
属性：
默认值 1.2.3 第三课 框架，标签iframe 1.iframe的属性
标签：
的属性：
当使用标签时，需要和一起使用。
在Target:—blank 显示一个新的窗口
—self 显示在同一个窗口
—parent 显示在iframe的前一份文件的窗口
—top 显示整个浏览器
2、框架（混合排列多个窗口）必须写在head里面 “30%，*”>
1.2.4 第四课背景音乐，多媒体
1、插入背景音乐
没有控制条的多媒体
Start：mouseover鼠标滑到文件时播放
Fileopen 打开网页就播放 有控制条的多媒体
3.类样式
以点开始后面随意起名字 例如：。red 1.3.2 第二课 属性
1.text—align 文本对齐
font—size 字体大小 font—family 字体类型
font—style 字体样式
color设置或检索文本的颜色 背景的属性
Background—color 设置背景颜色 Background—image 设置背景图片
Background—repeat 设置一个指定的图像如何被重复 3.方框属性
Padding—left 设置内容与左边框之间的距离
Padding—right设置内容与右边框之间的距离
Padding—top设置内容与上边框之间的距离
Padding—bottom设置内容与下边框之间的距离 margin-top设置对象的上边距 margin-bottom设置对象的下边距 margin-left设置对象的左边距 margin-right设置对象的右边距 border-style设置边框的样式 border-width设置边框的宽度 border-color设置边框的颜色 4.特殊样式
a：link{colorff0000}未被访问的链接红色
a：visited{color00ff00}已被访问的链接绿色
a：hover{colorffcc00}鼠标悬浮在上的颜色橙色
a：active{color0000ff}鼠标点中激活链接蓝色 1.3.3
1、内嵌样式表
第三课 样式表的三类应用方式2.行内（嵌入）样式表
文字
Html网页设计代码
设计第一技术其次 :)---
1)贴图： 2)加入连接：写上你想写的字1)贴图： 2)加入连接：写上你想写的字
3)在新窗口打开连接：写上要写的字
消除连接的下划线在新窗口打开连接：
写上你想写的字
4)移动字体（走马灯）：写上你想写的字
5)字体加粗：写上你想写的字
6)字体斜体：写上你想写的字
7)字体下划线: 写上你想写的字
8)字体删除线:写上你想写的字
9)字体加大: 写上你想写的字
10)字体控制大小：
11)更改字体颜色：写上你想写的字（其中value值在000000与ffffff(16位进制）之间
12)消除连接的下划线：写上你想写的字
13)贴音乐：
14)贴flash: 15)贴影视文件：
16)换行：
17)段落：
段落
18)原始文字样式：
正文
19)换帖子背景：
20)固定帖子背景不随滚动条滚动：
21)定制帖子背景颜色：
(value值见10)22)帖子背景音乐：
23)贴网页：
/---------HTML特效代码-/
1。忽视右键
或
2。加入背景音乐IE:
NS:
*。mid你的背景音乐的midi格式文件
3。简单的window.open方法
onclick=“javascript :window.open（文件路径/文件名，newwindow，toolbar=no,scrollbars=yes,resizable=no,top=0,left=0，width=400,height=300）；”>文字或图片
参数解释：
js脚本结束
4。简单的页面加密
5。拉动页面时背景图不动
6。让浏览器在保存页面时保存失败
7。随机替换图片
图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif 8。窗口定时关闭
先将如下代码网页文件的区：
然后再在
标内加入如：9。网页自动关闭这个窗口会在10秒过后自动关闭，而且不会出现提示。
HTML倒计时代码
个人简历
粘贴相片
姓名：
年龄：
性别：
Male
Female
学历
中学阶段
起止时间
学校名字
大学阶段
起止时间
学校名字
院系
职历
起止时间
单位名称
职位