使用 https://html-cleaner.com 将本课课程大纲之以下内容拷贝贴上，得出HTML代码
原文
二、课程目标
透过混合学习及体验式学习培养学生以下能力：
(1)能够从用户体验框架，描述网页设计与制作主要概念，包括页面结构、网站结构、界面设计、图形设计及图像和视频等
(2)能熟悉产业标准生态，活用HTML5及CSS3的产业技术标准
(3)能描述响应式网页设计的功能、特征及技术实践常用标准作法
(4)能运用设计与制作工具及区分工具使用情境
(5)能认识相关实践社群及学科，习得最佳实践及技巧的更新途径
对应HTML代码
<p><strong>二、课程目标</strong></p>
<p>透过混合学习及体验式学习培养学生以下能力：</p>
<ul>
<li>能够从<strong><strong>用户体验</strong></strong>框架，描述网页设计与制作主要概念，包括页面结构、网站结构、界面设计、图形设计及图像和视频等</li>
<li>能熟悉产业标准生态，活用<strong><strong>HTML5</strong></strong>及<strong><strong>CSS3</strong></strong>的产业技术标准</li>
<li>能描述<strong><strong>响应式网页设计</strong></strong>的功能、特征及技术实践常用标准作法</li>
<li>能运用设计与制作<strong><strong>工具</strong></strong>及区分工具<strong><strong>使用</strong></strong><strong><strong>情境</strong></strong></li>
<li>能认识相关<strong><strong>实践社群</strong></strong>及学科，习得最佳实践及技巧的更新途径</li>
</ul>
原文
四、教学进度计划表
说明：教学活动除有额外说明，均为混合学习及体验式学习
| 周次 | 课程要点 | 教学活动 | 阅读资料 |
|---|---|---|---|
| 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与响应式 | RWD34 | |
| 9 | CSS3新特性 | RWD5 | |
| 10 | ☉期中考查 B | ||
| 11 | 网站结构（Site Structure） | WSG5 | |
| 12 | CSS3高级技术 | RWD6 | |
| 13 | 介面设计（Interface Design） | 教室外实践或专业分享 | WSG7 |
| 14 | 介面设计（Interface Design） | 教室外实践或专业分享 | WSG8 |
| 15 | SVG与响应式Web设计 ☉期中在线考查 C | 教室外实践或专业分享 | RWD7 |
| 16 | CSS3过渡、变形和动画 | WSG9 | |
| 17 | ☉期末应用项目开发成果展示考查 | ||
| 18 | ☉期末应用项目开发成果点评总结 | ||
| 19 | |||
| 20 |
对应HTML代码
<p>四、教学进度计划表</p>
<p>说明：教学活动除有额外说明，均为混合学习及体验式学习</p>
<table style="height: 328px;" width="559">
<tbody>
<tr style="height: 42px;">
<td style="width: 138.667px; height: 42px;">周次</td>
<td style="width: 140.667px; height: 42px;">
<p><strong>课程要点</strong></p>
</td>
<td style="width: 139.333px; height: 42px;">教学活动</td>
<td style="width: 139.333px; height: 42px;">阅读资料</td>
</tr>
<tr style="height: 32px;">
<td style="width: 138.667px; height: 32px;">1</td>
<td style="width: 140.667px; height: 32px;">网页设计与制作与工具介绍</td>
<td style="width: 139.333px; height: 32px;"> </td>
<td style="width: 139.333px; height: 32px;">
<p>RWD1</p>
</td>
</tr>
<tr style="height: 32px;">
<td style="width: 138.667px; height: 32px;">2</td>
<td style="width: 140.667px; height: 32px;">从用户体验切入响应式设计实践</td>
<td style="width: 139.333px; height: 32px;"> </td>
<td style="width: 139.333px; height: 32px;">
<p>RWD2, WSG0</p>
</td>
</tr>
<tr style="height: 32px;">
<td style="width: 138.667px; height: 32px;">3</td>
<td style="width: 140.667px; height: 32px;"> HTML基本元素：码云Pages搭建</td>
<td style="width: 139.333px; height: 32px;"> </td>
<td style="width: 139.333px; height: 32px;"> w3school, 码云Pages</td>
</tr>
<tr style="height: 32px;">
<td style="width: 138.667px; height: 32px;">4</td>
<td style="width: 140.667px; height: 32px;"> 页面结构（Page Structure）</td>
<td style="width: 139.333px; height: 32px;"> </td>
<td style="width: 139.333px; height: 32px;"> WSG6</td>
</tr>
<tr style="height: 32px;">
<td style="width: 138.667px; height: 32px;">5</td>
<td style="width: 140.667px; height: 32px;"> 页面制作案例一<br />☉期中在线考查 A</td>
<td style="width: 139.333px; height: 32px;"> 教室外实践或专业分享</td>
<td style="width: 139.333px; height: 32px;"> WP2,WSG4,DMMT</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">6</td>
<td style="width: 140.667px; height: 33px;"> 图像和视频（Images&Video）</td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;"> WSG11, 12</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">7</td>
<td style="width: 140.667px; height: 33px;"> 弹性布局与响应式图片</td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;"> RWD3</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">8</td>
<td style="width: 140.667px; height: 33px;"> HTML5与响应式</td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;"> RWD4</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">9</td>
<td style="width: 140.667px; height: 33px;">CSS3新特性</td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;">RWD5</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">10</td>
<td style="width: 140.667px; height: 33px;">☉期中考查 B</td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;"> </td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">11</td>
<td style="width: 140.667px; height: 33px;">网站结构（Site Structure） </td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;">WSG5</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">12</td>
<td style="width: 140.667px; height: 33px;">CSS3高级技术</td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;">RWD6</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">13</td>
<td style="width: 140.667px; height: 33px;">介面设计（Interface Design）</td>
<td style="width: 139.333px; height: 33px;">教室外实践或专业分享</td>
<td style="width: 139.333px; height: 33px;">WSG7</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">14</td>
<td style="width: 140.667px; height: 33px;">图形设计（Graphic Design）</td>
<td style="width: 139.333px; height: 33px;">教室外实践或专业分享</td>
<td style="width: 139.333px; height: 33px;">WSG8</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">15</td>
<td style="width: 140.667px; height: 33px;">
<p>SVG与响应式Web设计☉期中在线考查C</p>
</td>
<td style="width: 139.333px; height: 33px;"> 教室外实践或专业分享</td>
<td style="width: 139.333px; height: 33px;">RWD7</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">16</td>
<td style="width: 140.667px; height: 33px;">CSS3过渡、变形和动画</td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;">WSG9</td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">17</td>
<td style="width: 140.667px; height: 33px;">☉期末应用项目开发成果展示考查</td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;"> </td>
</tr>
<tr style="height: 33.3334px;">
<td style="width: 138.667px; height: 33.3334px;">18</td>
<td style="width: 140.667px; height: 33.3334px;">☉期末应用项目开发成果点评总结</td>
<td style="width: 139.333px; height: 33.3334px;"> </td>
<td style="width: 139.333px; height: 33.3334px;"> </td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">19</td>
<td style="width: 140.667px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;"> </td>
</tr>
<tr style="height: 33px;">
<td style="width: 138.667px; height: 33px;">20</td>
<td style="width: 140.667px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;"> </td>
<td style="width: 139.333px; height: 33px;"> </td>
</tr>
</tbody>
</table>
以上"标签"在HTML 参考手册查找其功能类别及描述
| 标签 | 描述 |
|---|---|
| <p> | 定义段落。 |
| <strong> | 定义语气更为强烈的强调文本。 |
| <ul> | 定义无序列表。 |
| <li> | 定义列表的项目。 |
| <table> | 定义表格 |
| <tbody> | 定义表格中的主体内容。 |
| <tbody> | 定义表格中的主体内容。 |
| <style> | 定义文档的样式信息。 |
其他WORD文书转换HTML格式的方法和结果比较
方法：把word文档另存为网页类型，转换的出HTML格式
结果如图：
html.png
源代码.png
比较：使用 https://html-cleaner.com能得出清晰易懂的html代码，但是较为简单；把word文档另存为网页类型而转换的出HTML格式，右键查看源代码，可以发现代码更为多样复杂。
实践心得
- 在查找名词解释时，翻阅了多次书籍，并到各大搜索引擎上进行了查找，出现在书本的名词有的很容易就可以找到，但有的花费较长时间；一个名词可以有不同的称呼,搜索时可以进行名词转换。
- 学会运用statcounter进行数据调查。
- 在搜索使用响应式网页设计和没有使用响应式网页设计网站的过程中，稍微了解了一些中国响应式网页设计的历程，并发现一些如http://www.qifeiye.com/响应式自助建站平台；不少高校的官网也使用了响应式网页设计，而京东、天猫等大型购物网站却没有使用RWD。
- 在使用基本办公文书转HTML工具的过程中，知道了一些HTML代码的意义。
- 总的来说，实践的过程就是收获的过程，或多或少都可以在实践中得到一些以前不会的知识。
网友评论