一.课程目标:透过混合学习及体验式学习培养学生以下能力：
(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 表格中的行。
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代码编写网站时应该加以验证，避免出错造成巨大的损失
网友评论