《PHP程序设计案例教程 教学课件 ppt 作者 陈建国 第2讲 第2.1讲 HTML知识巩固》由会员分享，可在线阅读，更多相关《PHP程序设计案例教程 教学课件 ppt 作者 陈建国 第2讲 第2.1讲 HTML知识巩固（43页珍藏版）》请在金锄头文库上搜索。
1、第2.1讲 HTML基础,教师姓名 教研室名称 2012年01月01日,机械工业出版社,内容要点 CONTENTS,1) HTML文档的结构, 我的第一个网页 Hello World! ,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,网页标题,网页内容，可以是文本、图像等,这部分包含文本、图像和链接。它包括在 标签内,这部分包括标题和其他说明信息。包括在 标签内,1. HTML基本构成,2) HTML的头部信息设置 (1) 网页标题 标签用于设置网页的标题 (2) 网页编码格式 标签用于设置网页的类别和语言字符集， 字符集可以有iso-150，utf-8，GBK，g
2、b2312等。,2.1.1 HTML基本构成, 网页标题 ,1. HTML基本构成,3) HTML主体body标签的常用属性设置,1. HTML基本构成,标签,属性名称,属性值,标签构成,2. HTML基本标签,1) 设置段落样式 (1) 文字分段：表示段落的开始，段落的结束。 (2) 设置段落对齐方式：可以使用align属性对段落中的内容（文字、图片和表格等）进行对齐方式的设置，属性值有left（左对齐，默认值）,right（右对齐）,center（居中对齐）。 (3) 换行符：标签可在web页面上显示为另起一行。,2. HTML基本标签,2) 设置文字样式 标签用于设置文字的字体样式，被其
3、包含的文字为样式作用区。,2. HTML基本标签,2) 设置文字样式 文字其他修饰标签： ：HTML提供了6种文本标题的标记，标记中h后面的数字越大标题文本越小。 ：这三种标记分别是用于对文本进行加粗、斜体、下划线的修饰效果。 ：分别用于对文本进行打字机风格字体修饰、引用方式字体修饰（斜体）、强调字体（加粗并斜体）、加重文本（加粗）的修饰效果 为上标格式标签，多用于数学指数的表示，如某个数的平方或立方。 为下标格式标签，多用于注释，如表示数学的底数。 为删除线标签，实现删除效果。,2. HTML基本标签,3) 网页特殊字符 在网页制作过程中，有一些特殊的符号无法直接在页面中显示，需要使用代码进
4、行替换。HTML规定了一些特殊字符的编码规则.,2. HTML基本标签,4) 列表 HTML的列表分为有序列表和无序列表，包含的列表项由组成。 (1) 无序列表 无序列表是指列表项之间没有先后顺序，列表标签为 列表项一 列表项二 列表项三 列表项四 ,2. HTML基本标签,(1) 无序列表的类型 (type) 附加 列表项一 列表项二 列表项三 列表项四 ,circle,square,2. HTML基本标签,4) 列表 HTML的列表分为有序列表和无序列表，包含的列表项由组成。 (2) 有序列表 有序列表是指列表项之间有先后顺序，序列编号有四种，分别是1、2、3；a、b、c；A、B、C；i、
5、ii、iii、iv;I、II、III、IV。 列表项一 列表项二 列表项三 ,2. HTML基本标签,(2) 有序列表的类型 (type) 附加 列表项一 列表项二 列表项三 列表项四 ,2. HTML基本标签,(2) 有序列表的类型 (type) 附加 列表项一 列表项二 列表项三 列表项四 ,A,a,2. HTML基本标签,(2) 有序列表的类型 (type) 附加 列表项一 列表项二 列表项三 列表项四 ,I,i,2. HTML基本标签,5) 超级链接 超级链接的标签是,给文字添加超级链接类似于其他修饰标签 。超级链接是跳转到另一个页面的 href属性：指定新页面的地址。（可使用相对地址
6、，也可使用绝对地址） Target属性：指定新页面的弹出位置： _self（本身） _blank（新窗口） _top (顶层) _parent（父级框架）（用于框架）,进入新页面,2. HTML基本标签,表格的结构组成 每一对和代表一个表格 每一对和代表一行 每一对代表一个独立的单元格, 内容 内容 ,表格,表行,单元格,2. HTML基本标签,6) 表格,(1) 表格的整体控制 控制表格的边框Border 基本语法: 语法解释: 边框大小值由数字表示,如1,2,3,4。 数值越大,边框越粗。,border=“2“ ,2. HTML基本标签,6) 表格,bordercolor=“red“ ,2
7、. HTML基本标签,表格的整体控制 控制表格的边框颜色Bordercolor 基本语法: 语法解释: 边框颜色属性值与定义网页的背景色相同。,6) 表格,width=“400px“ ,2. HTML基本标签,(1) 表格的整体控制 控制表格的宽度 基本语法: 语法解释: 表格宽度值以象素为单位。,6) 表格,2. HTML基本标签,(1) 表格的整体控制 控制表格的高度 基本语法: 语法解释:表格宽度值以象素为单位。,6) 表格,2. HTML基本标签,(1) 表格的整体控制 控制表格的背景色 基本语法: 语法解释:颜色属性值与定义网页的背景色相同。 控制表格的背景图片 基本语法: 语法解释
8、:默认情况下，背景图片会根据表格大小进行平铺显示。,6) 表格,2. HTML基本标签,(2) 单元格的控制-合并单元格 为了更灵活地安排表格中的各种数据,表格提供了合并单元格的功能,在布局网页时非常有用。 colspan属性用于水平合并单元格，其值为水平合并单元格的数量。 rowspan属性用于垂直合并单元格，其值为垂直合并单元格的数量。,6) 表格,2. HTML基本标签,(2) 单元格的控制-合并单元格,6) 表格,7) 图片 单标签用于在网页中显示图片，通过设置属性来控制图片的显示效果。编码方法如下： ,2. HTML基本标签,8) 添加音乐视频 标签可以播放多种音频和视频格式,格式播
9、放支持取决于浏览者系统中的播放器. 属性: src: 用于指定所连接的多媒体资源路径. autostart: 用于控制是否播放. 属性值为”true | false” Width Height:用于设置播放器界面的宽度和高度,2. HTML基本标签,8) 添加音乐视频 , 插入音乐 ,示例1: 插入音乐,2. HTML基本标签,8) 添加音乐视频 , 插入音乐 ,示例1: 插入音乐,height=“100“,2. HTML基本标签,8) 添加音乐视频 , 插入视频 ,示例1: 插入视频,2. HTML基本标签,9) 制作滚动文字 HTML技术中使文字滚动的方法是使用双标签. 基本语法: 具体滚
10、动内容. 语法解释: 默认滚动方向为从右到左,循环滚动,2. HTML基本标签,9) 制作滚动文字 HTML技术中使文字滚动的方法是使用双标签. 的属性: direction: 滚动方向: 属性值: left right up down bgcolor: 滚动背景色 width: 内容滚动背景宽度 height: 内容滚动背景高度 scrollamount: 滚动速度: 属性值为数字大小值 behavior : 内容滚动方式. 属性值有: scroll(循环滚动);alternate(来回循环滚动) slide(滚动一次); loop设置滚动循环次数 scrolldelay: 内容滚动的时间间
11、隔,属性值为数字大小值,2. HTML基本标签,1) 创建表单,METHOD =“post或get”,ACTION,METHOD,指定提交后，由服务器上那个处理程序处理,指定向服务器提交的方法: 一般为post或get方法, post方法比较安全,ACTION = “URL”, ,演示示例1：使用 post提交方式 和 get提交方式,Action=“表单提交目标程序的URL”,get = 传输数据量小, 数据暴露在URL中, 不安全 post = 传输数据量大, 所有操作对用户不可见, 安全,3 HTML表单,2） 创建表单元素（控件）, ,指定元素的类型，可为TEXT、RADIO、SUBM
12、IT等,控件的名称,控件的初始值,控件的初始宽度,3 HTML表单,表单的控件,3 HTML表单,单行文本框(TEXT),单选按钮(RADIO),复选框(CHECKBOX),下拉列表(SELECT),重置按钮(RESET),提交按钮(SUBMIT),多行文本框(TEXTAREA),密码框(PASSWORD),文本框 , 名字： ,文本区的宽度,输入元素的默认值,文本框,控件名称,3 HTML表单,密码框 ,3 HTML表单, 密码： ,文本区的宽度,输入元素的默认值,密码框,控件名称,单选按钮 ,3 HTML表单, 性别： 男 ,默认选中,初始值,单选按钮,控件名称,列表框基本语法, 说明：
13、size确定列表中可同时看到的行数。 selected默认被选中的可选项。,出生日期： 日,设置“选择月份”选项默认被选中,3 HTML表单,按钮 ,3 HTML表单,普通按钮,重置按钮,提交按钮, ,多行文本框 ,3 HTML表单,行数,初始值,多行文本框,控件名称,列数, 欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。 本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 淘宝的权利和义务 ,6行40个字符宽度的多行文字域,4 iframe框架,框架页面的基本语法,如何设置窗口链接的显示位置,target目标窗口属性 name“显示的窗口名” ,target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。,谢谢！,
