html最简单的代码;html好玩的简单代码 收藏 0

小白初学—神奇的HTML

今天我们一起来了解下HTML，

首先HTmL包含三层结构，分别是结构层，表现层，行为层。

结构层：html => 网页上有什么，比如说文字啊、按钮啊、图片啊等等。

表现层：css => 显示成什么样子，比如说文字的大小啊，位置啊，颜色啊等等。

行为层：JavaScript => 具体怎么操作，比如说点击按钮让图片放大缩小等等。

===============================

在了解了html的三层结构之后，我们来学习如何写html。html不是编程语言，它是一套标签。最简单的html文本是下图1这个样子。我们可以在电脑桌面上新建一个记事本文件，然后把后缀名改一下（.txt=>.html），把这段标签代码粘贴到html文件里，这样一个空白的网页就做成了。如果需要在网页上添加内容，我们只需要在第10行的位置添加各种各样的标签即可。比如我在图二添加了一个按钮标签和一段文字标签，双击html文件，页面上就从左到右，从上到下显示对应的内容。是不是很简单。我们日常浏览的网页都是这样一个标签一个标签画上去的。

我给大家总结了一张图，基本上覆盖了工作中常用的知识点。同时分享几个小技巧。

1.最简单的网页写成什么样子，也就是html模板不需要记忆，下图也说了，去百度下载一个VSCode软件（类似于记事本，是现在主流的前端代码编辑器），用它打开我们的html文件，输入英文叹号回车就自动生成了，学编程不要死记硬背。

2.控件的标签不需要记忆，直接百度html XXX标签，例如：百度搜“html按钮标签”，他就会告诉我们是<button>，用的时间长了自然就记住了。是不是省力。

3.标签的属性很重要，可以不去记他的写法，因为写可以百度，重要的是你需要记住标签有什么属性，下图的属性记住足矣。为什么要记呢，因为工作中，有的时候会遇到这样一种情况，明明设置一个属性可以完成的功能，我们不知道，花费了大力气用css和js去实现，结果还存在着特定场合的bug，让人很无奈。

4.对于html还有两个标签<canvas>和<svg>，他们是用来绘图的，做特殊效果的。我们可以先跳过，等框架啥的都学完了，有兴趣，学习一下。

5.给大家推荐一个小白学习html的网站，w3cschool，图里不明白的可以去上边学学练练。

6.如果觉得一个人学习前端有难度，我建了一个小白前端学习交流群，可以私聊我，大家在群里多多交流，我会经常给大家答疑，组织大家练习，一起做小项目。有方向，少走弯路。

推荐6个又好用又免费的在线代码编辑器

大家好，我是 Echa。

前段时间，老铁们私信我有么有又免费又好用的在线代码编辑器，最近找了找。终于找到了。给老铁们安排上。创作不易，喜欢的老铁们转发加个关注，点个赞，速速收藏，谢谢！

今天来推荐六个好用又免费的在线代码编辑器！

在线地址：https://codesandbox.io/

CodeSandbox 是一个在线代码编辑器，主要用于创建 Web 应用项目，其提供了多种模块：

CodeSandbox 为前端开发提供了完整的代码编辑器体验和沙盒环境。其包含了很多实用功能：

• Npm 支持：可以添加几乎任何 npm 上可用的包；
• 支持 TypeScript、热更新、GitHub 导出、静态文件托管等；
• 使用 Monaco 编辑器构建，Monaco 是为 VSCode 的提供支持的代码编辑器，有很多相似的体验；
• 集成的 DevTools、linting、错误覆盖、测试框架 (Jest)等；
• 强大的 CLI 可以直接将本地项目导入 CodeSandbox。

在线地址：https://codepen.io/

CodePen 是一个在线的HTML、CSS 和 JavaScript 代码编辑器，能够编写代码并即时预览效果，可以利用它来构建和分享代码。CodePen 支持使用 Less、Sass、PostCSS 等来编写CSS。CodePen 不仅是一个在线编辑器，还是一个庞大的前端社区，上面有来自全球开发者分享的各种各样炫酷的效果，并且这些代码都是开源和共享的。

在线地址：https://stackblitz.com/

Stackblitz 和 VSCode 非常像，使用简单可以一键创建 React、Vue、Vanilla、RxJS、TypeScript、Angular 等项目：

Stackblitz 具有以下特性：

• 在浏览器中集成了一个 Dev Server，在离线的情况下仍然可以进行开发；
• 除了支持前端项目外，还支持在浏览器中运行 Node.js 环境；
• 支持连接 GIthub 仓库，可以直接将代码 push 到 Github 上，也可以拉取 Github 项目进行查看和编辑；
• 所有应用程序都会自动部署在其服务器上。

在线地址：http://jsfiddle.net/

JSFiddle 是一个在线代码编辑器，允许用户在单个页面上编辑和运行 HTML、JavaScript 和 CSS 代码。JSFiddle 使用 CodeMirror 构建，其提供了多游标、语法高亮、语法验证（linter）、大括号匹配、自动缩进、自动完成、代码/文本折叠、搜索和替换以协助开发人员的操作。JSFiddle 被广泛用于共享简单的测试和演示。

在线地址：https://jsbin.com/

JS Bin 是一个开源的协同 web 开发调试工具。主要用于帮助测试 JavaScript 和 CSS 的代码片段，功能与 jsFiddle 类似。可以实时分享在 JS Bin 中输入的内容，在任何平台上的任何设备上查看 JS Bin 的输出，都是实时更新的。

在线地址：https://code.juejin.cn/

码上掘金是一个为广大开发者提供代码在线 Playground 的平台，具备轻量简单、易使用、现代标准、模块化、实时编辑，所见即所得等特性。内置了 ES Modules 支持，并且支持 React、Vue 等流行前端框架。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com