HTML篇互联网IT计算机专业资料11

第页第一章01篇今日教学任务网站信息页面案例(字体标签、排版标签)网站图片信息页面案例(图片标签)网站友情链接页面案例(列表标签)网站首页案例(表格标签)网站注册页面案例(表单标签)网站后台页面案例(框架)教学导航教学目标了解什么是标记语言了解什主要特性、主要变化和发展趋势了解结构标签掌握的主要标签(字体、图片、列表、链接和表单标签)教学方法案例驱动法一、网站信息页面显示案例1.需求分析我们要在浏览器中实现一段文本信息的显示，效果如下：2.技术分析【的概述】2.1什么是?：超文本标记语言，它不是编程语言，它直接被浏览器解释执行。 超文本：比普通文本功能更加强大。 标记语言：使用一组标签对内容进行描述的一门语言。2.2为什么要学习?正常情况，我们会使用别人已经写好的静态页面，如果你没有相关知识的了解，那么你不能进行下一步的开发了，所以我们需要学习相关技术。2.3在哪些地方会使用？但凡涉及到页面设计的内容，都可以使用技术。2.4怎么使用?的语法和规范：文件都是以或者结尾。建议大家使用结尾。文件都是由头部分和体部分组成(头部分<><>体部分<><>)的标签都是成对出现的。(<b>内容<></>)标签忽略大小写的建议大家使用小写。字体标签<><>:代表的是字体标签。属性：，字体的大小。从1到7逐步变大，超过7的按照7来进行显示 ,代表是颜色，可以使用单词表示，还可以使用十六进制。 ,代表的是字体，选取的字体必须是本机已存在的。排版标签标题标签：</> 加粗加黑显示的。水平线标签：</>加粗标签：<b><>换行标签：</>段落标签：<p><>3.步骤分析第一步：创建一个文件第二步：创建一个标签第三步：创建一个水平线第四步：创建四个段落第五步：对段落里面的文件进行一些样式的改变。4.代码实现<> <> <"8"> <>网站信息页面显示<> <> <> <h1>公司简介<1> </> <p><"">“中关村黑马程序员训练营”<>是由<b>传智播客<>联合中关村软件园、，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。</>目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。<> <p>黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。<> <p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。<> <p>一直以来，黑马程序员以技术视角关注产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、开放和协作，努力打造高质量的人才服务平台。<> <><>二、网站图片显示页面1.需求分析如果一个网站全部使用文字进行描述，会显得比较，我们希望希望添加一些图片让整个网页显示得更加丰富。效果如下：2.技术分析图片标签：</>属性：：指定图片的位置(路径) 相对路径： ：代表的是当前目录 ：代表的是上一级目录。 绝对路劲： E:\\\\0423就业班\01\资料\01\课堂演示图片汇总\：指定图片的宽度。：指定图片的高度。 ：当这个图片无法正常显示的时候给出的提示信息。(不同的浏览器显示的效果不一样)显示效果：火狐显示效果：3.步骤分析第一步：创建一个文件第二步：使用标签引入的图片第三步：使用标签引入广告图片。4.代码实现<> <> <"8"> <>网站图片显示页面<> <> <> <"2"/> <""/> <><>三、网站列表页面显示1.需求分析我们希望在网站首页的底部(友情链接)，实现一个显示其他公司的信息。2.技术分析列表标签列表标签分为：有序列表和无序列表。无序列表： <>列表项一<><>列表项二<><>列表项三<>属性： ：实心小圆点：实心小方块：空心小圆圈有序列表： <>列表项一<><>列表项二<><>列表项三<><> <"1"从几开始(必须是有序列表，而且是数字)从几开始(必须是有序列表，而且是数字)降序显示(5432) <>阿里巴巴<> <>京东<> <>百度<> <>传智播客<> <><>4.代码实现超链接标签<a>内容<>代表的是超链接属性： :点击超链接内容跳转到的一个位置。 ：在浏览器哪个位置显示 在当前选项卡标签进行显示 在新的选项卡标签进行显示<> <> <"8"> <>友情链接<> <> <> <> <><a"#">阿里巴巴<><> <><a"案例一：网站信息页面显示/网站信息页面显示""">京东<><> <><a"案例一：网站信息页面显示/网站信息页面显示""">百度<><> <><a"案例一：网站信息页面显示/网站信息页面显示""">传智播客<><> <> <><>四、网站首页显示案例1.需求分析我们希望在浏览器中显示一个商城首页的页面，显示的效果如下：2.技术分析表格标签<>代表整个表格代表整个表格<><>代表的是单元格(代表的是单元格(列)<>代表代表的是行属性： :表格的边框 :设置表格的宽度(单位可以是像素，还可以是百分比) ：设置表格的高度(单位可以是像素，还可以是百分比) ：设置单元格和单元格的间距 ：设置单元格月里面内容的间距 ：设置表格显示的位置(、、) :这是表格的背景颜色。跨行、跨列的操作需求：属性介绍： :跨行(在同一列才能跨行) :跨列(在同一行才能跨列)<> <> <"8"> <>表格的跨行跨列<> <> <> <"1""0""0""500""300"""> <> <"2""">11<> <>13<> <>14<> <> <> <>21<> <"2""2"> <"1""100%""100%"> <> <>11<> <>12<> <>13<> <> <> <>21<> <>22<> <>23<> <> <> <>31<> <>32<> <>33<> <> <> <> <>24<> <> <> <>31<> <"2">34<> <> <> <>41<> <>42<> <>43<> <> <> <><>3.步骤分析第一步：创建一个八行一列的表格第二步：实现第一行(嵌套一个一行三列的表格)，然后分别对嵌套表格单元格进行实现第三步：实现二行(使用字体标签来实现，带有超链接效果)第四步：在第三行放置一张轮播图片(静态的)第五步：在第四行中嵌套一个三行七列的表格(分别实现)第六步：在第五行放置一张图片(广告)第七步：在第六行复制第四行的内容第八步：在第七行放置一张图片第九步：在第八行添加一些文字信息和超链接4.代码实现<> <> <"8"> <>网站首页显示页面<> <> <> <"0""1300""""0""0"> <1部分> <> <> <嵌套一个一行三列的表格> <"100%""0""0""0"> <"50"> <"33.3%"> <"2""47"/> <> <"33.3%"> <"""47"/> <> <"33.3%"> ;<a"#">登录<>; <a"#">注册<>; <a"#">购物车<> <> <> <> <> <> <2.导航栏部分> <""> <"50"> ;<a"#"><"""5">首页<><>; <a"#"><"""3">手机数码<><>; <a"#"><"""3">电脑办公<><>; <a"#"><"""3">鞋靴箱包<><>; <a"#"><"""3">孕婴保健<><> <> <> <3.轮播图> <> <> <"1""100%"/> <> <> <4.热门商品> <> <> <嵌套了一个三行七列的表格> <"0""100%""0""0"> <"50"> <"7"> ;<"5">热门商品<>; <"2"/> <> <> <> <"2""600""190"> <"01""100%""100%"/> <> <"3""555""250"> <a"#"><"01""100%""100%"/><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <> <> <> <> <5.广告图片> <> <> <"""100%"/> <> <> <6.热门商品> <> <> <嵌套了一个三行七列的表格> <"0""100%""0""0"> <"50"> <"7"> ;<"5">热门商品<>; <"2"/> <> <> <> <"2""600""190"> <"01""100%""100%"/> <> <"3""555""250"> <a"#"><"01""100%""100%"/><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%""50%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <"185""250"""> <a"#"><"03""100%"/><> <p><"">电炖锅<><> <p><"">¥299<><> <> <> <> <> <> <7.广告图片> <> <> <"""100%"/> <> <> <8.友情链接和版权信息> <""> <> <a"#">关于我们<> <a"#">联系我们<> <a"#">招贤纳士<> <a"#">法律声明<> <a"#">友情链接<> <a"#">支付方式<> <a"#">配送方式<> <a"#">服务声明<> <a"#">广告声明<> <p>©2019-2019传智商城版权所有<> <> <> <> <><>五、网站注册显示页面案例1.需求分析用户如果想要在网站进行购物，那么必须成为这个网站的会员，在成为会员之前，得先注册。我们就要实现一个注册的功能。效果：2.技术分析表单标签需要提交到服务器端的表单需要使用<><>括起来。属性： :指定表单的名称 ：整个表单提交的位置。 :提交的方式()<"""#"""> <指定表单的类型。"隐藏域。""指定表单的类型。隐藏域。 用户名：<"文本输入框"用于后台获取该字段的值。""输入框的宽度。"100"输入内容的长度"4"文本输入框用于后台获取该字段的值。输入框的宽度。输入内容的长度 密码：<"密码框"""/></>密码框 确认密码：<""""/></> 爱好：<"复选框"对复选框内容进行分组，划到同一组的，值必须相同。""复选框对复选框内容进行分组，划到同一组的，值必须相同。提交数据到服务器必须指定的属性。 <"""""吃肉"/>吃肉</> 性别：<"单选框。""""男"/>单选框。 <"""""女"/默认选中"">女<默认选中 籍贯： <""> <>请选择<> <"湖北">湖北<> <"湖南""">湖南<> <></> 头像： <"文件上传项"""/><文件上传项 自我介绍： <"3""4"> <></> <"提交按钮"提交按钮 <"普通按钮，它必须结合使用才会有效果。""注册普通按钮，它必须结合使用才会有效果。 <"重置按钮。"重置按钮。<>面试题： 和的区别提交方式会将表单里面数据显示在地址栏，不够安全，长度有限制提交方式不会将表单里面数据显示在地址栏，比较安全，长度没有限制。3.步骤分析第一步：创建一个五行一列的表格第二步：复制之前的内容(第一行、第二行、第四行、第五行)第三步：第三行嵌套一个十行两列的表格(表单)4.代码实现<3.注册表单><"600"> <""> <"#"""> <"4""0""0""800""500"""""> <> <"2"> <"6">会员注册<> <> <> <> <>用户名<> <> <"""""50"/> <> <> <> <>密码<> <> <"""""50"/> <> <> <> <>确认密码<> <> <"""""50"/> <> <> <> <><> <>