html5-learning-001-hello world

最新推荐文章于 2024-07-16 11:45:00 发布

tdoly

最新推荐文章于 2024-07-16 11:45:00 发布

阅读量507

点赞数

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

本文链接：https://blog.csdn.net/tdoly/article/details/7823421

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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）

tdoly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
html5-learning-001-hello world

Introductionhtml5和html的结构基本一样！eg1: Hello tdoly Hello tdoly!所有的学习都从hello开始！开始解释这些标签的意思这个标签是用来告诉浏览器它使用的是那种标准和模式。应该写在首行！html:hypertext markup language!这是html标签的语言引入。
复制链接

扫一扫