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

简介:

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.1节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

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

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

1.1 一个基本的HTML 5页面

HTML5 开发实例大全


4fe5b3dc885401399996752c0e4ad4cf708d20c8

本实例的功能是编写一段基本的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所示。


a1521e01369b80e5e165db13573996b1e2a1f6fd

注意

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

相关文章
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
720 77
简约404错误页面HTML源码
简约404错误页面HTML源码
439 12
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1080 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
11月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
810 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
664 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
294 34
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
627 33
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
275 24
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
314 2