HTML5网页设计高职PPT完整全套教学课件_第1页
HTML5网页设计高职PPT完整全套教学课件_第2页
HTML5网页设计高职PPT完整全套教学课件_第3页
HTML5网页设计高职PPT完整全套教学课件_第4页
HTML5网页设计高职PPT完整全套教学课件_第5页
已阅读5页，还剩498页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5网页设计全套PPT课件content模块一使用HTML5编写第一个网页模块二从HTML到HTML5的过渡模块三创建普通文档模块四创建多媒体文档模块五创建超链接content模块六创建表格模块七创建表单模块八绘制图形模块九CSS3入门与基础模块十CSS3高级应用模块一使用HTML5编写第一个网页1.1HTML5简介HTML（hypertextmarkuplanguage）是超文本标记语言，不同于C语言、Java或C#等编程语言，它是一种标记语言（markuplanguage），标记语言由一套标记标签（如<html></html>、<head></head>、<title></title>、<body></body>等）组成，HTML就是使用这些标记标签来描述网页的。HTML5是HTML最新的修订版本。设计HTML5的目的是在移动设备上支持多媒体。1.1HTML5简介1.1.1HTML5的概念HTML5是新一代HTML标准。HTML5的上一个版本HTML4.01诞生于1999年。在那以后，Web世界经历了巨变。目前，HTML5仍处于完善之中，然而大部分现代浏览器已经支持HTML5标准。1.1HTML5简介1.1.2HTML5的发展HTML5的前身名为Web应用程序，由WHATWG于2004年提出，W3C于2007年接受，并成立了一个新的HTML工作组。第一个正式的HTML5草案于2008年1月22日发布。目前，大多数浏览器都有一些面向HTML5的支持。2012年12月17日，W3C发布HTML5规范的正式草案，该草案凝聚了大量网络工作者的心血。根据W3C的声明，HTML5是开放网络平台的基石。2014年10月29日，W3C宣布，经过近8年的努力，HTML5标准终于完成并发布。HTML5也有望成为开放Web平台（openWebplatform）的基石。1.1HTML5简介1.1.3HTML5的改进1.视频对多媒体的支持可以说是HTML5的一大亮点，用户再也不用借助第三方的插件（如Flash插件），省去了中间繁杂的配置环节，最主要的是运行环境的变化带来了性能上的提升和资源上的节约。video元素允许包含多个source元素，source元素可以链接多个不同的视频文件，浏览器会使用第一个可以识别的文件。2.音频对多媒体支持的第二个关键元素则是对音频的支持，使用audio标签。其与video的使用方法相似，支持的音频文件格式主要包括wav、mp3、ogg，避免了对Flash等外部插件的依赖。1.1HTML5简介1.1.3HTML5的改进3.画布我们可以在Windows自带的画图软件中自由地画图，而其中的画布就与此处的画布（canvas）有相似之处。HTML5中的canvas使用JavaScript在网页上绘制图形，画布是一个矩形区域，可以控制上面每一个像素的属性。canvas拥有多种绘制图形、路径、矩阵和添加图形的方法。4.HTML5的Web存储HTML5提供了两种在客户端存储数据的方式：localStorage和sessionStorage。在HTML4中，客户端数据的存储主要依靠cookie来实现，但cookie的缺点是不适合大数据的存储，因为它们的传递依赖于对服务器的请求，这使得cookie的速度慢且效率低下。1.1HTML5简介1.1.3HTML5的改进5.新的input类型HTML5提供了新的input类型，这些新的类型可以让其对用户输入数据的验证变得更加简单方便，主要有以下几种类型：email、url、number、range、datepickers、search、color。6.新的表单类型HTML5添加了新的表单类型，主要有以下几种。（1）datalist。（2）keygen。（3）output。1.1HTML5简介1.1.3HTML5的改进7.新增加的表单属性新增加的表单属性包括新的form表单和input表单的属性，为提升网站整体性能提供了更好的表现。8.新增加的语义元素HTML5添加了<article>、<aside>等很多语义元素。说明：HTML5的设计是以效率优先为原则，要求样式和内容分离，因此在HTML5的实际开发中，必须使用CSS来定义样式。1.1HTML5简介HTML具有以下特征：1.跨平台2.兼容性3.各大浏览器厂商支持1.1HTML5简介1.1.4HTML5的应用（1）HTML5是HTML、CSS和JavaScript的组合，强化了Web网页的表现技能。HTML5的网页应用如图1-1所示。图1-1HTML5的网页应用提示：点击链接预览/iphone/1.1HTML5简介1.1.4HTML5的应用（2）HTML5可以实现更具结构化、语义化的Web文档，方便搜索引擎索引站点。（3）作为下一代的网页语言，HTML5拥有很多让人期待的新特性。HTML5能够在移动设备上未安装任何插件的情况下播放多媒体影音。提示：点击链接预览https:///airpods/1.1HTML5简介1.1.4HTML5的应用（4）HTML5是Web标准的集合，不仅能够操作前端所见所得，还能操作后台输送到前台的数据，实现离线存储功能。图1-3HTML5实现手机App功能（5）HTML5可以实现WebApp及智能手机App应用，如轻应用、微网站、手机网页等，如图1-3和图1-4所示。图1-4HTML5实现手机网页功能1.1HTML5简介1.1.4HTML5的应用（6）HTML5提供了基于JavaScript的2D绘图功能和基于WebGL的3D绘图功能，操作网页游戏无须任何插件，如图1-5所示。图1-5HTML5实现网页游戏功能（7）HTML5可以提供更多的CSS属性，可以做出更加丰富的渲染效果。1.1HTML5简介1.1.4HTML5的应用（8）HTML5能快速地构建框架，使实现一些功能更加简便，节省开发时间，如图1-6所示。图1-6用HTML5实现购物网站的搭建（9）HTML5图表方案可以更加直观地在网站中用可视化的方式显现大量的数据及信息。提示：点击链接预览/a/h/7529.html1.2实现你的第一个HTML5页面1.2.1准备上机环境DreamweaverCC2017本书采用DreamweaverCC2017版本软件，双击文件夹中的安装程序（setup）进行安装，安装过程中需要登录（没有Adobe账户的用户需要先行注册），登录后安装程序会自动运行。接受软件的许可协议后，会进入软件的第一次使用界面，设置软件的工作区和主题后，即可进入软件主界面，如图1-7～图1-10所示。1.2实现你的第一个HTML5页面1.2.1准备上机环境DreamweaverCC2017图1-7登录界面图1-8安装过程提示提示：点击链接了解Dreamweaver/cn/products/dreamweaver.html#1.2实现你的第一个HTML5页面1.2.1准备上机环境DreamweaverCC2017图1-9软件许可协议界面1.2实现你的第一个HTML5页面1.2.1准备上机环境DreamweaverCC2017图1-10软件的初始化设置1.2实现你的第一个HTML5页面1.2.2支持HTML5的浏览器支持HTML5的浏览器有Firefox、IE10和IE10以上版本，Chrome（谷歌浏览器）、Opera、Safari等；MaxthonBrowser（傲游）、360浏览器、QQ浏览器、搜狗浏览器、猎豹浏览器等国产浏览器也有支持HTML5的能力。本书采用的浏览器版本为IE11。下面以加入画布标记为例检测浏览器的支持情况。在HTML页面中插入一段HTML5画布标记，当浏览器支持时，则会出现一个矩形，否则将会在页面中显示“您的浏览器不支持HTML5画布”。想一想：你还接触过哪些浏览器？1.2实现你的第一个HTML5页面1.2.2支持HTML5的浏览器其代码如下。<!doctypehtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>浏览器测试</title><styletype="text/css">#myCanvas{background:blue;width:100px;height:100px;}</style></head><body><canvasid="myCanvas">您的浏览器不支持HTML5画布</canvas></body></html>1.2实现你的第一个HTML5页面1.2.2支持HTML5的浏览器在DreamweaverCC2017中运行后，生成HTML文件，在IE8中执行页面文件，由于IE8不支持HTML5的画布标记，因而在浏览器中将显示“您的浏览器不支持HTML5画布”，如图1-11所示；如果在IE11中执行，由于IE11支持HTML5的画布标记，所以在浏览器中将显示一个蓝色的正方形，如图1-12所示。图1-11IE8浏览器测试结果图1-12IE11浏览器测试结果1.2实现你的第一个HTML5页面1.2.3建立站点和编写第一个网页建立站点01（1）在计算机中新建一个文件夹。例如，在D盘建立一个名为“测试”的文件夹，如图1-13所示，将所有相关网页文件和文件夹都存储在该新建的文件夹中。图1-13新建的“测试”文件夹1.2实现你的第一个HTML5页面1.2.3建立站点和编写第一个网页建立站点01（2）启动Dreamweaver，选择“站点”→“新建站点”菜单命令,在弹出的对话框的“站点名称”文本框中输入站点名称为“测试”，设置“本地站点文件夹”为在D盘中新建的“测试”文件夹，如图1-14所示。图1-14新建站点1.2实现你的第一个HTML5页面1.2.3建立站点和编写第一个网页编写第一个网页02图1-15新建HTML文档（1）启动Dreamweaver，选择“文件”→“新建”菜单命令，弹出“新建文档”对话框（默认选中HTML文档类型），在“标题”文本框中输入“我的第一个网页”，在“文档类型”下拉列表框中选择HTML5，如图1-15所示。1.2实现你的第一个HTML5页面1.2.3建立站点和编写第一个网页编写第一个网页02图1-16新建的HTML文档界面（2）在新建的文档中选择“拆分”模式（默认），主页面被分成上下两部分，上半部分为页面预览，下半部分为代码部分，如图1-16所示。1.2实现你的第一个HTML5页面1.2.3建立站点和编写第一个网页编写第一个网页02（3）新建文档中有默认的代码，共10行，在<body></body>之间插入代码，在代码中添加文字，如图1-17所示。<h1>我的第一个网页</h1><p>我的第一个段落</p>图1-17在代码中添加文字1.2实现你的第一个HTML5页面1.2.3建立站点和编写第一个网页编写第一个网页02（4）保存页面。选择“文件”→“保存”菜单命令，在弹出的“另存为”对话框中选择将编辑好的文件存储到D盘“测试”文件夹中，并更改文件名为“我的第一个网页”，如图1-18所示。图1-18保存页面1.2实现你的第一个HTML5页面1.2.3建立站点和编写第一个网页编写第一个网页02（5）预览页面。打开D盘“测试”文件夹，用IE11打开“我的第一个网页.html”文件，效果如图1-19所示。图1-19用IE11预览页面的效果1.3案例【案例描述】学习完本模块的内容，小张同学已经迫不及待地想做一个网页，以展示自己的学习成果。小张同学希望做一个能显示“让我们一起开始HTML5语言的旅程吧！”的网页。1.3案例【源代码展示】<!doctypehtml<html><head><metacharset="utf-8"><title>制作的第一个HTML5文件</title></head><body>让我们一起开始HTML5语言的旅程吧！</body></html>1.3案例【运行结果】运行结果如图1-20所示。图1-20模块1案例运行结果【分析】小张同学结合本模块所学的知识完成了网页的设计。在设计中，小张同学运用<title></title>标签定义了页面标题，使用<body></body>标签定义了页面内容。1.4思考与练习一、填空题1.HTML5给人们带来了很多人性化和方便的改变，包括新的解析顺序、

、

、新的input属性等。2.HTML5设计的目的是在

支持多媒体。二、选择题1.网页的基本语言是（）。A.JavaScriptB.VBScriptC.HTMLD.XML2.借助网页中所谓的（），通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其他文件，获得相应的信息。A.超链接B.热区

C.图片

D.多媒体1.4思考与练习3.网页的扩展名是（）。A..htmlB..docC..batD..ppt4.HTML指的是（）。A.超文本标记语言（hypertextmarkuplanguage）B.家庭工具标记语言（hometoolmarkuplanguage）C.超链接和文本标记语言（hyperlinksandtextmarkuplanguage）D.以上都不正确三、判断题1.HTML5标记符的属性一般不区分大小写。（）2.HTML5能快速地构建框架，更加简便地实现一些功能，节省开发时间。（）THANKS模块二从HTML到HTML5的过渡2.1HTML简介HTML是目前网络上应用广泛的一种语言，也是构成网页文档的主要语言。用HTML编写的超文本文档称为HTML文档，HTML文档主要包括由HTML标签组成的文本、图形、声音、动画、超链接等。HTML的普遍应用就是超文本的技术，即通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机中的文件链接。2.1HTML简介2.1.1HTML网页结构ABCD（1）文档声明:<!doctypehtml>。（3）head标签对:<head></head>。（2）html标签对:<html></html>。（4）body标签对:<body></body>。一个完整的HTML文档至少由以下四部分组成。2.1HTML简介2.1.2HTML实例解析HTML文档代码1.<!doctypehtml><html><head><metacharset="utf-8"><title>我的第一个页面</title></head><body> <p>我的第一个段落</p></body></html>运行结果如图2-1所示。图2-1HTML文档实例运行结果2.1HTML简介2.1.2HTML实例解析HTML文档解析2.1）<p>元素<p>我的第一个段落</p>说明：<p>元素定义了HTML文档中的一个段落。该元素拥有一个开始标签<p>和一个结束标签</p>。元素内容是:我的第一个段落。2.1HTML简介2.1.2HTML实例解析HTML文档解析2.2）<body>元素<body>元素定义了HTML文档的主体。该元素拥有一个开始标签<body>和一个结束标签</body>。元素内容是另一个HTML元素（p元素）。<body><p>我的第一个段落</p></body>2.1HTML简介2.1.2HTML实例解析HTML文档解析2.3）<title>元素<title>我的第一个页面</title><title>元素定义了页面的标题，该元素拥有一个开始标签<title>和一个结束标签</title>。元素内容是:我的第一个页面。4）<head>元素<head><metacharset="utf-8"><title>我的第一个页面</title></head><head>元素定义了HTML文档信息。该元素拥有一个开始标签<head>和一个结束标签</head>。元素内容是另一个HTML元素（title元素）。2.1HTML简介2.1.2HTML实例解析HTML文档解析2.5）<html>元素提示：<html>元素定义了整个HTML文档。该元素拥有一个开始标签<html>和一个结束标签</html>。元素内容是另外的HTML元素（head元素和body元素）。<html><head><metacharset="utf-8"><title>我的第一个页面</title></head><body><p>我的第一个段落</p></body></html>2.1HTML简介2.1.3HTML标签与元素1.HTML实例<!doctypehtml><html><head><metacharset="utf-8"><title>我的第一个网页</title></head><body><h1>我的第一个网页</h1></body></html>2.1HTML简介2.1.3HTML标签与元素2.HTML实例解释<h1>元素1）<h1>我的第一个网页</h1><h1>元素定义了HTML标题。该元素拥有一个开始标签<h1>和一个结束标签</h1>。元素内容是：我的第一个网页。<body>元素2）<body><h1>我的第一个网页</h1></body><body>元素定义了HTML文档的主体。该元素拥有一个开始标签<body>和一个结束标签</body>。元素内容是另一个HTML元素（h1元素）。2.1HTML简介2.1.3HTML标签与元素2.HTML实例解释<title>元素3）<title>我的第一个网页</title><title>元素定义了HTML页面的标题。该元素拥有一个开始标签<title>和一个结束标签</title>。元素内容是：我的第一个网页。<head>元素4）<head><metacharset="utf-8"><title>我的第一个网页</title></head><head>元素定义了关于文档的信息。该元素拥有一个开始标签<head>和一个结束标签</head>。2.1HTML简介2.1.3HTML标签与元素2.HTML实例解释<html>元素5）<html><head><metacharset="utf-8"><title>我的第一个网页</title></head><body><h1>我的第一个网页</h1></body></html>提示：<html>元素定义了整个HTML文档。该元素拥有一个开始标签<html>和一个结束标签</html>。2.1HTML简介2.1.4HTML浏览器的中文编码先看下面一个例子,代码如下。<!doctypehtml><html><body><p>汉字显示正常</p></body></html>其在DreamweaverCC中运行的结果如图2-2所示，在预览的过程中，中文编码变成了乱码。图2-2

中文编码运行异常2.1HTML简介2.1.4HTML浏览器的中文编码如果希望中文编码能正常显示，需要在HTML文件头部的“content-type”中设置“charset”，告诉浏览器打开该文件的编码方式。其代码如下。<html><metacharset="utf-8"/><head>HTML浏览器支持的中文编码有两种方式：一种是“charset=utf-8”,另一种是“charset=gbk”。运行情况如图2-3所示。图2-3

中文编码运行正常2.1HTML简介2.1.4HTML浏览器的中文编码页面源文件不是乱码，但是在浏览器中显示乱码，可以通过修改浏览器的编码方式看到正确的中文显示。HTML文档中设定的中文编码格式为utf-8（<metacharset="utf-8">），在浏览器中也要选择“Unicode（UTF-8）”编码；如果HTML文档中设定的中文编码格式为“charset=gbk”，在浏览器中要选择“简体中文（GB2312）”编码。浏览器编码设置如图2-4所示。图2-4

浏览器编码设置2.2HTML5新元素01<canvas>标签<canvas>标签用于定义图形。该标签基于JavaScript的绘图API。02新的媒介元素表2-1新的媒介元素2.2.1HTML5新元素简介2.2HTML5新元素03新的表单元素表2-2新的表单元素04新的语义/结构元素表2-3新的语义/结构元素2.2HTML5新元素04新的语义/结构元素表2-3新的语义/结构元素(续表）说明：HTML5新增的结构元素都是块元素，独占一行，使用时要注意。2.2HTML5新元素2.2.2HTML5新元素简介01<canvas>简单实例如下。<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#000000;"></canvas>创建一个矩形2.2HTML5新元素2.2.2HTML5新元素简介01<canvas>标签通常需要指定一个id属性,width和height属性定义画布的大小，style属性定义线条宽度和线条颜色。在HTML页面中允许使用多个<canvas>元素。运行情况如图2-5所示。创建一个矩形图2-5绘制矩形2.2HTML5新元素2.2.2HTML5新元素简介<canvas>元素本身是没有绘图能力的，所有的绘图工作必须在JavaScript内部完成。例如，要创建一个红色的矩形，代码如下。创建一个红色矩形02varc=document.getElementById（"myCanvas"）;/找到<canvas>元素/varctx=c.getContext（"2d"）;/创建context对象/ctx.fillStyle="#FF0000";/定义线条颜色/ctx.fillRect（0,0,150,75）;/*定义矩形当前的填充方式*/2.2HTML5新元素2.2.2HTML5新元素简介创建一个红色矩形02图2-6绘制红色矩形图2-6绘制红色矩形2.2HTML5新元素2.2.2HTML5新元素简介03在canvas中画线，我们经常使用moveTo（x,y）方法定义线条开始坐标，使用lineTo（x,y）方法定义线条结束坐标，绘制线条可以用stroke（）方法。例如，定义开始坐标（0,0）和结束坐标（200,100），然后使用stroke（）方法绘制线条，代码如下。创建一条直线varc=document.getElementById（"myCanvas"）;/*找到<canvas>元素*/varctx=c.getContext（"2d"）;/*创建context对象*/ctx.moveTo（0,0）;/定义线条起始位置/ctx.lineTo（200,100）;/定义线条结束位置/ctx.stroke（）;/开始绘图/2.2HTML5新元素2.2.2HTML5新元素简介03运行情况如图2-7所示。创建一条直线图2-7绘制直线2.2HTML5新元素2.2.2HTML5新元素简介创建一个简单的圆形04例如，使用arc（）方法绘制一个圆，代码如下。varc=document.getElementById（"myCanvas"）;/找到<canvas>元素/varctx=c.getContext（"2d"）;/创建context对象/ctx.beginPath（）;/开启绘画状态/ctx.arc（95,50,40,0,2Math.PI）;/定义圆心坐标、半径、起始角等/ctx.stroke（）;/开始绘图/2.2HTML5新元素2.2.2HTML5新元素简介创建一个简单的圆形04运行情况如图2-8所示。图2-8绘制圆形2.2HTML5新元素2.2.3多媒体元素1.浏览器的支持第一款互联网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持多种颜色、字体和文本样式的浏览器，图片支持功能也被加入。不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些元素则需要额外的插件。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表单元素<datalist>元素1.<datalist>规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项，使用<input>元素的列表属性与<datalist>元素绑定。2.2HTML5新元素2.2.4表单元素<datalist>元素1.【例2-1】<input>元素使用<datalist>预定义值。<!doctypehtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/></head><body><formaction="demo-form.php"method="get"><inputlist="browsers"name="browser"><datalistid="browsers"><optionvalue="InternetExplorer"></datalist><inputtype="submit"></form></body></html>2.2HTML5新元素2.2.4表单元素<datalist>元素1.【例2-1】运行页面文件，结果如图2-9所示。图2-9使用<datalist>元素创建表单2.2HTML5新元素2.2.4表单元素<keygen>元素2.<keygen>元素的作用是提供一种验证用户的可靠方法，规定用于表单的密钥对生成器字段，当提交表单时，会生成两个键:一个是私钥，另一个是公钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。2.2HTML5新元素2.2.4表单元素<keygen>元素2.例如，带有keygen字段的表单如下。<!doctypehtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/></head><body><formaction="demo_keygen.php"method="get">用户名:<inputtype="text"name="usr_name">加密:<keygenname="security"><inputtype="submit"></form></body></html>2.2HTML5新元素2.2.4表单元素<keygen>元素2.IE11不支持<keygen>标签，将页面文件在Chrome浏览器中运行，结果如图2-10所示。图2-10使用<keygen>元素创建表单2.2HTML5新元素2.2.4表单元素<output>元素3.<output>元素用于不同类型元素的输出，如计算或脚本输出，代码如下。<!doctypehtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/></head><body><formoninput="x.value=parseInt（a.value）+parseInt（b.value）">0<inputtype="range"id="a"value="50">100+<inputtype="number"id="b"value="50">=<outputname="x"for="ab"></output></form></body></html>2.2HTML5新元素2.2.4表单元素<output>元素3.IE11同样不支持<output>元素，将页面文件在Chrome浏览器中运行，结果如图2-11所示。图2-11使用<output>元素创建表单2.2HTML5新元素2.2.5语义和结构元素目前，大多数页面还都是使用<div>来定义页面结构的，如苹果公司官网（美国）主页的代码和页面如图2-12和图2-13所示。图2-12苹果公司官网（美国）主页的代码提示：点击链接预览https://2.2HTML5新元素2.2.5语义和结构元素图2-13苹果公司（美国）官网主页页面2.2HTML5新元素2.2.5语义和结构元素1.<section>元素【例2-2】<section>实例。<!doctypehtml><html><metacharset="utf-8"><body><section><h1>HTML5</h1><p>HTML5是HTML最新的修订版本，谈起HTML就必须了解什么是HTML。HTML（HyperTextMarkupLanguage）是超文本标记语言</p></section><section>2.2HTML5新元素2.2.5语义和结构元素1.<section>元素【例2-2】<h1>安比</h1><p>热带风暴安比（英文：tropicalstormAmpil，国际编号：1810），为2018年太平洋台风季中第10个被命名的风暴，“安比”一名由柬埔寨提供，是首次使用，名字意义为一种原产于东部非洲的酸豆树。</p></section></body>2.2HTML5新元素2.2.5语义和结构元素1.<section>元素【例2-2】运行结果如图2-14所示。图2-14section元素实例2.2HTML5新元素2.2.5语义和结构元素2.<article>元素<article>标签定义独立的内容，其定义的内容本身必须是有意义的且必须独立于文档的其余部分。3.<header>元素<header>标签定义文档或者文档的一部分区域的页眉。<header>元素应该作为介绍内容或者导航链接栏的容器。在一个文档中可以定义多个<header>元素。2.2HTML5新元素2.2.5语义和结构元素【例2-3】<article>元素和<header>元素实例。<!doctypehtml><html><metacharset="utf-8"><body><article><header><h1>InternetExplorer11</h1></header><p>WindowsInternetExplorer11（缩写为IE11）</p></article></body></html>2.2HTML5新元素2.2.5语义和结构元素【例2-3】运行结果如图2-15所示。图2-15<article>、<header>元素实例运行结果2.2HTML5新元素2.2.5语义和结构元素4.<nav>元素<nav>标签定义导航链接的部分。<nav>元素用于定义页面的导航链接部分区域。说明：不是所有的链接都需要包含在<nav>元素中2.2HTML5新元素2.2.5语义和结构元素【例2-4】<nav>元素实例<!doctypehtml><html><metacharset="utf-8"><body><nav><ahref="/info/1005/1019.htm">计算机网络技术</a>|<ahref="/info/1005/1018.htm">软件技术</a>|<ahref="/info/1005/1849.htm">电子商务技术</a>|<ahref="/info/1005/1393.htm">船舶通信与导航</a>|</nav></body></html>2.2HTML5新元素2.2.5语义和结构元素【例2-4】页面导航链接如图2-16所示，页面导航链接运行结果如图2-17所示。图2-16页面导航链接2.2HTML5新元素2.2.5语义和结构元素【例2-4】图2-17页面导航链接运行结果2.2HTML5新元素2.2.6已被移除的元素以下HTML4.01中的元素在HTML5中已经被移除。（1）<applet>。（2）<basefont>。（3）<big>。（4）<center>。（5）<dir>。（6）<font>。（7）<frame>。（8）<frameset>。（9）<noframes>。（10）<strike>。（11）<tt>。2.3案例【案例描述】学习完模块2的内容，小张同学希望做一个网页，在网页中有一个链接标签，单击该超链接可以跳转到百度网站首页。2.3案例【源代码展示】<!doctypehtml><html><head><metacharset="utf-8"><title>我的超链接</title></head><body><ahref="www.baidu.com">百度首页</a></body></html>2.3案例【运行结果】运行结果如图2-18和图2-19所示。图2-18模块2案例运行结果1图2-19模块2案例运行结果22.3案例【分析】小张同学根据本模块所学的知识完成了页面的设计，单击超链接，成功跳转到百度网站首页。在设计中，小张运用了<a>标签定义了超链接，并成功跳转到百度首页。【思考】学完本章，总结下HTML5的优势和特点吧！2.4思考与练习一、填空题1.HTML文档主要由HTML标签、

、

、

、动画、超链接等组成。2.一个完整的HTML文档至少由文档声明、

、

、

和四部分组成。二、选择题1.在HTML中，（）标记不可出现在<body>和</body>标记符之间。A.<hr>B.<br>C.<title>D.<!--…-->2.4思考与练习2.以下字号最大的标题是（）。A.<h7>B.<h6>C.<h2>D.<h1>3.下列哪种文件不是视频文件？（）A..jpg文件B..avi文件C..mov文件D..mpg文件4.设置网页名称的标签是（）。A.＜title＞和＜/title＞B.＜head＞和＜/head＞C.＜titles＞和＜/titles＞D.＜name＞和＜/name＞2.4思考与练习5.HTML文档结构由（）组成。A.<html>……</html>、<title>……</title>、<body>……</body>B.<body>、</body><h1></h1><html>、</html>C.<html>……</html>、<head>……</head>、<body>……</body>D.<head>……</head><meta>……</meta><title>……</title>6.下列哪个标签不是文档标签？（）A.<html>B.<body>C.<title>D.<td>2.4思考与练习7.HTML不包括（）标签。A.文档B.图形C.JavaD.框架8.HTML文件的标题显示在浏览器的（）。A.菜单栏B.标题栏C.地址栏D.状态栏9.设置网页标题时，在HTML源代码中需要使用（）标记。A.<head></head>B.<title></title>C.<body></body>D.<table></table>THANKS模块三创建普通文档3.1HTML5文档的基本结构一个HTML文件是由一系列元素和标签组成的。元素是HTML文件的重要组成部分，如title（HTML文件标题）、img（图像）、table（表格）等。元素名不区分大小写。HTML用标签来规定元素的属性和其在文件中的位置。首标签的格式为<元素名称>，尾标签的格式为</元素名称>。其完整的语法如下。<元素名称>被控制的元素</元素名称>说明：HTML的标签一般成对出现，但也会单独出现。3.1HTML5文档的基本结构在每个HTML标签中，还可以设置一些属性，控制HTML的元素，这些属性位于所建立元素的首标签内，其基本语法如下。<元素名称属性1="值1"属性2="值2"……>内容</元素名称>需要说明的是，HTML是对大小写不敏感的语言，也就是同一字母的大写和小写字符被认定为同一个字符。因此在每一个<html>标签内，大写、小写、混写均可；但如果嵌入其他语言，则需要按照其他语言的规范来判断是否区分大小写字符。提示：统一大小写规范是一个优秀的程序编写人员必备的素质，建议大家按照统一的规范编写，本书中范例的标签均采用小写。3.2HTML5基本标记3.2.1文档类型标记<!doctype><!doctype>是文档类型标记，声明必须位于HTML5文档中的第一行，也就是位于<html>标记之前。该标记告知浏览器文档所使用的HTML规范。<!doctype>声明不属于HTML标记，它是一种指令，告知浏览器编写页面所用的标记版本，写法如下。<!doctypehtml>3.2HTML5基本标记3.2.2HTML文档标记<html>在任何一个HTML文件中，最先出现的HTML标签就是<html>，它用于表示该文件是以超文本标记语言编写的。<html>是成对出现的，首标签<html>和尾标签</html>分别位于文件的最前面和最后面，文件中所有内容和HTML标签都要包含其中。写法如下。<html>文件内容</html>3.2HTML5基本标记3.2.3头部标记<head>头部标记见表3-1。表3-1头部标记说明：<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。3.2HTML5基本标记3.2.4标题标记<title>每个HTML文件都需要有一个文件名称。在浏览器中，文件名称作为窗口名称显示在该窗口的上方。HTML文件标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，用来规定母标签范围的属性或其中某一部分内容，嵌套在<head>标签中的主要是<title>标签。3.2HTML5基本标记3.2.4标题标记<title>【例3-1】标题标记的应用。<!doctypehtml><html><head><metacharset="utf-8"><title>标题样例</title></head><body></body></html>在浏览器中运行上面的代码，得到图3-1所示的结果。图3-1标题样例的显示结果3.2HTML5基本标记3.2.5主体标记<body>网页所要显示的内容都被放在网页的主体标记内，是HTML文件的重点。主体标记以<body>开始，以</body>结束，语法如下。<body>……</body>3.2HTML5基本标记3.2.6换行标记<br>【例3-2】换行标记的应用。<!doctypehtml><html><head><metacharset="utf-8"><title>换行样例</title></head><body>HTML（HypertextMarkupLanguage，超文本标记语言）诞生于20世纪90年代初，用于指定构建网页的元素，这些元素中的大多数都用于描述网页内容，如标题、段落、列表、指向其他网页的链接等。<br>HTML5是HTML的最新版本，它的大部分内容都可以兼容新旧浏览器，并新增了大量新的功能。HTML5还引入了原生的音频和视频播放功能。<br></body></html>3.2HTML5基本标记3.2.6换行标记<br>【例3-2】在浏览器中运行上面的代码，得到图3-2所示的结果。图3-2换行标记的效果3.2HTML5基本标记3.2.7水平线标记<hr>添加水平线01语法如下。<hr>在网页中输入一个<hr>标记，就添加了一条默认样式的水平线。3.2HTML5基本标记3.2.7水平线标记<hr>【例3-3】添加水平线。<!doctypehtml><html><head><metacharset="utf-8"><title>添加一条水平线</title></head><body><hr></body></html>在浏览器中运行上面的代码，得到图3-3所示的效果。图3-3添加水平线的效果3.2HTML5基本标记3.2.7水平线标记<hr>设置水平线的宽度和高度属性02在默认情况下，在网页中插入的水平线的宽度是100%，高度是1。在实际网页中，通过设置width、size的属性参数可以对水平线的宽度和高度进行设置。语法如下。<hrwidth=水平线宽度size=水平线高度>说明：在该语法中，水平线的宽度值可以是确定的像素值，也可以是相对于浏览器窗口宽度的百分比。而水平线的高度值只能是像素值；如果在创建水平线时只设置一个参数，那么另外一个没有设置的参数取默认值。3.2HTML5基本标记3.2.7水平线标记<hr>【例3-4】设置水平线的宽度和高度。<!doctypehtml><html><head><metacharset="utf-8"><title>设置水平线的宽度和高度</title></head><body><hrwidth="50%"><hrwidth=150size=10></body></html>在浏览器中运行代码，可以看到两条宽度和高度不同的水平线效果，如图3-4所示。图3-4设置水平线的宽度和高度效果3.2HTML5基本标记3.2.7水平线标记<hr>设置水平线的颜色03为了使水平线更美观，还可以设置水平线的颜色。语法如下。<hrcolor="颜色代码">说明：颜色代码在HTML里有两种表现形式：一种是6位十六进制数，如#FFB6C1、#FFFFFF等；另一种是英文代码，如pink、red、black等。3.2HTML5基本标记3.2.7水平线标记<hr>【例3-5】设置水平线的颜色。在浏览器中运行上面的代码，得到图3-5所示的效果。图3-5设置水平线颜色的效果<!doctypehtml><html><head><metacharset="utf-8"><title>设置水平线的颜色</title></head><body><hrwidth="50%"color="#f0ff00"><hrwidth=150size=10color="red"></body></html>3.2HTML5基本标记3.2.7水平线标记<hr>设置水平线的对齐方式04水平线在默认情况下是居中对齐的，如果希望水平线左对齐或右对齐，就需要设置align参数。语法如下。<hralign=对齐方式>说明：水平线的对齐方式有三种，包括left、center和right。其中，center的效果与默认效果相同。3.2HTML5基本标记3.2.7水平线标记<hr>【例3-6】设置水平线的对齐方式。在浏览器中运行上面的代码，得到图3-6所示的效果。图3-6设置水平线对齐方式的效果<!doctypehtml><html><head><metacharset="utf-8"><title>设置水平线的对齐方式</title></head><body><hrwidth="50%"color="#f0ff00"aligh="left"><hrwidth=150size=10color="red"align="right"></body></html>3.2HTML5基本标记3.2.8注释标记<!-…->在网页中，除了能够在页面显示出来的元素外，还包含一种不显示在页面中的元素，也就是注释文字。适当的注释可以帮助用户更好地了解网页中各个模块的功能，也有助于以后对代码的修改。语法如下。<!--注释的文字-->例如<---------------><!--文件说明：这是第一个文件--><--------------->查资料：看看还有没有其他注释标记？3.3在网页中添加文本3.3.1文档作者或拥有者联系信息标记<address><address>标签定义文档作者或拥有者的联系信息。如果<address>元素位于<article>元素内部，则它表示该文档作者或拥有者的联系信息。通常的做法是将<address>元素添加到网页的头部或底部。3.3在网页中添加文本3.3.1文档作者或拥有者联系信息标记<address>【例3-7】添加文档作者信息。<!doctypehtml><html><head><metacharset="utf-8"><title>添加文档作者信息</title></head><body><address>Writtenbyhtml教材编写组<br><ahref="mailto:us@example.org">Emailus</a><br>Address:Box564,Disneyland<br>Phone:+12345678</address></body></html>3.3在网页中添加文本3.3.1文档作者或拥有者联系信息标记<address>【例3-7】在浏览器中运行上面的代码，得到图3-7所示的效果。图3-7添加文档作者或拥有者联系信息标记的效果3.3在网页中添加文本3.3.2加粗文本标记<b>在编辑网页时，经常需要对一些特殊文字进行加粗显示，该效果可以通过<b>标签来实现。语法如下。<b>需要加粗的文字</b>3.3在网页中添加文本3.3.2加粗文本标记<b>【例3-8】加粗文本标记的用法。<!doctypehtml><html><head><metacharset="utf-8"><title>加粗标记</title></head><body><b>加粗标记</b></body></html>在浏览器中运行上面的代码，得到图3-8所示的效果。图3-8加粗标记的效果3.3在网页中添加文本3.3.2加粗文本标记<b>【例3-9】文本加粗和斜体标记的用法。<!doctypehtml><html><head><metacharset="utf-8"><title>加粗和斜体标记</title></head><body><b><i>加粗和斜体标记</i></b></body></html>在浏览器中运行上面的代码，得到图3-9所示的效果。图3-9加粗和斜体标记的效果3.3在网页中添加文本3.3.3定义计算机代码文本标记<code><code>标签用于表示计算机源代码或其他机器可以阅读的文本内容。软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code>标签就是为他们设计的。包含在该标签内的文本将以等宽、类似电传打字机样式的字体（courier）显示出来。3.4文本排版标记3.4.1换行标记<br>【例3-10】<!doctypehtml><html><head><metacharset="utf-8"><title>换行样例</title></head><body>HTML（HypertextMarkupLanguage，超文本标记语言）诞生于20世纪90年代初，用于指定构建网页的元素，这些元素中的大多数都用于描述网页内容，如标题、段落、列表、指向其他网页的链接等。<br>HTML5是HTML的最新版本，它的大部分内容都可以兼容新旧浏览器，并新增了大量新的功能。HTML5还引入了原生的音频和视频播放功能。<br></body></html>文本换行标记的用法。3.4文本排版标记3.4.1换行标记<br>【例3-10】上面的代码在浏览器中的显示效果如图3-10所示。图3-10段落文字换行的效果3.4文本排版标记3.4.2段落标记<p>在HTML中，段落通过<p>标记来表示。语法如下。<p>段落文字</p>3.4文本排版标记3.4.2段落标记<p>【例3-11】段落标记的用法。<!doctypehtml><html><head><metacharset="utf-8"><title>段落标记</title></head><body><p>信息是用文字、数字、符号、语言、图像等介质来表示事件、事物、现象等内容、数量或特征，从而向人（或系统）提供关于现实世界新的事实和知识，作为生产、建设、经营、管理、分析和决策的依据。</p></body></html>3.4文本排版标记3.4.2段落标记<p>【例3-11】在浏览器中运行上面的代码，得到图3-11所示的效果。图3-11段落标记的效果3.4文本排版标记3.4.3标题标记<h1>至<h6><h1>至<h6>标签可定义标题。<h1>定义最大的标题，<h6>定义最小的标题。由于h元素拥有确切的语义，应慎重地选择恰当的标签层级来构建文档的结构。因此，不应利用标题标签来改变同一行中的字体大小。相反，应当使用层叠样式表定义来实现漂亮的显示效果。<h1>元素用来描述网页中最上层的标题。3.4文本排版标记3.4.3标题标记<h1>至<h6>【例3-12】标题标记的用法。<!doctypehtml><html><head><metacharset="utf-8"><title>h1-h6</title></head><body><h1>Thisisheading1</h1><h2>Thisisheading2</h2><h3>Thisisheading3</h3><h4>Thisisheading4</h4><h5>Thisisheading5</h5><h6>Thisisheading6</h6></body></html>3.4文本排版标记3.4.3标题标记<h1>至<h6>【例3-12】在浏览器中运行上面的代码，得到图3-12所示的效果。图3-12h1至h6的效果3.5列表3.5.1建立有序列表<ol>有序表类似Word中的自动编号功能，有序列表使用的标记是<ol></ol>，每一个列表项前面使用<li></li>。每个项目都有前后顺序之分，一般用数字表示，其结构如下。<ol><li>有序列表项1</li><li>有序列表项2</li><li>有序列表项3</li><li>有序列表项4</li></ol>3.5列表3.5.1建立有序列表<ol>【例3-13】有序列表的用法。<!doctypehtml><html><head><metacharset="utf-8"><title>有序列表</title></head><body><ol><li>HTML5基本结构</li><li>HTML文档标记</li><li>头部标记HEAD</li><li>标题标记</li><li>主体标记</li><li>无序表</li></ol></body></html>3.5列表3.5.1建立有序列表<ol>【例3-13】上述代码在浏览器中的显示结果如图3-13所示。图3-13有序列表的显示结果3.5列表3.5.1建立有序列表<ol>【例3-13】把上面的代码的<ol>标签改为<oltype="A">，在IE11中预览可以得到图3-14所示的效果。图3-14有序列表的自定义序号结果3.5列表3.5.2建立无序列表<ul>无序列表相当于Word中的项目符号，无序列表的项目排列没有顺序，只以符号作为分项标识。无序列表使用一对标记<ul></ul>，其中每一个列表使用<li></li>，其结构如下。<ul><li>无序列表项</li><li>无序列表项</li><li>无序列表项</li><li>无序列表项</li></ul>3.5列表3.5.2建立无序列表<ul>【例3-14】无序列表的用法。<!doctypehtml><html><head><metacharset="utf-8"><title>无序列表</title></head><body><ul><li>HTML5基本结构</li><li>HTML文档标记</li><li>头部标记HEAD</li><li>标题标记</li><li>主体标记</li><li>无序表</li></ul></body></html>3.5列表3.5.2建立无序列表<ul>【例3-14】上述代码在浏览器中的显示结果如图3-15所示。图3-15无序列表的显示结果3.5列表3.5.2建立无序列表<ul>【例3-15】无序列表修改标记的用法。<!doctypehtml><html><head><metacharset="utf-8"><title>无序列表</title></head><body>Disc项目符号列表：<ultype="disc"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ul>3.5列表3.5.2建立无序列表<ul>【例3-15】无序列表修改标记的用法。Circle项目符号列表：<ultype="circle"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ul>Square项目符号列表:<ultype="square"><li>苹果</li><li>香蕉</li><li>柠檬</li><li>橘子</li></ul></body></html>3.5列表3.5.2建立无序列表<ul>【例3-15】上述代码在浏览器中的显示结果如图3-16所示。图3-16无序列表项目符号的不同效果3.5列表3.5.2建立无序列表<ul>【例3-16】列表嵌套的用法。<!doctypehtml><html><head><metacharset="utf-8"><title>嵌套列表</title></head><body><ul><li>咖啡</li><li><ol>茶<li>红茶</li><li><ul>绿茶<li>龙井</li><li>碧螺春</li></ul></li></ol></li><li><ul>牛奶3.5列表3.5.2建立无序列表<ul>【例3-16】列表嵌套的用法。

<li>蒙牛</li><li>伊利</li></ul></li></ul></body></html>3.5列表3.5.2建立无序列表<ul>【例3-16】在IE浏览器中预览上述代码，结果如图3-17所示。图3-17列表嵌套的结果思考：<ol>和<ul>有什么区别？3.6案例【案例描述】为了参加信息化教学评比，讲授思想政治课的孙老师找到小张同学，想让小张同学帮忙设计一个HTML页面，展示马克思主义哲学课程中绪论的教学内容。【源代码展示】

具体见书本P59-61。3.6案例【运行结果】运行结果如图3-18所示。图3-18模块3案例运行结果3.6案例【分析】小张同学根据孙老师给的教学内容，结合本模块所学的知识完成了页面的设计。在设计中，小张同学运用了<h1></h1>标题样式为绪论、教学目的和要求等标题添加了标签，使内容的层次分明，还充分利用有序列表和无序列表对授课提纲中的内容进行了设计，使授课内容层次非常清晰。3.7思考

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论