整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
今天，前端工程师已经成为研发体系中的重要岗位之一。
可是与此相对的是，极少大学的计算机专业愿意开设前端课程，大部分前端工程师的知识，也都是在实践和工作中不断学习的。
最近收到很多同学的后台留言，说希望多推出一些前端方向的教程。
今天我们就带来一门适合前端初学者的课程，可以带你从零入门 HTML、CSS、JS、React 等前端核心技能，并创建一个待办事项的管理应用～
项目效果：
课程从最基础的 HTML/ CSS/JS 讲起，还包含了 TypeScript/React/Fabric 等常用技能的讲解。由浅入深，层层递进，如果你想快速上手 React 框架，这门课会是你非常好的选择。
访问“实验楼”官网，搜索“从 0 到 1 构建待办事项应用”就能学习全部课程内容。
以下是课程第一节的内容 —— 「HTML 简介」，带你快速入门HTML，让我们一起进入前端的大门看看吧：
「HTML 简介」
本实验是对 HTML 进行学习，并且较详细的说明了 Web 是如何工作的。主要内容有：HTML 常见标签、HTML 文档结构、HTML 表格和表单、HTML 有序列表和无序列表。通过本节学习，可以构建简单的 HTML 网页。
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。
下面我们来演示用户是如何看到一个网页显示的。
具体来讲：
首先我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML 简介</title>
<meta charset="utf-8" />
</head>
<body></body>
</html>这是一个 HTML 的基本骨架，我们将逐步介绍这些是什么意思。
文档类型声明
<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。
html 标签
html 标签即根元素，此处表示文档的开始，该标签包含两个子标签：head 和 body。
head 元素
head 标签下面所包含的标签由 title、meta、link、style、script 等（后面会讲到）。
title 标签
作用：设置文档的标题或者名称。浏览器通常将该标签的内容显示在窗口顶部或者标签页上。每个 HTML 文档只能有一个，必须有一个 title 标签。
meta 标签
<metacharset="UTF-8"> 声明字符的编码格式为 utf-8。
body 标签
body 标签定义文档的主体，也就是我们的主要内容（比如文本、超链接、图像、表格和列表等）。
1.h 系类标签
h 标签有六种 h1，h2，h3，h4，h5，h6，它代表着我们的标题。
<!DOCTYPE html>
<html>
<head>
<title>HTML 简介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
</html>为了大家能更有效的学习，请使用实验楼的环境。首先我们新建一个文件，点击 File，然后 New File，命名为 index.html。
然后输入上面的代码。
让我们来看一下运行效果吧。鼠标右键 index.html 文件，点击 Open With，然后点击 Preview。
最终效果为：
2.p 标签
p 标签是我们的文本标签，p 标签会自动在其两个标签之间创建一些空白。删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。
<p>我是第一段文字，实验楼，做实验，学编程</p>
<p>我是第二段文字，实验楼，做实验，学编程</p>3. 图片标签
HTML 的图像是通过标签 <img> 来定义的。语法: <imgsrc="图片地址"/> 删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。
<p>实验楼图片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />4.a 标签
<a> 标签是超链接标签，意思就是我们点击它可以跳转到一个网页。删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。
<a href="https://www.shiyanlou.com/">实验楼</a>点击文字：
跳转到指定网页：
篇幅有限，后续的课程内容，请在“实验楼”边敲代码边学习～
访问“实验楼”官网，搜索“从 0 到 1 构建待办事项应用”，就能找到课程，继续学习啦！
多人都想有自己的网站，奈何不知道不知道该从何下手，总认为必须要懂得计算机技术，会写代码，懂得前端的设计。其实，在如今智能化的大环境下，不必这么复杂就可以完成网站搭建，只要选对建站工具，自己建网站无需基础，也可以很快搞定。看到这里是不是还是一头雾水无从下手呢？跟着我看完这篇文章，保证建网站不会再为难到你。
首先，我们需要选择一个强大的工具，乔拓云是非常全面并且好用的建站工具，登录后即可进入后台，选择【企业网站】模块，开始网站搭建。
我们可以选择电脑网站和手机网站两种，都有相对应的模板。点击去设计就可以看到不同的行业划分的模板，根据自己的需求挑选喜欢的模板。
选好以后可以点击使用模板，开始修改一些细节的东西。
比如；基础的文本、图片，双击和拖拽就可以修改，还可以增加和删除，更换排版，增加标题栏等。
网站的主题颜色在主题这一栏中即可改动，一些设置也能取消和添加，不用担心该如何布置网站的界面，都是有大量的提示帮助的。
网站页面搭建好了之后，需要在后台的域名管理处绑定域名，没有域名可以点击购买域名去注册一个域名。另外还需要做好百度优化，完成百度收录的一些必备的设置，比如关键词设置等等，百度收录后，网站就可以在搜索引擎里面搜索出来，这样别人才能看到制作的网站。
以上就是关于如何使用乔拓云模板建设网站的科普，如果你没什么建站经验，艺术设计能力不强，那么使用上述建站方法就是你的不二选择。
有一个好的编辑器我们可以方便地的开发项目，编写代码，配置和管理我们的项目。所以我们开始编写html代码之前需要搭建开发环境。
基于html项目的开发和代码编写现在网上有很多编辑器，也有免费的，也有收费的编辑器。基于在Windows系统环境下开发和编写html代码最简单的编辑器就是Windows自带的记事本，我们可以使用记事本编辑html代码。
使用记事本编写html的步骤是首先新建一个文本文档，按照html的语法规则编写相关的代码和保存文件，然后把文件的后缀名改为.html，使用电脑上的浏览器打开就可以查看我们代码的运行结果。
虽然记事本也能编写html代码，但是效率不高也不方便，所以我们使用专业的编辑器来开发项目，编写代码和管理项目。
常用html代码编写的免费软件有HBuilderX，vs code，Sublime Text 等等。
HBuilderX官网下载地址：
https://www.dcloud.io/hbuilderx.htmlvs code的官网下载地址：
https://code.visualstudio.com/Sublime Text官网下载地址：
http://www.sublimetext.com/我们以后的教程都使用HBuilderX，所以下面为了同学们的学习方便，对HBuilderX的下载和安装做详细的教程。
一，下载
首先访问HBuilderX的官网网址：
https://www.dcloud.io/hbuilderx.html打开上面的HBuilderX下载网址后点击页面上download，在弹出的对话框里选择适合自己电脑的HBuilderX版本下载。
在Windows10环境下下载后的文件是一个压缩的.zip文件。
二，安装
鼠标右击下载下来的压缩文件进行解压。
解压完成后是一个名为HBuilderX的文件夹。
解压完成后鼠标双击HBuilderX文件夹：
双击运行名为HBuilderX.exe的应用程序文件即可启动HBuilderX编辑器：
因为HBuilderX是一个绿色软件所以没有桌面快捷方式和开始菜单快速启动程序，我们可以右击HBuilderX.exe文件创建桌面快捷方式。
小百科：
绿色软件指一类小型软件，多数为免费软件，最大特点是软件无需安装便可使用，可存放于闪存中，移除后也不会将任何记录留在本机计算机上。通俗点讲绿色软件就是指不用安装，下载直接可以使用的软件。绿色软件不会在注册表中留下注册表键值，所以相对一般的软件来说，绿色软件对系统的影响几乎没有，所以是很好的一种软件类型。
三，新建项目
HBuilderX编辑器初次启动时的默认界面是下图所示：
按照下图所示可以创建一个新的名为demo1空白项目：
名为demo1的空白项目创建成功后的界面如下图所示：
接下来在刚我们新建的demo1项目下创建名为helloworld的html文件
鼠标右击创建的demo1项目选择新建在选择.html文件：
在弹出的对话框里填入html文件的名称：
编写一段代码：
运行：
在浏览器上观察效果：
好了，到这里html的开发环境搭建和HBuilderX的安装教程结束了。
下面再给大家教一下怎样修改HBuilderX的主题风格，HBuilderX自身提供了修改软件主题的功能，使用者可以自身需求和喜好修改HBuilderX的风格。在喜欢自己喜欢的环境下做开发也是令人羡慕的一件事。
按照以下步骤可以修改HBuilderX的主题，默认主题是绿柔，我们可以改成雅黑，雅蓝或者自定义主题：
雅黑主题：
雅蓝主题：
好了本节全部内容全部结束了，希望我准备的内容对你有所帮助
你的支持是我的最大动力，若觉得我的教程还可以或对你有帮助为我点赞加关注！谢谢！
*请认真填写需求信息，我们会在24小时内与您取得联系。
