模块02从HTML到HTML5的过渡电子课件 HTML5网页设计.pptx

《模块02从HTML到HTML5的过渡电子课件 HTML5网页设计.pptx》由会员分享，可在线阅读，更多相关《模块02从HTML到HTML5的过渡电子课件 HTML5网页设计.pptx（60页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、模块二从HTML到HTML5的过渡2.1HTML简介HTML是目前网络上应用广泛的一种语言，也是构成网页文档的主要语言。用HTML编写的超文本文档称为HTML文档，HTML文档主要包括由HTML标签组成的文本、图形、声音、动画、超链接等。HTML的普遍应用就是超文本的技术，即通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机中的文件链接。2.1HTML简介2.1.1 HTML网页结构ABCD（1 1）文档声明:。（3 3）headhead标签对:。（2 2）htmlhtml标签对:。（4 4）bodybody标签对:。一个完整的HTML文档至少由以下四部分组成。

2、2.1HTML简介2.1.2 HTML实例解析HTMLHTML文档代码文档代码1.我的第一个页面 我的第一个段落运行结果如图2-1所示。图2-1 HTML文档实例运行结果2.1HTML简介2.1.2 HTML实例解析HTMLHTML文档解析文档解析2.1）元素我的第一个段落说明：元素定义了HTML文档中的一个段落。该元素拥有一个开始标签和一个结束标签。元素内容是:我的第一个段落。2.1HTML简介2.1.2 HTML实例解析HTMLHTML文档解析文档解析2.2）元素元素定义了 HTML 文档的主体。该元素拥有一个开始标签和一个结束标签。元素内容是另一个 HTML 元素（p 元素）。我的第一个

3、段落2.1HTML简介2.1.2 HTML实例解析HTMLHTML文档解析文档解析2.3）元素我 的 第 一 个 页 面元素定义了页面的标题，该元素拥有一个开始标签 和一个结束标签。元素内容是:我的第一个页面。4）元素 我的第一个页面元素定义了 HTML 文档信息。该元素拥有一个开始标签 和一个结束标签。元素内容是另一个HTML 元素（title元素）。2.1HTML简介2.1.2 HTML实例解析HTMLHTML文档解析文档解析2.5）元素提示：元素定义了整个HTML文档。该元素拥有一个开始标签 和一个结束标签。元素内容是另外的HTML元素（head元素和body元素）。我的第一个页面我的第

4、一个段落2.1HTML简介2.1.3 HTML标签与元素1.HTML实例 我的第一个网页 我的第一个网页2.1HTML简介2.1.3 HTML标签与元素2.HTML 实例解释 元素1）我的第一个网页元素定义了 HTML标题。该元素拥有一个开始标签 和一个结束标签。元素内容是：我的第一个网页。元素2）我的第一个网页元素定义了 HTML 文档的主体。该元素拥有一个开始标签和一个结束标签。元素内容是另一个HTML元素（h1元素）。2.1HTML简介2.1.3 HTML标签与元素2.HTML 实例解释 元素3）我 的 第 一 个 网 页元素定义了HTML页面的标题。该元素拥有一个开始标签和一个结束标签

5、。元素内容是：我的第一个网页。元素4）我的第一个网页元素定义了关于文档的信息。该元素拥有一个开始标签和一个结束标签。2.1HTML简介2.1.3 HTML标签与元素2.HTML 实例解释元素5）我的第一个网页 我的第一个网页提示：元素定义了整个HTML文档。该元素拥有一个开始标签 和一个结束标签。2.1HTML简介2.1.4 HTML浏览器的中文编码先看下面一个例子,代码如下。汉字显示正常其在Dreamweaver CC中运行的结果如图2-2所示，在预览的过程中，中文编码变成了乱码。图2-2 中文编码运行异常2.1HTML简介2.1.4 HTML浏览器的中文编码如果希望中文编码能正常显示，需要

6、在HTML文件头部的“content-type”中设置“charset”，告诉浏览器打开该文件的编码方式。其代码如下。HTML浏览器支持的中文编码有两种方式：一种是“charset=utf-8”,另一种是“charset=gbk”。运行情况如图2-3所示。图2-3 中文编码运行正常2.1HTML简介2.1.4 HTML浏览器的中文编码页面源文件不是乱码，但是在浏览器中显示乱码，可以通过修改浏览器的编码方式看到正确的中文显示。HTML文档中设定的中文编码格式为utf-8（），在浏览器中也要选择“Unicode（UTF-8）”编码；如果HTML文档中设定的中文编码格式为“charset=gbk”，

7、在浏览器中要选择“简体中文（GB2312）”编码。浏览器编码设置如图2-4所示。图2-4 浏览器编码设置2.2HTML5新元素01 标签标签用于定义图形。该标签基于JavaScript的绘图 API。02 新的媒介元素表2-1 新的媒介元素2.2.1 HTML5新元素简介2.2HTML5新元素03新的表单元素表2-2 新的表单元素04新的语义/结构元素表2-3 新的语义/结构元素2.2HTML5新元素04新的语义/结构元素表2-3 新的语义/结构元素 (续表）说明：HTML5新增的结构元素都是块元素，独占一行，使用时要注意。2.2HTML5新元素2.2.2 HTML5新元素简介01简单实例如下

8、。创建一个矩形2.2HTML5新元素2.2.2 HTML5新元素简介01标签通常需要指定一个id属性,width 和 height 属性定义画布的大小，style属性定义线条宽度和线条颜色。在HTML页面中允许使用多个 元素。运行情况如图2-5所示。创建一个矩形图2-5 绘制矩形2.2HTML5新元素2.2.2 HTML5新元素简介元素本身是没有绘图能力的，所有的绘图工作必须在 JavaScript 内部完成。例如，要创建一个红色的矩形，代码如下。创建一个红色矩形02var c=document.getElementById（myCanvas）;/找到元素 /var ctx=c.getCont

9、ext（2d）;/创建 context 对象/ctx.fillStyle=#FF0000;/定义线条颜色/ctx.fillRect（0,0,150,75）;/*定义矩形当前的填充方式*/2.2HTML5新元素2.2.2 HTML5新元素简介创建一个红色矩形02图2-6绘制红色矩形图2-6 绘制红色矩形2.2HTML5新元素2.2.2 HTML5新元素简介03在canvas中画线，我们经常使用moveTo（x,y）方法定义线条开始坐标，使用lineTo（x,y）方法定义线条结束坐标，绘制线条可以用stroke（）方法。例如，定义开始坐标（0,0）和结束坐标（200,100），然后使用 strok

10、e（）方法绘制线条，代码如下。创建一条直线var c=document.getElementById（myCanvas）;/*找到 元素*/var ctx=c.getContext（2d）;/*创建 context 对象*/ctx.moveTo（0,0）;/定义线条起始位置 /ctx.lineTo（200,100）;/定义线条结束位置/ctx.stroke（）;/开始绘图 /2.2HTML5新元素2.2.2 HTML5新元素简介03运行情况如图2-7所示。创建一条直线图2-7 绘制直线2.2HTML5新元素2.2.2 HTML5新元素简介创建一个简单的圆形04例如，使用arc（）方法绘制一个圆

11、，代码如下。var c=document.getElementById（myCanvas）;/找到 元素 /var ctx=c.getContext（2d）;/创建 context 对象 /ctx.beginPath（）;/开启绘画状态 /ctx.arc（95,50,40,0,2 Math.PI）;/定义圆心坐标、半径、起始角等 /ctx.stroke（）;/开始绘图/2.2HTML5新元素2.2.2 HTML5新元素简介创建一个简单的圆形04运行情况如图2-8所示。图2-8 绘制圆形2.2HTML5新元素2.2.3 多媒体元素1.浏览器的支持第一款互联网浏览器只支持文本，而且即使是对文本的支

12、持也仅限于单一字体和单一颜色。随后诞生了支持多种颜色、字体和文本样式的浏览器，图片支持功能也被加入。不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些元素则需要额外的插件。2.2HTML5新元素2.2.3 多媒体元素2.多媒体格式 1）常见的视频文件格式常见的视频文件格式见表2-4。表2-4 常见的视频文件格式2.2HTML5新元素2.2.3 多媒体元素2.多媒体格式 2）常见的声音文件格式常见的声音文件格式见表2-5。表2-5 常见的声音文件格式2.2HTML5新元素2.2.4 表单元素元素1.规定form或input域应该拥有自动完成功能。当用户在自

13、动完成域中开始输入时，浏览器应该在该域中显示填写的选项，使用元素的列表属性与元素绑定。2.2HTML5新元素2.2.4 表单元素元素1.【例2-1】元素使用预定义值。2.2HTML5新元素2.2.4 表单元素元素1.【例2-1】运行页面文件，结果如图2-9所示。图2-9 使用元素创建表单2.2HTML5新元素2.2.4 表单元素元素2.元素的作用是提供一种验证用户的可靠方法，规定用于表单的密钥对生成器字段，当提交表单时，会生成两个键:一个是私钥，另一个是公钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。2.2HTML5新元素2.2.4 表单元素元素2.例如，带有

14、keygen字段的表单如下。用户名:加密:2.2HTML5新元素2.2.4 表单元素元素2.IE 11不支持标签，将页面文件在Chrome浏览器中运行，结果如图2-10所示。图2-10 使用元素创建表单2.2HTML5新元素2.2.4 表单元素元素3.元素用于不同类型元素的输出，如计算或脚本输出，代码如下。0 100 +=2.2HTML5新元素2.2.4 表单元素元素3.IE 11同样不支持元素，将页面文件在Chrome浏览器中运行，结果如图2-11所示。图2-11 使用元素创建表单2.2HTML5新元素2.2.5 语义和结构元素目前，大多数页面还都是使用来定义页面结构的，如苹果公司官网（美国

15、）主页的代码和页面如图2-12和图2-13所示。图2-12 苹果公司官网（美国）主页的代码提示：点击链接预览https:/2.2HTML5新元素2.2.5 语义和结构元素图2-13 苹果公司（美国）官网主页页面2.2HTML5新元素2.2.5 语义和结构元素1.元素【例2-2】实例。HTML5HTML5是HTML最新的修订版本，谈起HTML就必须了解什么是HTML。HTML（Hyper Text Markup Language）是超文本标记语言2.2HTML5新元素2.2.5 语义和结构元素1.元素【例2-2】安比热带风暴安比（英文：tropical storm Ampil，国际编号：1810

16、），为2018年太平洋台风季中第10个被命名的风暴，“安比”一名由柬埔寨提供，是首次使用，名字意义为一种原产于东部非洲的酸豆树。2.2HTML5新元素2.2.5 语义和结构元素1.元素【例2-2】运行结果如图2-14所示。图2-14 section元素实例2.2HTML5新元素2.2.5 语义和结构元素2.元素标签定义独立的内容，其定义的内容本身必须是有意义的且必须独立于文档的其余部分。3.元素标签定义文档或者文档的一部分区域的页眉。元素应该作为介绍内容或者导航链接栏的容器。在一个文档中可以定义多个 元素。2.2HTML5新元素2.2.5 语义和结构元素【例2-3】元素和元素实例。Intern

17、et Explorer 11 Windows Internet Explorer 11（缩写为 IE 11）2.2HTML5新元素2.2.5 语义和结构元素【例2-3】运行结果如图2-15所示。图2-15 、元素实例运行结果2.2HTML5新元素2.2.5 语义和结构元素4.元素标签定义导航链接的部分。元素用于定义页面的导航链接部分区域。说明：不是所有的链接都需要包含在元素中2.2HTML5新元素2.2.5 语义和结构元素【例2-4】元素实例 计算机网络技术|软件技术|电子商务技术|船舶通信与导航|2.2HTML5新元素2.2.5 语义和结构元素【例2-4】页面导航链接如图2-16所示，页面导

18、航链接运行结果如图2-17所示。图2-16 页面导航链接2.2HTML5新元素2.2.5 语义和结构元素【例2-4】图2-17 页面导航链接运行结果2.2HTML5新元素2.2.6 已被移除的元素以下HTML 4.01中的元素在HTML5中已经被移除。（1）。（2）。（3）。（4）。（5）。（6）。（7）。（8）。（9）。（10）。（11）。2.3案例【案例描述】学习完模块2的内容，小张同学希望做一个网页，在网页中有一个链接标签，单击该超链接可以跳转到百度网站首页。2.3案例【源代码展示】我的超链接 百度首页 2.3案例【运行结果】运行结果如图2-18和图2-19所示。图2-18 模块2案例运

19、行结果1图2-19 模块2案例运行结果22.3案例【分析】小张同学根据本模块所学的知识完成了页面的设计，单击超链接，成功跳转到百度网站首页。在设计中，小张运用了标签定义了超链接，并成功跳转到百度首页。【思考】学完本章，总结下HTML5的优势和特点吧！2.4思考与练习一、填空题1.HTML文档主要由HTML标签、动画、超链接等组成。2.一个完整的HTML文档至少由文档声明、和四部分组成。二、选择题1.在HTML中，（）标记不可出现在和标记符之间。A.B.C.D.2.4思考与练习2.以下字号最大的标题是（）。A.B.C.D.3.下列哪种文件不是视频文件？（）A.jpg文件 B.avi文件C.mov文件 D.mpg文件4.设置网页名称的标签是（）。A.title和/title B.head和/headC.titles和/titles D.name和/name 2.4思考与练习5.HTML文档结构由（）组成。A.、B.、C.、D.6.下列哪个标签不是文档标签？（）A.B.C.D.2.4思考与练习7.HTML不包括（）标签。A.文档 B.图形C.Java D.框架8.HTML文件的标题显示在浏览器的（）。A.菜单栏 B.标题栏C.地址栏 D.状态栏9.设置网页标题时，在HTML源代码中需要使用（）标记。A.B.C.D.THANKS