一<script>元素

<script>标签是用来嵌入或引用JavaScript代码的容器。它允许网页实现交互性功能。

目前，《script>`元素支持的常见文件格式有：.js、.json等。如需在HTML5中引入JavaScript，你需要使用以下结构：

<script type="text/javascript" src="example.js"></script>

如果你的浏览器不支持<script>元素，则可以通过如下方式加载JavaScript代码：

function myScript() {
    // JavaScript代码
}
window.onload = function() {
    myScript();
};

在<script>元素中还可以添加文档类型声明、字符编码定义等。

运行效果如下：这是通过浏览器控制台输出的结果。

二<style>元素

<style>标签用来嵌入或引用CSS样式表。它允许开发者自定义网页的外观和布局。

目前，<style>元素支持的常见文件格式有：.css。如需在HTML5中引入CSS样式，你可以使用以下代码：

<style type="text/css">
    /* CSS样式 */
</style>

或者将CSS保存为一个单独的文件（如：example.css），然后通过<link>标签进行引用：

<link rel="stylesheet" href="example.css" type="text/css">

你的浏览器不支持<link>元素时，可以通过以下方式加载CSS样式：

<style>
    /* CSS样式 */
</style>

运行效果如下：这是在谷歌浏览器中的显示效果。

三HTML5 Canvas元素

<canvas>标签用于在网页中绘制图形和动画。它是一种强大的绘图技术，可以创建各种2D图形。

目前，<canvas>元素支持的绘画函数有：

• fillRect(x, y, width, height)：绘制填充矩形。
• strokeRect(x, y, width, height)：绘制边界矩形。
• arc(x, y, radius, startAngle, endAngle, antiClockwise)：绘制圆弧。

如需在HTML5中创建Canvas元素，可以使用以下结构：

<canvas id="myCanvas" width="200" height="100"></canvas>

然后通过JavaScript操作Canvas：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 150, 100);

运行效果如下：这是在浏览器中的显示效果。

四HTML5 WebSocket

WebSocket是一种网络通信技术，可以在单个TCP连接上进行全双工通讯。它允许服务器与客户端进行实时交互，发送和接收数据。

目前，<script>标签用于创建WebSocket连接：

<script>
    // 创建WebSocket对象
    var ws = new WebSocket('ws://localhost:8080');
    
    // 监听WebSocket打开事件
    ws.onopen = function(event) {
        message = 'Connection established.';
        ws.send(message);
    };
    
    // 监听WebSocket消息事件
    ws.onmessage = function(event) {
        var data = event.data;
        console.log(data);
    };
    
    // 监听WebSocket错误事件
    ws.onerror = function(event) {
        var error = event.error;
        console.error(error);
    };
    
    // 监听WebSocket关闭事件
    ws.onclose = function(event) {
        var code = event.code;
        var reason = event.reason;
        console.log(code, reason);
    };
</script>

运行效果如下：这是在浏览器中的实时通讯示例。

通过以上内容，希望您能更好地了解HTML5编程宝典。每天坚持进步一点点，相信您的技能会越来越强大！