搜索

HTML 教学

基本介绍

认识 HTML 使用 HTML 编辑器

基础知识

HTML 标签与架构 HTML 格式规范 HTML 缩排与注解 HTML 元素显示类型 HTML 元素属性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸单位 HTML 网址与路径 HTML 套用 CSS 样式 HTML 套用 JavaScript 如何观察 HTML 源代码

网页信息元素

网页标题 <title> 网页信息 <meta> 加载外部资源 <link> 重设根目录 <base>

常用元素

标题 <h1>~<h6> 段落 <p> 行内容器 <span> 区块容器 <div> 超链接 <a> 图片 <img> 换行 <br> 水平分隔线 <hr> 内嵌页框 <iframe>

文字样式元素

粗体字 <strong><b> 斜体字 <em><i> 删除线文字 <del> 插入 ( 底线 ) 文字 <ins> 小型文字 <small> 上标下标 <sup><sub> 凸显文字 <mark> 引用 <blockquote><q> 预先格式化 <pre> 程序码内容 <code> 收折文字内容 <details> 标示注音 <ruby><rt> 标示联络方式 <address> 标示键盘按键 <kbd> 标示时间日期 <time> 标示缩写 <abbr> 标示可换行位置 <wbr>

表格&清单元素

无序清单 <ul><li> 有序清单 <ol><li> 自订清单 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表单元素

表单 <form> 输入 <input> 按钮 <button> 多行文字输入 <textarea> 下拉选单 <select> 进度条 <progress> 字段标题 <label> 字段数据清单 <datalist> 表单元素分组 <fieldset>

语意结构元素

页首区块 <header> 主要区块 <main> 章节区块 <section> 文章区块 <article> 侧边栏区块 <aside> 引用区块 <figure> 导航链接区块 <nav> 页尾区块 <footer>

影音&图形元素

播放影片 <video> 播放声音 <audio> 响应式图片 <picture> 点阵画布 <canvas> 向量图形 <svg>

弹出视窗

alert() 警告视窗 confirm() 确认视窗 prompt() 输入视窗

网页嵌入应用

嵌入 YouTube 影片 嵌入 Google 地图 嵌入 Google 日历 嵌入 Google 表单 嵌入 Google 简报 嵌入 Google 文件 嵌入 Google 试算表 嵌入 Google 试算表图表 嵌入 Twitter 推文 嵌入 Facebook 粉丝团 嵌入 Facebook 影片 嵌入 Canva 简报 嵌入 Scratch 创作

嵌入 Scratch 创作

Scratch 是一个可以让程序入门者或学生尽情创作游戏、动画或影音的工具,除了可以直接在 Scratch 的平台上进行观赏,也可以将 Scratch 专案嵌入到网站,这篇教学会介绍如何透过 HTML 的实作,将 Scratch 的创作加到网页中。

HTML 教学 - 嵌入 Scratch 创作

将 Scratch 发布到网络

登录 Scratch 之后后前往“我的东西”,打开要分享的 Scratch 专案,点击右上角的“分享”,就会将专案发布为公开检视。

HTML 教学 - 嵌入 Scratch 创作 - 点击右上角的“分享”

如果是程序码编辑的画面,点击上方的“分享”,就会将专案发布为公开检视。

HTML 教学 - 嵌入 Scratch 创作 - 点击上方的“分享”

点击“复制链接”。

HTML 教学 - 嵌入 Scratch 创作 - 点击“复制链接”

打开复制链接视窗后,就能看见专案的网址,以及嵌入的程序码,点击“复制嵌入代码”。

HTML 教学 - 嵌入 Scratch 创作 - 复制嵌入代码

嵌入 Scratch 创作

复制嵌入代码之后,贴到网页中的 <body> 里,执行后就会看见 Scratch 创作出现在网页中。

<iframe src="https://scratch.mit.edu/projects/876428293/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen>
</iframe>

HTML 教学 -嵌入 Scratch 创作 - 嵌入 Scratch

意见反馈

微信二维码 微信扫码关注 抖音二维码 抖音扫码关注