html5-learning-001-hello world

最新推荐文章于 2025-08-08 14:03:48 发布

tdoly

最新推荐文章于 2025-08-08 14:03:48 发布

阅读量568

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5 function html 浏览器 character exception

本文链接：https://blog.youkuaiyun.com/tdoly/article/details/7823421

html5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML5的基本结构及其与HTML的区别，通过实例演示了如何使用HTML5的Canvas元素进行绘图，包括设置画布尺寸、绘制背景和文字等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Introduction

html5和html的结构基本一样！

eg1:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
 	<title>Hello tdoly</title>
</head>
<body>
	 Hello tdoly!
</body>
</html>

所有的学习都从hello开始！开始解释这些标签的意思

<!DOCTYPE html>

这个标签是用来告诉浏览器它使用的是那种标准和模式。应该写在首行！

html:hypertext markup language!

<html lang="en">

这是html标签的语言引入。

"en"=English

"zh"=Chinese-lang

"fr"=French-lang

"de"=German-lang

"it"=Italian-lang

"ja"=Japanese-lang

"ko"=Korean-lang

"pl"=Polsih-lang

"ru"=Russian-lang

"es"=Spanish-lang

<meta charset="UTF-8">

这个标签告诉浏览器该页面使用的字符编码是UTF-8。

常用字符编码：

UNICODE简称 UCS:Universal Multiple-Octet Coded Character Set

GBK(包括了GB2312)

UTF-8。

<title>...</title>

顾名思义是标题的意思，主要是用来显示浏览器窗口的名字。它是很重要的一个标签，是给搜索引擎的主要信息。

eg2:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <title>Hello tdoly </title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
 Hello World!tdoly!
</div>
</body>
</html>

其中

<div style="position: absolute; top: 50px; left: 50px;">

是内联一个CSS在HTML页面，它告诉浏览器渲染的位置是绝对的，离页面上面是50px，离页面左边距是50px。

<canvas>

canvas有三个重要的属性，id，height，width。

eg3:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Your First Canvas Application </title>
	<script src="modernizr-1.6.min.js"></script>
	<script type="text/javascript">
	window.addEventListener("load", eventWindowLoaded, false);	
	//debugging
	var Debugger = function () { };
	Debugger.log = function (message) {
		try {
			console.log(message);
		} catch (exception) {
			return;
		}
	}

	function eventWindowLoaded () {
		canvasApp();
	}

	function canvasSupport () {
		return Modernizr.canvas;
	}

	function canvasApp () {
			
			if (!canvasSupport()) {
				 return;
			}
			
			//通过ID找到canvas
			var theCanvas = document.getElementById("canvasOne");
			var context = theCanvas.getContext("2d"); 
			
			Debugger.log("Drawing Canvas");
			
			function drawScreen() {
				//background
				context.fillStyle = "#ffffaa";
				context.fillRect(0, 0, 500, 300);
				
				//text
				context.fillStyle    = "#000000";//填充颜色
				context.font         = "20px _sans";//设置字体大小和宽度
				context.textBaseline = "top";//设置字体垂直对齐方式
				context.fillText  ("Hello World!", 195, 80 );//text string,x position,y position
				
				//image
				var helloWorldImage = new Image();
				helloWorldImage.src = "http://ww2.sinaimg.cn/large/798468a9gw1dvihyakd68g.gif";
				helloWorldImage.onload = function () {
					context.drawImage(helloWorldImage, 160, 130);
				}
				
				//box		
				context.strokeStyle = "#000000"; 
				context.strokeRect(5,  5, 490, 290);
				
			}
			
			drawScreen();
		
	}

	</script> 
</head>
<body>
	<div style="position: absolute; top: 50px; left: 50px;">
		<canvas id="canvasOne" width="500" height="300">
			Your browser does not support HTML 5 Canvas. 
		</canvas>
	</div>
</body>
</html>

modernizr-1.6.min.js下载网址：点击打开链接（官网）或者点击打开链接（csdn）