html初学者测试代码（适合小白）

立一个文本文档,复制粘贴如下代码.将文件的后缀名改为.html.用谷歌浏览器打开可查看效果

有的效果,可能别的浏览器不支持.

我是阿平,自学编程的小白!大神请绕道!

<!doctype html>

<html>

<head>

<title>爱你的阿平</title>

</head>

<body>

<!-- <p><b>定义粗体文本</b></p>

<p><em>定义着重文字</em></p>

<p><i>定义斜体字</i></p>

<p><small>定义小号字<small></p>

<p><strong>定义重要的文本<strong></p>

<p><ins>定义插入字</ins></p>

<p><del>定义删除字</del></p>

<nav>

<a href="/jquery">JQuery</a>

</nav>

<p>World Wide Web Consortium(W3C)是万维网联盟...</p>

</section>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World,Florida</p>

</aside>

你的浏览器不支持audio元素

</audio>

<br/>

你的浏览器不支持video标签

</video>

<!-- 下载进度:

<br/>

<!-- </svg>

<!-- <svg width="1000" height="1000">

<!-- </svg>

<!-- <svg width="500" height="510">

<line x1="20" y1="20" x2="300" y2="300"

style="stroke:#000000;stroke-linecap:round; stroke-width:20" />

<!-- </svg>

<!-- <svg width="2000" height="500" >

<polyline style="stroke-linejoin:miter; stroke:orange; stroke-width:12; fill=none;"

points="100 100,150 150, 200 100" />

<!-- </svg>

<!-- </svg>

<!-- <svg width="1000" height="1000">

<polygon points="100 100,200 200, 300 0"

style="fill:Cyan; stroke:black;" />

</svg>

<!-- <svg width="1000" height="250">

</rect>

</svg>

<!-- <svg width="500" height="500">

</svg>

<!-- ctx.font="bold 20px Arial;

<!-- ctx.fillText=("阿平加油!",20,40);

</canvas> -->

<br/>

<form>

username:<input type="text" name="username" placeholder="用户名" autofocus required autocomplete="爱你的阿平"/>

</form>

<option value="Internet Explorer">

</datalist>

<img src="http://m.qpic.cn/psb?/V13EM30s1KV4Be/cyuWdaEOm1w7Wj26pxCJ906Tr4iZc6FEBcwEZvRg7Mo!/b/dDIBAAAAAAAA&bo=CAc4BAAAAAARNzM!&rf=viewer_4" width="300" height="200" align="center" alt="思念" border="10"/>

</p>

</div>

<ul>

</ul>

<hr/>

<ol>

</ol>

<hr/>

</body>

</html>

<br>

注意: 有的标签是没有align属性的,本代码中有的align是无效的. 若要测试部分代码的效果,请把"<!--" 删除

于一些前端的样式和js效果，我们非常希望可以将这些代码片段保存起来，然后分享给那些想要使用这些样式特效的人，庆幸的是，网络上已经有很多这样的网站了，今天我们就来盘点一下这些非常好用的网站。

jsfiddle

诞生比较早的一个代码片段网站，它集成了主流的js框架，你可以轻松地在需要使用的时候引入它们，同时它也支持引入外部css链接，通过将html，css,js代码片段分离，让用户有了非常清楚的代码结构，非常方便代码地调试。

它支持登录功能，登录以后，你可以将自己的代码片段进行保存和分享。

JSRUN

一个支持多种编程语言的代码运行网站，你可以保存自己的代码，你可以运行各个常用的编程语言代码，缺点是有时候需要输入验证码，有些功能需要升级vip才能使用。

codepen

和jsfiddle很类似，也是专业的网页编辑器，可以引入js,css,对于html,js,css分为三个窗口进行管理，登录之后可以保存代码片段和分享代码片段。即使不登录，也可以使用它进行临时的代码编辑和测试。

jsbin

也是一款在线代码编辑网站，也是可以编辑html和css，js代码片段，可以引入第三方库，可以引入第三方css，可以查看控制台的输出。

它可以保存截图，可以生成模板，同样也支持代码打包下载。

cssdeck

它提供了很多优秀的代码案例，如果你没有思路或者仅仅只是想欣赏下他人的优秀代码，你可以来这里找到你想要的，类似于jsfiddle,它也是支持html，js，css代码编辑的，它的展示页面看起来很大，非常方便查看。

它的html支持markdown和slime进行处理，它的js支持coffeescript,它的css支持sass,scss,less等。

dabblet

它主要支持的是css代码块的测试，它目前不支持js，它的代码编辑块字体可以非常方便地进行调整。

总结

网上有很多类似的代码编辑网站，如果你感兴趣的话，你也可以去github上查看Plunker等项目开源代码进行分析研究，自行搭建属于自己的代码片段编辑网站。

过一个阶段测试，终于找到两个 markdown 转 html 并实现代码高亮的工具，并以最简代码（几十行）实现了炫酷的展示效果。步骤很少，也很简单，零基础也应该一看就会。往下看吧......，需要安装有Node环境哦！

1 缘起

因为markdown 文档编辑器具有语法简单、文件简洁、标准化、使用广泛等特点，所以一直习惯采用 markdown 编辑器写文章，但仍有一些网站不支持 markdown 编辑器，想尝试将 markdown 转成 html 再发布，采用 Javascript 来实现，尤其想达到 CSDN 博客、简书这样的展示效果。

图1 CSDN 博客 markdown 文章及代码块高亮效果

图2 简书 markdown 文章及代码高亮效果

2 插件选择及应用模式

2.1 插件选择

2.1.1 markdown 转 html 插件

比较常用的 M2H 插件有：

Markdown-it 中文：https://markdown-it.docschina.org/ github：https://github.com/markdown-it/markdown-it
Marked 官网：https://marked.js.org/ github：https://github.com/markedjs/marked

从网上获得的 markdown-it 和 marked 的比较，主要表现在：在性能、使用简单程度、正则解析（中文支持）方面，marked 比较好；在扩展性上，markdown-it 表现则更好一些。由于 markdown 应用比较成熟，而且一般使用也不会太复杂，所以选择性能好、中文支持好的 marked，至于 marked 的扩展性，也尝试了一下，满足常见的应用是没问题的。

2.1.2 代码块高亮模块

代码块高亮插件有：

heiglightjs 官网：https://highlightjs.org/ github：https://github.com/highlightjs/highlight.js
prismjs 官网：https://prismjs.com/ github：https://github.com/PrismJS/prism

对 heiglightjs 和 prismjs 分别做了简单测试，发现 prismjs 使用非常简单，易于上手，且代码精简，效率高，而 heiglightjs 相对比较复杂，使用起来不习惯，也许是各人喜好不同吧。所以选择使用 prismjs 插件。

2.2 插件应用模式

M2H 一般有两种应用模式：一种是前端渲染，如在 vue 中使用；另一种是在后端生成 html 文件，在浏览器展示，如在 node 中使用。此处我选择在 node 中生产静态 html 文件的应用模式，用户可以在电脑端当作 markdown 转 node 的工具使用；至于前端渲染，vue 页面打包时总会包含一个 chunk-vendors.js 文件，会引起页面加载变慢，有很多办法压缩该文件，但这已经超出了 M2H 的范畴了，在此不再赘述。

3 计划实现的功能

读取指定 mardown 文件（test.md），生成目标 html 文件（test.html）——测试 marked 插件解析及渲染功能
html 文件根据代码块对应的语言进行高亮显示——测试 prismjs 插件的 language 语言包功能
html 文件实现显示语言名称、“复制”按钮、行号——测试 prismjs 插件的 Plugins 功能
自定义代码块的显示样式修改——测试拓展功能
最终实现的界面如下图：

图3 最终实现的markdown 转化及代码块渲染效果

4 编码实现

4.1 准备工作

4.1.1 创建项目

创建目录：marked-prismjs，使用 vsCode 打开该目录。

4.1.2 安装插件

在 vsCode 里的终端输入相关命令进行插件安装 1）安装 marked 插件

npm install marked --save

2）安装 prismjs

npm install prismjs --save

4.1.3 下载 prismjs 的 css 和 js 文件

访问官网下载页：https://prismjs.com/download.html

按下图选择 themes，我比较喜欢“Tomorrow Night” 这个主题，您可以根据自己的喜好选择

图4 themes 选项

Languages 选项，默认即可，如下图，其中包含 CSS、Javascript 语言

图5 编程语言包选项

Plugins 选项，可以根据功能需要选择，此处选择4个选项，依次为：行号、显示语言名称、工具条、复制到剪贴板的按钮，如下图：

图6 插件选项

分别点击下图的“DOWNLOAD JS”和“DOWNLOAD CSS”按钮下载 prism.js 和 prism.css 到项目根目录下。

4.1.4 编写 markdown 测试文件

编写 markdown 测试文件：test.md，内容如下：

# 这是H1标签

## 下面是 javascript 代码：

```javascript let a = 1; console.log(a); ```

4.2 编写实现转换功能的 js 文件

创建 m2h.js 文件，内容为：

const { marked } = require('marked') // 引入 marked 模块
const prism = require('prismjs') // 引入 prism 模块
const fs = require('fs') // 引入文件处理模块
const mdContent = fs.readFileSync('test.md', 'utf-8') // 读取 markdown 文件内容
// 下面是 marked 扩展功能，当节点（token）类型是代码（code）时，自定义渲染节点功能，及使用自定义的 renderer 函数来代替默认 renderer 函数，达到改写当前节点生成的 html 代码的样式
marked.use({
    extensions: [{
        name: 'code',   
        renderer(token) {
            if (token.type === 'code') {
                let codeHtml = `<pre class="language- round"><code class="language-`+token.lang+` line-numbers">`
                codeHtml+=Prism.highlight(token.text, Prism.languages.javascript, 'javascript')
                codeHtml+=`</code></pre>`
                return codeHtml
            }
        }
    }]
})
// 定义 html 文件头部代码
var htmlContent=`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="prism.css">
    <script src="prism.js"></script>
</head>
<style>
  .round {
    box-shadow: 10px 10px 5px #888888;
    border-radius: 10px;
  }
</style>
<body>
`
htmlContent += marked.parse(mdContent) // 叠加上 marked 生成的 html 代码
htmlContent+=`</body> // 叠加底部代码（补齐）
</html>`
fs.writeFileSync('test.html', htmlContent) // 将最终的 html 内容写入到文件 test.html

测试运行：

node m2h.js

每运行一次，就会重新生成新的 test.html 文件。

在 vsCode 里鼠标右键点击 test.html 文件，选择“Open with Live Server”，

图7 Open with LiveServer

会在浏览器里打开 test.html 页面，test.md 已经成功生成了 test.html，实现了代码块高亮、语言显示及拷贝按钮及行号。得到的最终结果如下图：

图8 效果展示

达到了当初计划实现的功能需求。

5 总结

以上通过简单的几十行代码就实现了如此炫酷的功能展示，体现了插件的强大功能，同时通过自定义扩展节点渲染函数，也展现了插件的灵活性和可扩展性。此次测试仅仅是个引子，后续会继续进行研究和测试，感兴趣请收藏、关注，方便共同学习、进步。

在线咨询

上一篇：css零基础自学教程（七）css链接样式，自定鼠标样式
下一篇：JavaScript 基本变量语法的使用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html初学者测试代码（适合小白）

jsfiddle

JSRUN

codepen

jsbin

cssdeck

dabblet

总结

1 缘起

2 插件选择及应用模式

2.1 插件选择

2.1.1 markdown 转 html 插件

2.1.2 代码块高亮模块

2.2 插件应用模式

3 计划实现的功能

4 编码实现

4.1 准备工作

4.1.1 创建项目

4.1.2 安装插件

4.1.3 下载 prismjs 的 css 和 js 文件

4.1.4 编写 markdown 测试文件

4.2 编写实现转换功能的 js 文件

5 总结

您的项目需求