1.网站信息页面
1.1需求分析:
我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息
1.2技术分析:
HTML概述:
HTML: Hyper Text Markup Language 超文本标记语言
超文本: 比普通文本功能更加强大,可以添加各种样式
标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行
静夜诗
--李白
床前明月光,
地上鞋两双,
举头望明月,
低头思故乡.
为什么要学习HTML:
生活所迫,今天的课程,群英妹子不让回家.
HTML的主要作用:
设计网页的基础,HTML5
HTML语法规范
1.3步骤分析:
- 公司简介 需要标题
- 水平分割线
- 四个段落
- 第一个段落字体需要红色
1.4代码实现:
网站信息页面
公司简介
一直以来，腾讯科技以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
1.5 扩展内容
b : 加粗
i : 斜体
strong: 加粗, 带语义标签
em: 斜体, 带语义
2.网站图片信息
2.1需求分析:
在我们的网站中通常需要显示LOGO图片,显示效果如下
2.2技术分析
img 标签:
常用的属性;
width : 宽度
height: 高度
src : 指定文件路径
alt: 图片加载失败时的提示内容
2.3步骤分析
2.4代码实现
2.5 扩展-文件路径
- 相对路径
./ 代表的是当前路径
../ 代表的上一级路径
../../ 上上一级路径3.网站友情链接页面
3.1需求分析
在我们的网站中,通常会显示友商公司的网站链接
- 百度
- 新浪微博
- 黑马程序员
3.2技术分析
列表标签:
无序列表: ul
type: 小圆圈,小圆点, 小方块
有序列表: ol
type: 1,a ,A,I,
start : 指定是起始索引
3.3步骤分析
3.4代码实现
3.5 扩展内容
点击链接,跳转去指定网站
a 超链接标签
常用的属性:
href: 指定要跳转去的链接地址
如果是网络地址需要加上http协议 ,
如果访问的是本网站的html文件,可以直接写文件路径
target : 以什么方式打开
_self: 默认打开方式,在当前窗口打开
_blank: 新起一个标签页打开页面
上午内容回顾:
-
网站信息案例
-
字体标签 font
- color: 颜色
- size: 大小 1~7
- face: 改变字体
- p 段落标签
- h标题标签 : 1~6
- br 换行
- hr 水平线
- b 加粗
- i 斜体
- strong : 加粗 包含语义
- em : 斜体 包含语义
-
-
网站图片案例
-
img标签
- src : 指定图片的路径
- width: 宽度
- height: 高度
- alt : 图片加载错误时的提示信息
-
相对路径:
- ./ 代表的是当前路径
- ../ 代表的上一级路径
- ../../ 代表的上上一级路径
-
-
友情链接:
-
ul: 无序列表
- type :
-
ol: 有序列表
- type : 样式
- start : 起始索引
- li : 列表项
-
a 超链接标签
- href : 要访问的链接地址
- target : 打开方式
-
-
网站首页
-
table标签
- border: 指定边框
- width : 宽度
- height : 高度
- bgcolor : 背景颜色
- align : 对齐方式
- tr标签
-
td标签
- colspan: 跨列操作
- rowspan: 跨行操作
- 表格单元格的合并
- 表格的嵌套
-
4.网站首页
4.1需求分析:
根据产品文档,完成商城首页,显示效果如图:
4.2技术分析:
表格标签table
table标签:
常用的属性:
bgcolor : 背景色
width : 宽度
height : 高度
align : 对齐方式
tr 标签
td 标签
合并单元格:
colspan : 跨列操作
rowspan : 跨行操作
注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉
表格的嵌套:
在td中可以嵌套一个表格
4.3步骤分析
- 创建一个8行一列的表格
- 第一部份: LOGO部分: 嵌套一个一行三列的表格
- 第二部分: 导航栏部分 : 放置5个超链接
- 第三部分: 轮播图
- 第四部分: 嵌套一个三行7列表格
- 第五部分: 直接放一张图片
- 第六部分: 抄第四部分的
- 第七部分: 放置一张图片
- 第八部分: 放一堆超链接
4.4代码实现
登录
注册
购物车
首页
手机数码
鞋靴箱包
电脑办公
香烟酒水
最新商品
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
热门商品
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
洗衣机
$998
关于我们
联系我们
招贤纳士
法律声明
友情链接
支付方式
配送方式
服务声明
广告声明
Copyright © 2005-2016 传智商城 版权所有
5.网站注册页面:
5.1需求分析:
编写一个HTML页面, 显示效果如图所示
5.2技术分析:
-
表单标签
表单标签 action : 直接提交的地址 method : get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k post 方式 会将参数封装在请求体中, 没有这样的限制 input : type: 指定输入项的类型 text : 文本 password : 密码框 radio : 单选按钮 checkbox : 复选框 file : 上传文件 submit : 提交按钮 button : 普通按钮 reset : 重置按钮 hidden : 隐藏域 date : 日期类型 tel : 手机号 number : 只允许输入数字 placeholder : 指定默认的提示信息 name : 在表单提交的时候,当作参数的名称 id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它 textarea : 文本域, 可以输入一段文本 cols : 指定宽度 rows : 指定的是高度 select : 下拉列表 option : 选择项步骤分析:
- logo部分
- 导航栏
- 注册部分
- 页脚图片
- 网站声明信息
5.3代码实现:
6.网站后台页面展示
6.1需求分析:
我们前面已经做完了首页商品展示, 那么我们需要一个页面用来编辑我们的商品信息, 还有商品分类, 用户购买之后,还得有订单管理页面
6.2技术分析
框架标签:
frameset
注意: 使用了frameset必须将body删掉,否则页面会有问题
frame
常用属性: src: 引入的html文件路径
name: 指定框架的名称
6.3步骤分析
6.4代码实现
扩展
框架中点击跳转
常用的快捷键
Ctrl + D 删除光标当前所在的行
Ctrl + Shift + R 复制当前行到下一行
Ctrl + Enter 将光标移动到下一行
Ctrl + Shift + Enter 将光标定位在上一行
Ctrl + Shift + / 注释当前行
Ctrl + R 运行当前网页/刷新当前网页