JavaEE 传智28期教程day01html参考.docx

《JavaEE 传智28期教程day01html参考.docx》由会员分享，可在线阅读，更多相关《JavaEE 传智28期教程day01html参考.docx（20页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训d a y 0 1-h t m l今 日 任 务 网 站 信 息 页 面 案 例 网 站 图 片 信 息 页 面 案 例 网 站 友 情 链 接 页 面 案 例 网 站 首 页 案 例 网 站 注 册 页 面 案 例 网 站 后 台 页 面 案 例教 学 导 航教 学 目 标了 解 什 么 是 标 记 语 言了 解 H T M L 主 要 特 性,主 要 变 化 及 发 展 趋 势了 解 H T M L 的 结 构 标 签掌 握 H T M L 的 主 要 标 签(字 体,图

2、 片,列 表,链 接,表 单 等 标 签)教 学 方 法 案 例 驱 动 法1.1 网 站 信 息 页 面 显 示 案 例：1.1.1 需 求 分 析：在 网 页 中 显 示 一 个 文 字 信 息 页 面，显 示 效 果 如 下：传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训1.1.2 分 析：1.1.2.1 技 术 分 析【H T M L 的 概 述】什 么 是 H T M LHTML：Hyper Text Markup Language 超文本标记语言 超文本：比文本功能更加强大 标记语言：通过一组标签对内容进行描

3、述的一门语言 为 什 么 学 习 H T M LHTML 是设计页面基础 在 哪 些 地 方 可 以 使 用 H T M L设计页面的时候都可以使用 HTML 如 何 使 用 H T M LHTML 的语法和规范 HTML 文件的扩展名是.html 或者是.htm HTML 文件是由头和体组成 HTML 这组标签是不区分大小写 HTML 的标记通常是由开始标签和结束标签组成：内容【H T M L 的 字 体 标 签】标 签文字 size:控制字体大小.最小 1 最大 7 color：控制字体颜色.使用英文设置，使用 16 进制数设置 face：控制字体.【H T M L 的 排 版 标 签】标

4、 题 标 签b 标题 段 落 标 签一段文字 换 行 标 签 代表换行 水 平 线 标 签 水平线标签 字 体 加 粗文字 斜 体 标 签斜体1.1.2.2 步 骤 分 析 步 骤 一：创 建 一 个 h t m l 文 件传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训 步 骤 二：创 建 标 题 标 签 步 骤 三：标 题 下 面 会 有 一 个 水 平 线 步 骤 四：创 建 段 落 标 签 创 建 四 个 段 落 步 骤 五：将 某 些 文 字 设 置 为 红 色1.1.3 代 码 实 现页面标题 公司简介“中 关

5、 村 黑 马 程 序 员 训 练 营”是 由 传 智 播客 联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。黑 马程 序 员的 学 员多 为 大 学毕 业 后，有 理想、有梦 想，想 从 事 IT 行 业，而 没有 环 境和 机 遇 改变 自己 命运 的年 轻人。黑 马程 序员 的学 员 筛选 制度，远 比现 在 90%以 上的 企业 招聘 流

6、程 更为 严格。任 何一 名 学员 想成功入学“黑马程序 员”，必须经 历长达 2 个月的面 试流程，这些流程 中不仅包括严格 的技术测试、自学 能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。中关村黑马 程序员训练营不仅着重 培养学员的基础理论知 识，更注重培养项目 实施管理能力，并 密切 关注 技 术革 新，不 断引 入先 进 的技 术，研发 更 新技 术课 程，确 保学 员 进入 企业 后 不仅 能独 立 从事 开发 工 作，传 智 播 客 专 注 于 J a v a

7、、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训更能给企业带来新的技术体系和理念。一 直以 来，黑 马 程序 员 以 技术 视 角关 注 IT 产 业发 展，以 深 度分 享 推 进产 业 技术 成 长，致 力于弘扬技术创新，倡导分享、开放和协作，努力打造高质量的 IT 人才服务平台。1.2 网 站 的 图 片 页 面 显 示1.2.1 需 求 分 析：在 网 页 中 显 示 带 有 图 片 的 页 面 效 果 如 下：1.2.2 分 析：1.2.2.1 技 术 分 析：【H T M L 的 图 片 标 记】src：图片的路径 width：图片宽度 height：

8、图片的高度 alt：图片提示图片路径：分成相对路径和绝对路径 相对路径:./:代表当前路径./:代表上一级路径1.2.2.2 步 骤 分 析：创 建 一 个 i m g 标 签 引 入 l o g o 图 片 创 建 一 个 i m g 标 签 引 入 h e a d e r 图 片传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训1.2.3 代 码 实 现网站图片页面1.3 网 站 的 列 表 显 示 页 面1.3.1 需 求 分 析：在 页 面 中 列 表 显 示 友 情 链 接：1.3.2 分 析：1.3.2.1 技

9、术 分 析【H T M L 的 列 表 标 签】无序列表 内容 1 内容 2有序列表 内容 1 内容 21.3.2.2 步 骤 实 现 创 建 一 个 无 序 列 表 显 示 友 情 链 接传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训1.3.3 代 码 实 现 百度 传智播客 百合网 世纪佳缘1.3.4 总 结：【超 链 接 标 签】超链接 h ref：超链接跳转的路径 target：打开方式 _self：在自身页面打开 _blank：打开一个新窗口1.4 网 站 的 首 页 显 示1.4.1 需 求 分 析：在 浏

10、览 器 中 显 示 网 站 的 首 页 效 果 如 下：传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训1.4.2 分 析：1.4.2.1 技 术 分 析【H T M L 的 表 格 标 签】表格标签：表格的属性：b order：表格边框 width：表格宽度 height：表格高度 align：水平方向对齐方式 left center right bgcolor：背景色1.4.2.2 步 骤 分 析：步

11、 骤 一：创 建 8 行 表 格 步 骤 二：实 现 第 一 行，嵌 套 一 个 一 行 三 列 表 格。步 骤 三：实 现 第 二 行，实 现 导 航，设 置 背 景 色。步 骤 四：放 置 一 张 图 片 步 骤 五：显 示 热 门 商 品，创 建 一 个 三 行 七 列 的 表 格。对 表 格 进 行 跨 行，跨 列 的 操 作。步 骤 六：引 入 一 张 广 告 图 片。步 骤 七：显 示 最 新 商 品，创 建 一 个 三 行 七 列 的 表 格。对 表 格 进 行 跨 行，跨 列 的 操 作。步 骤 八：广 告 信 息 步 骤 九：链 接 版 权 信 息。1.4.3 代 码 实 现

12、传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训 网站首页 登录 注册 购物车 首 页   手 机 数 码   电 脑 办 公   鞋 靴 箱 包   鞋 靴 箱 包   传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训 最 新 商 品 电磁锅$499 电磁锅$499 电磁锅$499 电磁锅$499传 智

13、 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训 电磁锅$499 电磁锅$499 电磁锅$499 电磁锅$499 电磁锅$499 最 新 商 品传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训 电磁锅$499 电磁锅$499 电磁锅$499 电磁锅$499 电磁锅$499 电磁锅$499传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训 电磁锅$499 电磁锅$499 电磁锅$499 关

14、于 我 们 联系我们 招贤纳士 法律声明 友 情 链 接 支付方式 配送方式 服务声明 广告声明Copyright 2005-2016 传智商城 版权所有传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训1.5 网 站 的 注 册 页 面 案 例：1.5.1 需 求 分 析：在 浏 览 器 中 显 示 如 下 的 效 果：1.5.2 分 析：1.5.2.1 技 术 分 析：【H T M L 的 表 单 标 签】表单标签：需要提交的表单需要使用 括起来 action：提交路径 method：提交方式 文本框:name valu

15、e size maxlength readonly 密码框：单选按钮：传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训 C hecked：默认选中 复选框 C hecked：默认选中 下拉列表框 S elected：默认选中 M ultiple：全部显示 文件上传项 文本区 提交按钮 重置按钮 普通按钮 隐藏字段 提交方式：GET：默认值 提交的数据都会在地址栏中进行显示 提交的数据的时候是有大小的限制 POST：提交的数据不会再地址栏中进行显示 提交的数据没有大小限制1.5.2.2 步 骤 分 析：步 骤 一：创 建 一

16、 个 5 行 表 格 步 骤 二：完 成 每 行 显 示 步 骤 三：中 间 行 设 置 一 个 背 景 图 片，嵌 套 一 个 表 格 居 中 显 示。在 表 格 中 显 示 表 单 的 内 容1.5.3 代 码 实 现：传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训 登录 注册 购物车 首 页   手 机 数 码   电 脑 办 公   鞋 靴 箱 包   鞋 靴 箱 包  &n

17、bsp;传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训 用户名 密码 确认密码 性别 男女Email 姓名 生日 验证码input type=text传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训name=checkcode size=10/关 于 我 们 联系我们 招贤纳士 法律声明 友 情 链 接 支付方式 配送方式 服务声明 广告声明Copyright 2005-2016 传智商城 版权所有传 智 播 客 专 注 于 J a v a、.N e

18、 t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训1.6 网 站 后 台 页 面 显 示1.6.1 需 求 分 析：在 浏 览 器 中 显 示 网 站 的 后 台 页 面，效 果 如 下 图：1.6.2 分 析：1.6.2.1 技 术 分 析：【H T M L 的 框 架 标 记】*使用了 frameset 标签，不需要使用 body.*属性：*rows：横向切分页面*cols：纵向切分页面标签代表切分每个部分的页面*src：引入页面的路径传 智 播 客 专 注 于 J a v a、.N e t 和 P h p、网 页 平 面 设 计 工 程 师 的 培 训1.6.2.2 步 骤 分 析：步 骤 一：先 将 页 面 切 分 成 上 下 两 个 部 分。步 骤 二：将 下 部 分 切 分 成 左 右 两 个 部 分。步 骤 三：分 别 引 入 不 同 的 页 面。1.6.3 代 码 实 现：1.6.4 扩 展 需 求：点 击 分 类 管 理，将 数 据 放 入 到 表 格 中 显 示 到 右 侧 区 域 中！在 frame 上添加一个属性 name，在超链接的 target 属性上设置这个名称。点击超链接的时候，跳转到指定的位置。分类管理