《HTML语言速成》PPT课件.ppt

海南大学信息学院黎才茂 1 2020 3 17 HTML语言 基本学习要点 HTML语言基本格式处理文本处理图片修饰网页表格和表单框架应用多媒体 海南大学信息学院黎才茂 2 2020 3 17 1什么是HTML WWW WorldWideWeb 万维网 它提供了一个图形化的用户界面 以浏览Internet上的文档 这文档以及它们之间的链接构成一个庞大的信息树 HTML HyperTextMarkupLanguage 超文本标记语言 是一种用来制作Web上超文本文档的简单标记语言 它是在原来文本文件的基础上 加上一系列的标记描述其格式 颜色 再加上声音 动画甚至视频等等形成精彩的页面 海南大学信息学院黎才茂 3 2020 3 17 2HTML的基本格式 2 1HTML语言编写的网页代码第一个网页欢迎进入HTML世界 海南大学信息学院黎才茂 4 2020 3 17 2HTML的基本格式 2 2HTML的基本格式HTML文件都可以分成两个部分 标题和正文 用和标识HTML文件的开始和结束用和标识标题部分用和标识正文部分HTML的基本格式如下 标题部分正文部分 海南大学信息学院黎才茂 5 2020 3 17 2HTML的基本格式 2 3HTML的语法双标记内容如 单标记如 标记属性如 注释语句 海南大学信息学院黎才茂 6 2020 3 17 2HTML的基本格式 2 4HTML文档的基本结构版本信息HTML文件标记头部信息 HEAD 主体标记 body 海南大学信息学院黎才茂 7 2020 3 17 3处理文本 3 1段落在HTML文件中 用和表示段落的开始和结束 例如 段落标记的使用这是第一段这是第二段这是第三段 海南大学信息学院黎才茂 8 2020 3 17 3处理文本 3 2分行在HTML文件中 用表示开始新的一行 而分段标记将使不同段之间有空白行 例如 分行标记的使用这是第一行这是第二行这是第三行 海南大学信息学院黎才茂 9 2020 3 17 3处理文本 3 3文字对齐文字对齐的基本用法 其中 left center right 标记居中可以用和标记 例如 文字对齐渭南师范学院渭南师范学院渭南师范学院渭南师范学院 海南大学信息学院黎才茂 10 2020 3 17 3处理文本 3 4水平线在HTML文件中 用标记在网页中生成一个水平线 例如 预格式化文本北京大学创于1898年 初名京师大学堂 是第一所国立综合性大学 也是当时中国的最高教育行政机关 辛亥革命后 于1912年改名 海南大学信息学院黎才茂 11 2020 3 17 3处理文本 3 5列表在HTML中可以使用以下几种类型的列表格式 无序列表以标记开始 以标记结束 在每一个标记处另起一行 并显示加重符号 全部列表会缩排 有序列表以标记开始 以标记结束 在每一个标记处另起一行 并显示数字序号 定义型列表以标记开始 以标记结束 在定义列表中包含一系列术语 定义对 标记后为被定义的术语 标记则出现在被定义的内容前 列表自动换行和缩排 3 6注释文本注释标记的格式 因为凡是在注释标记符内的文字都是隐性的 所以 注释的信息内容是不会显示在网页上的 海南大学信息学院黎才茂 12 2020 3 17 列表和注释示例 列表海南大学渭南师范学院海南大学渭南师范学院海南大学海南大学是特区的高等学府北京大学北京大学是中国的超一流高等学府 海南大学信息学院黎才茂 13 2020 3 17 3处理文本 3 7链接链接也叫超连接 是指在Web中从一个页面跳转到另一个页面的链接关系 链接的目标通常是一个Web页面 也可以是图片 多媒体 电子邮件以及程序文件 链接的格式 创建链接的文字例如 海南大学 URL 成为统一资源定位 URL有绝对URL和相对URL两种类型 绝对URL包含有目标的完整URL地址信息 而相对URL则包含相对于当前URL页面所在位置的目标地址 海南大学信息学院黎才茂 14 2020 3 17 超链接示例 超连接海南大学第一个网页 海南大学信息学院黎才茂 15 2020 3 17 3处理文本 3 8用超连接打开一个新的窗口语法格式 热点文字例如 超连接打开新窗口第一个网页 海南大学信息学院黎才茂 16 2020 3 17 4修饰网页 4 1背景颜色网页的背景颜色设置为 其中RRGGBB是指定的红 绿 蓝的颜色名称或者十六进制的RGB值 十六进制数码为0 1 2 3 4 5 6 7 8 9 A B C D E F 例如 表示网页的背景为白色5 2背景图片网页的背景图片设置为 海南大学信息学院黎才茂 17 2020 3 17 4修饰网页 4 3字体颜色网页中有关字体设置颜色的格式如下 设置字体颜色 设置链接颜色 设置已经访问过的链接颜色 设置正单击的链接颜色 更改字体颜色 例如 该网页的文字是绿色的 链接是红色的 但当点击链接时会变成黑色 点击之后又会变成紫色 海南大学信息学院黎才茂 18 2020 3 17 4修饰网页 4 4字体大小在HTML语言中 用标记来改变字体的大小 其格式为 文本内容其中 表示字号大小 可以去值为1 7 默认值为3例如字体大小渭南师范学院渭南师范学院渭南师范学院渭南师范学院渭南师范学院渭南师范学院渭南师范学院 海南大学信息学院黎才茂 19 2020 3 17 4修饰网页 4 5标题大小在HTML语言中提供六级标题字体格式 分别由H1 H6表示 其格式为 标题内容 1 2 3 4 5 6例如标题大小渭南师范学院渭南师范学院渭南师范学院渭南师范学院渭南师范学院渭南师范学院 海南大学信息学院黎才茂 20 2020 3 17 5处理图片 5 1插入图片插入图片使用标记 其格式为 例如 网页中插入图片 海南大学信息学院黎才茂 21 2020 3 17 5处理图片 5 2改变图片大小其格式为 例如 改变图片大小 海南大学信息学院黎才茂 22 2020 3 17 5处理图片 5 3图文混排将图片放置在网页文字的上方将图片放置在网页文字的左侧将图片放置在网页文字的中间将图片放置在网页文字的右侧将图片放置在网页文字的底端例如 图文混排北京大学创于1898年 初名京师大学堂 是第一所国立综合性大学 也是当时中国的最高教育行政机关 辛亥革命后 于1912年改名 海南大学信息学院黎才茂 23 2020 3 17 6表格 在HTML中表格出现在标记的部分 由和标记表格的开始和结束 表格的边框粗细用选项 border 来规定 其基本格式为 0 1 2 3 表格内容当border 0时则浏览器将不显示表格的边框 在表格中 用和标记表格中一行的开始和结束 用和标记表格中一列的开始和结束 用和标记表格中表头开始和结束 海南大学信息学院黎才茂 24 2020 3 17 基本表格示例 基本表格姓名工作单位联系电话张三渭南师范学院6626068李四渭南师范学院6626053 海南大学信息学院黎才茂 25 2020 3 17 6表格 表格标记的相关属性 表格的尺寸设置 其中 可以是以象素点为单位的定义方式 也可以用屏幕宽度的百分比来定义 表格的单元间隙设置 表格内部单元边缘于单元内容之间的空白设置 海南大学信息学院黎才茂 26 2020 3 17 6表格 表格内文字的对齐 布局设置 水平方向对齐 布局 left center right left center right left center right垂直方向对齐 布局 top middle bottom baseline top middle bottom baseline top middle bottom baseline表格在页面中的对齐 布局 left center right 海南大学信息学院黎才茂 27 2020 3 17 表格对齐 布局示例 表格对齐 布局姓名工作单位联系电话张三渭南师范学院6626068李四渭南师范学院6626053 海南大学信息学院黎才茂 28 2020 3 17 7表单 表单在HTML页面中是实现与用户交互信息的主要手段 表单中主要包括下列元素 Button 普通按钮Radio 单选按钮Checkbox 复选按钮Select 下拉式菜单Text 单行文本框Textarea 多行文本框Submit 提交按钮Reset 重填按钮 海南大学信息学院黎才茂 29 2020 3 17 7表单 用HTML设计表单常用的标记是 和等标记 表单标记该标记的主要作用是设定表单的起止位置 并指定处理表单数据程序的URL地址 其基本语法格式如下 其中 action用于设定处理表单数程序的URL地址 method指定数据传送到服务器的方式 get方式将输入数据加在action指定的地址后面传送到服务器 post方式将输入数据按照HTTP协议中的post传输方式传送服务器 Name指定表单的名称 Onreset和onsubmit是针对 reset 和 submit 按钮来说的 分别设定在按下按钮后要执行的程序 海南大学信息学院黎才茂 30 2020 3 17 7表单 表单输入标记其语法格式如下 其中 align用于设定表单的位置 靠左 left 靠右 right 居中 middle 靠上 top 和靠底 bottom Name设定当前变量的名称 Type设定输入数据的类型 其类型分别为text textarea password checkbox radio submit file hidden image和button Value用于设定如果用户不输入数据时的输入默认值 Src是针对type image的情况来说的 设定图像文件的地址 海南大学信息学院黎才茂 31 2020 3 17 7表单 和标记在HTML中用和标记实现下拉菜单 它们的格式为 其中 name设定下拉菜单的名称 Size设定菜单框的高度 也就是一次显示几个菜单项 Multiple设定为可以进行多选 Selected表示当前项被默认选中 Value表示该项对应的值 海南大学信息学院黎才茂 32 2020 3 17 7表单 多行文本输入标记格式为 其中 name是文本框名 cols是宽度 rows是高度 行数 wrap标识换行控制 off表示不自动换行 hard表示自动硬回车换行 换行标记一同被传送到服务器中 soft表示自动软回车换行 换行标记不会传送到服务器中 海南大学信息学院黎才茂 33 2020 3 17 7表单 HTML表单请填写以下调查内容您的姓名 电子邮件 所在城市 北京上海海口南京 您喜爱的运动是 足球乒乓球游泳网球欢迎您提出宝贵的建议 海南大学信息学院黎才茂 34 2020 3 17 8框架 一个Web页面可以分为多个部分 每一个部分都可以独立地显示一个HTML文件 形成多个窗体 框架 在一个浏览器的页面中显示多个窗口的页面就成为框架页面 在HTML中用和标记框架的开始和结束 用标记窗口内的HTML文件 海南大学信息学院黎才茂 35 2020 3 17 8框架 框架 海南大学信息学院黎才茂 36 2020 3 17 9网页中多媒体的应用 9 1网页中加入声音自动播放背景音乐 音乐文件为 wav或 mid文件 访问者控制声音的播放播放音乐示例 播放音乐正在播放背景音乐一遍 播放音乐 海南大学信息学院黎才茂 37 2020 3 17 9网页中多媒体的应用 9 2网页中加入电影Dynxrc 电影文件 一般为AVI格式Loop 设定循环次数 Start 控制影片如何播放 n1的值有fileopen 页面打开时播放 和mouseover 鼠标经过时播放 Loop 设置播放次数 n2取值为整数或是infinite 表示循环播放 Loopdelay 设置前后两次播放的间隔时间 n3是前后循环播放间隔时间 Controls 显示视频播放的控制条 海南大学信息学院黎才茂 38 2020 3 17 9网页中多媒体的应用 示例 播放影片正在播放影片