《JavaEE 传智28期教程day01html参考.docx》由会员分享,可在线阅读,更多相关《JavaEE 传智28期教程day01html参考.docx(20页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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 属性上设置这个名称。点击超链接的时候,跳转到指定的位置。分类管理