网免费下载模板 webslides.tv

懂html的朋友可以信手拈来的好东西，支持电脑和手机版式，而且JS特效已经烂了街了，自己稍稍加工就能做的美轮美奂。要是放在网站服务器上，再也不用拿个U盘倒来倒去，随时随地浏览ppt，相当实用哦。

译自： https://opensource.com/article/18/8/markdown-html-publishing

作者： Peter Cheer

译者： geekpi

用这个有用工具从 Markdown 文件创建一个基础的网站。

有很多理由喜欢 Markdown，这是一门简单的语言，有易于学习的语法，它可以与任何文本编辑器一起使用。使用像 Pandoc 这样的工具，你可以将 Markdown 文本转换为 各种流行格式 ，包括 HTML。你还可以在 Web 服务器中自动执行转换过程。由 TimoDörr 创建的名为 MDwiki 的 HTML5 和 JavaScript 应用可以将一堆 Markdown 文件在浏览器请求它们时转换为网站。MDwiki 网站包含一个操作指南和其他信息可帮助你入门：

在 Web 服务器内部，基本的 MDwiki 站点如下所示：

我将此项目的 MDwiki HTML 文件重命名为 START.HTML。还有一个处理导航的 Markdown 文件和一个 JSON 文件来保存一些配置设置。其他的都是网站内容。

虽然整个网站设计被 MDwiki 固定了，但内容、样式和页面数量却没有。你可以在 MDwiki 站点 查看由 MDwiki 生成的一系列不同站点。公平地说，MDwiki 网站缺乏网页设计师可以实现的视觉吸引力 —— 但它们是功能性的，用户应该平衡其简单的外观与创建和编辑它们的速度和简易性。

Markdown 有不同的风格，可以针对不同的特定目的扩展稳定的核心功能。MDwiki 使用 GitHub 风格 Markdown ，它为流行的编程语言添加了格式化代码块和语法高亮等功能，使其非常适合生成程序文档和教程。

MDwiki 还支持 “gimmick”，它增加了如嵌入 YouTube 视频和显示数学公式等额外功能。如果在某些项目中需要它们，这些值得探索。我发现 MDwiki 是创建技术文档和教育资源的理想工具。我还发现了一些可能不会立即显现出来的技巧和 hack。

当部署在 Web 服务器中时，MDwiki 可与任何现代 Web 浏览器一起使用。但是，如果你使用 Mozilla Firefox 访问 MDwiki，那么就不需要 Web 服务器。大多数 MDwiki 用户会选择在 Web 服务器上部署完整的项目，以避免排除潜在用户，但只需使用文本编辑器和 Firefox 即可完成开发和测试。任何现代浏览器都可以读取加载到 Moodle 虚拟学习环境（VLE）中的完整的 MDwiki 项目，这在教育环境中非常有用。 （对于其他 VLE 软件，这可能也是如此，但你应该测试它。）

MDwiki 的默认配色方案并非适用于所有项目，但你可以将其替换为从 Bootswatch.com 下载的其他主题。为此，只需在编辑器中打开 MDwiki HTML 文件，找到 extlib/css/bootstrap-3.0.0.min.css，然后插入下载的 Bootswatch 主题。还有一个 MDwiki gimmick，让用户在浏览器中载入 MDwiki 后，选择 Bootswatch 主题来替换默认值。我经常与有视力障碍的用户一起工作，他们倾向于喜欢高对比度的主题，在深色背景上使用白色文字。

MDwiki、Markdown 文件和静态图像可以用于许多目的。但是，你有时可能希望包含 JavaScript 幻灯片或反馈表单。Markdown 文件可以包含 HTML 代码，但将 Markdown 与 HTML 混合会让人感到困惑。一种解决方案是在单独的 HTML 文件中创建所需的功能，并将其显示在带有 iframe 标记的 Markdown 文件中。我从 Twine Cookbook 知道了这个想法，它是 Twine 交互式小说引擎的支持站点。Twine Cookbook 实际上并没有使用 MDwiki，但结合 Markdown 和 iframe 标签开辟了广泛的创作可能性。

这是一个例子：

此 HTML 将显示由 Markdown 文件中的 Twine 交互式小说引擎创建的 HTML 页面。

<iframe height="400" src="sugarcube_dungeonmoving_example.html" width="90%"></iframe>

MDwiki 生成的站点结果如下所示：

简而言之，MDwiki 是一个出色的小应用，可以很好地实现其目的。

via: https://opensource.com/article/18/8/markdown-html-publishing

作者： Peter Cheer 选题： lujun9972 译者： geekpi 校对： wxy

本文由 LCTT 原创编译， Linux中国 荣誉推出

点击“了解更多”可访问文内链接

众号【传智播客博学谷】回复关键词：前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料！

一、HTML

1、<image>标签上title属性与alt属性的区别是什么？

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》

2、分别写出以下几个HTML标签：文字加粗、下标、居中、字体

加粗：<b>、<strong>

下标：<sub>

居中：<center>

字体：<font>、<basefont>、参考《HTML标签列表》

3、请写出至少5个html5新增的标签，并说明其语义和应用场景

section：定义文档中的一个章节

nav：定义只包含导航链接的章节

header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

参考《HTML5 标签列表》

4、请说说你对标签语义化的理解？

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。

严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。

在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

6、你知道多少种Doctype文档类型？

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，

Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

7、HTML与XHTML——二者有什么区别

a. XHTML 元素必须被正确地嵌套。

b. XHTML 元素必须被关闭。

c. 标签名必须用小写字母。

d. XHTML 文档必须拥有根元素。

参考《XHTML 与 HTML 之间的差异》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签（header,nav,footer,aside,article,section）

d. 音频、视频API(audio,video)

e. 画布(Canvas) API

f. 地理(Geolocation) API

g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

h. sessionStorage 的数据在页面会话结束时会被清除

i. 表单控件，calendar、date、time、email、url、search

j. 新的技术webworker, websocket等

移除的元素：

a. 纯表现的元素：basefont，big，center, s，strike，tt，u；

b. 对可用性产生负面影响的元素：frame，frameset，noframes；

9、iframe的优缺点？

优点：

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

缺点：

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 页面会增加服务器的http请求

d. 会产生很多页面，不容易管理。

参考《iframe的一些记录》

10、Quirks模式是什么？它和Standards模式有什么区别？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：总体会有布局、样式解析和脚本执行三个方面的区别。

a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

b. 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

c. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用

d. 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

11、请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。

b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。

e. 不够语义

参考《为什么说table表格布局不好？》

12、简述一下src与href的区别

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

公众号【传智播客博学谷】回复关键词：前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料！