网站前端开发 课件 第1章 网站前端开发要掌握的技术.pptx

商务网页制作 目 录 / CONTENTS制作我的第一个网页1认识HTML文件基本结构2 制作我的第一个网页? 试一试，制作我的第一个页面，代码如下。!DOCTYPE HTMLhtml head title这是我的一个网页/title link rel=stylesheet type=text/css href=css/style.css meta charset=utf-8/head body h1hello world/h1 /body/html HTML和CSS的关系 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：1.HTML是网页内容的载体。意思就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。通俗地说，HTML是用来制作网页的。2.CSS样式是表现。是用来美化网页的。比如，用来设定字体的颜色、大小、字号，是否要加入边框、阴影等等。3.JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单或鼠标滑过表格的背景颜色改变。还有购物页面海报轮播图，有动画的，有交互的一般都是用JavaScript来实现的。 总结··总结·我们实现网页的时候，新建以下目录：在根目录下新建记事本，改名为index.html。在这里，可能小伙伴会遇到，新建的文件没有后缀名出现，此时，去文件夹选项中-查看-“已知文件类型的扩展名”前面的打钩去掉，即可。取消隐藏已知文件类型的扩展名 认识HTML文件基本结构一个HTML文件是有自己固定的结构的，结构如下。html head.../head body.../body/html代码讲解：1．html/html称为根标签，所有的网页标签都在html/html中。2．head标签用于定义文档的头部，它是所有头部元素的容器。头部元素有title、script、style、link、meta等标签，头部标签在1.4小节中会有详细介绍。3．在body和/body标签之间的内容是网页的主要内容，如h1、p、a、img等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。 试一试：大家在sublime中输入h如下图,按回车,会出现完整的html语句结构。试一试完整的html语句结构 （6）a/a （5）img认识以下标签（2）div /div(1)p /p（3）span /span（4）h1、h2、h3、h4 完成效果所示 课后作业完成以下效果：请用html语言完成以下效果：注意网页标题用：我的第一次课作业 Thank You