当前位置:文档之家› 第2讲 HTML5新特性

第2讲 HTML5新特性


本章知识点
1.1 HTML基础 1.2 HTML4基础 (自学) 1.3 HTML5的新特性
1.1 HTML基础
1.1.1 什么是HTML 1.1.2 HTML的历史
1.1.1 什么是HTML
HTML是HyperText Markup Language(即超文本标记 语言)的缩写,它是通过嵌入代码或标记来表明文 本格式的国际标准。用它编写的文件扩展名是.html 或.htm,这种网页文件的内容通常是静态的。 HTML语言中包含很多HTML标记,它们可以被Web浏览 器解释,从而决定网页的结构和显示的内容。这些 标记通常成对出现,例如<HTML>和</HTML>就是常用 的标记对,语法格式如下: <标记名> 数据 </标记名>
face属性用于设置字体类型,size属性用 于设置字体大小。也可以使用color属 性设置字体的颜色。
【例1-2】
使用<b>…</b>定义加粗字体,使用<i>…</i>定义 倾斜字体,使用<u>…</u>定义下划线字体。这些 标签可以混合使用,定义同时具有多种属性的字体。 定义加粗、倾斜和下划线字体,代码如下: <p><b>加粗</b> <i>倾斜</i> <u>下划 线</u></p>
<!—和 -->是HTML文档中的注释符,它们 之间的代码不会被解析。
1.1.2 HTML的历史
1990年,欧洲原子物理研究所的英国科学家 Tim Berners-Lee发明了WWW(World Wide Web)。通过Web,用户可以在一个网页里比较 直观的表示出互联网上的资源。因此,Tim Berners-Lee被称为互联网之父。 最早的关于HTML的公开描述是由Tim BernersLee于1991年发表一篇叫做《HTML标签》的文 章,其中描述了18个元素,这就是关于HTML的 最简单的设计。其中的11个元素还保留在 HTML4中。
基本的HTML结构标记
结构标记 具体描述 <HTML>…</HTML> 标记HTML文档的开始和结束 <HEAD> … </HEAD> 标记文件头的开始和结束。HTML文档的头 部中可以包含脚本、CSS样式表和网页标题 等信息。这里指的脚本通常是Java Script脚 本,具体情况将在第2章介绍;关于CSS样式 表的具体情况将在第4章介绍
浏览【例1-6】的结果
1.通栏
被合并的单元格会跨越多个单元格,这 种合并的单元格被称为通栏。通栏可以 分为横向通栏和纵向通栏两种,<td colspan=#>用于定义横向通栏,<tr rowspan=#>用于定义纵向通栏。#表示通 栏占据的单元格数量。
使用<img>标记来处理动画
例如,在网页中插入一个多媒体文件 clock.avi,代码如下: <img border="0" dynsrc="clock.avi" start="fileopen" width="321" height="321"> dynsrc属性用于指定动画文件的文件名 ,包括文件所在的路径。start属性用 于指定动画开始播放的时间,fileopen 表示网页打开时即播放动画。
<BODY background="Greenstone.bmp">
可以在<BODY>标签中通过backcolor属性 设置网页的背景图片,例如:
<BODY bgcolor="#00FFFF">
<BODY>标签中的常用属性
属性 说明
BACKGROUND
BGCOLOR TEXT LINK VLINK ALINK
命名锚记(书签)
超级链接还可以定义在本网页内跳转 ,从而实现类似目录的功能。比较常 见的应用包括在网页底部定义一个超 级链接,用于返回网页顶端。首先需 要在跳转到的位置定义一个标识(锚 ),在DreamWeaver中这种定义位置的 标识被称为命名锚记(在FrontPage中 被称为书签)。 例如,可以在网页的顶部定义锚top, 代码如下: <a name="top"
HTML5编程
第2讲 HTML5概述
课程描述 互联网上的应用程序被称为Web应用程序,Web应用程序 使用Web文档(网页)来表现用户界面,而Web文档都遵 循标准HTML格式。HTML5是最新的HTML标准。之前的版 本HTML4.01于1999年发布。10多年过去了,互联网已经 发生了翻天覆地地变化。原有的标准已经不能满足各种 Web应用程序的需求。本章就和读者一起来了解一下最 新标准的HTML5的概貌。
文档的背景图像
文档的背景色 文档中文本的颜色 文档中链接的颜色 文档中已被访问过的链接的颜色 文档中正被选中的链接的颜色
1.2.2 设置字体属性
可以使用<font>…</font>标签对网页中的文字 设置字体属性,包括选择字体和设置字体大 小等,例如: <font face="黑体" size="4">设置字体 .</font>
1.2.4 图像和动画
HTML语言中使用<img>标签来处理图像,例如 : <img src="pic.gif"> src属性用于指定图像文件的文件名,包括文 件所在的路径。这个路径既可以是相对路径 ,也可以是绝对路径。
<img>标记还有如下的属性
alt:当鼠标光标移动到图像上时显示 的文本。 align:图像的对齐方式,包括top(顶 端对齐)、bottom (底部对齐)、 middle(居中对齐)、left(左侧对齐 )和right(右侧对齐)。 border:图像的边框宽度。 width 图像的宽度。 height 图像的高度。 hspace 定义图像左侧和右侧的空白。
<TITLE>…</TITLE> 标记文件头中的文档标题 <BODY>…</BODY> <!--…--> 标记文件体部分的开始和结束 标记文档中的注释部分
【例1-1】
一个使用基本结构标记文档的HTML文档实例。
<HTML> <HEAD> <TITLE> HTML文件标题.</TITLE> </HEAD> <BODY> <!-- HTML文件内容 --> </BODY> </HTML>
【例1-5】
定义一个新的超级链接,显示文本为“在新 窗口中打开PHP网站”,代码如下: <a target="_blank" href="">在新窗 口中打开PHP网站</a>
电子邮件超级链接的定义
在HTML语言中,电子邮件超级链接的定 义代码如下: <a href="mailto:johney2008@sin ">我的邮箱</a>
【例1-4】
下面的代码可以定义H1、H2……H6标题的文 字。 <h1>这是标题 1</h1> <h1>这是标题 2</h1> <h2>这是标题 3</h2> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
浏览【例1-4】的结果
1.2.3 超级链接
转向同一文档中有锚的地方
创建锚是为了在HTML文档中创建一些链 接,通过这些链接可以方便地转向同一 文档中有锚的地方,代码如下: <A HREF="url#name">转到锚 name</A> 如果HREF属性的值是指定一个锚,则必 须在锚名前面加一个“#”符号。例如 ,在网页的尾部添加如下代码: <a href="#top">返回顶部</a>
HTML的历史
2004年,超文本应用技术工作组(Web Hypertext Application Technology Working Group,WHATWG) 开始研发HTML5。2007年,万维网联盟(World Wide Web Consortium,W3C)接受了HTML5草案,并成立 了专门的工作团队。并于2008年1月发布了第1个 HTML5的正式草案。 2010年,时任苹果公司CEO的乔布斯发表了一篇名为 《对flash的思考》的文章,指出随着HTML5的完善和 推广,以后再观看视频等多媒体时就不再依靠flash插件 了。这引起了主流媒体对HTML5的兴趣。 目前HTML5的标准草案已进入了W3C制定标准5大程序 的第1步。预期要到2022年才会成为 W3C 推荐标准。 HTML5无疑会成为未来10年最热门的互联网技术。
HTML的历史
1993年,Internet工程任务组(Internet Engineering Task Force,IETF)发布了第1 部HTML规范建议。1994年,IETF成立了HTML工 作组,该工作组于1995年完成了HT ML 2.0设 计,并于同年发布了HTML 3.0,对HTML 2.0进 行了扩展。 HTML 4.01发布于1999年,直至将现在仍然有 大量的网页是基于HTML 4.01的,它的应用周 期超过10年,因此是到目前为止,影响最广泛 的HTML版本。
相关主题