传智播客-张鹏-ppt-一周学会html课件

轻松学习HTML第一课HTML语言基础,主讲：张鹏邮箱：seo100,网站设计师精品就业班课程体系,北京传智播客教育,网站设计师行业职位需求分析,北京传智播客教育,网站美工网站编辑网页设计师网页制作网站前端工程师FLASH动画设计师总结职位多，选择多，机会多！,网站设计师行业职位薪水,北京传智播客教育,目标,认识什么是HTML标记的语法掌握常用的HTML标记的应用,网页是用什么制作出来的,HTML简介,HTML（HyperTextMark-upLanguage超文本标记语言）的缩写，标记：就是用来描述网页内容的一些特定符号。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用html标记来实现。Html文档的创建方式：用html语言创建的文档手工直接编写（例如记事本）。通过图形化的HTML开发软件Dreamweaver。由Web服务器上的动态网页程序生成。,HTML标记的语法,html最基本的语法就是内容，标记符通常都是成对使用的，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。如：例如：文字内容,HTML标记的语法,HTML标记的类型：单标记与双标记一、单标记(1).单一型,无属性值。如：(2).单一型，有属性值。如：,HTML标记的语法,二、双标记(3).没有属性值。如：(4).有属性值。如：,HTML标记的语法,HTML标记语法总结：1、双标记：内容2、单标记：3、标记的属性：内容说明：A、标记与属性、属性之间以空格分隔B、属性不区分先后顺序；且属性不是必需的重点强调：虽然在HTML中标记不区别大小写，但在XHTML中所有标记都必须小写，所以建议从现在开始，所有标记都采用小写。,html文档结构,1、文档结构所有的网页文件,通常由四对标记来构成,文档的骨架，它们是：标题正文标识网页文件的开始与结束，所有的html元素都要放在这对标记中标识网页文件的头部信息，如标题、搜索引擎关键字等标识网页文件的标题标识网页文件的主体部分,Meta标记用于定义文件信息,Meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置于之间设置关键字：多个关键字内容之间可以用“，”分隔设置描述：设置作者：设置字符集：设置页面定时跳转：,（1）、注释（2）、body属性,网页主体标记body,字体修饰,(1)、标记语法：文本注：网页中的文本字体、字号一般通过CSS修饰,(2)、字符格式,（3）、段落标记：格式：属性名称属性值说明alignleft左对齐（默认）center居中right右对齐,段落控制标记,（4）、段落标题：段落标题说明：X取值16hx内的文本会自动加粗显示。hx针对的对象是段落，而font针对的对象的任意文本。（5）、：换行（换行不换段）,段落控制标记,修饰标记,(6).水平直线属性名称属性值说明size像素绝对设置，以数字表示，属性值越大，线越粗百分比相对设置，以%表示，属性值越大，线越粗width像素绝对设置，长度不会应视窗的改变而改变百分比相对设置，长度会随着视窗宽度而改变noshade=noshade实体线,特殊标记,定义一个块引用：使用文本缩进格式：.属性名称属性值说明citeurl被引用的地址居中标记内容(被废弃的标签)预格式化显示已经格式化好的文字。不加此标记的话，HTML浏览器会忽略所有空格和制表符。,在HTML文档中使用特殊字符,网页中信息的排序显示-如何实现,列表的标记,1、列表标记用途：列表标记可以创建一般的无序列表、编号列表，以及定义列表三种方式。还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。1、无序列表2、有序列表3、定义列表,2、无序列表语法：内容1内容2表示一个项目,列表的标记,3、有序列表语法：内容1内容2,列表的标记,4、定义列表语法：标题1内容1内容2标题1内容1内容2定义列表表示一个项目表示一个项目下的更详细的内容的解释,定义列表,Web上支持的图片格式GIF（图形交换格式）：GIF格式文件最多只能保存256种颜色。该格式支持透明色，支持动画效果。JPEG（联合图像专家组）：该格式不支持透明色及动画，颜色可达1670万种PNG（网络可移植格式）：该格式支持透明色，但不支持动画，颜色从几种至1670万种。图片标记,图片,路径,绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称相对路径:从当前文档开始的路径如果当前文档和目标文档位置平行，则直接书写目标文档全称如果当前文档和目标文档所在文件夹位置平行，则书写为文件夹名称/目标文档全称如果当前文档所在文件夹和目标文档位置平行，则书写为./目标文档全称根相对路径:从站点根目录开始的路径，以/开头,高级网页设计人才培训专家!,轻松学习HTML第二课表格与链接,主讲：张鹏邮箱：seo100,31,目标,表格的应用超级链接的使用,32,网页中内容排版与定位-表格,表格,因为表格中可以包含任何内容，所以在使用DIV+CSS之前，网页设计师是使用表格对网页内容进行排版与布局的表格基本结构：.-定义表格.-定义表行.-定义表列(单元格).-定义标题栏(文字加粗),表格的属性：,35,标签下的边框设置属性名称属性值说明framevoid不要显现表格的边线above只要显现出表格的上边线below只显现出表格的下边线hsides只显示表格的上下边线vsides只显现表格的左右边线lhs只显现表格的左边线rhs只显现表格的右边线border/box会显现出表格的所有边线rulesrows只显示出横行的格框线cols只显示出直行的格框线all显示全部格框线groups表示列组合水平部分none不显示任何格框线,该属性必须在border的属性值不为0的状态下!,行的属性：,列（单元格）的属性：,表格的结构化(1).结构化格式：-表头区-表体区-表尾区,(2).直列化格式：.属性名称属性值说明alignleft靠左center靠中right靠右valigntop靠上middle靠中bottom靠下span数字直列数bgcolor颜色背景颜色个别直列设置格式:功能完全和一样,(3).表格的标题：.下的属性值有:属性名称属性值说明aligntop标题在表格上方bottom标题在表格下方,超链接：HyperLink,一个网站是由多个网页组成的，网页之间都是通过链接实现相互关联的。链接的概念：实现由当前文档到目标文档的一种跳转链接语法:显示内容_blank在新窗口中打开_self在自身窗口中打开(默认值)_parent在上一级窗口中打开_top在本窗口中打开,链接的类型,链接的类型:1、内部链接：当前文档与目标文档在同一站点内2、外部链接：当前文档与目标文档不在同一站点内3、E-mail链接：并允许访问者向指定的地址发送邮件。,4、局部链接(锚点)：跳转到同一网页或其他文档中的指定位置。创建锚点：显示内容链接锚点：显示内容5、空链接：就是没有目标端点的链接。格式显示内容,链接的类型,5、空链接：就是没有目标端点的链接。格式显示内容例如：设为首页设为首页添加收藏加入收藏夹,链接的类型,6、脚本链接：是一种特殊的链接，当单击设置脚本链接的文本或图像时，可以运行相应的JavaScript语句。常用到的脚本链接：例如：新浪关闭窗口：输入javascript:window.close()打开窗口：输入javascript:window.open(文件名),链接的类型,高级网页设计人才培训专家!,轻松学习HTML第三课表单与多媒体标记,主讲：张鹏邮箱：seo100,47,目标,掌握表单的使用学会向网页中插入多媒体元素框架与嵌入框应用,48,将我们的信息提交给服务器-表单,表单的功能,表单的作用是从访问您的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息，然后单击某个按钮提交这些信息。客户端与服务器端进行信息交流的途径,表单标记,form标记用于创建一个表单，定义表单的开始与结束，它是一个容器，用于包含其他表单元素，例如文本框、单选框等。表单元素必须入在form标记内才有作用。表单元素POST方法可以传递大量信息GET方法将值附加到请求该页的URL中。适合传递少量信息(默认方式),单行文本框密码框,表单元素标记,多行文本框初始内容,表单元素标记,单选框复选框,表单元素标记,标注内容标签为input元素定义标注（标记）。标签的for属性应当与相关元素的id属性相同男,表单元素标记,列表框(A)、菜单式列表1列表2.分组,表单元素标记,列表框例如：朝阳海淀东城,表单元素标记,列表框(B)、列表式列表1.例如：普通朋友爱人,表单元素标记,按钮图片按钮隐藏域,表单元素标记,浏览框表单外框.定义围绕表单中元素的边框.legend元素为fieldset元素定义标题,表单元素标记,FLASH动画的插入使用.标记插入FLASH动画属性值说明srcurlflash路径width像素/百分比flash宽度height像素/百分比flash高度wmodetransparent使flash背景部分透明,插入多媒体元素标记,插入mp3音乐：,插入多媒体元素标记,插入背景音乐：如Loop=-1即为无限循环插入视频wmv格式,插入多媒体元素标记,北京传智播客教育,网络流媒体视频的插入,滚动的文字Direction=”滚动方向”left左right右up上down下Behavior=”滚动方式”scroll一圈一圈绕着走slide只走一次alternate来回的走Loop=”滚动的循环次数”若未指定则循环不止(loop=”infinite”)Bgcolor=”背底颜色”Width=“宽度”Height=“高度”o