基本办公文书转HTML工具

一，课程大纲html

<p><strong>二、课程目标</strong></p>
<p>透过混合学习及体验式学习培养学生以下能力：</p>
<ul>
<li>能够从<strong>用户体验</strong>框架，描述网页设计与制作主要概念，包括页面结构、网站结构、界面设计、图形设计及图像和视频等</li>
<li>能熟悉产业标准生态，活用<strong>HTML5</strong>及<strong>CSS3</strong>的产业技术标准</li>
<li>能描述<strong>响应式网页设计</strong>的功能、特征及技术实践常用标准作法</li>
<li>能运用设计与制作<strong>工具</strong>及区分工具<strong>使用</strong><strong>情境</strong></li>
<li>能认识相关<strong>实践社群</strong>及学科，习得最佳实践及技巧的更新途径</li>
</ul>
<p><strong>四、教学进度计划表</strong></p>
<p>说明：<strong>教学活动</strong>除有额外说明，均为混合学习及体验式学习</p>
<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>页面制作案例一 ☉<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设计 ☉<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>
<tr>
<td width="59">
<p>19</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>20</p>
</td>
<td width="270">
<p><strong> </strong></p>
</td>
<td width="95">
<p> </p>
</td>
<td width="161">
<p> </p>
</td>
</tr>
</tbody>
</table>
<p> </p>

二，出现的标签

1.<p>标签定义和用法

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

2.<strong>定义和用法

<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。

浏览器通常会以不同于 <em> 标签的方式来显示 <strong> 标签中的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开来了。

如果常识告诉我们应该较少使用 <em> 标签的话，那么 <strong> 标签出现的次数应该更少。如果说用 <em> 标签修饰的文本好像是在大声呼喊，那么用 <strong> 标签修饰的文本就无异于尖叫了。沉默寡言的人说出的话总是一诺千金，与此相同，限制 <strong> 的使用可以令应该更加引人注意，而且更加有效。

举一个例子，经常访问 W3school 的用户可以注意到了，许多教程页面的第一句摘要都是以粗体显示的，而实际上，我们对这一句摘要使用了 <strong> 标签。使用这个标签的理由是，我们认为教程摘要不仅概括了其所在页面的内容，而且位于页面的最重要的位置，其内容自然是非常重要的且值得强调的。

3.<ul>定义和用法

<ul> 标签定义无序列表。

4.<li>定义和用法

<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

5.<td>定义和用法

<td> 标签定义 HTML 表格中的标准单元格。
HTML 表格有两类单元格：
表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）
td 元素中的文本一般显示为正常字体且左对齐。

6.<tbody>定义和用法

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

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

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

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

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

7.<table>定义和用法

<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

8.<tr>## 定义和用法

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

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

三，新媒体关键词html

<p><strong>新媒体关键词</strong></p>
<p><strong>1.</strong><strong>众包：众包指的是一个公司或机构把过去由员工执行的工作任务，以自由自愿的形式外包给非特定的（而且通常是大型的）大众网络的做法。</strong></p>
<p><strong> </strong></p>
<p><strong>2.</strong><strong>外包：外包是指企业动态地配置自身和其他企业的功能和服务，并利用企业外部的资源为企业内部的生产和经营服务。</strong></p>
<p><strong> </strong></p>
<p><strong>3.</strong><strong>众筹：由发起人、跟投人、平台构成。具有低门槛、多样性、依靠大众力量、注重创意的特征，是指一种向群众募资，以支持发起的个人或组织的行为。一般而言是透过网络上的平台连结起赞助者与提案者。</strong></p>
<p><strong> </strong></p>
<p><strong>4.UGC:</strong> <strong>即用户将自己原创的内容通过互联网平台进行展示或者提供给其他用户。用户兼为消费者和内容生产者。</strong></p>
<p><strong> </strong></p>
<p><strong>5.</strong><strong>新媒体下的盈利模式：</strong></p>
<ol>
<li><strong>信息出售</strong></li>
<li><strong>IP</strong><strong>，社群经济，粉丝经济</strong></li>
<li><strong>电子商务</strong></li>
<li><strong>增值服务</strong></li>
<li><strong>知识经济</strong></li>
<li><strong>广告</strong></li>
</ol>
<p><strong> </strong></p>
<ol start="6">
<li><strong>避风港原则是指在发生著作权侵权案件时，当网络服务提供商只提供空间服务，并不制作网页内容时，如果网络服务提供商被告知侵权，则有删除的义务，否则就被视为侵权。</strong></li>
</ol>
<p><strong>  </strong><strong>如果侵权内容既不在网络服务提供商的服务器上存储，又没有被告知哪些内容应该删除，则网络服务提供商不承担侵权责任。</strong></p>
<p><strong> </strong></p>
<ol start="7">
<li><strong>红旗原则是避风港原则的例外适用。“红旗”原则是指如果侵犯信息网络传播权的事实是显而易见的，就像红旗飘扬一样明显，网络服务提供商就不能装作看不见，或以不知道侵权的理由来推脱责任。</strong></li>
</ol>
<p><strong>如果在这样的情况下不移除链接的话，就算权利人没有发出过通知，也应该认定设链者知道第三方是侵权的。</strong></p>
<p><strong> </strong></p>
<p><strong>8.</strong><strong>智媒：</strong></p>
<p><strong>“智媒”也可以称为“智能化媒体”，是人工智能与媒体的结合与变革，其主要特征是：</strong></p>
<p><strong> </strong></p>
<p><strong>万物皆媒：过去的媒体是以人为主导的媒体，而未来，机器及各种智能物体都有媒体化可能。</strong></p>
<p><strong> </strong></p>
<p><strong>人机合一：智能化机器、智能物体将与人的智能融合，共同作用，构建新的媒体业务模式。</strong></p>
<p><strong> </strong></p>
<p><strong>自我进化：人机合一的媒介具有自我进化的能力，机器洞察人心的能力、人对机器的驾驭能力互为推进</strong></p>
<p><strong> </strong></p>
<p><strong>9.</strong><strong>网络媒介素养：</strong></p>
<p><strong>或称“网络素养”，它的“新”，不仅指接触、理解、参与、使用、批判和创造的对象是全新质态的媒介，而且指针对这些新媒介技术的掌控和运用的能力，对内容的生产与消费能力，对海量信息的理解与判断能力，对现实与虚拟空间的传播与应对能力，对人与人、人与社会的交往与参与能力等，这是在人与新媒体关系中体现出来的素养。</strong></p>
<p><strong> </strong></p>
<p><strong>10.</strong><strong>网民素养：</strong></p>
<p><strong>“网民素养”是指上网者在接收、发送、传播信息时综合呈现的能力与素质，包括价值观、态度或心境等的修习涵养。</strong></p>
<p><strong>生产，包括负责地发布信息和言论的素养，负责地进行信息再传播的素养。</strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong>11.UGC</strong><strong>新闻模式：</strong></p>
<p><strong>媒介组织挖掘或利用社会性媒体用户所生产的信息内容为自身服务，降低采编成本的新闻生产模式。</strong></p>
<p><strong> </strong></p>
<p><strong>12.</strong><strong>众包新闻</strong><strong>模式：</strong></p>
<p><strong> </strong></p>
<p><strong>       </strong><strong>众包新闻</strong><strong>是指媒体通过自身网站和社交媒体平台将新闻生产的任务分配给公众，鼓励公众发挥自身智慧、知识和创造力帮助记者完成新闻的报道。</strong></p>
<p><strong> </strong></p>
<p><strong>13.</strong><strong>媒介融合：</strong></p>
<p><strong>狭义的概念是指将不同的媒介形态“融合”在一起，产生“质变”，形成一种新的媒介形态，如电子杂志、博客新闻、融合新闻等等；</strong></p>
<p><strong>广义的“媒介融合”则范围广阔，包括一切媒介及其有关要素的结合、汇聚甚至融合，不仅包括媒介形态的融合，还包括媒介功能、传播手段、所有权、组织结构等要素的融合。</strong></p>
<p><strong>14.</strong><strong>舆论：</strong></p>
<p><strong>舆论是公众关于现实社会以及社会中的各种现象、问题所表达的信念、态度、意见和情绪表现的总和，具有相对的一致性（有一定数量规模）、强烈程度和持续性，对社会发展及有关事态的进程产生影响，其中混杂着理智和非理智的成分。</strong></p>
<p><strong>15.</strong><strong>知识鸿沟：</strong></p>
<p><strong>社会经济条件好的人比差的人以更快的速度获取信息，因此两类人之间的知识沟扩大了，而不是缩小了；</strong></p>
<p><strong>一段时间内媒介大量宣传某话题，文程度高的人比低的人更快吸取该话题的知识；</strong></p>
<p><strong>在人人感兴趣的领域，知识沟特别容易出现；而在某些基于兴趣的特定领域，知识沟出现的可能就较小。</strong></p>
<p><strong> </strong></p>
<p><strong>16.</strong><strong>网络舆论分析:</strong></p>
<p><strong>是指整合互联网信息采集技术及信息智能处理技术，通过对互联网海量信息自动抓取、自动分类聚类、主题检测、专题聚焦，实现用户的网络舆情监测和新闻专题追踪等信息需求，形成简报、报告、图表等分析结果，为客户全面掌握群众思想动态，做出正确舆论引导，提供分析依据。</strong></p>
<p><strong> </strong></p>
<p><strong>17.</strong><strong>新闻客户端未来发展趋势：</strong></p>
<p><strong>1.</strong><strong>领先者高筑门槛</strong></p>
<p><strong>2.</strong><strong>用户体验将成主战场</strong></p>
<p><strong>3.</strong><strong>争夺自</strong><strong>媒体资源</strong></p>
<p><strong>4.</strong><strong>增加原创内容比例</strong></p>
<p><strong>5.</strong><strong>“新闻客户端+”将成新趋势</strong></p>
<p><strong>6.</strong><strong>盈利模式多样化</strong></p>
<p><strong> </strong></p>
<p><strong>18.</strong><strong>自媒体：</strong></p>
<p><strong> </strong><strong>自媒体(外文名：We Media)又称“公民媒体”或“个人媒体”，是指私人化、平民化、普泛化、自主化的传播者，以现代化、电子化的手段，向不特定的大多数或者特定的单个人传递规范性及非规范性信息的新媒体的总称。自媒体平台包括：博客、微博、微信、百度官方贴吧、论坛/BBS等网络社区。</strong></p>
<p><strong> </strong></p>
<p><strong>19.</strong><strong>马太效应：</strong></p>
<p><strong>马太效应（Matthew Effect），指强者愈强、弱者愈弱的现象，广泛应用于社会心理学、教育、金融以及科学领域。马太效应，是社会学家和经济学家们常用的术语，反映的社会现象是两极分化，富的更富，穷的更穷。</strong></p>
<p><strong> </strong></p>
<p><strong>20.</strong><strong>数字鸿沟：</strong></p>
<p><strong> </strong><strong>数字鸿沟又称为"信息鸿沟"，即“信息富有者和信息贫困者之间的鸿沟”。</strong></p>
<p><strong> </strong></p>

具体方法

image.png

打开你所需要的文本


image.png

将你要的文本存为htm格式


image.png

打开改文本并查看
image.png

四，实践对比及心得体会

课程大纲的文本内容更加丰富，因此它的HTML格式也比新媒体关键词要复杂。通过这次的作业，我学习到了很多HTML标签的具体作用以及RWD的三项基本科技和基本理念，对于响应式网页设计也有了更深入的认识。希望在接下来的网页设计课程中能够学习到更多有用的知识。

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

推荐阅读更多精彩内容

  • 基本办公文书转HTML工具
    一.课程目标:透过混合学习及体验式学习培养学生以下能力： (1) 能够从用户体验框架，描述网页设计与制作主要概念，...
    人群是那么像羊群阅读 475评论 0赞 1
  • 基本办公文书转HTML工具
    "标签"记录 标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。...
    YAKAMOZ_bced阅读 159评论 0赞 0
  • 基本办公文书转HTML工具
    二、课程目标 透过混合学习及体验式学习培养学生以下能力： 能够从 用户体验 框架，描述网页设计与制作主要概...
    辛土易木阅读 322评论 0赞 0
  • 基本办公文书转HTML工具
    标签 标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。 把文本...
    zoe_zh阅读 206评论 0赞 0
  • 我使用的加密货币交易所
    本文由币乎社区（bihu.com）优质内容计划支持 最近很多新手刚入币圈, 只知道一两个交易所, 很多朋友总是问我...
    Penny_a0f9阅读 2,242评论 0赞 0