基本办公文书转HTML工具

一.课程目标:透过混合学习及体验式学习培养学生以下能力：

(1) 能够从用户体验框架，描述网页设计与制作主要概念，包括页面结构、网站结构、界面设计、图形设计及图像和视频等

(2) 能熟悉产业标准生态，活用HTML5及CSS3的产业技术标准

(3) 能描述响应式网页设计的功能、特征及技术实践常用标准作法

(4) 能运用设计与制作工具及区分工具使用****情境

(5) 能认识相关实践社群及学科，习得最佳实践及技巧的更新途径

转换得到的HTML代码 如下：

<p>一.课程目标:透过混合学习及体验式学习培养学生以下能力：</p>
<p>(1) 能够从用户体验框架，描述网页设计与制作主要概念，包括页面结构、网站结构、界面设计、图形设计及图像和视频等</p>
<p>(2) 能熟悉产业标准生态，活用HTML5及CSS3的产业技术标准</p>
<p>(3) 能描述响应式网页设计的功能、特征及技术实践常用标准作法</p>
<p>(4) 能运用设计与制作工具及区分工具使用****情境</p>
<p>(5) 能认识相关实践社群及学科，习得最佳实践及技巧的更新途径</p>

定义和用法

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，所有 p 元素的呈现属性均不被赞成使用。

在 XHTML 1.0 Strict DTD 中，所有 p 元素的呈现属性均不被支持。

可选的属性

| 属性 | 值 | 描述 |
| align |

  • left
  • right
  • center
  • justify

|

不赞成使用。请使用样式取代它。

规定段落中文本的对齐方式。

|

全局属性

<p> 标签支持 HTML 中的全局属性。

事件属性

<p> 标签支持 HTML 中的事件属性

二.课程进度计划表：
周次 课程要点 教学活动 阅读资料
1 网页设计与制作与工具介绍 RWD1
2 从用户体验切入响应式设计实践 RWD2, WSG0
3 HTML基本元素：码云Pages搭建 w3school, 码云Pages
4 页面结构（Page Structure） WSG6
5 页面制作案例一
☉期中在线考查 A 教室外实践或专业分享 WP2,WSG4,DMMT
6 图像和视频（Images&Video） WSG11, 12
7 弹性布局与响应式图片 RWD3
8 HTML5与响应式 RWD4
9 CSS3新特性 RWD5
10 ☉期中考查 B
11 网站结构（Site Structure） WSG5
12 CSS3高级技术 RWD6
13 介面设计（Interface Design） 教室外实践或专业分享 WSG7
14 图形设计（Graphic Design） 教室外实践或专业分享 WSG8
15 SVG与响应式Web设计
☉期中在线考查 C 教室外实践或专业分享 RWD7
16 CSS3过渡、变形和动画 WSG9
17 ☉期末应用项目开发成果展示考查
18 ☉期末应用项目开发成果点评总结

转换得出的HTML代码如下：

<table width="583">
<tbody>
<tr>
<td width="59">
<p><strong>周次</strong></p>
</td>
<td width="270">
<p><strong>课程要点</strong></p>
</td>
<td width="95">
<p><strong>教学活动</strong></p>
</td>
<td width="161">
<p><strong>阅读资料</strong></p>
</td>
</tr>
<tr>
<td width="59">
<p>1</p>
</td>
<td width="270">
<p>网页设计与制作与工具介绍</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD1</p>
</td>
</tr>
<tr>
<td width="59">
<p>2</p>
</td>
<td width="270">
<p>从用户体验切入响应式设计实践</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD2, WSG0</p>
</td>
</tr>
<tr>
<td width="59">
<p>3</p>
</td>
<td width="270">
<p>HTML基本元素：码云Pages搭建</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>w3school, 码云Pages</p>
</td>
</tr>
<tr>
<td width="59">
<p>4</p>
</td>
<td width="270">
<p>页面结构（Page Structure）</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>WSG6</p>
</td>
</tr>
<tr>
<td width="59">
<p>5</p>
</td>
<td width="270">
<p>页面制作案例一<br /> ☉<strong>期中在线考查</strong> <strong>A</strong></p>
</td>
<td width="95">
<p>教室外实践或专业分享</p>
</td>
<td width="161">
<p>WP2,WSG4,DMMT</p>
</td>
</tr>
<tr>
<td width="59">
<p>6</p>
</td>
<td width="270">
<p>图像和视频（Images&Video）</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>WSG11, 12</p>
</td>
</tr>
<tr>
<td width="59">
<p>7</p>
</td>
<td width="270">
<p>弹性布局与响应式图片</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD3</p>
</td>
</tr>
<tr>
<td width="59">
<p>8</p>
</td>
<td width="270">
<p>HTML5与响应式</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD4</p>
</td>
</tr>
<tr>
<td width="59">
<p>9</p>
</td>
<td width="270">
<p>CSS3新特性</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD5</p>
</td>
</tr>
<tr>
<td width="59">
<p>10</p>
</td>
<td width="270">
<p><strong>☉</strong><strong>期中考查</strong><strong> B</strong></p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p> </p>
</td>
</tr>
<tr>
<td width="59">
<p>11</p>
</td>
<td width="270">
<p>网站结构（Site Structure）</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>WSG5</p>
</td>
</tr>
<tr>
<td width="59">
<p>12</p>
</td>
<td width="270">
<p>CSS3高级技术</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>RWD6</p>
</td>
</tr>
<tr>
<td width="59">
<p>13</p>
</td>
<td width="270">
<p>介面设计（Interface Design）</p>
</td>
<td width="95">
<p>教室外实践或专业分享</p>
</td>
<td width="161">
<p>WSG7</p>
</td>
</tr>
<tr>
<td width="59">
<p>14</p>
</td>
<td width="270">
<p>图形设计（Graphic Design）</p>
</td>
<td width="95">
<p>教室外实践或专业分享</p>
</td>
<td width="161">
<p>WSG8</p>
</td>
</tr>
<tr>
<td width="59">
<p>15</p>
</td>
<td width="270">
<p>SVG与响应式Web设计<br /> ☉<strong>期中在线考查</strong><strong> C</strong></p>
</td>
<td width="95">
<p>教室外实践或专业分享</p>
</td>
<td width="161">
<p>RWD7</p>
</td>
</tr>
<tr>
<td width="59">
<p>16</p>
</td>
<td width="270">
<p>CSS3过渡、变形和动画</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p>WSG9</p>
</td>
</tr>
<tr>
<td width="59">
<p>17</p>
</td>
<td width="270">
<p>☉期末应用项目开发成果展示考查</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p> </p>
</td>
</tr>
<tr>
<td width="59">
<p>18</p>
</td>
<td width="270">
<p>☉期末应用项目开发成果点评总结</p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p> </p>
</td>
</tr>
</tbody>
</table>

定义和用法

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD，table 元素的 "align" 和 "bgcolor" 属性是不被支持的。

可选的属性

| 属性 | 值 | 描述 |
| align |

  • left
  • center
  • right

|

不赞成使用。请使用样式代替。

规定表格相对周围元素的对齐方式。

|
| bgcolor |

  • rgb(x,x,x)
  • #xxxxxx
  • colorname

|

不赞成使用。请使用样式代替。

规定表格的背景颜色。

|
| border | pixels | 规定表格边框的宽度。 |
| cellpadding |

  • pixels
  • %

| 规定单元边沿与其内容之间的空白。 |
| cellspacing |

  • pixels
  • %

| 规定单元格之间的空白。 |
| frame |

  • void
  • above
  • below
  • hsides
  • lhs
  • rhs
  • vsides
  • box
  • border

| 规定外侧边框的哪个部分是可见的。 |
| rules |

  • none
  • groups
  • rows
  • cols
  • all

| 规定内侧边框的哪个部分是可见的。 |
| summary | text | 规定表格的摘要。 |
| width |

  • %
  • pixels

| 规定表格的宽度。 |

全局属性

<table> 标签支持 HTML 中的全局属性。

事件属性

<table> 标签支持 HTML 中的事件属性。

<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。

tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

HTML 与 XHTML 之间的差异

NONE

提示和注释：

注释：<thead> 内部必须拥有 <tr> 标签！

注释：<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。假如您使用 Internet Explorer 5.0 或更新的浏览器，可以在我们的 XML 教程中查看一个例子。

可选的属性

| 属性 | 值 | 描述 |
| align |

  • right
  • left
  • center
  • justify
  • char

| 定义 tbody 元素中内容的对齐方式。 |
| char | character | 规定根据哪个字符来进行文本对齐。 |
| charoff | number | 规定第一个对齐字符的偏移量。 |
| valign |

  • top
  • middle
  • bottom
  • baseline

| 规定 tbody 元素中内容的垂直对齐方式。 |

全局属性

<tbody> 标签支持 HTML 中的全局属性。

事件属性

<tbody> 标签支持 HTML 中的事件属性。

<tr> 标签定义 HTML 表格中的行。

tr 元素包含一个或多个 th 或 td 元素。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，tr 元素的 "bgcolor" 是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中，tr 元素的 "bgcolor" 是不被支持的。

可选的属性

| 属性 | 值 | 描述 |
| align |

  • right
  • left
  • center
  • justify
  • char

| 定义表格行的内容对齐方式。 |
| bgcolor |

  • rgb(x,x,x)
  • #xxxxxx
  • colorname

|

不赞成使用。请使用样式取而代之。

规定表格行的背景颜色。

|
| char | character | 规定根据哪个字符来进行文本对齐。 |
| charoff | number | 规定第一个对齐字符的偏移量。 |
| valign |

  • top
  • middle
  • bottom
  • baseline

| 规定表格行中内容的垂直对齐方式。 |

全局属性

<tr> 标签支持 HTML 中的全局属性。

事件属性

<tr> 标签支持 HTML 中的事件属性。

<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两类单元格：

  • 表头单元 - 包含头部信息（由 th 元素创建）
  • 标准单元 - 包含数据（由 td 元素创建）

td 元素中的文本一般显示为正常字体且左对齐。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，td 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被赞成使用的。

在 XHTML 1.0 Strict DTD 中，td 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被支持的。

提示和注释

提示：请使用 colspan 和 rowspan 属性来实现内容横跨多个行或列。

可选的属性

| 属性 | 值 | 描述 |
| abbr | text | 规定单元格中内容的缩写版本。 |
| align |

  • left
  • right
  • center
  • justify
  • char

| 规定单元格内容的水平对齐方式。 |
| axis | category_name | 对单元进行分类。 |
| bgcolor |

  • rgb(x,x,x)
  • #xxxxxx
  • colorname

|

不赞成使用。请使用样式取而代之。

规定单元格的背景颜色。

|
| char | character | 规定根据哪个字符来进行内容的对齐。 |
| charoff | number | 规定对齐字符的偏移量。 |
| colspan | number | 规定单元格可横跨的列数。 |
| headers | header_cells'_id | 规定与单元格相关的表头。 |
| height |

  • pixels
  • %

|

不赞成使用。请使用样式取而代之。

规定表格单元格的高度。

|
| nowrap | nowrap |

不赞成使用。请使用样式取而代之。

规定单元格中的内容是否折行。

|
| rowspan | number | 规定单元格可横跨的行数。 |
| scope |

  • col
  • colgroup
  • row
  • rowgroup

| 定义将表头数据与单元数据相关联的方法。 |
| valign |

  • top
  • middle
  • bottom
  • baseline

| 规定单元格内容的垂直排列方式。 |
| width |

  • pixels
  • %

|

不赞成使用。请使用样式取而代之。

规定表格单元格的宽度。

| <strong> | 把文本定义为语气更强的强调的内容。 |

实践心得：

HTML代码是编写网页的主要语言，但是由于种类便签等比较繁多，平时用HTML代码编写网站时应该加以验证，避免出错造成巨大的损失

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,390评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,821评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,632评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,170评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,033评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,098评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,511评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,204评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,479评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2赞 335

推荐阅读更多精彩内容

  • 基本办公文书转HTML工具
    标签 标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。 把文本...
    zoe_zh阅读 204评论 0赞 0
  • 基本办公文书转HTML工具
    word档与HTML 课程目标转换代码如下： 二、课程目标 透过混合学习及体验式学习培养学生以下能力： 能...
    胡铖怡阅读 264评论 0赞 0
  • 基本办公文书转HTML工具
    二、课程目标 透过混合学习及体验式学习培养学生以下能力： 能够从 用户体验 框架，描述网页设计与制作主...
    N黄舒婷阅读 233评论 0赞 0
  • 基本办公文书转HTML工具
    本课课程大纲内容与其HTML代码（注明HTML代码来自 https://html-cleaner.com ） 原文...
    我不是吴绮雯阅读 267评论 0赞 2
  • 装修
    免费设计，免费上门量房，无论是店面装修，厂房装修，居家装修，我们随时帮你解忧。
    猜不到猜不透阅读 29评论 0赞 0