html+css+javascript教程课件ppt
合集下载
教学课件 HTML+CSS+JavaScript网页设计
第1章 网页设计基础知识
本章概述 本章的学习目标 主要内容
Hale Waihona Puke 第1页本章概述• 随着互联网的发展，越来越多的人学会了上网，通过网络，可以 聊天、购物、看新闻、查天气等等。这些功能都是通过访问不同 的网页来完成的，那么网页是怎么制作出来的，我们通过手机、 电脑上网时又如何访问不同的网页呢？本章将从最基本的概念讲 起，告诉读者网页与网站的基本原理，如何设计和开发网页。
第4页
1.1 网页的基本概念
• 随着Internet的不断发展，网页已经被越来越多的人所熟悉。那么 什么是网页，网页有是如何搭建并呈现在用户面前的呢？
• Internet，中文正式译名为因特网，又叫做国际互联网。Internet 采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个 Internet上。
• HTML是最早的超文本标记语言，它的发展经历了HTML 1.0、2.0、3.2、4.0、 4.01和5几个版本，在发展过程这，尤其是从HTML4.0开始淘汰了很多标记和 属性，本书对这些淘汰的标记和属性不再赘述。
第12页
CSS层叠样式表
• 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅 可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格 式化。
第11页
HTML概述
• HTML的全称是超文本标记语言(Hyper Text Markup Language)，是Internet上用 于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿 多彩的超媒体文件。
• HTML文件是纯文本的文件格式，所谓的超文本，主要是指它的超链接功能， 通过超链接将图片、声音和影视及其他网页或其他网站链接起来，构成内容 丰富的Web页面。
本章概述 本章的学习目标 主要内容
Hale Waihona Puke 第1页本章概述• 随着互联网的发展，越来越多的人学会了上网，通过网络，可以 聊天、购物、看新闻、查天气等等。这些功能都是通过访问不同 的网页来完成的，那么网页是怎么制作出来的，我们通过手机、 电脑上网时又如何访问不同的网页呢？本章将从最基本的概念讲 起，告诉读者网页与网站的基本原理，如何设计和开发网页。
第4页
1.1 网页的基本概念
• 随着Internet的不断发展，网页已经被越来越多的人所熟悉。那么 什么是网页，网页有是如何搭建并呈现在用户面前的呢？
• Internet，中文正式译名为因特网，又叫做国际互联网。Internet 采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个 Internet上。
• HTML是最早的超文本标记语言，它的发展经历了HTML 1.0、2.0、3.2、4.0、 4.01和5几个版本，在发展过程这，尤其是从HTML4.0开始淘汰了很多标记和 属性，本书对这些淘汰的标记和属性不再赘述。
第12页
CSS层叠样式表
• 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅 可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格 式化。
第11页
HTML概述
• HTML的全称是超文本标记语言(Hyper Text Markup Language)，是Internet上用 于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿 多彩的超媒体文件。
• HTML文件是纯文本的文件格式，所谓的超文本，主要是指它的超链接功能， 通过超链接将图片、声音和影视及其他网页或其他网站链接起来，构成内容 丰富的Web页面。
机工社网页设计与制作教程(HTML+CSS+JavaScript)第3版教学课件第1章 网页设计与
</head> <body>
网页内容 </body> </html>
1.3.3 HTML5编码规范
页面的HTML代码书写必须符合HTML规范。 1．HTML书写规范 2．标签的规范 3．属性的规范 4．元素的嵌套 5．代码的缩进
1.4 编辑HTML文件
1.4.1 常见的网页编辑工具 1.4.2 HTML文件的创建
1.2 Web前端开发技术简介
1.2.1 HTML5简介 1.2.2 CSS3简介 1.2.3 JavaScript简介
1.2.1 HTML5简介
HTML是HyperText Markup Language（超文本标记语言）的缩 写，是构成Web页面、表示Web页面的符号标签语言。通过HTML， 将所需表达的信息按某种规则写成HTML文件，再通过专用的浏览 器来识别，并将这些HTML文件翻译成可以识别的信息，这就是网 页。
JavaScript的开发环境很简单，不需要Java编译器，而是直接 运行在浏览器中，JavaScript通过嵌入或调入到HTML文件中实现其 功能。
1.3 HTML5的基本结构和编码规范
1.3.1 HTML5语法结构 1.3.2 HTML5文档结构 1.3.3 HTML5编码规范
1.3.1 HTML5语法结构
1.1 网页与网站的概念
1.1 网页与网站的概念
网页（Web Page）是存放在Web服务器上供客户端用户浏览 的文件，可以在Internet上传输。
根据侧重点的不同，网站（Web Site，也称站点）被定义为已 注册的域名、主页或Web服务器。网站由域名（也就是网站地址） 和网站空间构成。网站是一系列网页的组合，这些网页拥有相同或 相似的属性并通过各种链接相关联。所谓相同或相似的属性，就是 拥有相同的实现目的、相似的设计或共同描述相关的主导体。通过 浏览器，可以实现网页的跳转，从而浏览整个网站。
网页内容 </body> </html>
1.3.3 HTML5编码规范
页面的HTML代码书写必须符合HTML规范。 1．HTML书写规范 2．标签的规范 3．属性的规范 4．元素的嵌套 5．代码的缩进
1.4 编辑HTML文件
1.4.1 常见的网页编辑工具 1.4.2 HTML文件的创建
1.2 Web前端开发技术简介
1.2.1 HTML5简介 1.2.2 CSS3简介 1.2.3 JavaScript简介
1.2.1 HTML5简介
HTML是HyperText Markup Language（超文本标记语言）的缩 写，是构成Web页面、表示Web页面的符号标签语言。通过HTML， 将所需表达的信息按某种规则写成HTML文件，再通过专用的浏览 器来识别，并将这些HTML文件翻译成可以识别的信息，这就是网 页。
JavaScript的开发环境很简单，不需要Java编译器，而是直接 运行在浏览器中，JavaScript通过嵌入或调入到HTML文件中实现其 功能。
1.3 HTML5的基本结构和编码规范
1.3.1 HTML5语法结构 1.3.2 HTML5文档结构 1.3.3 HTML5编码规范
1.3.1 HTML5语法结构
1.1 网页与网站的概念
1.1 网页与网站的概念
网页（Web Page）是存放在Web服务器上供客户端用户浏览 的文件，可以在Internet上传输。
根据侧重点的不同，网站（Web Site，也称站点）被定义为已 注册的域名、主页或Web服务器。网站由域名（也就是网站地址） 和网站空间构成。网站是一系列网页的组合，这些网页拥有相同或 相似的属性并通过各种链接相关联。所谓相同或相似的属性，就是 拥有相同的实现目的、相似的设计或共同描述相关的主导体。通过 浏览器，可以实现网页的跳转，从而浏览整个网站。
HTML-CSS-JavaScriptWeb编程技术94页PPT
5
HTML概述
案例名称：HTML网页框架 程序名称：2-01.htm <HTML>
<HEAD> <TITLE></TITLE>
</HEAD> <BODY></BODY> </HTML>
6
HEAD头元素
案例名称：HTML网页框架 程序名称：2-02.htm <HTML><HEAD>
<META NAME="Description" CONTENT="The Page Of HTML"> <META NAME="Keywords" CONTENT="Good,Better,Best"> <META HTTP-EQUIV="Content-type" CONTENT="Text/html;charset=gb2312"> <META NAME="Author" CONTENT="Zhou RunFa"> <META HTTP-EQUIV="Refresh" CONTENT="3; URL=263"> <TITLE>我的第一页面</TITLE> </HEAD> <BODY></BODY> </HTML>
第2章 Web编程技术
2
内容提要
本章首先介绍HTML的发展历史 然后介绍HTML的基本框架 详细介绍了HTML的各种常用标记：文字标记、
图片标记、超级链接标记，等等 介 绍 CSS 的 基 本 使 用 方 法 ， 如 何 让 CSS 与
HTML概述
案例名称：HTML网页框架 程序名称：2-01.htm <HTML>
<HEAD> <TITLE></TITLE>
</HEAD> <BODY></BODY> </HTML>
6
HEAD头元素
案例名称：HTML网页框架 程序名称：2-02.htm <HTML><HEAD>
<META NAME="Description" CONTENT="The Page Of HTML"> <META NAME="Keywords" CONTENT="Good,Better,Best"> <META HTTP-EQUIV="Content-type" CONTENT="Text/html;charset=gb2312"> <META NAME="Author" CONTENT="Zhou RunFa"> <META HTTP-EQUIV="Refresh" CONTENT="3; URL=263"> <TITLE>我的第一页面</TITLE> </HEAD> <BODY></BODY> </HTML>
第2章 Web编程技术
2
内容提要
本章首先介绍HTML的发展历史 然后介绍HTML的基本框架 详细介绍了HTML的各种常用标记：文字标记、
图片标记、超级链接标记，等等 介 绍 CSS 的 基 本 使 用 方 法 ， 如 何 让 CSS 与
Web前端开发课件：HTML、CSS、JavaScript基础
2
以及Ajax优势。
学习创建、配置和使用
XMLHttpRequest对象来向服务器请
求数据和响应客户端。
3
响应处理
如何处理服务器的响应，以便更好地 交互和更快地更新页面
网站开发架构和区分前后端处理
开放式Web架构
详细解释开放式Web架构 的概念，包括数据存储和 传输，以及Web资源之间 的交互方式。
SEO基础（搜索引擎优化）
1
了解SEO
基础SEO知识,包括如何从搜做引擎的
搜索引擎优化
2
角度思考网站设计。
通过内容、元数据、链接和用户体验
来优化您的网站，以提高其排名。
3
其他优化技巧
一些其他优化技巧，例如通过社交媒 体和博客网站来引擎流量。
Web安全基础和防范措施
安全问题
所涉及的威胁以及可能感 到担忧的位置。
Web前端开发课件
本课程将涵盖HTML、CSS和JavaScript的基础知识，帮助您入门Web开发。 从基础语法开始，内容丰富、易于理解。
程序员入门指南
编程语言
选择一门适合你的编程语 言并针对该语言的知识进 行学习。
计算机基础
学习计算机基础，包括数 据结构、Байду номын сангаас法、操作系统 和网络基础知识。
实践项目
选择器和操作
使用jQuery选择器来操作 HTML元素，并使用方法来执 行更复杂的操作。
事件处理
jQuery的事件处理器可以进行 更简化你常规的事件处理。
Ajax基础知识、XMLHttpRequest对象的 使用
1
Ajax基础知识
了解什么是Ajax以及为什么要使用它，
XMLHttpRequest对象的使用
HTML+CSS+JS入门基础ppt
• 开一个新的(浏览器)窗口 (Target Window) <a href="URL" target=“_blank"> ... </a>
2.2.7 超级链接
超级链接是用锚元素<a>定义的 • 在<a>元素下，有元素属性href,href的属性值为一
个URL地址
➢ 如：<a href="/eschool">指向 学院的超级链接</a>
➢ 如：<a href="top.htm">普通超级链接</a> ➢ 如：<a href="../pic/left.htm">普通超级链接</a>
• 空格标记
2.2.5 水平线标记
• 水平线
<hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色
• <hr size=7 align=center width="75%" color="red">
2.1.3 HTML 文档结构-(head)meta
• 编写一个网页，要求3秒钟后自动跳转到北软教育首页。
• <html>
•
<head>
•
<title>my first page</title>
• <meta http-equiv="refresh" content="3;URL=">
2.2.7 超级链接
超级链接是用锚元素<a>定义的 • 在<a>元素下，有元素属性href,href的属性值为一
个URL地址
➢ 如：<a href="/eschool">指向 学院的超级链接</a>
➢ 如：<a href="top.htm">普通超级链接</a> ➢ 如：<a href="../pic/left.htm">普通超级链接</a>
• 空格标记
2.2.5 水平线标记
• 水平线
<hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色
• <hr size=7 align=center width="75%" color="red">
2.1.3 HTML 文档结构-(head)meta
• 编写一个网页，要求3秒钟后自动跳转到北软教育首页。
• <html>
•
<head>
•
<title>my first page</title>
• <meta http-equiv="refresh" content="3;URL=">
html+javascript+css 课件第1章
第一章 网页设计概述
第一章 网页设计概述
主要内容：
万维网的基本概念 如何进行网页的开发 网页制作的相关技术
广西经济管理干部学院计算机系
2014.1.7
万维网的概念
当今社会，人们对网络的依赖程度越来越密切， 大到政府机关、公司厂矿；小到家庭个人，网络 几乎无处不在。而网站的建设也已成为社会信息 化的主角。 WWW（World Wide Web）是一个基于超文本 （Hypertext）方式的信息检索服务工具。。
广西经济管理干部学院计算机系
2014.1.7
开发工具的选择
HTML的编辑工具是比较多的，读者既可以选择 最常用的基于文本的HTML编辑器（Windows自 带的记事本），也可以选择一套功能强大，可取 代记事本编辑器的EditPlus，还可以选择所见即 所得的Dreamweaver等。
广西经济管理干部学院计算机系
广西经济管理干部学院计算机系 2014.1.7
CSS的主要作用
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网 站开发者，你能够为每个 HTML 元素定义样式， 并将之应用于你希望的任意多的页面中。如需进 行全局的更新，只需简单地改变样式，然后网站 中的所有元素均会自动地更新。
广西经济管理干部学院计算机系
广西经济管理干部学院计算机系
2014.1.7
万维网
当进入万维网上一个网页，或者其他网络资源的时候，通 常你要首先在浏览器上键入想访问网页的统一资源定位器 （URL），或者通过超链接方式链接到那个网页或网络资 源。这之后的工作首先是URL的服务器名部分，被名为域 名系统的分布于全球的因特网数据库解析，并根据解析结 果决定进入哪一个IP地址。 接下来的步骤是为所要访问的网页，向在那个IP地址工作 的服务器发送一个HTTP请求。在通常情况下，HTML文 本、图片和构成该网页的一切其他文件很快会被逐一请求 并发送回用户。 网络浏览器接下来的工作是把HTML、CSS和其他接受到 的文件所描述的内容，加上图像、链接和其他必须的资源， 显示给用户。这些就构成了浏览器中所看到的“网页”。
第一章 网页设计概述
主要内容：
万维网的基本概念 如何进行网页的开发 网页制作的相关技术
广西经济管理干部学院计算机系
2014.1.7
万维网的概念
当今社会，人们对网络的依赖程度越来越密切， 大到政府机关、公司厂矿；小到家庭个人，网络 几乎无处不在。而网站的建设也已成为社会信息 化的主角。 WWW（World Wide Web）是一个基于超文本 （Hypertext）方式的信息检索服务工具。。
广西经济管理干部学院计算机系
2014.1.7
开发工具的选择
HTML的编辑工具是比较多的，读者既可以选择 最常用的基于文本的HTML编辑器（Windows自 带的记事本），也可以选择一套功能强大，可取 代记事本编辑器的EditPlus，还可以选择所见即 所得的Dreamweaver等。
广西经济管理干部学院计算机系
广西经济管理干部学院计算机系 2014.1.7
CSS的主要作用
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网 站开发者，你能够为每个 HTML 元素定义样式， 并将之应用于你希望的任意多的页面中。如需进 行全局的更新，只需简单地改变样式，然后网站 中的所有元素均会自动地更新。
广西经济管理干部学院计算机系
广西经济管理干部学院计算机系
2014.1.7
万维网
当进入万维网上一个网页，或者其他网络资源的时候，通 常你要首先在浏览器上键入想访问网页的统一资源定位器 （URL），或者通过超链接方式链接到那个网页或网络资 源。这之后的工作首先是URL的服务器名部分，被名为域 名系统的分布于全球的因特网数据库解析，并根据解析结 果决定进入哪一个IP地址。 接下来的步骤是为所要访问的网页，向在那个IP地址工作 的服务器发送一个HTTP请求。在通常情况下，HTML文 本、图片和构成该网页的一切其他文件很快会被逐一请求 并发送回用户。 网络浏览器接下来的工作是把HTML、CSS和其他接受到 的文件所描述的内容，加上图像、链接和其他必须的资源， 显示给用户。这些就构成了浏览器中所看到的“网页”。
html+css+javascript标准实例教程(课堂PPT)
值;样式属性:取值;…}
HTML/CSS/JavaScript 标准教程实例版（第2版）
11.2.2 CSS选择符类型
2．id选择符
在HTML文档中，需要唯一标识一个元素时，就会
第
赋予它一个id标识，以便在对整个文档进行处理时能
11 章
够很快地找到这个元素。而id选择符就是用来对这个
单一元素定义单独的样式。其定义方法与类选择符大
11.2.1 CSS的基本语法
• CSS基本语法
第
11
章
selector {property: value; property: value
……property: value }
HTML/CSS/JavaScript 标准教程实例版（第2版）
11.2.1 CSS的基本语法
• 语法说明
第
➢ 语法中selector代表选择符，property代表属性，
11
章
value代表属性值。
HTML/CSS/JavaScript 标准教程实例版（第2版）
11.2.1 CSS的基本语法
• 语法说明
➢ 选择符包括多种形式，所有的HTML标记都可以作
第
11
为选择符，如body、p、table等都是选择符。但在
章
利用CSS的语法给它们定义属性和值时，其中属性
和值要用冒号隔开。
11.1.2 CSS的特性
第
1．继承性
11
章
2．层叠性
HTML/CSS/JavaScript 标准教程实例版（第2版）
11.2 CSS的使用
第
11.2.1 CSS的基本语法
11
章
11.2.2 CSS选择符类型
精品课件-HTML+CSS+JavaScript网页设计教程-8. 第六章 拓展知识
颜色，如红色与橙色、蓝色与绿色、蓝色与 紫色、紫色与红色。这种页面总体感觉和谐、 安详、耐看。
第六章拓展知识
（3）对比色相构成 对比色相对比，120度左右的两
色强对比. 确定网页主题色后，选择他的对
比色并调整一下其明度和纯度作为辅助 色，放置于网页中，和谐的对比色网页， 色彩对比强烈、鲜明、饱满、华丽、活
第六章拓展知识
5.纯度对比 (1)概念： 因色彩纯度的差异而形成的色彩鲜浊对比称
之为纯度对比。这种对比可以是同一种色相纯度 鲜浊对比，也可以是不同色相间的纯度对比。色 彩纯度差别的大小决定对比的强弱。
第六章拓展知识
(2)分类： 鲜调：占主体的色和其他色相均属高纯度色。色彩饱和， 艳丽。有积极、强烈、冲动、快乐、活泼的性格意味。
形成的对比。冷暖感觉本是 触觉对外界的反映，色彩的 冷暖主要来自人的生理和心 理感受。
第六章拓展知识
(2)分类 暖色，暖色易产牛紧张、激动、兴奋等情绪， 并具有积极、热情、活力、外向特征；以暖色为主课 构成暖色基调，暖色调给人的感觉希望、热情、喜庆、 浓郁、阳光感、迫近感。
第六章拓展知识
冷色，冷色具有寒冷、沉着、寂寞、深远、理智、 消极、冷静、清爽、内向的特点。以冷色为主可以构 成冷色基调，冷色基调给人的感觉寒冷、清爽、理智、 流动感、空间感等。
第六章拓展知识
绿色T 恤
穿绿色T恤的美 女和一群人
一群 人
第六章拓展知识
6.1.3网页配色的基本概念 在网页设计过程中，一般不会使用单一的一种颜色，
而是多种颜色配合使用。也即是网页的配色。 1.色相对比 （1）概念 色相对比：因色相之间的差别形成的对比。各色相 由于在色环上的距离远近不同，形成不同的色相对比。
第六章拓展知识
（3）对比色相构成 对比色相对比，120度左右的两
色强对比. 确定网页主题色后，选择他的对
比色并调整一下其明度和纯度作为辅助 色，放置于网页中，和谐的对比色网页， 色彩对比强烈、鲜明、饱满、华丽、活
第六章拓展知识
5.纯度对比 (1)概念： 因色彩纯度的差异而形成的色彩鲜浊对比称
之为纯度对比。这种对比可以是同一种色相纯度 鲜浊对比，也可以是不同色相间的纯度对比。色 彩纯度差别的大小决定对比的强弱。
第六章拓展知识
(2)分类： 鲜调：占主体的色和其他色相均属高纯度色。色彩饱和， 艳丽。有积极、强烈、冲动、快乐、活泼的性格意味。
形成的对比。冷暖感觉本是 触觉对外界的反映，色彩的 冷暖主要来自人的生理和心 理感受。
第六章拓展知识
(2)分类 暖色，暖色易产牛紧张、激动、兴奋等情绪， 并具有积极、热情、活力、外向特征；以暖色为主课 构成暖色基调，暖色调给人的感觉希望、热情、喜庆、 浓郁、阳光感、迫近感。
第六章拓展知识
冷色，冷色具有寒冷、沉着、寂寞、深远、理智、 消极、冷静、清爽、内向的特点。以冷色为主可以构 成冷色基调，冷色基调给人的感觉寒冷、清爽、理智、 流动感、空间感等。
第六章拓展知识
绿色T 恤
穿绿色T恤的美 女和一群人
一群 人
第六章拓展知识
6.1.3网页配色的基本概念 在网页设计过程中，一般不会使用单一的一种颜色，
而是多种颜色配合使用。也即是网页的配色。 1.色相对比 （1）概念 色相对比：因色相之间的差别形成的对比。各色相 由于在色环上的距离远近不同，形成不同的色相对比。
html+css+javascript教程课件ppt
<em></em>强调（通常是斜体加粗体）
10.html
设置文字显示
11.html
特殊字符
12.html
可以使用&#xx来显示字符，xx为字符的unicode码 dreamweaver & 华
文字的布局
<p>…</p> 分段落现实
<div>…</div> <span>…</span> 分块显示
08.html
标题字体大小--<h#>
<h#>…</h#> #=1、2、3、4、5、6 按标题级别用黑体字显示标题内容 自动插入空行 <h1>最大 <h6>最小
09.html
字体设置
<font face=“” size=“” color=“”>…</font> face定义字体 size 1 2 3 4 5 6 7
15.html
表格—重点掌握
<table width=“” align=“” border=“”>
<tr>
<th width=“” align=“”>…</th>
<th>…</th>… </tr>
%或像素值
<tr>
<td width=“” align=“” valign=“”>…</td>
<td rowspan=“” colspan=“” bgcolor=“”>…</td>
密码区域—特殊的单行文本输入框 password <input type=“password” name=“” value=“” size=“” maxlength=“”>
10.html
设置文字显示
11.html
特殊字符
12.html
可以使用&#xx来显示字符，xx为字符的unicode码 dreamweaver & 华
文字的布局
<p>…</p> 分段落现实
<div>…</div> <span>…</span> 分块显示
08.html
标题字体大小--<h#>
<h#>…</h#> #=1、2、3、4、5、6 按标题级别用黑体字显示标题内容 自动插入空行 <h1>最大 <h6>最小
09.html
字体设置
<font face=“” size=“” color=“”>…</font> face定义字体 size 1 2 3 4 5 6 7
15.html
表格—重点掌握
<table width=“” align=“” border=“”>
<tr>
<th width=“” align=“”>…</th>
<th>…</th>… </tr>
%或像素值
<tr>
<td width=“” align=“” valign=“”>…</td>
<td rowspan=“” colspan=“” bgcolor=“”>…</td>
密码区域—特殊的单行文本输入框 password <input type=“password” name=“” value=“” size=“” maxlength=“”>
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)课件-第11章 HTML
3
11.1.1 HTML5的多媒体支持
HTML5中提供了<video>和<audio>标签，可以直接在浏览器中播放视频和音频 文件，无须事先在浏览器上安装任何插件，只要浏览器本身支持HTML5规范即可。
HTML5对原生音频和视频的支持潜力巨大，但由于音频、视频的格式众多，以及 相关厂商的专利限制，导致各浏览器厂商无法自由使用这些音频和视频的解码器，浏览 器能够支持的音频和视频格式相对有限。HTML5支持的音频格式有Ogg Vorbis、MP3、 WAV。HTML5支持的视频格式有Ogg、H.264（MP4）、Web
11.2.2 构建绘图环境
大多数<canvas>绘图API都没有定义在<canvas>元素本身上，而是定义在通过画 布的getContext()方法获得的一个“绘图环境”对象上。getContext()方法返回一个用 于在画布上绘图的环境，其语法如下：
canvas.getContext(contextID) 参数contextID指定了用户想要在画布上绘制的类型。“2d”，即二维绘图，这个 方法返回一个上下文对象CanvasRenderingContext2D，该对象导出一个二维绘图API。
10
11.1.4 HTML5多媒体API
HTML 5中提供了Video和Audio对象，用于控制视频或音频的回放及当前状态等 信息，Video和Audio对象的相似度非常高，区别在于所占屏幕空间不同。
【例11-3】使用Video对象创建一个自定义视频播放器，播放器包括“开始播 放”/“暂停播放”按钮、播放进度信息和“静音”/“取消静音”按钮，本例在浏览器 中的显示效果如图11-3所示。
JavaScript使用getElementById方法通过canvas的id定位canvas元素。 getContext（）方法使用一个上下文作为其参数，一旦渲染上下文可用，程序就 可以调用各种绘图方法。
11.1.1 HTML5的多媒体支持
HTML5中提供了<video>和<audio>标签，可以直接在浏览器中播放视频和音频 文件，无须事先在浏览器上安装任何插件，只要浏览器本身支持HTML5规范即可。
HTML5对原生音频和视频的支持潜力巨大，但由于音频、视频的格式众多，以及 相关厂商的专利限制，导致各浏览器厂商无法自由使用这些音频和视频的解码器，浏览 器能够支持的音频和视频格式相对有限。HTML5支持的音频格式有Ogg Vorbis、MP3、 WAV。HTML5支持的视频格式有Ogg、H.264（MP4）、Web
11.2.2 构建绘图环境
大多数<canvas>绘图API都没有定义在<canvas>元素本身上，而是定义在通过画 布的getContext()方法获得的一个“绘图环境”对象上。getContext()方法返回一个用 于在画布上绘图的环境，其语法如下：
canvas.getContext(contextID) 参数contextID指定了用户想要在画布上绘制的类型。“2d”，即二维绘图，这个 方法返回一个上下文对象CanvasRenderingContext2D，该对象导出一个二维绘图API。
10
11.1.4 HTML5多媒体API
HTML 5中提供了Video和Audio对象，用于控制视频或音频的回放及当前状态等 信息，Video和Audio对象的相似度非常高，区别在于所占屏幕空间不同。
【例11-3】使用Video对象创建一个自定义视频播放器，播放器包括“开始播 放”/“暂停播放”按钮、播放进度信息和“静音”/“取消静音”按钮，本例在浏览器 中的显示效果如图11-3所示。
JavaScript使用getElementById方法通过canvas的id定位canvas元素。 getContext（）方法使用一个上下文作为其参数，一旦渲染上下文可用，程序就 可以调用各种绘图方法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
10.html
Color可以使用预定义的名字,也可以使用数字
<tt></tt>通常是打字机风格字体 <cite></cite>通常是引用方式（斜体） <em></em>强调（通常是斜体加粗体）
设置文字显示
名称
黑体 斜体 下划线 中划线 闪烁 上标 下标
HTML代码
<b></b> <i></i> <u></u> <s></s> <blink></blink> <sup></sup> <sub></sub> 11.html
HTML
WEB第一语言
课程内容及学习周期
HTML介绍 HTML细节
文件结构
文字 图片 链接
在不是很熟悉HTML的情况下， 学习加练习的时间应该在4—8天 对于已经熟悉HTML的读者可以略 过本章 本章内容针对程序员进行设置， 不是培养设计师
表格
表单 多窗口 特殊字符 ……
HTML简介 Hyper Text Markup Language
</a>
当鼠标点击‚文字‛时，TargetWindow的内容将会跳转到 ‚url‛，不指定target时在本窗口跳转。
连接到文件的特定部分
Href=‚url#point‛ 链接到url的point部分 在url文档中用<a name=‚point‛></a>标识
Target 见‚框架‚部分
05.html 06.html
03.html
色彩值 ‚#rrggbb”
Eg. <body bgcolor=“#ffffff” > 红绿蓝数字值
<body background=‚img_url‛ --图片地址 >
04.html
body其他属性 text link alink vlink bgcolor leftmargin topmargin…
Eg. <a href=“”></a>
07.html
相对于URL地址
Eg. <img src=“”/>
URL URI URN
URL
Uniform Resource Locator（统一资源定位符）
• 网络协议 ＋ 主机名 ＋ 端口号 ＋ 资源名（定位标记） • :80/index.html#top • 带有参数的url 及 url编码问题 见Servlet / JSP部分
<style>…</style>定义CSS格式 <Script language=‚‛>…</Script>
用于定义脚本，Eg. Javascript <link> <base>标签
02.html
<body>
<body bgcolor=‚#‛ --背景色 background="img_url" --背景图片 </body>
name:
• 提交到服务器端的变量的名字
表单中的输入标签
文本框 text <input type=“text” name=“” value=“” maxlength=“” size=“”> • maxlength – 最大字符长度 • size – 文本框宽度（字符） 密码区域—特殊的单行文本输入框 password <input type=“password” name=“” value=“” size=“” maxlength=“”>
<h6>最小
09.html
字体设置
<font face=“” size=“” color=“”>…</font> face定义字体 size 1 2 3 4 5 6 7
• 实际 8 10 12 14 18 24 36（pixels） • <font size=‚+1‛> • <font size=‚-1‛> • red、blue、black…
特殊字符
< > < >
® &
© ™ "
12.html
注册商标 &
空格 copyright 商标™ ‚
可以使用&#xx来显示字符，xx为字符的unicode码 dreamweaver & 华
文字的布局
<p>…</p> 分段落现实 <div>…</div> <span>…</span> 分块显示 <ul>…</ul> <li type=“disc circle square”>… 符号列表 <ol>…</ol> <li>… 数字列表 13.html
table的属性： bgcolor border bordercolorlight bordercolordark cellspacing cellpadding width height 表头（可选）
跨行 跨列
top middle bottom
单元格
16.html
表单—重点掌握
作用 收集用户信息
URN
Uniform Resource Name 持久可用的资源标准名称
• 例如邮箱名mashibing2004@
URI
Uniform Resource Identifier 包含URL和URN
URI_URL_URN.html
分隔线--<hr>
语法
<hr size=‚pixels‛ align=‚align‛ width=‚pixels‛ color=‚#‛ noshade>
单选按钮 <input type=‚radio‛ name=‚‛ value="" checked> • 典型用法 : 同一名字，不同的值 • 错误的用法 : 不同的名字
复选框
<input type=‚checkbox‛ name=‚‛ value=‚‛ checked> • 典型的用法 : 同一name，不同的value
超文本 (文字+图片+音视+链接…) 标记语言 (浏览器根据标记显示内容) 来自于SGML(标准通用标记语言) 专注于在Web上传递信息 是写给浏览器的语言
历史 HTML1.0 – HTML2.0 (IETF制定) – HTML4.0(最终版) W3C - HTML5(未来代替HTML)
• IETF – Internet Engineering Task Force • HTTP协议 RFC等 • RFC2616 Http1.1 RFC1521 MIME • W3C – World Wide Web Consortium () • HTML XML等 • 符合XML标准的HTML
14.html
……
取值:left right center top middle bottom <center>……</center> 对齐到中间
图片
<img src=“” align=“” alt=“” border=“”>
Src 图片路径，一般使用相对路径 Alt 图片无法显示时显示的文字 Border 边框的厚度 Align = left right top middle bottom 图文混排时用于和图片的对齐
15.html
图片与链接 － 见DreamWeaver演示
表格—重点掌握
<table width=‚‛ align=‚‛ border=‚‛> <tr> <th width=‚‛ align=‚‛>…</th> <th>…</th>… %或像素值 </tr> <tr> <td width=‚‛ align=‚‛ valign=‚‛>…</td> <td rowspan=‚‛ colspan=‚‛ bgcolor=‚‛>…</td> …… </tr> </table>
<title>文字</title>
“文字‛将显示在浏览器标题栏上
"http-equiv"指明下面 要设置的项目 "content"指明该项目 设置的内容
<meta>：用于设置一些头信息
<meta http-equiv=“content-type” content=“text/html;charset=gb2312”> <meta http-equiv=“refresh” content=“3;url=”> <meta name="keywords" content="your keywords"> <meta name="description" content="your description"> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <meta name="generator | author | copyright" content="…..">