搜索

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 创作

嵌入 Google 文件

Google 文件 ( Google Docs ) 是非常方便的线上文件应用程序 ( 类似线上 Words ),不论是任何的操作系统,只需要打开浏览器就能进行文件的编辑,这篇教学会介绍如何透过 HTML 的实作,将 Google 文件加到网页中。

HTML 教学 - 网页中加入 Google 文件

将 Google 文件发布到网络

登录 Google 账号后,从云端硬盘里新增或打开一份 Google 文件,进入选单“文件 > 共用”,点击“发布到网络”。

HTML 教学 - 网页中加入 Google 文件 - 发布到网络

选择对话视窗里的“内嵌”页签,点击“发布”。

HTML 教学 - 网页中加入 Google 文件 - 发布

出现可以嵌入在网页的程序码后,表示发布完成。

HTML 教学 - 网页中加入 Google 文件 - 发布

嵌入 Google 文件

复制 Google 文件里发布的程序码,贴到网页中的 <body> 里,执行后就会看见 Google 文件出现在网页中。

<iframe src="https://docs.google.com/document/d/e/2PACX-1vSIJMIuOyuOyNRRlZb3UJIa2Yvl8kAhvafZMVpFOpgq49dGWobMFcihOS8VL-yTUKDdX9sZnVPzvxPA/pub?embedded=true"></iframe>

Google 文件嵌入属性

嵌入 Google 文件之后,可以透过 iframe 的属性设定 Google 文件:

属性 说明
width 宽度 ( 可使用 CSS 取代 )。
height 高度 ( 可使用 CSS 取代 )。
src Google 简报网址。
frameborder iframe 边框 ( 可使用 CSS 调整 )。

意见反馈

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