JavaEE 传智28期教程day01html参考.docx
- 文档编号:25969286
- 上传时间:2023-06-16
- 格式:DOCX
- 页数:28
- 大小:259.16KB
JavaEE 传智28期教程day01html参考.docx
《JavaEE 传智28期教程day01html参考.docx》由会员分享,可在线阅读,更多相关《JavaEE 传智28期教程day01html参考.docx(28页珍藏版)》请在冰豆网上搜索。
JavaEE传智28期教程day01html参考
day01-html
今日任务
Ø网站信息页面案例
Ø网站图片信息页面案例
Ø网站友情链接页面案例
Ø网站首页案例
Ø网站注册页面案例
Ø网站后台页面案例
教学导航
教学目标
了解什么是标记语言
了解HTML主要特性,主要变化及发展趋势
了解HTML的结构标签
掌握HTML的主要标签(字体,图片,列表,链接,表单等标签)
教学方法
案例驱动法
网站信息页面显示案例:
需求分析:
在网页中显示一个文字信息页面,显示效果如下:
分析:
技术分析
【HTML的概述】
Ø什么是HTML
HTML:
HyperTextMarkupLanguage超文本标记语言
●超文本:
比文本功能更加强大
●标记语言:
通过一组标签对内容进行描述的一门语言
Ø为什么学习HTML
HTML是设计页面基础
Ø在哪些地方可以使用HTML
设计页面的时候都可以使用HTML
Ø如何使用HTML
HTML的语法和规范
●HTML文件的扩展名是.html或者是.htm
●HTML文件是由头和体组成
●HTML这组标签是不区分大小写
●HTML的标记通常是由开始标签和结束标签组成:
内容
【HTML的字体标签】
标签
文字
●size:
控制字体大小.最小1最大7
●color:
控制字体颜色.使用英文设置,使用16进制数设置
●face:
控制字体.
【HTML的排版标签】
b标题
段落标签
一段文字
换行标签
代表换行
水平线标签
水平线标签
字体加粗
文字
斜体标签
斜体
步骤分析
Ø步骤一:
创建一个html文件
Ø步骤二:
创建标题标签
Ø步骤三:
标题下面会有一个水平线
Ø步骤四:
创建段落标签创建四个段落
Ø步骤五:
将某些文字设置为红色
代码实现
--创建标题标签-->
公司简介
--
作者:
offline
时间:
2016-01-21
描述:
水平线
-->
--
作者:
offline
时间:
2016-01-21
描述:
创建段落标签
-->
目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地,并被评为中关村软件园重点扶持人才企业。
黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。
黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。
任何一名学员想成功入学“黑马程序员”,必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、品德测试等等测试。
毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。
百里挑一的残酷筛选制度确保学员质量,并降低企业的用人风险。
中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新,不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。
一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、开放和协作,努力打造高质量的IT人才服务平台。
网站的图片页面显示
需求分析:
在网页中显示带有图片的页面效果如下:
分析:
技术分析:
【HTML的图片标记】
●src:
图片的路径
●width:
图片宽度
●height:
图片的高度
●alt:
图片提示
图片路径:
●分成相对路径和绝对路径
●相对路径:
⏹./:
代表当前路径
⏹../:
代表上一级路径
步骤分析:
Ø创建一个img标签引入logo图片
Ø创建一个img标签引入header图片
代码实现
网站的列表显示页面
需求分析:
在页面中列表显示友情链接:
分析:
技术分析
【HTML的列表标签】
无序列表
- 内容1
- 内容2
有序列表
- 内容1
- 内容2
步骤实现
Ø创建一个无序列表显示友情链接
代码实现
- XX
- 传智播客
- 百合网
- 世纪佳缘
总结:
【超链接标签】
●href:
超链接跳转的路径
●target:
打开方式
⏹_self:
在自身页面打开
⏹_blank:
打开一个新窗口
网站的首页显示
需求分析:
在浏览器中显示网站的首页效果如下:
分析:
技术分析
【HTML的表格标签】
表格标签:
表格的属性:
●border:
表格边框
●width:
表格宽度
●height:
表格高度
●align:
水平方向对齐方式leftcenterright
●bgcolor:
背景色
步骤分析:
Ø步骤一:
创建8行表格
Ø步骤二:
实现第一行,嵌套一个一行三列表格。
Ø步骤三:
实现第二行,实现导航,设置背景色。
Ø步骤四:
放置一张图片
Ø步骤五:
显示热门商品,创建一个三行七列的表格。
对表格进行跨行,跨列的操作。
Ø步骤六:
引入一张广告图片。
Ø步骤七:
显示最新商品,创建一个三行七列的表格。
对表格进行跨行,跨列的操作。
Ø步骤八:
广告信息
Ø步骤九:
链接版权信息。
代码实现
DOCTYPEhtml>
--LOGO部分-->
网站注册页面显示/网站的注册页面.html">注册
--导航部分-->
--广告-->
网站信息页面显示/网站信息页面显示.html">关于我们 网站列表页面显示/网站列表页面显示.html">友情链接 Copyright©2005-2016传智商城版权所有
网站的注册页面案例:
需求分析:
在浏览器中显示如下的效果:
分析:
技术分析:
【HTML的表单标签】
表单标签:
●需要提交的表单需要使用
括起来⏹action:
提交路径
⏹method:
提交方式
●文本框:
⏹
◆name
◆value
◆size
◆maxlength
◆readonly
●密码框:
⏹
●单选按钮:
⏹
◆Checked:
默认选中
●复选框
⏹
◆Checked:
默认选中
●下拉列表框
⏹
◆Selected:
默认选中
◆Multiple:
全部显示
●文件上传项
⏹
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaEE 传智28期教程day01html参考 传智 28 教程 day01html 参考
![提示](https://static.bdocx.com/images/bang_tan.gif)