HTML教程(最全的图文并茂教程)ppt课件.ppt

《HTML教程(最全的图文并茂教程)ppt课件.ppt》由会员分享，可在线阅读，更多相关《HTML教程(最全的图文并茂教程)ppt课件.ppt（120页珍藏版）》请在三一办公上搜索。

1、HTML网页制作,1：HTML简介2：HTML常用标签介绍3：表单布局4：表格布局5：框架布局6：CSS样式表7：使用Dreamweaver制作网页,HTML简介,HTML：Hyper Text Markup Language 超文本标签语言HTML：网页的“源码”浏览器：“解释和执行”HTML源码的工具,HTML文档的基本结构,HTML文档的结构,我的第一个网页 Hello World!,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,网页标题,网页内容，可以是文本、图像等,这部分包括标题和其他说明信息，包括在 标签内,这部分包含文本、图像和链接，它包括在 标签内,

2、网页的摘要信息,网页摘要信息利于浏览器解析和搜索引擎搜索：使用标签, 搜狐-中国最大的门户网站, , ,使用标签（1）描述文档类型和字符编码（2）描述搜索关键字和描述,提供搜索关键字和内容描述信息，方便搜索引擎的搜索,HTML页面中的块和行,HTML标签分类（方便后续的布局设计）：块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示 分类好处：方便后续的布局设计,块级：块内包含多行,行级：包括文字、图片等,块级标签,根据使用场合，块级标签又细分为：基本块级标签 常用于布局的块级标签 标题标签, 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题,h1最大h6最小前后隔行,标题标

3、题,基本块级标签段落,段落标签, 北京欢迎你 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。,前后换行，类似教材中的段落,基本块级标签水平线,水平线标签, 北京欢迎你 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。,横线用于内容分割,单个标签的闭合形式,常用于布局的块级标签有序列表,有序列表标签,注册步骤： 填写信息 收电子邮件 注册成功 ,有序列表, 列表项1 ,常用于布局的块级标签无序列表,无序列表标签,新人上路指南 如何激活会员名？ 如何注册贵美会员？ 注册时密码设置有什么要求？ 贵美认证,无序列表, 列表项1 ,常用于布局的块级标签描述标签,定义描述标签, 咖啡 一种黑色的热饮

4、料，原料据说是咖啡豆，非洲盛产这类原料。 可以提神，刺激神经。,这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合, 标题 描述1 ,常用于布局的块级标签描述标签, 图片的HTML代码（后续讲解） 商品名称：灿坤蒸气电熨斗 商品价格：388元 商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计,用定义描述标签实现图文混编的效果,文字有一定的缩进,常用于布局的块级标签表格,表格 百度 新浪 ,-表格 -行 -列（单元格）,常用于布局的块级标签表单,表单,一般和table使用： . . ., ,常用于布局的块级标签div层,分区标签 ,div标签可内嵌到等标签内，作

5、为普通块状元素使用,一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用, 新人上路 div其实就是一个. ,小结,请说出实际开发常用的4种块状结构是什么？,1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单,行级标签图像标签,图像标签,为了不同浏览器之间的兼容，推荐使用title属性 ，确保能显示提示文字,行级标签范围标签,范围标签 ：显示某行内的独特样式,商品价格:仅售10元,文本等行级内容,设置红色、大号字突出显

6、示,行级标签换行标签,换行标签 , 北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。 北京欢迎你，为你开天辟地 流动中的魅力充满朝气。 北京欢迎你，在太阳下分享呼吸 在黄土地刷新成绩。 北京欢迎你，像音乐感动你 让我们都加油去超越自己。 ,和的区别：前后不换行,为什么需要W3C标准,W3C：World Wide Web Consortium，万维网联盟W3C的职能：负责制定和维护web行业标准W3C标准包括：列的标准：HTML内容方面：XHTML样式美化方面：CSS 结构文档访问方面：OM页面交互方面：ECMAScript,制定统一的web标准,W3C,Netscape的图标,W3C提倡的W

7、eb结构,不规范的示例,一级主题一级主题阐述文字 二级主题二级主题相关文字项目列表1项目列表2项目列表3,存在问题：1、内容和表现没分离，后期很难维护和修改 2、HTML代码不能表示页面的内容语义，不利于搜索引擎搜索,W3C提倡的Web结构,规范的示例,一级主题1 一级主题阐述文字 二级主题 二级主题阐述文字 项目列表1 项目列表2 项目列表3 ,W3C提倡的Web结构：1、内容（结构）和表现（样式）分离2、HTML内容结构要求语义化,XHTML 1.0基本规范,body部分内容,标签名和属性名称必须小写 HTML标签必须关闭 属性值必须用引号括起来 标签必须正确嵌套 必须添加文档类型声明,1

8、、声明必须位于文档的最前面2、三种级别：Strict（严格类型） 、Trasitional（过度类型）、 Frameset（框架类型）,练习1,需求说明：实现简单的商品购买页,练习2,注意HTML结构的语义化，遵守XHTML1.0基本规范,需求说明：实现商品促销页,超链接,超链接-实现页面间的导航,链接文本或图像,链接地址（目标）,超链接,灿坤蒸气电熨斗,链接在新窗口中打开, 链接热点文本或图像,链接路径,上级目录上上级目录,相对地址：相对于当前目录的地址，常用 绝对地址：指向目标地址的完整描述 ，少用,上级目录：./,上上级目录：././,登录搜狐,登录,超链接的三类应用场合, 免费注册 登

9、录 ,页面间链接 锚链接 功能性链接,常用于网站导航,相对路径,超链接的三类应用场合,实现锚链接 1、定义标记（锚）： 目标位置2、设置链接到标记位置：当前位置,明星专区 明显专区内容,定义标记,设置链接到标记位置,A.页面内的锚链接,适用于页面内容较多，超过一屏的场合,超链接的三类应用场合,实现锚链接,标记所在页.明星专区,B.页面间的锚链接,链接页.明星体验：明星专区 ,超链接的三类应用场合,功能性链接邮箱、QQ链接等,站长信箱,注释, 被注释掉的行将不显示 - 正常显示行1 正常显示行2,用于增加代码的可读性，不显示,注释,特殊符号,特殊符号空格：,COPYRIGHT 北京市贵美商城有限

10、公司 ,1、因为等符号在HTML中已使用，所以必须用其他符号来代替2、都以分号结束（；）,表单的应用,表单的典型应用,用户登录/注册,收集用户反馈信息,提供搜索工具,常见的表单元素,单行文本框(text),单选按钮(radio),复选框(checkbox),下拉列表(select),重置按钮(reset),提交按钮(submit),密码框(password),文本域(textarea),表单基本语法, 文本框、按钮等表单元素 ,指定提交后，由服务器上哪个处理程序处理,指定向服务器提交的方法：一般为post或get方法, post方法比较安全, 用户名： 密 ,表单输入元素：input,表单提交

11、地址和方法的设置,表单元素基本格式,指定元素的类型，可为text、radio、submit等,控件的名称,控件的初始值,控件的初始宽度,控件中输入的最多字符个数,控件是否被选中checked,表单各元素语法,文本框 密码框按钮单选按钮,普通按钮：button提交按钮：submit重置（清空）按钮：reset图片按钮：image,表单各元素语法,复选框 文件域列表框多行文本框, , 文本内容 ,表单的高级用法,隐藏域 方便服务器端“记住”客户端的信息、但又不希望客户看到的数据,.,隐藏的客户代号信息：666，但客户端页面不显示,隐藏域：既方便服务器端“记住”客户端的数据，又避免因显示浏览者不关心

12、的数据导致用户反感,只读和禁用属性readonly：希望某个框内的内容只允许用户看，不能修改disabled：因没达到使用的条件，限制用户使用,表单的高级用法, 欢迎阅读服务条款协议，贵美的权利和义务. 同意以上协议 ,1、用户不能修改协议2、勾选“同意以上协议”，才允许点击“注册”按钮,练习简易求职表,“协议”只读，“提交”按钮禁用,用隐藏域提交求职者姓名“zhangsan”,需求说明：使用表单制作简易求职表,表格的应用,表格应用场合,论坛中应用表格,购物网站应用表格,门户网站应用表格,基本语法, 第1个单元格的内容 第2个单元格的内容 . 第1个单元格的内容 第2个单元格的内容. , 定义

13、行, 定义列,跨行、跨列, 学生成绩 张三 语文 98 数学 95 .代码同上两行.,rowspan 跨2行,colspan 跨3列,表格高级应用,如何实现年终数据报表？,表格标题,页脚,表头,表格数据的分组标签、配合使用，对报表数据进行逻辑分组,表格高级应用,年终数据报表 月份 收入（RMB） 1月 100 2月 80 平均月收入 196.67 总计 1180 ,标签对应报表的页眉,对应报表的数据主体,对应报表的页脚,表格布局,表格布局的应用场合,图文布局，数据规则整齐,表单布局，同样要求数据规则整齐,图文布局的实现,实现步骤,图文布局的实现,实现步骤, 大学要求老师开网店 安全锤网上大热销

14、 ,整个是5行2列的表格,实际布局时border=“0”隐藏边框,公告栏：跨2列,图片：跨4行,练习：贵美商品分类,需求说明根据提供的素材实现,表单布局应用,实际页面中的登录表单布局,实际应用，需要几行几列的表格布局？,表单布局应用, 会员名: 代码同“会员名” ,整体布局：4行3列的表格,图片后的内容跨2列，内容用“空格”填充,图片按钮跨2列,小结,使用表格进行布局对显示数据有什么要求？实现思路是什么？,使用场合：数据显示要求较为规整，符合表格布局的特点 布局的实现思路：需要几行几列的表格？哪些单元格有跨行或跨列？编写表格代码实现,嵌套布局,如何用表格实现下图布局？,对于复杂的页面，如使用表

15、格则必须采用多层嵌套,嵌套布局,嵌套表格布局的缺点：代码量大层次结构也相对复杂 不利于Goole等搜索引擎搜索查找数据表格布局仅适用于：规则的数据显示表单页面,表格布局不适合不规则的复杂页面，这种场合需使用DIV+CSS布局（后续学习）,框架的应用,页面的一个固定部分显示LOGO或公司信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容，页面中此部分是变化的,产品宣传,技术论坛,客户服务,框架的用途,框架的两类用途：1、显示多窗口页面-使用框架集2、页面复用使用内嵌框架,复用站内页面：head和foot部分,复用站外内容：引用Google搜索引擎、显示sohu新闻等,框架的组成,文件

16、1：top.html,文件2：left.html,文件3：right.html,多个页面文件组成,主文件：index.html,框架基本结构,创建框架网页的步骤：创建各子窗口对应的HTML文件创建整个框架页面文件，引用子窗口文件, ,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,引用各窗口要显示的网页文件,框架基本结构,纵向分割窗口, 如浏览器不支持框架，才显示body内的内容 ,注意：1、框架和body不能共存2、为了兼容性，可以使用标签,窗口边框的宽度,将窗口分割成上中下3部分,推荐：将窗口子文件放在单独的文件中用于区分,框架基本结构,

17、横向分割窗口, ,横向分为3个窗口,框架多窗口实现,典型的2行2列结构, ,scrolling属性：是否显示滚动条,如何实现？,2行2列的窗口划分,窗口间的关联,如何实现左列导航，在右面显示相关页面？,使用标签的target目标窗口属性,窗口间的关联,实现窗口间关联的步骤1、设置窗口名（框架主页）2、设置的target属性（窗口子页面 ）,. . . .,设置右窗口名为：rightFrame,设置链接在右窗口中打开,窗口间的关联,target的其他用法在新窗口中显示：_blank在自身窗口中显示：_self在上级窗口显示：_top在父窗口显示：_parent,内嵌框架,需要使用多个文件，目录结

18、构复杂 内嵌较为灵活，可以在网页的任何位置使用可以作为模板，在本网站的多个页面复用,整个页面只有局部窗口引用sohu的内容,内嵌框架基本语法, ,和不同，放在标签内,指明引用的网页文件,内嵌框架属性,如何设置在内嵌窗口显示, 下边显示第三页 ,在内嵌窗口mainFrame显示链接内容,设置窗口名,如何实现？,练习1用框架分割多个窗口,需求说明：根据提供的子窗口页面素材,练习2实现页面复用,需求说明：根据提供的素材实现,为什么使用CSS样式表,样式表能实现内容与样式的分离，方便团队开发 css garden http:/,程序员写代码,美工做样式,内容与样式和谐统一的完整网页,为什么使用样式表,

19、样式复用、方便网站的后期维护,同一网站共用同一样式，确保网站统一的风格,页面的精确控制，实现精美、复杂页面,CSS的用途,1、外观美化2、布局、定位,CSS基本语法, 选择器（即修饰对象） 对象的属性1: 属性值1; 对象的属性2: 属性值2; ,标签声明标签内为CSS,多条样式规则1.多个属性间用分号分隔2.用冒号声明对应属性值,li color: red; font-size: 30px; font-family: 隶书;,选择器,样式规则,选择器的分类,标签选择器, li color:red; font-size:28px; font-family:隶书; 家用电器 ,标签选择器：用于修

20、饰同类HTML标签的共性风格,选择器的分类, .bluecolor:blue; 家用电器各类书籍手机数码日用百货,如果希望部分li标签采用其他样式，怎么办？,类选择器(class),定义样式，注意类名有点号,应用类样式，其他元素也可以使用,选择器的分类,#menu width:200px; background:#ccc; font:bold 14px 宋体; 家用电器 ,ID选择器,如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？,文本属性,行距、对齐等：line-height （行高） text-align （对齐） letter-spacing （字符间距）text-decor

21、ation （文本修饰 ）white-space （空白处理 ）,字符间距：5px文本修饰：带下划线空白处理：不断行,字体、字号：font（缩写形式）font-weight（粗细） font-size（大小） font-family（字体）,字体：宋体颜色：红色字号：12px对齐：左对齐,文本属性,li font: 12px 宋体; text-align:left; line-height:28px; .title letter-spacing:5px; white-space:nowrap; text-decoration:underline; .bigFont font-size:16px

22、; color:red; ,所有的默认样式：字体、字号：宋体，12px对齐方式：左对齐行高：28px,首行标题样式：字符间距：5px空白处理：不换行文本修饰：带下滑线,大字体样式：字号：16px颜色：红色,font字体样式的缩写形式,背景属性,背景属性：background （缩写形式）background-color（背景色 ）background-image（背景图 ）background-repeat（背景图重复方式 ）background-position（位置坐标、偏移量）,四类平铺效果,背景属性,div background:url(images/bg.jpg) no-repeat

23、; background-position: -70px -60px,背景出现的水平和垂直位置坐标，实现各种拍偏移效果,设置背景图片、不重复平铺,各种偏移效果,背景属性的经典应用,图标截取-背景偏移量技术,利用background-position的坐标偏移量，从同一张背景图中截取菜单图标,背景属性的经典应用,divwidth:80px;background:url(images/icon.gif) no-repeat; .helpbackground-position:-80px 0px; .loginwidth:40px;background-position:0px -20px; ; 购

24、 帮助中心 登录,所有IDV标签设置为同一背景图、等宽,分别设置各图标的坐标偏移量,背景属性的经典应用,1 .设置三个标签（如div）的背景为同一图片背景,2 .考虑“购物车”、“帮助中心”图标的坐标偏移量是多少？,3 .考虑“登录”图标的坐偏移量是多少？,Y,X,O(0,0),列表属性,列表（li）常用属性list-style （列表风格）,list-style属性规定的列表风格,列表属性,列表属性的典型应用：导航菜单, li width:150px; color:red; font:28px 隶书; list-style:none; float:left; 购物车 ,设置列表为none去掉

25、圆点,所有html标签都有的float浮动属性，此处用于横向排列,如何控制CSS样式,盒模型,网页中的所有元素可以看作一个一个的“盒子”,元素内容 填充（也称内边距） 边框边界（也称外边距）,如何控制CSS样式,样式控制思路,盒内样式修饰 盒子位置布局,盒内样式：设置网页元素的颜色、字体等外观,盒子位置布局：确定盒子所在的位置、和其他网页元素的关系,为什么需要盒子属性,盒子模型是网页布局的基础盒子属性是盒子模型的关键属性,盒子模型平面图,盒子模型三维立体图：注意背景色在背景图的下一层,什么是盒子属性,盒子属性：margin（外边距/边界） border（边框） padding（内边距/填充 ）

26、 各属性又分为 四个方向,margin-right右边界,margin-left左边界,margin-top上边界,margin-bottom下边界,margin,border,padding,margin外边距,可统一设置或四边分开设置margin属性marginmargin-topmargin-rightmargin-bottommargin-left,margin-right右边界,margin-left左边界,margin-top上边界,margin-bottom下边界,margin：1px，2px，3px，4px;margin：1px，2px;margin：0px auto ;mar

27、gin-left:1px;,分别代表什么含义？,border边框,border属性border-colorborder-widthborder-style,border-topborder-rightborder-bottomborder-left,borderborder-left,修饰属性,四个方向,缩写形式,border,每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置,border-style: none;border: 1px solid red;border-right: 5px dotted blue;,分别代表什么含义？,使用border属性修

28、饰表单,.textBorder border-width:1px; border-style:solid;名字：密码：,细边框的样式,adding内边距,adding属性paddingpadding-toppadding-rightpadding-bottompadding-left,padding-left : 5px;padding: 5px 10px 20px 40pxpadding: 5px 10px,分别代表什么含义？,四个边可以一次设置，也可以分别设置,padding,元素的宽高及实际占位,元素的实际占位（实际宽、高）盒子高度 = height属性 + 上下填充高度 + 上下边框高

29、度盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度,height:40px,border-width-top: 20px,margin-top: 10px,右图图片的实际的高度是多少？,padding-top: 5px,使用盒子属性布局元素,上外边距30px,下填充40px,左右外边距：水平居中,左填充80px,5px宽的边框,如何实现如下贵美logo图片的布局？,图片背景色：#ff7300,页面背景色：#ccc,使用盒子属性布局元素, body margin:0px;padding:0px; background:#ccc; #logo width:380px; border

30、:5px solid #666; padding:10px 20px 40px 80px; background:#ff7300; margin:30px auto; /水平居中 ,设置页面内容（body）的背景和居中效果,“贵美商城”logo图片的布局,首先组织HTML结构，再写CSS进行布局或美化,使用盒子属性实现DIV+CSS布局,如何实现注册页面的布局？,main：主体部分,footer：底部部分,header：顶部,使用盒子属性实现DIV+CSS布局,实现步骤1、分析页面的分块结构，形成HTML组织结构,为了控制整个页面的居中，添加一个大容器：container,main：主体部分,

31、footer：底部部分,header：顶部,使用盒子属性实现DIV+CSS布局,实现步骤2、编写每个DIV块的CSS控制定位,#containe:980px 、居中,#header： 136px;、背景色#ccc,#main： 400px;、背景色#fff,#footer： 100px;、背景色#ccc,为什么需要float浮动属性,如何解决中间两块布局无法同行显示的问题？,如何实现为希望的布局？,什么是float浮动属性,脱离常规文档流而表现为向右或向左浮动,默认的常规文档流：页面内容从上到下，从左到右排列。DIV块换行显示,向右浮动，脱离常规文档流,什么是float浮动属性,浮动的三大显著

32、特征,1.DIV块元素失去“块状”换行显示特征，变为行内元素,什么是float浮动属性,浮动的三大显著特征,2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示,什么是float浮动属性,浮动的三大显著特征,3.占据行内元素的空间，导致行内元素围绕显示,为什么需要clear区隔属性,第3个DIV块随窗口大小决定是否换行，如希望“强制”换行怎么办？,如何实现第3块换行显示？,什么是clear清除属性,clear作用如果前一个元素存在左浮动或右浮动，则换行以区隔 只对块级元素有效clear属性的取值rightleftboth none,超链接样式的特点,超链接样式的特殊性文本或图

33、像加上链接，将失去原样式而继承链接的样式,加链接后，图片/文本样式的变化,超链接样式的四种状态未访问状态（a:link ）已访问状态（a:visited ）鼠标移上状态（a:hover ）激活选定状态（a:active ）,可以分别设置链接的四种状态的样式,超链接伪类样式,超链接伪类样式,采用选择器：状态的方式分别定义样式，一般称为伪类,如何设置超链接的样式, .nav li a padding:8px 15px; .nav li a:hover color:#ff7300;font-size:20px; 家用电器 手机数码,1、先定义共有样式：表示.nai类下标签中的链接样式,设置超链接样式

34、的步骤：1、确定页面所有链接样式是否相同，否则分开定义2、先定义四个状态共有样式，再分别定义其他状态,2、再单独定义某个状态特有的样式,导航版块的链接样式一般和页面样式不同，需单独定义,如何应用样式,三类应用样式的方式内部样式表 外部样式表 行内样式, . /样式定义 /HTML内容,HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用,如何应用样式,三类应用样式的方式内部样式表 外部样式表 行内样式,.nav li apadding:8px 10px;. /CSS样式定义,/HTML内容,分别定义*.css和*.html文件，样式和内容彻底分离，多个网页可共享同

35、一CSS,如何应用样式,三类应用样式的方式内部样式表 外部样式表 行内样式表, 日用百货,单独定义某个元素的样式，灵活方便。但因为内容与样式混写在一起，应尽量少用或不用,样式的优先级,各类样式有继承各类样式的优先级浏览器默认设置外部样式表文件 内部样式表 行内样式表 ID选择器类选择器标签选择器,由低到高，“近者优先”原则,样式的优先级,“日用百货”链接, .nav ul li a:linkcolor:blue; 家用电器 手机数码 日用百货 ,内部样式表,外部样式表,行内样式表,红色,蓝色,样式的优先级,购物车的样式, #nav_id width:300px;background: #ccc; .nav height:100px; background: red; div border:5px solid green; background: blue; 购物车 ,ID选择器,类选择器,标签选择器,不冲突的样式，边框5px、绿色,同时应用ID、class、标签三类选择器,灰色背景,练习使用超链接伪类实现导航条,需求说明：用提供的背景图素材，实现如下导航菜单效果 要求使用外部样式表div-ul-li结构,链接无下划线（text-decoration），鼠标悬停，显示菜单的投影背景（background） 、字体变大,行高：24px字体大小：10px,