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

1、轻松学习HTML课HTML语言基础邮箱：网站设计师精品就业班课程体系北京传智播客教育 网站设计师设计PS网页效果图设计Flash网页动画设计HtmlXhtmlDIV+CSSJavascriptJQuery制作网站设计师行业职位需求分析北京传智播客教育 网站美工网站编辑网页设计师网页制作网站前端工程师FLASH动画设计师总结职位多，选择多，机会多！网站设计师行业职位薪水北京传智播客教育 目标认识什么是HTML标记的语法掌握常用的HTML标记的应用网页是用什么制作出来的HTML简介HTML（Hyper Text Mark-up Language 超文本标记语言）的缩写，标记：就是用来描述网页内容的

2、一些特定符号。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用html标记来实现。Html文档的创建方式：用html语言创建的文档手工直接编写（例如记事本）。通过图形化的HTML开发软件 Dreamweaver。由Web服务器上的动态网页程序生成。HTML标记的语法 html最基本的语法就是内容，标记符通常都是成对使用的，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/” 当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。如： 例如： 文字内容 HTML标记的语法H

3、TML 标记的类型：单标记与双标记一、单标记(1).单一型 , 无属性值。如： (2).单一型，有属性值。如： HTML标记的语法二、双标记(3). 没有属性值。如： (4). 有属性值。如： HTML标记的语法HTML标记语法总结：1、双标记：内容 2、 单标记：3、标记的属性： 内容说明：A、标记与属性、属性之间以空格分隔B、属性不区分先后顺序；且属性不是必需的重点强调：虽然在HTML中标记不区别大小写，但在XHTML中所有标记都必须小写，所以建议从现在开始，所有标记都采用小写。html文档结构1、文档结构所有的网页文件,通常由四对标记来构成,文档的骨架，它们是：标题正文标识网页文件的开始

4、与结束，所有的html元素都要放在这对标记中标识网页文件的头部信息，如标题、搜索引擎关键字等标识网页文件的标题标识网页文件的主体部分Meta标记用于定义文件信息 Meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置于之间设置关键字：多个关键字内容之间可以用“，”分隔设置描述：设置作者：设置字符集：设置页面定时跳转：（1）、注释（2）、body属性网页主体标记body字体修饰 (1)、标记语法：文本注：网页中的文本字体、字号一般通过CSS修饰(2)、字符格式（3）、段落标记：格式： 属性名称 属性值 说明align left 左对齐（默认） center 居中 right 右

5、对齐段落控制标记（4）、段落标题 ：段落标题说明：X取值16 hx内的文本会自动加粗显示。hx针对的对象是段落，而font针对的对象的任意文本。（5）、：换行（换行不换段）段落控制标记修饰标记(6). 水平直线 属性名称 属性值 说明size 像素 绝对设置，以数字表示，属性值越大，线越粗百分比 相对设置，以 % 表示，属性值越大，线越粗width 像素 绝对设置，长度不会应视窗的改变而改变百分比 相对设置，长度会随着视窗宽度而改变noshade=noshade 实体线 特殊标记定义一个块引用：使用文本缩进格式： .属性名称 属性值 说明cite url 被引用的地址居中标记 内容(被废弃的标

6、签)预格式化 显示已经格式化好的文字。不加此标记的话，HTML浏览器会忽略所有空格和制表符。在HTML文档中使用特殊字符网页中信息的排序显示-如何实现列表的标记1、列表标记用途：列表标记可以创建一般的无序列表、编号列表，以及定义列表三种方式。 还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。1、无序列表 2、有序列表 3、定义列表 2、无序列表语法：内容1 内容2 表示一个项目列表的标记3、有序列表语法： 内容1内容2 列表的标记4、定义列表语法：标题1内容1内容2 标题1内容1内容2 定义列表表示一个项目表示一个项目下的更详细的内容的解释定义列表Web上支持的图片格式GIF（

7、图形交换格式）：GIF格式文件最多只能保存256种颜色。该格式支持透明色，支持动画效果。JPEG（联合图像专家组）：该格式不支持透明色及动画，颜色可达1670万种PNG（网络可移植格式）：该格式支持透明色，但不支持动画，颜色从几种至1670万种。图片标记 图片路径 绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称 相对路径:从当前文档开始的路径如果当前文档和目标文档位置平行，则直接书写目标文档全称如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称如果当前文档所在文件夹和目标文档位置平行，则书写为 ./目标文档全称 根相对路径:从站点根目录开始的路径，以/开头

8、高级网页设计人才培训专家!轻松学习HTML第二课表格与链接主讲：张鹏邮箱：目标表格的应用超级链接的使用31网页中内容排版与定位表格32表格因为表格中可以包含任何内容，所以在使用DIV+CSS之前，网页设计师是使用表格对网页内容进行排版与布局的表格基本结构：. - 定义表格. - 定义表行. - 定义表列(单元格). -定义标题栏(文字加粗)表格的属性：标签下的边框设置属性名称属性值说明frame void 不要显现表格的边线above 只要显现出表格的上边线below 只显现出表格的下边线hsides 只显示表格的上下边线vsides 只显现表格的左右边线lhs 只显现表格的左边线rhs 只显

9、现表格的右边线border/box 会显现出表格的所有边线rules rows 只显示出横行的格框线cols 只显示出直行的格框线all 显示全部格框线groups 表示列组合水平部分none 不显示任何格框线该属性必须在border的属性值不为0 的状态下!35行的属性：列（单元格）的属性：表格的结构化(1). 结构化格式： 表头区 表体区 表尾区(2). 直列化格式： .属性名称 属性值 说明align left 靠左 center 靠中right 靠右valign top 靠上middle 靠中bottom 靠下span 数字 直列数bgcolor颜色背景颜色个别直列设置格式 : 功能完

10、全和 一样 (3) . 表格的标题 ： . 下的属性值有 :属性名称 属性值 说明align top 标题在表格上方 bottom 标题在表格下方超链接：HyperLink一个网站是由多个网页组成的，网页之间都是通过链接实现相互关联的。链接的概念：实现由当前文档到目标文档的一种跳转 链接语法:显示内容_blank在新窗口中打开_self在自身窗口中打开(默认值)_parent在上一级窗口中打开_top在本窗口中打开链接的类型链接的类型:1、内部链接：当前文档与目标文档在同一站点内2、外部链接：当前文档与目标文档不在同一站点内 3、E-mail链接：并允许访问者向指定的地址发送邮件。4、局部链接

11、(锚点)：跳转到同一网页或其他文档中的指定位置。 创建锚点：显示内容链接锚点：显示内容5、空链接：就是没有目标端点的链接。格式显示内容链接的类型5、空链接：就是没有目标端点的链接。格式显示内容例如：设为首页设为首页添加收藏加入收藏夹链接的类型6、脚本链接：是一种特殊的链接，当单击设置脚本链接的文本或图像时，可以运行相应的JavaScript语句。常用到的脚本链接：例如：新浪关闭窗口：输入javascript:window.close()打开窗口：输入javascript:window.open (文件名)链接的类型高级网页设计人才培训专家!轻松学习HTML第三课表单与多媒体标记主讲：张鹏邮箱：

12、目标掌握表单的使用学会向网页中插入多媒体元素框架与嵌入框应用47将我们的信息提交给服务器-表单48表单的功能表单的作用是从访问您的Web 站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息，然后单击某个按钮提交这些信息。客户端与服务器端进行信息交流的途径 表单标记form标记用于创建一个表单，定义表单的开始与结束，它是一个容器，用于包含其他表单元素，例如文本框、单选框等。表单元素必须入在form标记内才有作用。表单元素POST 方法可以传递大量信息GET 方法将值附加到请求该页的URL 中。适合传递少量信息(默认方式)单行文本框密码框表单元素标记

13、多行文本框 初始内容表单元素标记单选框 复选框 表单元素标记标注内容 标签为 input 元素定义标注（标记）。 标签的 for 属性应当与相关元素的 id 属性相同 男 表单元素标记列表框(A)、菜单式 列表1列表2.分组 表单元素标记列表框例如： 朝阳海淀东城 表单元素标记列表框(B)、列表式列表1.例如： 普通朋友 爱人表单元素标记按钮图片按钮隐藏域表单元素标记浏览框表单外框.定义围绕表单中元素的边框 .legend元素为 fieldset 元素定义标题 表单元素标记FLASH 动画的插入使用.标记插入FLASH 动画属性值说明src url flash 路径width 像素/百分比flash 宽度height像素/百分比flash 高度wmode transparent 使flash 背景部分透明插入多媒体元素标记插入mp3音乐： 插入多媒体元素标记插入背景音乐：如Loop=-1即为无限循环插入视频wmv格式插入多媒体元素标记网络流媒体视频的插入滚动的文字Direction=”滚动方向”left左right右up上down下Behavior=”滚动方式” scroll一圈一圈绕着走 slide只走一次 alternate来回的走Loop=”滚动的循环次数” 若未指定则循环不止(loop=”infinite”)Bgcolor=”背底颜色”Width=“宽度”Hei