HTML5 Canvas 技术探究

2019-08-02 · 大约 1300 个字 · 预计 7 分钟读完

概述

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

Canvas绘制两个矩形

1
2
3
4
5
6
7
8
9
<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的其他标签和补充

2018-10-18 · 大约 200 个字 · 预计 1 分钟读完

Web前端 · 基础

Web前端 · 基础 · HTML5

文本标记

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

small和strong

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

1
2
3
4
5
6
7
<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表示内容的着重点。根据内容需要，这两个元素可以单独使用，也可以一起使用。

1
2
    <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基本结构

2018-10-17 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · 基础

Web前端 · 基础 · HTML5

基本HTML结构

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!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”> 是声明了页面默认语言。