当前标签 / HTML5 / 总共3篇

HTML5 Canvas 技术探究

概述

在前一篇 《Canvas 基础图形3D框架 Zdog》 中我们已经尝试了使用 Canvas 框架 Zdog 实现有趣的 3D 图形,而本篇我们来探究一下 Canvas 的使用和原理,还是先从这两个矩形开始吧。

Canvas绘制两个矩形

<canvas id="testcanvas" width="500" height="500"></canvas>
<script>
    var c = document.getElementById('testcanvas');
    var p = c.getContext("2d");
    p.fillStyle = "#FF0000";
    p.fillRect(0, 0, 300, 300);
    p.fillStyle = "rgba(0,0,255,0.5)";
    p.fillRect(200,200,500,500);
</script>

阅读更多

Web前端基础(21)HTML5的其他标签和补充

文本标记

p是最常用的文本标记之一,要在网页中表示段落就需要用p标签。

small和strong

small表示细则一类旁注,通常包括免责声明、注意事项、法律版本、版权信息等。small通常是行内文本中的一小块,而不是包含多个段落或其他元素的大块文本。

<p>Order now to receive free shipping. <small>(Some restrictions may apply.)</small></p>

<p>...</p>

<footer>
	<p><small>&copy; 2013 The Super Store. All Rights Reserved.</small></p>
</footer>

strong表示内容的重要性,而em表示内容的着重点。根据内容需要,这两个元素可以单独使用,也可以一起使用。

    <p><strong>Warning: Do not approach the zombies <em>under any circumstances</em></strong>. They may <em>look</em>
        friendly, but that's just because they want to eat your arm.</p>

浏览器通常将strong文本以粗体显示,而将em文本以斜体显示,如果em是strong的子元素,将同时显示粗体和斜体。

注意:不用使用b元素代替strong,也不要使用i元素代替em。尽管他们在浏览器中显示的样式是一样的,但是含义却不一样。可以在strong中嵌套strong,em中嵌套em,来说明更加重要。

阅读更多

Web前端基础(20)HTML5基本结构

基本HTML结构

每个HTML文档都应该包含一下几个组成部分:

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

<!DOCTYPE html> 是声明页面为HTML5文档,在HTML4和XHTML1.0时代,有好几种DOCTYPE,每一种都会指明HTML的版本,以及使用的是过度型还是严格型模式,太难记了,所以每次都需要复制黏贴进来,现在所有浏览器都理解这种简单的HTML5的DOCTYPE,所以可以忘记过去复杂繁琐的DOCTYPE了。

<html lang=“en”> 是声明了页面默认语言。

&ltmeta charse=“UTF-8”> 是声明了文档的字符编码。

阅读更多