html学习 速成.ppt

吉伍B2C后台管理系统 实训案例 HTML语言简介,福建工程学院软件人才培养基地,html简介,一、html简介,HTML (HyperText Markup Language) 超文本标记语言，是一种用来制作超文本文档的简单标记语言，用特殊标记(tag)来描述文档结构和表现形式。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。,HTML开发工具：记事本、EditPlus、UltraEdit、Dreamweaver等。 HTML文件的扩展名：htm，html。,HTML的基本结构, 头部信息 文档主题， 正文部分 ,HTML标签,1、单标签 例： 换行标签,2、双标签 内容 例： 一级标题,3、标签属性 例：,HTML语言的HEAD部分,一个HTML文档包括：,1、HTML语言的HEAD部分 2、HTML语言的BODY部分,HTML语言的HEAD部分,HEAD部分包含的主要标签（元素）： TITLE META LINK SCRIPT STYLE 标题 元信息 链接 脚本程序内容 CSS,HTML语言的HEAD部分,HEAD部分包含的主要元素 元 素 描 述 title 文档标题 meta 描述HTML元信息 link 描述当前文档与其它文档之间的链接关系 script 脚本程序内容 stytle 指定当前文档的CSS层叠样式表,TITLE标签,语法格式： 文档标题 ,2、 META标签,描述HTML文档的元信息，即关于文档自身的信息。可定义搜索关键字、网页显示字符集及文档描述,2、 META标签,简体中文： CHARSET=“GB2312” 繁体中文：charset=BIG5“ 英语： charset=iso-8859-1“,2、 META标签,2、 META标签,3、LINK标签,语法格式： ,属性：REL说明两个文档之间的关系描述 HREF说明链接目标文档名 例：,4、Script标签嵌入脚本,语法格式： 程序代码 ,5、Style标签,语法格式： 样式语句 ,在Head部分，还可以包含公司版权注释 语法格式： ,五、 HTML语言的BODY部分,BODY标签用来定义文档主体,语法格式： (其他页面元素) ,六、页面布局与文字设计,1、标题 2、换行 3、段落 4、水平线 5、文字的大小设置 6、文字的字体与样式,7、文字的颜色 8、位置控制 9、预格式化 10、字幕 11、列表 12、Html特殊字符,1、标题,语法格式： 标题内容 其中： x = 1、2、3、4、5、6 Align（对齐）属性包括left、center、right,实例,2、换行,语法格式： 文字内容 ,实例,3、段落,语法格式： 段落内容 其中： Align（对齐）属性包括left、center、right,实例,4、水平线,语法格式： ,实例,长度单位,像素(pixel)/百分比(%) 绝对长度： 相对长度：,5、文字的大小设置,语法格式： 文字内容 ,实例,6、文字的字体, ,实例,字体样式,x2+y2,练习：如何写出x的平方加y的平方？,7、文字颜色, ,16进制颜色代码：#RRGGBB 10进制RGB代码：RGB（RRR，GGG，BBB） 直接颜色名称：“Red”/“Blue”/“Silver”,实例,8、位置控制,9、预格式化标签,综合实例,10、字幕,11、列表,有序列表,无序列表, 小张 语文 数学 小王 ,定义性列表,定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。 第一项 叙述第一项的定义 第二项 叙述第二项的定义 第三项 叙述第三项的定义 ,实例,12、Html特殊字符,七、表格,表格的基本结构 定义表格 定义标题 定义表行 定义表头 定义表元(表格的具体数据),实例,第一季度,语法格式： ,1、表格的标题,设置标题位于表格上方： . 设置标题位于表格下方： . ,实例,2、表格的尺寸,3、边框尺寸, 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,4、格间线宽度, 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,5、内容与格线之间的宽度, 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,6、表格内文字的对齐/布局,左右排列 居左居中居右 A B C ,6、表格内文字的对齐/布局,上下排列 上齐居中 下齐 A B C D ,7、跨多行、多列的表元,跨多列的表元 , 值班人员 星期一 星期二 星期三 李强张明王平 ,7、跨多行、多列的表元,跨多行的表元 , 值班人员 星期一星期二 星期三 李强张明王平 ,8、表格的颜色,可对整个表格填入底色，也可对任何一行、一个表元使用背景色。 表格的背景色彩 行的背景色彩 表元的背景色彩 或 ,实例,八、文件间的链接,链接文字 HREF：定义这个链接所指的地方 通过点击“链接文字”可以到达指定的文件 温州大学,本地链接、URL链接、目录链接、邮件链接,语法格式： ,链接标签的Target属性, 链接文字 ,仅用于框架窗口,1、本地链接,本地链接:对同一台机器上的不同文件进行的连接称为本地链接 以绝对路径表示： 文件的链接 以相对路径表示： 文件的链接 链接上一目录中的文件： IP地址,2、URL链接,URL链接是指链接的文件在其它服务器上。 语法：协议名：/主机.域名路径文件名 如： 温州大学,3、目录链接,目录链接直接指到某文件上部、下部或是中央部分 制作方法是： （1）把某段落设置为链接位置，格式是： （2）在调用此链接部分的文件定义链接： 链接文字 如果是在一个文件内跳转，文件名可以省略不写。,实例,4、邮件链接, 联系我们 ,九、多媒体效果,1、插入图片 2、插入音乐 3、插入视频,1、插入图片,如：,语法格式： ,图像标签的Align属性,实例,图形按钮, 如： ,2、插入音乐,（1）点播音乐做链接 乐曲名,（2）自动载入音乐 ,实例,1、SRC=“FILENAME“：设定音乐文件的路径 2、AUTOSTART=TRUE/FALSE：是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE 3、LOOP=TRUE/FALSE：设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。 4、STARTIME=“分:秒”：设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20,5、VOLUME=0-100：设定音量的大小。如果没设定的话，就用系统的音量。 6、WIDTH HEIGHT：设定控制面板的大小 7、HIDDEN=TRUE：隐藏控制面板 8、CONTROLS=CONSOLE/SMALLCONSOLE：设定控制面板的样子,（3）IE中的背景音乐 #=循环数 例： ,3、插入视频,（1）链接一个视频文件 视频名称,（2）自动载入视频 ,实例,1、SRC=“FILENAME“：设定文件的路径 2、AUTOSTART=TRUE/FALSE：是否要文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE 3、LOOP=TRUE/FALSE：设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。 4、STARTIME=“分:秒”：设定开始播放时间，如20秒后播放写为STARTIME=00:20 5、VOLUME=0-100：设定音量的大小。如果没设定的话，就用系统的音量。 6、WIDTH HEIGHT：设定控制面板的大小,十、框架,Frames结构能将整个窗口分成几个独立的小窗口 每一个窗口可分别载入不同的文件 每个窗口可以相互沟通,框架语法,框架的嵌套,FrameSet标签,语法格式： ,FrameSet标签的属性,Rows、Cols属性,例： ,Rows、Cols属性,Rows=“ 100 , * ”,100,668,1024,Rows、Cols属性, 将100像素以外的窗口平均分配 将窗口分为三等份,Frame标签,语法格式： ,Frame标签的属性,各窗口间的相互操作,由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化。 为了完成各窗口之间的相互操作，我们必须为每一个窗口起一个名字, 例：,各窗口间的相互操作,定义了窗口名称，还应该有Target来配合使用，Target属性指定了所链接的文件出现在哪一窗口。Target的值可以是name定义的名称 也可以是以下四类值： 显示一个新窗口 _self 显示在同一个窗口 _parent 显示在Frameset的前一份文件的窗口 _top 显示在整个浏览器窗口,例如,十一、表单,交互式表单的作用就是收集用户信息，将其提交到服务器，从而实现与客户的交互。,一个完整的表单包含两个部分： 在网页中进行描述的表单对象 应用程序，用于对客户输入的信息进行分析处理,表单体标签, ,例： ,表单体属性,1、名称 2、动作：输入一个URL地址或mailto地址，指明处理该表单数据的程序 3、方法：Post允许传送数据量大的的信息, Get只接收低于1K（约215个汉字）的信息。 post传输信息内容，get传输url值。,各种表单对象,文本框, 初始值 ,单行,单选按钮, 音乐 旅游 ,复选框, 语文 数学 ,按钮,列表框, 专科 本科 硕士 博士 ,跳转菜单, 第一单元 第二单元 第三单元 ,文件域,综合练习,设计一网页，写一首诗，并对其进行排版， （1）标题和作者为一段，诗的内容另起一段； （2）题目用标题格式，居中；作者居中，字体为宋体，大小为3号；诗词内容字体为楷体，大小为3号。 （3）页面以“bg.jpg”为背景图。,浮动,任何元素的 float属性 可能的值 Left：文本或图像会移至父元素中的左侧。 Right：文本或图像会移至父元素中的右侧。 none默认。文本或图像会显示于它在文档中出现的位置。 使用float的元素要设好大小 不然会被压缩？ 父元素行满后 float元素自动跳行 例子 float: Righ 定义该属性元素将移到父元素右侧,透明度,1.-moz-opacity 语法: -moz-opacity : fValue; (fValue为透明度的百分比) 2.opacity - 不透明度 IE6,IE7不支持此属性 opacity属性是CSS3提出的.Firefox1.5,Opera9支持此属性 3.filter:alpha(opacity=50) 4.这样写（三种都写）是为了达到最好兼容的效果，有些效果在ie下无效(opacity),一些效果(filter)在firefox下无效，所以会考虑下兼容的问题,层叠,position: absolute 层叠 z-index: 对几个层叠元素排顺序 值大的覆盖小的 Top：至父元素距离 Bottom：至父元素距离 Left：至父元素距离 Right：至父元素距离,