HTML5+CSS3网站设计基础全套教程.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2020-5-10,单击此处编辑母版标题样式,单击此处编辑母版副标题样式,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,新的文档声明和语法规范,|HTML5,废弃的标签和属性,|HTML5,新标签,认识,HTML5,项目要点,HTML5,文档声明,01.,02.,HTML5,废弃以及新增的标签和属性,技能目标,掌握,HTML5,的文档声明和语法规范,01.,02.,了解,HTML5,的新标签,任务,1,新的文档声明和语法规范,任务,1,新的文档声明和语法规范,HTML5,万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（,HTML,）的第五次重大修改。,HTML,（,Hyper Text Markup Language,，超文本标记语言或叫超文本标签语言）是用来描述网页的一种语言，是创建,Web,页的基础。,HTML,不是一种编程语言，而是一种标记语言（,Markup Language,），标记语言是一套标记标签，,HTML,使用标记标签来描述网页。,HTML5,的设计目的是为了在移动设备上支持多媒体，如,video,、,audio,和,canvas,标记。,HTML5,提供了一些新的元素和属性，例如,（网站导航块）和,。这种标签有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用。,01,声明必须位于,HTML5,文档中的第一行。也就是位于,标签之前。该标签告诉浏览器文档所使用的,HTML,规范。,02,doctype,声明不属于,HTMIL,标签；它是一条指令，告诉浏览器编写页面所用的标记的版本。在所有,HTML,文档中，规定,doctype,是非常重要的，这样浏览器就能了解预期的文档类型。,任务,1,新的文档声明和语法规范,03,无标题文档,任务,1,新的文档声明和语法规范,大小写不敏感。而且它没有结束标签。,meta,的属性，没有相应的结束标签，该标签不包含任何内容，,标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，使用该标签描述网页的具体摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。,任务,1,新的文档声明和语法规范,标签的属性定义了与文档相关联的名称,/,值对。,其中属性“,http-equiv”,提供“名称,/,值”中的名称，“,content”,提供“名称,/,值”中的值，所以上述,HTML,代码的含义如下：名称,Content-Type,（文档内容类型），值,text/htm,；,charest=gb2312,（文本类型的,HTML,类型，字符编码为简体中文）中,charest,表示字符编码，常用字符编码有如下,4,种：,gb2312,：简体中文，一般用于包含中文和英文的页面。,ISO-885901,：纯英文一般用于只包含英文的页面。,big5,：繁体，一般用于带有繁体字的页面。,utf-8,：国际通用字符编码，同样适用于中文和英文的页面。与,gb2312,编码相比，,utf-8,的国际通用性更好，,utf-8,（,8-bit Unicode Trasformation Fomat),是一种针对,Unicode,的可变长度字符编码，又称万国码,任务,1,新的文档声明和语法规范,任务,2 HTML5,废弃的标签和属性,实践,SQL*Plus,格式命令,任务,3 HTML5,新标签,实践,SQL*Plus,格式命令,任务,3 HTML5,新标签,命令行方式创建用户,01,canvas,标签,任务,3 HTML5,新标签,命令行方式创建用户,02,HTML5,的新多媒体标签,任务,3 HTML5,新标签,命令行方式创建用户,03,新表单元素,标签,描述,定义选项列表。请与,input,元素配合使用该元素，来定义,input,可能的值,规定用于表单的密钥对生成器字段,定义不同类型的输出，比如脚本的输出,任务,3 HTML5,新标签,命令行方式创建用户,04,HTML5,的新语义标签,标签,描述,定义页面独立的内容区域。表示页面中一块与上下文不相关的独立内容。比如一篇文章,定义页面的侧边栏内容。表示,article,元素内容之外的、与,article,元素内容相关的辅助信息,允许您设置一段文本，使其脱离其父元素的文本方向设置,定义命令按钮，比如单选按钮、复选框或按钮,用于描述文档或文档某个部分的细节,定义对话框，比如提示框,标签包含,details,元素的标题,规定独立的流内容（图像、图表、照片、代码等等）。使用,figcaption,元素为,figure,元素组添加标题,定义,元素的标题,定义,section,或,document,的页脚。表示整个页面或页面中一个内容区块的脚注。一般会包含创作者的姓名、创作日期以及创作者的联系信息,定义了文档的头部区域。表示页面中一个内容区块或真个页面的标题,定义带有记号的文本。,定义度量衡。仅用于已知最大和最小值的度量,定义导航链接的部分,定义任何类型的任务的进度。,定义,ruby,注释（中文注音或字符）,定义字符（中文注音或字符）的解释或发音。,在,ruby,注释中使用，定义不支持,ruby,元素的浏览器所显示的内容,定义文档中的节（,section,、区段）,定义日期或时间,规定在文本中的何处适合添加换行符,感谢聆听,初识,HTML,|,“李清照宋词赏析”页面制作,|,“商品信息”页面制作,|,“相宜本草促销”页面制作,|,注释和特殊符号,|,W3C,标准,使用,HTML5,的基本标签,知识目标,掌握静态页面的开发环境,01.,02.,掌握,HTML5,基本标签的使用,能力目标,能使用,Dreamweaver,编写,HTML,代码,01.,02.,能使用各种基本标签建立简单网页,任务,1,初识,HTML,01,02,HTML,文件的基本结构,编辑工具,01,HTML,及其特点,任务,1,初识,HTML,-01,HTML,文件的基本结构,02,HTML,与浏览器的关系,03,HTML,的基本结构,01,记事本,任务,1,初识,HTML,-02,编辑工具,03,其他编辑器,02,Dreamweaver,任务,2,“李清照宋词赏析”页面制作,01,02,03,标题标签,段落标签,水平线标签,实践,SQL*Plus,格式命令,任务,2,李清照宋词赏析”页面制作,-01,标题标签,标题标签,一级标题,二级标题,三级标题,四级标题,五级标题,六级标题,任务,2,李清照宋词赏析”页面制作,-02,段落标签,命令行方式创建用户,我和我的祖国,填,词：张藜,谱,曲：秦咏诚,歌曲原唱：李谷一,我和我的祖国，一刻也不能分割,无论我走到哪里，都流出一首赞歌,我歌唱每一座高山，我歌唱每一条河,袅袅炊烟，小小村落，路上一道辙,我最亲爱的祖国，我永远紧贴着你的心窝,你用你那母亲的脉搏和我诉说,任务,2,李清照宋词赏析”页面制作,-03,水平线标签,命令行方式创建用户,我和我的祖国,填,词：张藜,谱,曲：秦咏诚,歌曲原唱：李谷一,我和我的祖国，一刻也不能分割,无论我走到哪里，都流出一首赞歌,我歌唱每一座高山，我歌唱每一条河,袅袅炊烟，小小村落，路上一道辙,我最亲爱的祖国，我永远紧贴着你的心窝,你用你那母亲的脉搏和我诉说,我的祖国和我，像海和浪花一朵,浪是海的赤子，海是那浪的依托,每当大海在微笑，我就是笑的旋涡,我分担着海的忧愁，分享海的欢乐,我最亲爱的祖国，你是大海永不干涸,永远给我，碧浪清波，心中的歌,任务,3,“商品信息”页面制作,01,02,03,有序列表标签,无序列表标签,定义列表标签,表格标签,04,表单标签,05,分区标签,06,任务,3,“商品信息”页面制作,-01,有序列表标签,命令行方式创建用户,CSS+DIV,页面布局技术所学知识：,项目一,HTML,的基本标签,项目二 表单应用,项目三 表格应用和布局,项目四,CSS,样式表,任务,3,“商品信息”页面制作,-02,无,序列表标签,命令行方式创建用户,一个无序列表：,咖啡,茶,牛奶,任务,3,“商品信息”页面制作,-03,定义列表标签,命,它使用,、,表示定义列表，,、,表示术语，,、,表示术语的具体描述，其中,dl,是,definition lists,的缩写，,是,definition term,的缩写，,是,definition description,的缩写。,令行方式创建用户,海阔天空,比喻象大海一样辽阔，象天空一样无边无际。形容大自然的广阔。出自：唐刘氏瑶暗离别诗：“青鸾脉脉西飞去，海阔天高不知处。”,任务,3,“商品信息”页面制作,-04,表格标签,命令行方式创建用户,任务,3,“商品信息”页面制作,-05,表单标签,命令行方式创建用户,任务,3,“商品信息”页面制作,-06,分区标签,命令行方式创建用户,放置在,DIV,中的段落，,div,简单而言是一个区块容器标记，即,div,相当于一个容器，一个“装东西的盒子”，可以容纳段落、标题、表单、图片、乃至单元等各种,HTML,元素。,放置在,DIV,中的标题标签,放置在,DIV,中的无序列表标签,放置在,DIV,中的无序列表标签,放置在,DIV,中的无序列表标签,放置在,DIV,中的无序列表标签,div,标签中的普通文字,.,任务,4,“商品信息”页面制作,01,02,03,图像标签,范围标签,换行标签,超链接,标签,04,任务,4,“商品信息”页面制作,-01,图像标签,命令行方式创建用户,春节指汉字文化圈传统上的农历新年，传统名称为新年、大年。,农历正月初一开始为新年，一般认为至少要到正月十五（上元节）新年才结束。,任务,4,“商品信息”页面制作,-02,范围标签,命令行方式创建用户,春节指汉字文化圈传统上的农历新年，传统名称为,新年、大年,。,农历正月初一开始为新年，一般认为至少要到正月十五（上元节）新年才结束。,任务,4,“商品信息”页面制作,-03,换行标签,命令行方式创建用户,阳光，不只来自太阳，也来自我们的心,阳光，不只来自太阳，也来自我们的心。,心里有阳光，能看到到世界美好的一面；,心里有阳光，能与有缘的人心心相映；,心里有阳光，即使在有遗憾的日子，也会保留温暖与热情；,心里有阳光，才能提升生命品质。,自信、宽容、给予、爱、感恩吧，让心里的阳光，照亮生活中的点点滴滴，阳光的心，造就阳光的命运。,任务,4,“商品信息”页面制作,-04,超链接,标签,target,属性的值,属性含义描述,_blank,在新窗口中打开被链接文档,_self,默认。在原浏览器窗口或者相同的框架中打开被链接文档,_parent,在父框架集中打开被链接文档,_top,在顶级窗口中打开被链接文档,framename,在指定的框架中打开被链接文档,任务,4,“商品信息”页面制作,-04,超链接,标签,免费注册,登录,任务,5,注释和特殊符号,01,02,HTML,注释,特殊符号,任务,5,注释和特殊符号,-01,HTML,注释,命令行方式创建用户,我们经常要在一些代码旁做一些,HTML,注释，这样做的好处很多，比如方便查找，方便比对，方便项目组里的其他程序员了解你的代码，而且可以方便以后你对自己代码的理解与修改等，当服务器遇到注释时会自动忽略注释内容。,HTML,注释的开始使用,。,搜狗首页,任务,5,注释和特殊符号,-02,特殊符号,命令行方式创建用户,在,HTML,中不能使用小于号（,），这是因为浏览器会误认为它们是标签，如需显示小于号，我们必须这样写：,，如果您在文本中写,10,个空格，在显示该页面之前，浏览器会删除它们中的,9,个，如需在页面中增加空格的数量，您需要使用,。所以，如果要页面中显示这些特殊符号，就必须使用相应的,HTML,代码表示，这些特殊符号对应,HTML,代码被称为字符实体。一些常用的特殊符号及对应的字符实体如表,2-2,所示，这些实体字符都以“,&,”开头，以“,;,”结束。,任务,6 W3C,标准,01,02,03,什么是,W3C,标准,W3C,提倡的,Web,页结构,HTML5,代码规范,任务,6,W3C,标准,-01,什么是,W3C,标准,命令行方式创建用户,W3C,标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（,Structure,）、表现（,Presentation,）和行为（,Behavior,）。结构化标准语言主要包括,XHTML,和,XML,，表现标准语言主要包括,CSS,，行为标准主要包括对象模型（如,W3C DOM,）、,ECMA,Script,等。,W3C,万维网联盟主要职责是负责,Web,标准的制定和维护。,Web,开发方面常设计的,W3C,标准如下：,（,1,）,HTML,内容方面,XHTML,（,2,）样式美化方面,CSS,（,3,）行为标准方面,DOM,（,4,）页面交互方面,ECMAScript,任务,6,W3C,标准,-02,W3C,提倡的,Web,页结构,01,内容和样式分离,02,HTML,内容结构要语义化,内容,XHTML,只负责页面的内容结构，,CSS,（,Cascading Style Sheet,，简称,CSS,，通常又称为“样式表”）负责表现样式（例如字体颜色、大小、背景图、显示位置等），方便网站的修改和维护。,HTML,是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。,任务,6,W3C,标准,-03,HTML5,代码规范,命令行方式创建用户,1,使用正确的文档类型,2,使用小写元素名,3,关闭所有,HTML,元素,4,关闭空的,HTML,元素,5,使用小写属性名,6,属性值,7,空行和缩进,8,不推荐省略,、,和,标签。,感谢聆听,“会员注册”页面制作,|,HTML5,新的,input,类型,|,HTML5,新的表单元素,表单应用,知识目标,掌握表单的基本语法,01.,02.,掌握各种表单元素的使用和语法,能力目标,能使用各种基本表单元素标签建立含有表单的网页,01.,02.,能使用,HTML5,新增的元素,任务,1,“会员注册”页面制作,01,02,表单的基本语法,表单基本元素的介绍,任务,1,“会员注册”页面制作,-01,表单的基本语法,表单是一个集合概念，它是一个能够包含表单元素的区域。表单是一个集合概念，它是一个能够包含表单元素的区域。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,01,文本框,在表单中，文本框用来让用户输入字母、数字等单行文本信息的。,size=“8”,，,value=“,输入你的名字,”,，在设计状态看到如右上图效果，长度为,8,，可以显示,4,个汉字，浏览时不同浏览器略有不同，如右下图。一般不建议使用,size,设置长度，而是通过,css,的,width,属性进行相应设置。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,02,密码框,type,属性设置成,password,，就可以创建一个密码框，输入的字符以“”显示，已达到加密的作用放置别人偷看。,密码,:,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,03,“提交”和“重置”按钮,type=submit,和,type=reset,分别是“提交”和“重置”两按钮。“提交”按钮用于提交表单数据，将,form,中所有内容进行提交,action,页处理，“重置”按钮用于清空现有表单数据。,姓名,:,密码,:,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,04,普通按钮,type=button,是标准,Windows,风格的按钮，也就是普通按钮，当然要让按钮跳转到某个页面上还需要加入写,JavaScript,代码。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,05,图片按钮,type=image,是比较另类的一个，代表图片按钮，虽然,type,没有设置为“,submit,”，但它有提交功能。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,06,多选框,type=checkbox,表示多选框，常见于注册时选择爱好、性格等信息。参数有,name,、,value,及特别参数,checked,（表示默认选择），其实最重要的还是,value,值，提交到处理页的也就是,value,（附：,name,值可以不一样，但不推荐，建议,name,值相同）。,爱好,:,运动,聊天,玩游戏,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,07,单选框,type=radio,即单选框，出现在多选一的页面中，如性别选择。参数同样有,name,、,value,及特别参数,checked,。不同于,checkbox,的是，,name,值一定要相同，否则就不能多选一。当然提交到处理页的也是,value,值。,性别：,男,女,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,08,文件域表单,type=file,可以将本地网络上的某个文件以二进制数据流的形式传递到服务器，是当你在,BBS,上传图片，或者在,Email,中上传附件时一定少不了的东西，提供了一个文件目录输入的平台，会创建一个不能输入内容的地址文本框和一个“浏览”按钮，单击“浏览,.,”按钮，将会弹出“选择要加载的文件”窗口，选择文件后，路径将显示在地址文本框中。参数有,name,、,size,。使用这个元素时,form,元素的,method,属性必须设置为,post,。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,09,下拉列表框,基本语法如下：,一般使用表单下拉列表选择数据，如省、市、县、年、月等数据，我们即可使用下拉菜单表单进行设置，,select,是下拉列表菜单标签，,option,为下拉列表数据标签，,value,为,option,的数据值（用于数据的传值），,selected,默认被选中的项。,苹果,桔子,芒果,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,10,文本域,文本域，也就是多行输入框（,textarea,），主要用于输入两行或两行以上的较长文本信息，主要应用于用户留言或者聊天窗口以及协议。,基本语法如下：,初始文本,name,为传值命名，,cols,为文本域的可见字符宽度，也就是字符列数，表示每行可以输入多少列文字，跟具体数字，如,cols=1,表示一行最多可以输入一个汉字，两个字符。,rows,为文本域的可见字符行数，默认输入框区域显示高度，跟具体数字。,请阅读服务协议,服务协议的具体内容,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,11,隐藏域,基本语法如下：,作用：隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击“发送”按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,12,只读和禁用属性,只读和禁用效果分别通过,readonly,和,disabled,属性，例如要实现协议只读和注册按钮禁用的效果，对应的部分,HTML,代码：,服务协议的具体内容,任务,2 HTML5,新的,input,类型,1,email,输入类型,此类型要求键入格式正确的,email,地址，否则浏览器是不允许提交的,并会有一个错误信息提示。此类型必须指定,name,值，否则无效果。,格式：,2,URL,输入类型,此类型要求输入格式正确的,url,地址，否则浏览器是不允许提交的,并会有一个错误信息提示。此类型必须指定,name,值，否则无效果。,格式：,3,时间日期相关输入类型,时间日期相关输入类型这一系列表单控件给我们提供了丰富的用于日期选择的表单样式，包括年、月、周、日等。只需要一行代码就可以实现交互性非常强的效果，然而遗憾的是目前在,Windows,下仅有,Chrome,和,Opera,支持。,格式：,格式：,4,number,输入类型,说明：用于输入一个数值，可以通过属性设置最小值、最大值、数字间隔、默认值,(IE,不支持,),。,格式：,max,：规定允许的最大值；,min,：规定允许的最小值；,step,：规定合法的数字间隔；,value,：规定默认值；,5,range,滑块类型,说明：和前面的,number,类似,只不过这里是用滑块展示,如果是在移动端展示的话,给用户的体验会比较好。,格式：,max,：规定允许的最大值；,min,：规定允许的最小值；,step,：规定合法的数字间隔；,value,：规定默认值；,6,search,输入类型,说明：此类型表示输入的将是一个搜索关键字,通过设置,results=s,可显示一个搜索小图标。,格式：,7,tel,输入类型,说明：此类型要求输入一个电话号码，换行符会从输入值中去掉。,格式：,8,color,输入类型,说明：一个非常炫酷的效果,并且在最新的火狐、谷歌、欧朋浏览器中都支持，可让用户通过颜色选择器选择一个颜色值，以十六进制保存，可以通过,value,访问到，并且可以自定义颜色组。,格式：,任务,3 HTML5,新的表单元素,1,datelist,标签,说明：,datalist,元素规定输入域的选项列表。,列表是通过,datalist,内的,option,元素创建的。,如需把,datalist,绑定到输入域，用输入域的,list,属性引用,datalist,的,id.,列表当中的,value,属性是必须，新版本的,Chrome,和,Opera,支持该属性。,2,keygen,标签,说明：,keygen,元素的作用是提供一种验证用户的可靠方法。,keygen,元素是密钥对生成器。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。,格式,:,用户名,:,加密,:,3,output,标签,说明：,output,用于计算结果的输出,.,/,页面加载完成后执行,window.onload=function(),/,通过,id,获取表单元素,var number=document.getElementById(number);,var total=document.getElementById(total);,/,添加失去焦点事件,number.onblur=function(),/,计算总价 利用单价乘以数目,var totalprice=parseInt(document.getElementById(price).value)*parseInt(this.value),/,将结果输出,total.value=totalprice;,单价,:,数目,:,总价,:,感谢聆听,表格基础知识,|,跨行和跨列实现“商品分类”,|,表格布局化妆品页面,|,表格布局注册页面,|,“华人女歌手歌曲周排行榜”页面制作,|iframe,框架,表格应用和布局,知识目标,掌握跨行列的表格的制作,01.,02.,掌握表格布局页面方法,03.,掌握表格实现报表方法,能力目标,能灵活运用跨行跨列实现表格显示数据,01.,02.,能运用表格结构进行图文布局和表单布局,任务,1,表格基础知识,01,02,表格的基本结构,表格的基本语法,任务,1,表格基础知识,-01,表格的基本结构,不单独使用，它通常与,tr,和,td,一起使用。,tr,是,table row,的缩写，,td,是,table data cell,的缩写。,标签表示开启表格的一行（,row,）。,标签表示表格的一个数据单元（,data,）即单元格。,标签的数量可多可少，但一个表格至少要包含一个,行。每一行的,单元格的个数必须相同（后面学了跨行跨列后，情况将会不同）。,行,列,单元格,任务,1,表格基础知识,-02,表格的基本语法,第,1,行第,1,个单元格的内容,第,1,行第,2,个单元格的内容,.,第,2,行第,1,个单元格的内容,第,2,行第,2,个单元格的内容,.,任务,2,跨行和跨列实现“商品分类”,01,02,03,跨列,跨行,跨行和跨列,任务,2,跨行和跨列实现“商品分类”,-01,跨列,有的单元格在水平方向上是跨多个单元格的，这就需要使用跨列属性,colspan,。,基本语法：,我的成绩,SQL Server,数据库技术,98,CSS+DIV,页面布局技术,95,任务,2,跨行和跨列实现“商品分类”,-02,跨行,有的单元格在垂直方向上是跨多个单元格的，这就需要使用跨行属性,rowspan,。,基本语法：,张雯雯,SQL Server,数据库技术,98,CSS+DIV,页面布局技术,95,李青青,SQL Server,数据库技术,88,CSS+DIV,页面布局技术,91,任务,2,跨行和跨列实现“商品分类”,-03,跨行和跨列,CSS+DIV,页面布局技术,91,学生成绩,张雯雯,SQL Server,数据库技术,98,CSS+DIV,页面布局技术,95,李青青,SQL Server,数据库技术,88,任务,3,表格布局化妆品页面,命令行方式创建用户,化妆品网上大比拼,如何辨别化妆品真伪,自然堂化妆品怎么样,聚美优品网上购物,01,知识储备,任务,3,表格布局化妆品页面,命令行方式创建用户,商品图片,商品名称,/,卖家,价格,膜法世家樱桃睡眠免洗面膜,100g,补水去黄保湿美白提亮,卖家：,lingture,02,任务实现,收藏,一口价,283.30,任务,4,表格布局注册页面,命令行方式创建用户,会员名：,（可包含,a-z,、,0-9,和下划线）,01,知识储备,密,码：,（至少包含,6,个字符）,任务,4,表格布局注册页面,命令行方式创建用户,阅读芙蓉网服务协议,欢迎阅读服务条款协议,02,任务实现,头像：,任务,5,“华人女歌手歌曲周排行榜”页面制作,命令行方式创建用户,表示表头，是对数据列进行的分类。可以用单独的样式定义表头，并且在打印时可以在分页的上部打印表头。,标签表示表格的主体，,标签表示表格的表尾，其中的内容类似,word,的页脚属性，打印时在页面底部显示。因此,、,、,三个标记分别对应表格的表头、表主体也就是表身、表尾，从而实现常见的报表等表格。如图,4.13,所示为一张使用了,、,、,三个标签的表格。,01,知识储备,任务,5,“华人女歌手歌曲周排行榜”页面制作,命令行方式创建用户,华人女歌手歌曲周排行榜,歌曲名,演唱者,飘洋过海来看你,丁当,一个像夏天一个像秋天,范玮琪,最好的未来,刘若英,02,任务实现,蝴蝶,王菲,我在的地方,郑秀文,更多,任务,6 iframe,框架,命令行方式创建用户,内嵌框架基本语法如下：,HTML,不再推荐页面中使用框架集，因此,HTML5,删除了,、,和,这三个元素。不过,HTML5,还保留了,元素，该元素可以在普通的,HTML,页面中使用，生成一个行内框架，可以直接放在,HTML,页面的任意位置。除了指定,id,、,class,和,style,之外，还可以指定如下属性：,src,：指定一个,URL,，指定该,iframe,将装载哪个页面。,name,：设置,iframe,的名字。,scrolling,：设置,iframe,中显示滚动条：,yes,、,no,、,auto,（大小不够时显示）。,height,：设置,iframe,的高度。,width,：设置该,iframe,的宽度高度、宽度可以为百分比，可以为具体高宽数值，不需要跟单位。通常需要设置高度、宽度具体数值。,frameborder,：设置是否显示该,iframe,的边框。,marginheight,：设置该,iframe,的顶部和底部的页边距。,marginwidth,：设置,iframe,的左侧和右侧的页边距。,01,知识储备,任务,6 iframe,框架,命令行方式创建用户,在此网页中嵌入,360,网站的首页,上面就是利用,iframe,标签将,360,网站的首页嵌入到我们的网页中,02,任务实现,感谢聆听,video,视频元素,|,video,音频元素,HTML5,中的音频和视频的应用,知识目标,HTML,中的视频应用,01.,02.,HTML,中的音频应用,能力目标,了解,HTML5,中的视频的应用格式,01.,02.,了解,HTML5,中的音频的应用格式,任务,1,video,视频元素,02,03,04,附加一些属性,预加载设置,使用预览图,01,嵌入一个,WebM,视频,05,兼容多个浏览器,任务,1,video,视频元素,-01,嵌入一个,WebM,视频,解释：,插入一个视频，主流的视频为,.webm,，,.mp4,，,.ogg,等。,src,表示资源，,width,表示宽度；,height,表示高度。,任务,1,video,视频元素,-02,附加一些属性,解释：,autoplay,表示自动开始播放；,controls,表示显示播放控件；,loop,表示循环播放；,muted,表示静音。,任务,1,video,视频元素,-03,预加载设置,解释：,preload,属性有三个值：,none,表示播放器什么都不加载；,metadata,表示播放之前只能加载元数据（宽高、第一帧画面等信息）；,auto,表示请求浏览器尽快下载整个视频。,任务,1,video,视频元素,-04,使用预览图,解释：,poster,属性表示在视频的第一帧，做一张预览图。,任务,1,video,视频元素,-0,5,兼容多个浏览器,解释：通过,元素引入多种格式的视频，让更多的浏览器保持兼容。,source,元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。,任务,2,audio,音频元素,01,02,嵌入一个音频,兼容多个浏览器,删除用户,任务,2,audio,音频元素,-01,嵌入一个,音频,解释：和嵌入视频一个道理,任务,2,audio,音频元素,-02,兼容多个浏览器,感谢聆听,CSS,基本语法,|CSS,的应用方式,|,选择器的分类,|CSS,继承性、层叠性、特殊性,|CSS3,新增选择器,CSS3,基础应用,知识目标,掌握,CSS,的基本语法,01.,02.,掌握,CSS,的选择器,能力目标,会使用,CSS,设置样式,01.,02.,能用,CSS,的选择器进行样式设置,任务,1 CSS,基本语法,创建与使用分组查询,为什么使用,CSS,CSS,的基本语法,书写,CSS,注意事项,任务,1 CSS,基本语法,CSS,是,Cascading Style Sheets,的缩写，一般翻译为层叠样式表。,CSS3,是,CSS,（层叠样式表）技术的升级版本。,在网页设计中我们把,HTML,、,CSS,、,JavaScript,并列为网页前端设计的三种基本语言。其中,HTML,负责构建网页的基本结构，,CSS,负责设计网页的显示效果，,JavaScript,负责开发网页的交互效果。,有人称,HTML,是网页的骨头是框架，,CSS,是网页的皮用来制作页面的外观效果，,JavaScript,是网页的筋用来进行客户端动态的交互，不无道理。,为什么使用,CSS,为什么使用,CSS,W3C,的构想是,HTML,标签只表示内容结构，即只表示“这是一个段落”、“这是一个标题”、“这是一个项目列表”等含义，而不具备任何样式，而这些“段落”、“标题”等内容的字体类型、字号大小、演示、显示位置等样式完全由,CSS,指定，也就是用,CSS,控制网页的外观，从而实现内容结构和样式的分离。,为什么使用,CSS,CSS,具有如下突出优势：,（,1,）实现内容和样式的分离，利于团队开发。,（,2,）代码简洁，提高页面浏览速度，并且更利于搜索引擎的搜索。用只包含结构化内容的,HTML,代替嵌套的标签，减少了,Web,页的代码量，搜索引擎将更有效地搜索到网页内容，并可能给一个较高的评价。,（,3,）样式的调整更加方便，便于维护。只要简单的修改几个,CSS,文件就可以重新设计整个网站的页面。同一网站的多个页面可以共用同一个样式表，提高网站的开发效率，实现样式复用，如果需要更新网站外观，则更新网站的样式表文件即可。,CSS,的基本语法,CSS,规则由两个主要的部分构成：选择器和一条或多条声明。,选择器通常是需要改变样式的,HTML,元素，可以是某个标签、网页对象、,class,、,id,等。选择器也被称为选择符。,每条声明由一个属性和一个值组成，用分号来标识一个声明的结束。,使用花括号来包围声明。,CSS,的基本语法,属性是希望设置的样式属性，每个属性有一个值，属性值是设置属性显示效果的参数，它包括数值和单位，或者关键字。属性和值被冒号分开。一个元素可以有多个属性。,（,1,）值的不同写法和单位。,设置颜色值可以选用颜色名、十六进制数、,RGB,值、,RGB,值百分比。,设置段落文本为红色,使用颜色名称设置：,p red;,使用十六进制颜色值：,p color:#ff0000;,或者十六进制颜色值：,p color:#f00;,还可以使用,RGB,值,:p color:rgb(255,0,0);,还可以使用,RGB,百分比,:p color:rgb(100%,0%,0%);,书写,CSS,注意事项,（,2,）记得写引号，如果值为若干单词，则要给值加引号：,p font-family:sans serif;,。,（,3,）如果要定义不止一个声明，则需要用分号将每个声明分开。,最后一条规则可以不加分号，然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是当从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：,ptext-align:center;color:red;,。应该在每行只描述一个属性，增强样式的可读性。,p,text-align:center;,color:black;,font-family:arial;,书写,CSS,注意事项,（,4,）空格和大小写：是否包含空格不会影响,CSS,在浏览器的工作效果，也就是,CSS,语言忽略空格（除了选择器内部的空格外），因此可以利用空格来美化,CSS,代码，使其变得整齐，易看。,CSS,对大小写不敏感，但推荐全用小写。不过存在一个例外：如果涉及与,HTML,文档一起工作的话，,class,和,id,名称对大小写是敏感的。,body,color:#000;,background:#fff;,margin:0;,padding:0;,font-family:Georgia,Palatino,serif;,书写,CSS,注意事项,（,5,）任何语言都需要注释，,CSS,使用“,/*,注释语句,*/,来进行注释，比如上面的样式代码加上注释后如下，帮助理解。,body /*,页面属性设置,*/,color:#000;,background:#fff;,margin:0;,padding:0;,font-family:Georgia,Palatino,serif;,书写,CSS,注意事项,任务,2 CSS,的应用方式,（,1,）内嵌样式（也叫行内样式）,（,2,）内部样式表：在,标记中给出,（,3,）外部样式表：保存在扩展名为,.css,的外部文件中，,选择器的分类,（,1,）标签选择器，就是,HTML,标签，如,、,、,标签等,（,2,）类选择器,（,3,）,id,选择器,任务,3,选择器的分类,标签选择器应用：,将页面中所有,p,标签的背景都是,#900,（一种红色），文字大小均是,12px,，颜色为,#090,（一种绿色），,任务,3,选择器的分类,标签选择器的使用：,如希望页面中所有项目列表的样式为：字体大小为,28px,、红色