PPT
【文档说明】HTML+CSS+JavaScript网页设计-第3章-HTML5快速入门课件.ppt，共(44)页，602.000 KB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-45128.html
以下为本文档部分文字说明：
HTML+CSS+JavaScript网页设计第3章HTML5快速入门第1页第3章HTML5快速入门本章概述本章的学习目标主要内容HTML+CSS+JavaScript网页设计第3章HTML5快速入门第2页本章概述为了增强Web的实用性，HTML5引入了许多
新技术，对传统HTML文档进行了大幅修改，使得文档结构更加清晰明了、易读，降低了学习难度，这样既方便浏览者访问，也提高了Web开发的速度。本章将从认识HTML5文档结构开始，详细介绍HTML5中新增和废除的元素，新增和废除的属性，以及新增的事件等。重点讲述
了新增结构元素的用法。HTML+CSS+JavaScript网页设计第3章HTML5快速入门第3页本章的学习目标了解HTML5文档结构掌握HTML5新增的结构元素的用法掌握HTML5新增的块级元素的用法掌握HTML5新增的行内语义元
素的用法了解HTML5中废除的元素了解HTML5中新增和废除的属性了解HTML5中新增的事件HTML+CSS+JavaScript网页设计第3章HTML5快速入门第4页主要内容3.1认识HTML5文档结构3.2HTML5元素3.3新增和废除的属性3.4新增的事件3.5本章小
结3.6思考和练习HTML+CSS+JavaScript网页设计第3章HTML5快速入门第5页3.1认识HTML5文档结构HTML5文档以<!DOCTYPE>开头，这是文档类型声明，并且必须位于HTM
L5文档的第一行，用来告诉浏览器或任何其他分析程序它们所查看的文档类型。<html>标签是HTML5文档的根标签，紧跟在<!DOCTYPEhtml>之后。html标签支持HTML5全局属性和manifest属性，manifest属性主要在创建HTML5离线应用的时候用到。<
head>标签是所有头部元素的容器。位于<head>内部的元素可以包含脚本、样式表、元信息等。<head>标签支持HTML5全局属性。HTML+CSS+JavaScript网页设计第3章HTML5快速入门第6页HTML5文档结构<meta>标签位于文档的头部
，不包含任何内容。meta标签的属性定义了与文档相关联的名称/值对。该标签提供页面的元信息，如针对搜索引擎和更新频度的描述和关键词。上述代码中<metacharset="UTF-8">定义了文档的字符编码是utf-8。这里，charset是meta标签的属性，而utf-8是该属性的值。
<title>标签位于<head>标签内，定义了文档的标题。该标签定义浏览器工具栏中的标题、提供页面被添加到收藏夹时的标题以及显示在搜索引擎结果中的页面标题。<title>标签支持HTML5全局属性。<body>标签定义文档的主题和所有内容，
如文本、超链接、图像、表格和列表等都包含在该标签中。HTML+CSS+JavaScript网页设计第3章HTML5快速入门第7页主要内容3.1认识HTML5文档结构3.2HTML5元素3.3新增和废除的属性3.4新增的事件3.5本章小结3.6思考和练习HTML+CSS+JavaScript网页设
计第3章HTML5快速入门第8页3.2HTML5元素HTML5在HTML4的基础上进行了大量修改，引入了很多新的元素，同时也废除了很多元素，改由其他属性或CSS样式来替代。在HTML5对分组元素进行扩展之前，最常用的HTML元素的组容器就是<div>元素。它代表一个通用的
内容块，用来结合class与id对文档赋予结构。HTML+CSS+JavaScript网页设计第3章HTML5快速入门第9页HTML5元素HTML5通过引入一些新元素改变了这种情况。这些元素可以对内容进行更精确的分
组。新增的结构元素解决了这种div漫天飞舞的情况，增强了网页内容的语义性，这对搜索引擎而言，能够更好地识别和组织索引内容。合理地使用这些结构元素，将极大地提高搜索结果的准确度。HTML+CSS+JavaScript网页设计第3
章HTML5快速入门第10页新增结构元素元素描述section在Web页面应用中，section元素也可以用于区域的章节表述header页面主体的头部，注意与head元素相区别。head元素不可见，而h
eader往往包含在body中footer页面的底部，即页脚。通常用于标出网站的一些相关信息，例如“关于我们”、法律声明、邮件信息和版权所有等nav专门用于菜单导航、链接导航的元素，是navigator的缩写article用于表示一篇文章的主题内容，一般为文字集中显示
的区域HTML+CSS+JavaScript网页设计第3章HTML5快速入门第11页Section元素section元素主要用来对网站或应用程序中页面上的内容进行分块。section元素表示文档或应用的一个部分。所谓“部分”，这里
是指按照主题分组的内容区域。section元素通常由标题和内容组成。但section元素并不是容器元素，所以不能用CSS来渲染。当一个容器需要直接定义样式或通过脚本控制行为时，则应使用div元素。HTML+
CSS+JavaScript网页设计第3章HTML5快速入门第12页header元素header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的内容区块的标题，也可以包含其他内容，如
数据表格、搜索表单或相关的logo图片。因此，整个页面的标题都应该放在页面的开头。header元素定义文档或者文档的一部分区域的页眉。在一个文档中，可以定义多个header元素。需要注意head与header的不同，head元素是
HTML文档的所有头部元素的容器，而header元素是body元素中的一个结构元素，也可以在article元素内使用header元素，但是不能在footer、address或者另一个header元素内使用header元素。HTML+CS
S+JavaScript网页设计第3章HTML5快速入门第13页footer元素footer元素可以作为内容块的脚注，比如在父级内容块中添加注释，或者在网页中添加版权信息等。脚注信息的形式有作者、相关阅读链接及版权信息等。
footer元素与header元素的用法基本相同，二者一个位于区块的头部，一个位于区块的尾部。与header元素一样，一个网页中也可以重复使用footer元素，还可以为article元素和section元素添加footer元素。HTML+CSS+JavaSc
ript网页设计第3章HTML5快速入门第14页nav元素nav元素是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。一般情况下，只需要将主要的、基本的链接组放进nav元素即可。例如，在页
脚中通常会有一组链接，其中放着服务条款、首页和版权声明等，这时使用nav元素来组织并不适合，使用footer元素最为恰当。一个页面可以拥有多个nav元素，作为页面整体或不同部分的导航。一般来说，nav元素适用于以下场景：传统导航条、侧边栏导航条、页内
导航、翻页操作。nav元素在以前版本HTML的布局中作为导航条相关常用命名来使用。HTML+CSS+JavaScript网页设计第3章HTML5快速入门第15页article元素article元素代表文档、页面或
应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是论坛帖子、报纸文章、博客条目、用户评论或独立的插件，或是其他任何独立的内容。除了内容部分，article元素通常有自己的标题(一般为header元素)，有时还有脚注(f
ooter元素)。另外，article元素也可以嵌套使用。在嵌套使用时，内层的内容原则上需要与外层的内容有关系，即联系比较紧密，嵌套的内外层描述的又都是独立的事物。HTML+CSS+JavaScript网页设计第3章HTML5快速入门块级元素第16页元素
描述aside用来表示注记、贴士、侧栏、摘要、插入的引用等，作为补充主体的内容。从简单页面的显示上看，就是侧边栏，可以在左边，也可以在右边figure定义媒介内容的分组，是对多个元素进行组合并展示的元素，通常和figcaption元素配合使用hgroup
用来对标题元素进行分组dialog用来表示人与人之间的对话。dialog元素还包括dt和dd这两个组合元素，它们常常同时使用。dt用来表示说话者，dd表示说话内容HTML+CSS+JavaScript网页设计第3章HTML5快速入门第17页Aside
元素aside元素表示跟这个页面的其他内容关联性不强或者没有关联的内容，一般是一些附属信息。aside元素通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传、作者介绍、Web
应用、相关链接、当前页内容简介等。但不要使用aside元素标记括号中的文字，因为这种类型的文本被认为是主内容的一部分。HTML+CSS+JavaScript网页设计第3章HTML5快速入门第18页figure
元素figure元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元，可以使用figcaption元素为figure元素组添加标题。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。HT
ML+CSS+JavaScript网页设计第3章HTML5快速入门第19页hgroup元素hgroup元素是将标题及其子标题进行分组的元素。当标题有多个层级(副标题)时，hgroup元素被用来对一系列<h1>-<
h6>元素进行分组，一个内容区块的标题及其子标题算一组。通常，如果文章只有一个标题，是不需要使用hgroup元素的。HTML+CSS+JavaScript网页设计第3章HTML5快速入门第20页dialog元素dialog元素用于定义一个对话框
、确认框或窗口，它的open属性用来规定dialog元素是有效的，用户可以与它进行交互。通常会在JavaScript脚本中处理对话框的交互。HTML+CSS+JavaScript网页设计第3章HTML5快速入门新增的行内语义元素第21页元素描述mark定义有记号的文本meter
表示特定范围内的数值，可用于工资、数量、百分比等time表示时间值progress用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监视HTML+CSS+JavaScript网页设计第3章HTML5快速入门第22页mark
元素mark元素用来标签一些不是特别需要强调的文本。如果是需要突出显示文本，则使用上一章学习的<em>或<strong>标签。可以为了标记特定上下文中的文本而使用这个标签，例如，用来显示搜索引擎搜索后的关键词。HTML+CSS+JavaScri
pt网页设计第3章HTML5快速入门第23页mark元素meter元素用来定义已知范围或分数值内的标量测量，也被称为尺度。支持的属性如下►min：值域的最小边界值。默认为0，如果设置了具体值，它必须比最大值要小。►max：值域
的上限边界值。默认为1。►value：当前值。►low：定义了低值区间的上限值(如果value介于min和low之间，该元素就会表现出低值的视觉效果，value落在[min,low]、[high,max]等不同的区间会使浏览器渲染该元素时出不同的视觉效
果)。►high：定义了高值区间的下限值。►optimum：这个属性用来指示最优/最佳取值。HTML+CSS+JavaScript网页设计第3章HTML5快速入门第24页time元素time元素用于定义时间或日期，该元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。该元
素能够以机器可读的方式对日期和时间进行编码，这样，用户就能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。HTML+CSS+JavaScript网页设计第3章HTML5快速入门第25页
progress元素progress元素用来显示一项任务的完成进度，为了使progress元素能够动态展示下载进度，通常需要JavaScript代码编写一个处理程序，根据实际任务进度，动态更新progress的value属性值。除了全局属性，该元素还有如下两个属性：►max：该属性描述了这
个progress元素所表示的任务一共需要完成多少工作。►value：该属性用来指定该进度条已完成的工作量。如果没有设置value属性，则该进度条的进度为“不确定”，浏览器中会看到一个来回滚动的进度条
。HTML+CSS+JavaScript网页设计第3章HTML5快速入门新增的其他功能元素除了前面介绍的一些元素，HTML5还新增了一些功能元素和input元素的类型。新增的input元素的类型将在下一章学
习表单时详细介绍，这里简单介绍一下新增的功能元素。所谓功能元素，是指可以用在页面中以完成某种页面显示行为的元素。第26页HTML+CSS+JavaScript网页设计第3章HTML5快速入门新增的其他功能元素output表示不同类型的输出source
为媒介元素(如video、audio等)定义资源menu菜单列表，使用li元素列举每一个菜单项rubyruby注释rt表示字符的解释或发音rp在ruby注释中使用，定义不支持ruby的浏览器所显示的内容wbr软换
行。在浏览器窗口或父级元素的宽度足够时不换行，而宽度不够时主动换行command命令按钮，如单选按钮、复选框或按钮details表示细节信息，可以和summary元素配合使用datalist表示可选数据列表，和input元素配合使用datagrid表示可选数据列表，以树型
列表的形式显示keygen表示生成密钥第27页HTML+CSS+JavaScript网页设计第3章HTML5快速入门废除的元素除了新增元素以外，HTML5还废除了一些HTML4中的元素，主要包括：
能用CSS替代的元素、不再使用frame框架、只有部分浏览器支持的元素。HTML4中的一些表现文本效果的元素，如basefont、big、center、font、s、strike、tt和u这些元素，HTML5将它们放在了CSS样式表中，因此将这些元
素废除了。其中，font元素允许由“所见即所得”的编辑器插入，s、strike元素可以由del元素替代，tt元素可以由CSS的font-family属性替代。第28页HTML+CSS+JavaScript网页设计
第3章HTML5快速入门废除的元素由于frame框架对网页可用性存在负面影响，因此HTML5不再支持frame，只支持iframe。与frame框架相关的frameset、frame、noframes元素被废除。对于只有部分浏览器支持的元素，如applet、bg
sound、blink和marquee等元素，由于只被少数浏览器支持，因此HTML5将它们废除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee元素可以由JavaScript编程方式替代
。第29页HTML+CSS+JavaScript网页设计第3章HTML5快速入门废除的元素使用ruby元素替代rb元素。使用abbr元素替代acronym元素。使用ul元素替代dir元素。使用form元素与inpu
t元素相结合的方式替代isindex元素。使用pre元素替代listing元素。使用code元素替代xmp元素。使用GUIDS替代nextid元素。使用text/plain的MIME类型替代plaintext元素。第30页HTML+CSS+JavaScript网页设计第
3章HTML5快速入门第31页主要内容3.1认识HTML5文档结构3.2HTML5元素3.3新增和废除的属性3.4新增的事件3.5本章小结3.6思考和练习HTML+CSS+JavaScript网页设计第3章HTML5快速入门第32页3.3新增和废除的属性HTML5除了新增和废除一些元素标记
外，还新增和废除了HTML4中的一些属性。HTML5新增的属性主要体现为表单属性、链接属性以及其他属性。HTML+CSS+JavaScript网页设计第3章HTML5快速入门新增的表单属性第33页属性名称描述autofocusinput、select、textarea和but
ton元素拥有，以指定属性的方式让元素在画面打开时自动获得焦点placeholderinput(type=text)、textarea元素拥有，提示用户可以输入的内容forminput、output、select、textarea、button与fieldset元素拥有，声明这些控件属于哪个
表单，然后放置在页面上的任何位置而不是表单之内required指示输入字段的值是必需的autocomplete、min、max、multiple、pattern、step为input元素新增的属性。datalist元素和autocom
plete属性配合使用。multiple允许在上传文件时一次上传多个文件formactionformenctypeformmethodformnovalidateformtargetinput和button元素拥有，重载form元素的action、en
ctype、method、novalidate、target属性novalidate取消提交时进行的有关检查，表单可以被无条件提交HTML+CSS+JavaScript网页设计第3章HTML5快速入门新增的链接属性第34页属性名称描述media规定目
标URL是为哪种类型的媒介和设备进行优化的，只能在href属性存在时使用hreflang和rel为area元素增加的属性，以保持和a、link元素保持一致sizes为link元素增加的属性，可以和icon元素结合使用，指定关联图标的大小target为base元素增加的属性，目的是和a元
素保持一致HTML+CSS+JavaScript网页设计第3章HTML5快速入门新增的其他属性第35页属性名称描述reversed为ol元素增加的属性，用于指定列表倒序显示charset为meta元素增加的属性typ
e和label为menu元素增加的属性，label属性为菜单定义可见的标注，type属性让菜单能以上下文菜单、工具条和列表菜单的形式出现scoped为style元素增加的属性，规定样式的作用范围async为script元素增加的属性，定义
脚本是否异步执行manifest为html元素增加的属性，开发离线Web应用程序时，与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息sandboxseamlesssrcdoc为iframe元素增加的属性，用来提高页面安全性，防止不信任的Web页面执行某些操作HTML+C
SS+JavaScript网页设计第3章HTML5快速入门废除的属性前面废除的元素中就有一些用CSS样式替代的，同样，对于一些表现页面效果的属性，如align、bgcolor、background、border、cellpadding、cellspacing、fram
e、rules、width、alink、link、text、vlink、char、charoff、height、nowrap、vaign、hspace、vspace、nowrap、compact、type、frameborder、scrolling、margin
height、marginwidth等属性，都被废除了，改由CSS样式实现。第36页HTML+CSS+JavaScript网页设计第3章HTML5快速入门其它废除的属性第37页HTML4属性适应元素HTML5替代方案revlink、arelcharsetlin
k、a在被链接的资源中使用HTTPcontent-type头元素shape、coordsa使用area元素代替a元素longdescimg、iframe使用a元素链接到较长描述targetlink多余属性，被省略nohrefarea多余属性，被省略pro
filehead多余属性，被省略versionhtml多余属性，被省略nameimgidschememeta只为某个表单域使用schemearchive、classid、codebase、codetype、declare、standbyobject使用data与type属性类调用
插件。需要使用这些属性来设置参数时，使用param属性valuetype、typeparam使用name和value属性，不声明值的MIME类型axis、abbrtd、th使用以明确、简洁的文字开头，后跟详述文字的形式。可以对更详细的内容使用title属性，以使单
元格的内容变得简短scopetd在被链接的资源中使用HTTPcontent-type头元素HTML+CSS+JavaScript网页设计第3章HTML5快速入门第38页主要内容3.1认识HTML5文档结构3.2HTML5元素3.3新增和废除的属性3.4
新增的事件3.5本章小结3.6思考和练习HTML+CSS+JavaScript网页设计第3章HTML5快速入门3.4新增的事件HTML5中对页面、表单、键盘元素新增了许多事件第39页HTML+CSS+JavaScript网页设计第3章HTML5快速入门新增的事件第40页元素对象事件触发时
机window对象body对象beforeprint即将开始打印之前触发afterprint打印结束后触发resize浏览器窗口大小发生改变时触发error页面加载出错时触发offline页面变为离线状态时触发o
nline页面变为在线状态时触发pageshow页面加载时触发，类似于load事件，区别在于load事件在页面第一次加载时触发，而pageshow事件在每一次加载时触发，即从网页缓存中读取页面时只触发pageshow事件，不触
发load事件beforeunload当前页面被关闭时触发，该事件通知浏览器显示一个用于询问用户是否确实离开本页面的确认窗口，可以设置确认窗口中的提示文字hashchange页面URL地址字符串中的哈希部分发生改变时触发任何元素mousewheel当鼠标指针悬停在元素上并滚动鼠标滚轮时触
发任何容器元素scroll当元素滚动条被滚动时触发input元素textarea元素input当用户修改文本框中的内容时触发，该事件与change事件的区别：input事件在元素尚未失去焦点时已触发，change事件只在元素失去焦点时触发表单元素reset当用户按下表单元素中
type类型为reset的input元素，或者在JavaScript脚本代码中执行表单对象的reset方法时触发HTML+CSS+JavaScript网页设计第3章HTML5快速入门第41页主要内容3.1认识HTML5文档结构3.2HTML5元素3.3新增和废除的属性3.4
新增的事件3.5本章小结3.6思考和练习HTML+CSS+JavaScript网页设计第3章HTML5快速入门第42页3.5本章小结HTML5引入了许多新技术，对传统HTML元素进行了分类，并根据开发人员的习惯和实践中常用的功能，以及Web应用跨平台
的发展需求，增加了大量新元素、新功能。本章详细介绍了HTML5中新增的元素、属性和事件。首先介绍了HTML5的文档结构；接着重点学习了HTML5中新增和废除的元素，把这些新增的元素分为几类分别举例说明了其用法；然后阐述了HTML5中新增和废除的属性，这些属性
会在以后学习中详细介绍，非常的属性也会在学习CSS时讲解如何使用CSS替代废除的属性；最后简要介绍了HTML5中新增的事件。HTML+CSS+JavaScript网页设计第3章HTML5快速入门第43
页主要内容3.1认识HTML5文档结构3.2HTML5元素3.3新增和废除的属性3.4新增的事件3.5本章小结3.6思考和练习HTML+CSS+JavaScript网页设计第3章HTML5快速入门第44页3.
6思考和练习1.简单描述HTML5文档的结构，并指出每个部分的含义。2.HTML5新增了哪些结构元素？简单描述这些元素的使用场景。3.nav元素在HTML5中用于包裹一个导航链接组，用于显示地说明这是一个导航组，在同一个页面这可以同时存在个na
v。4.元素用于定义一个对话框、确认框或窗口，它的属性用来规定该元素是有效的，用户可以与它进行交互5.HTML5新增了哪些语义元素？简单描述这些元素的使用场景。6.使用本章介绍的HTML文档结构知识及新增元素构建一个简单的网页。
辽公网安备 21102102000191号
营业执照
