《HTML5 开发实例大全》——第1章 千里之行 始于足下——基本元素实战1.1 一个基本的HTML 5页面

第1章 千里之行 始于足下——基本元素实战

在全新的HTML 5中,有很多新的标记元素,通过这些新的标记元素可以实现传统HTML标记语言所不能实现的功能。另外在本章的内容中,还会引领读者一起重温HTML 5传统页面元素的使用技巧,为读者步入本书后面知识的学习打下基础。

1.1 一个基本的HTML 5页面

HTML5 开发实例大全

本实例的功能是编写一段基本的HTML 5程序,让读者体会HTML 5的基本语法。并体会HTML 5在哪一种浏览器中可以正常运行。

具体实现

使用Dreamweaver创建一个名为“001.html”的文件,具体代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--Dreamweaver自动生成的-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>检测浏览器是否支持HTML 5</title>
</head>
<body style="font-size:13px">
 <canvas id="myCanvas" width="200" height="100"
  style="border:2px solid #CCC;background-color:#EEE">
  当前浏览器不支持全新的画布标记!
  </canvas>
</body>
</html>

在上述HTML 5代码中,在里面插入了一段HTML 5画布标记,画布标记< canvas >< /canvas >是HTML 5的全新标记。如果我们使用的浏览器支持HTML 5的新特性,则执行后将会显示一个矩形效果,如图1-1所示。如果不支持,则在页面中显示“当前浏览器不支持全新的画布标记!”的提示。

因为在写作此书时,微软的IE浏览器不支持HTML 5,所以执行后的效果如图1-2所示。

注意

本书使用的浏览器是Firefox,除了这个浏览器之外,谷歌的Chrome浏览器也支持HTML 5。

时间: 2024-11-01 16:43:26

《HTML5 开发实例大全》——第1章 千里之行 始于足下——基本元素实战1.1 一个基本的HTML 5页面的相关文章

《HTML5 开发实例大全》——导读

前言 从HTML 5标准被推出以来,经过几年的探索和发展,在浏览器公司的努力下,到本书截稿为止,HTML 5已经成为新一代网页技术的标准.目前已经有众多浏览器支持HTML 5的新功能,并且Android和iOS等智能手机平台也支持HTML 5. 从技术角度而言,HTML 5有两大特点:首先,强化了 Web 网页的表现性能:其次,追加了本地数据库等 Web 应用的功能.广义论及HTML 5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.它希望能够减少浏览器对于需要插件的

《HTML5 开发实例大全》——1.5 使用&lt; details &gt;标记元素实现交互

1.5 使用< details >标记元素实现交互 实例说明 < details >标记是一个全新的HTML 5元素,功能是描述文档或文档某个部分的细节.< details >标记经常与< summary >元素配合使用.在默认情况下,不显示< details >标记中的内容.当与< summary >标记配合使用时,在单击< summary >标记后才会显示< details >元素中设置的内容.< d

《HTML5 开发实例大全》——1.23 在网页中显示一幅图片

1.23 在网页中显示一幅图片 实例说明 在HTML 5页面中,除了显示文档或字符外,还经常需要放入一些其他元素,例如图片< img >.页面< iframe >和多媒体< object >等.这些元素对于整个DOM文档来说,属于嵌入内容.其中< img >元素的功能是在页面中导入一幅图像,它是页面开发中使用较为频繁的一个元素.在HTML 5中,该元素的"border"."align"."hspace&quo

《HTML5 开发实例大全》——1.21 在网页中突出显示某些文字

1.21 在网页中突出显示某些文字 https://yqfile.alicdn.com/3a46b22148d673e5df7bfc45f9fb868a5efa8dde.png" > 实例说明 在HTML页面中,经常需要展示的一段文章或文字称为文本内容.为了使文本内容更加形象.生动,需要增加一些特殊功能的元素,用于突出文本间的层次关系或标为重点,我们将这样的元素称为文本层次语义标记. 在HTML 5中,通过元素< time >.< mark >和< cite

《HTML5 开发实例大全》——1.15 设置&lt; progress &gt;进度条的样式

1.15 设置< progress >进度条的样式 实例说明 < progress >元素是 HTML5 标准草案中新增的元素之一,在默认情况下,< progress >会生成一个和系统默认样式一样的进度条.分别在 Windows 7 和 MaxOS Lion 中的显示效果如图1-28所示. https://yqfile.alicdn.com/c1170dc6a07d5f2f35900b6097995518969ed13b.png" > 其实可以通过CS

《HTML5 开发实例大全》——1.18 通过JavaScript脚本获取并显示文本框的内容

1.18 通过JavaScript脚本获取并显示文本框的内容 实例说明 在HTML 5应用中,为了增加页面的互动性,需要对文档编写客户端脚本,最常用的语言是JavaScript.通过编写客户端的脚本语言,可以实现对页面文档进行验证表单.变更内容等操作. 在页面文档中,有如下两个用于标志脚本的标签. (1)< script >元素:既可以包含脚本语言,也可以通过src属性导入一个脚本文件:同时选择元素的必选属性type与MIME类型. (2)< noscript >元素:是一个检测工

《HTML5 开发实例大全》——1.7 实现下拉弹出效果

1.7 实现下拉弹出效果 实例说明 在本实例中,首先在页面中显示一行提问文本"需要在线咨询吗?".当单击左侧的小三角符号后,将在下方无刷新弹出一个下拉区域,在里面显示文本"非常"需要.上述描述效果在很多动态网站中比较常见,原来一般都是用JavaScript技术或Ajax技术实现的.但现在只需使用HTML 5中的< details >标记元素即可实现完全同样的功能. 具体实现 使用Dreamweaver创建一个名为"007.html"的

《HTML5 开发实例大全》——1.33 实现拖曳和拖放处理

1.33 实现拖曳和拖放处理 实例说明 在HTML 5 中,可以使用如下对象和属性实现拖曳处理. DataTransfer 对象:拖曳对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如: <divtitle="拖曳我"draggable="true">列表1</div> 上述对象和属性支持如下鼠标事件和方法. ondragstar

《HTML5 开发实例大全》——1.20 分组列表显示网页中的内容

1.20 分组列表显示网页中的内容 实例说明 在传统的HTML标记语言中,可以通过< ul >.< ol >.< dl >元素实现分组效果.在全新的HTML 5中,对原有的分组内容元素< ul >.< ol >.< dl >进行了整体改良,有的元素增加了许多新的属性,有的元素则废除了一些不合理的原有特征. (1)< ul >元素. 在HTML 5中,< ul >元素用于定义页面中的无序列表,其用法与HTML 4