整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

细说HTML、CSS、JavaScript三者之间的

细说HTML、CSS、JavaScript三者之间的区别及学习建议!

HTML、CSS、JavaScript是前端学习非常重要的内容,作为前端工程师,建立网站,设计网页需要有一定的审美能力,也需要一定的编程技术。总之,技术性越来越强。学习前端这三大块内容,可以先从HTML入手,其次是CSS,在打好这两部分的基础上,进一步学习JavaScript。

WEB可以被看做是一个有生命的物体或人体,HTML可以视为骨骼和肌肉,CSS可以视为皮肤和毛发,而JavaScript可以视为受一定支配的行为。这样比喻不一定完全恰当,但可以帮我们更好的理解这三者之间的关系。本文,千锋武汉HTML5前端培训小编就来详细说说HTML、CSS、JavaScript三者之间的区别!

先从HTML说起:

作为网页内容的载体,HTML包含了用户需要浏览的内容,包括图文、视频,即构成网页的基本元素。HTML是网页的结构(Structure),需要有多种框架和布局,比如frameset框架集、iframe内联框架、div+css布局、table布局等,同时支持表单提交(HTML Form),包括基础表单、input输入框、输入框类型、文本域、列表、label等。当前,大家通用的是HTML5,其中还有一些新增元素,比如footer、header等,总之,HTML的功能越来越强大,作为初学者还是要把握主干,有重点地去学习。

其次是CSS:

CSS的作用是效果,或者说是表现(Presentation),比如网页上的动态文字、文字的色彩、字体、动画效果。正是因为CSS的存在使得HTML变得丰富多样。学习CSS,可以从版本CSS3开始,要了解CSS3的动画效果,如2D变换、过渡、特殊图形的绘制,雪碧图、滑动门等等都是常见的效果;除此之外,CSS3还有媒体查询(Media Queries)、grid,以及多列布局、用户界面等。CSS部分需要配合HTML,并结合实例来加以学习,这样效果会跟好。

最后要说一说JavaScript:

如果说一个网页只有“结构”和“表现”,而缺少了用户与网页的交互,即行为(Behavior),那么这样的网页就如一潭死水,无法形成良好的用户体验。好的用户体验不仅可以让用户鼠标放在哪里、哪里就会产生人性化的效果,而且可以增强用户的可操作性,例如购物网站用户的订购,网页会实时显示用户的购物动态。这样一来,JavaScript就有了编程的意味。和其他编程语言一样,JavaScript也有数据类型、条件语句、分支语句、字符串详解、数组详解、对象、函数、数值、Math函数、作用域。如果这一部分可以学会,便可以往更深的内容去发展。

如今,大前端的时代已经来临,熟练使用HTML5、CSS3,对前端人员的制作要求越来越高,能否做出酷炫的效果成为衡量前端技术的一个标准。作为前端开发工程师,将PC、手机、iPad等多种设备全面掌握并能提供客户需要的解决方案,精通响应式技术,是必备的能力。如今微信小游戏的开发也是前端开发的重点,值得初学者多多关注。

千锋武汉HTML5前端培训小编建议大家重视一下移动端的开发,毕竟移动端的用户数量高于PC端,移动端更适合碎片化的消费人群,市场较为广阔。在未来几十年都将是主流HTML5岗位薪资高,人才缺口超过百万,现在学习正是最佳时机。所以,你还在等什么?快来学HTML5吧!

到前端技术,不少朋友一定会感到有些陌生。但其实,前端,你每天都在接触。

你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端。

而前端最重要的三大技术,HTML,CSS,JavaScript,则是每一个前端开发者必须具备的技能。

掌握这些技能,你可以快速地做出一个酷炫的APP界面或者一个简单大方的网站页面。因此,就让我们一起来快速学习一下这三门技术吧。



以下内容节选自实验楼训练营课程《Vue.js 和 Node.js 构建内容发布系统》。

实验介绍

本实验主要介绍一下前端的基础知识,对比认识一下各个框架的代码编写方式,并介绍我们本次技术选型的主要思路。对于前端三大技术 HTML、CSS、JavaScript,简单的介绍了基本情况和常用语法。中间介绍了现代框架的一些情况,并通过实际的案例,用代码直观的认识一下各种框架的实现方式。最后分析一下项目的技术选型。

知识点

  • HTML、CSS、JavaScript 快速概览
  • 前端框架概览和选型
  • 后端选型
  • 数据库选型
  • Web 服务器选型

前端技术简介

本节我们简单介绍一下前端最基础 HTML, CSS, JavaScript 三驾马车。虽然本课程预设的读者为零基础开发者,但是前端开发一定会这三种技术的运用有要求。建议抽空学习 《 Web 前端工程师路径》 中的阶段 1 甚至阶段 2。这里仅做语法介绍和基本使用的概览。

在此之前先认识一下实验环境。实验环境和 VS Code 使用体验基本一致。你可以启动一个终端,并在其中输入 Linux 命令。

后面的命令无特殊说明的都是在此终端命令行中输入。大多数命令可以多开终端窗口分别执行。

那么下面我们就快速的了解一下。

HTML

HTML 全称超文本标记语言,几乎是从万维网和浏览器产生伊始就存在的。主要用于结构化信息来方便浏览器展示。

以标签对作为主要特征,如<p>这是一个段落</p>。这些标签会被浏览器解析成不同的模块,比如 p 标签就是一个段落,img 标签就是一个图片,a 标签就是一个超链接,标签名不区分大小写。

立刻就来尝试一下吧。首先通过命令行新建一个 demo 目录:

mkdir demo

然后命令行进入 demo 目录:

cd ./demo

新建一个 hello.html 文件,可以在实验环境左边的浏览框内在 demo 上右键选择 New File 然后命名为 hello.html;或者也可在命令行终端输入 touch hello.html,同样是新建文件。

在其中输入以下内容:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>标题</title>
  </head>
  <body>
    正文
  </body>
</html>

然后右击文件选择 Open With → Preview。

看到了吗?其实我们就是新建了一个 .html 后缀的文本文件,然后浏览器就可以将其中的内容展示出来。你也可以在自己的桌面上新建一个,然后使用浏览器打开看看效果。

这里嵌套代码的缩进格式是为了美观和可读性,并无严格要求。

head 标签中是一些暂时无需用到的头部信息,渲染的主体是 body 标签。下面我们修改 body 标签里面的内容,填入一些常用标签来直观感受一下。

<body>
  <h1>页面标题</h1>
  <div>一个块容器</div>
  <div>又一个块容器</div>
  <p>这里是段落了,间距变大</p>
  <div>一个块容器</div>
  <div>
    <div>
      多层嵌套:
      <div>内部第一个</div>
      <div>内部第二个</div>
    </div>
  </div>
</body>

保存之后切换到浏览标签看一看,有没有感觉被忽悠了?嵌套没嵌套根本没体现出来,就像 Word 里排了一下版,按了几个回车。

因为我们没有对显示样式进行修改,那是 CSS 的事。HTML 主要管内容的组织结构。

这里有一点针对学习的小建议,本课程中给到的全部代码请手动输入,忘记复制和粘贴快捷键。

而且最好不要机械的一个字符一个字符照着抄,尽量看过一行或一小段代码之后,靠短暂的印象去输出,别怕出错,只有过脑子并输出实践,才是最快掌握一项技能的捷径。

以上两句话是本课程中最有价值内容之一。

下面我们接着修改刚才的代码,再给 body 中添加几个常用标签。每次修改和保存之后记得到预览页看看样式的变化。

<h4>4 级标题</h4>
<ul>
  <li>
    HTML
  </li>
  <li>
    CSS
  </li>
  <li>
    JavaScript
  </li>
</ul>
<div>
  <a href="https://www.shiyanlou.com" target="_blank"
    >点击超链接跳转至实验楼首页</a
  >
</div>
<div>
  <img
    src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg"
    alt=""
    width="200"
  />
</div>

最后的链接标签 a 和图片标签 img 出现了标签属性,属性为 attr="value" 格式,可以给标签增加更丰富的信息。

同时 img 标签还是一个单标签,不需要在后面添加 </img> 配合使用。

至此对 HTML 的简要介绍告一段落。

互联网上看到的各种五彩缤纷网页都是由这些 HTML 组成的,但是为什么我们写的这么难看?下一节我们就要学习一下如何用 CSS 美化页面。

CSS

CSS 全称层叠样式表,是专门用来修饰 HTML 样式的一种语言。我们修改一下上节的 hello.html 文件来直观感受一下。


内部代码块引入

在 head 标签内部增加以下 style 代码块:

<head>
  <meta charset="UTF-8" />
  <title>标题</title>
  <style type="text/css">
    div {
      border: 1px solid blue;
      padding: 2px;
      margin: 10px;
    }
  </style>
</head>

这是再切换到预览页,发现没那么平铺直叙了。

这就是 CSS 的第一种引入方式,HTML 内置代码块。

大括号外面的 div 是标签选择器,这里选中了本页面中的所有 div 元素。大括号里面是属性名与赋值,属性名都是固定的关键字,并已规定好了值的类型和可选范围。

读代码也就大概知道了,我们将 div 的边框设置为 1 像素宽、固体(单线型)、蓝色,填充(内边距)2 像素,边缘空白(外边距)10 像素。现在可以练习调整一下各个数字,预览看看发生了什么?

再说点题外话,懂一些英文对程序员来说非常必要,除了可以凭感觉就读懂没学过的代码,还可以在面向 Google 编程、面向 Stack Overflow 编程、面向 Github Issues 编程时游刃有余。


外部文件引入

然后我们再试一下外部文件引入,在 hello.html 的同级目录新建 hello.css,输入以下内容保存:

div {
  color: green;
  border: 2px dotted red;
}

然后修改 hello.html,在 style 标签后面增加一行 link 标签,添加引入类型和地址:

<style type="text/css">
  div {
    border: 1px solid blue;
    padding: 2px;
    margin: 10px;
  }
</style>
<link rel="stylesheet" href="hello.css" />

预览看看,文字颜色变为绿色,边框的样式也被更新为 2 像素宽、点线型红色。

同样是 div 选择器,为什么边框的样式被覆盖了呢?注意 CSS 在同样条件下会后面代码覆盖前面,可以尝试交换 link 标签和 style 标签块的顺序看看。


行间样式

最后一种叫行间样式,这个结构更简单。修改 hello.html 中的 <div>内部第一个</div> 为

<div style="margin: 60px 0 10px 30px ;color:purple;">内部第一个</div>

样式覆盖前两种方式了,因为行间样式的优先级较高。这里涉及到选择器权重,先给一个简单公式了解一下。

!important > 行间样式 > ID > class | 伪类 | 属性选择 > 标签 > 继承 | 通配符。

多个选择器作用时权重相加。这里算 CSS 里有点复杂的部分,暂时不展开。

这里还有个小知识点是内外边距 margin 和 padding 接受的完整的值是四个,顺序固定为“上 右 下 左”。如果省略参数则从末尾计算对向合并。比如:

  • margin:40px 20px 50px; 三个参数时,左右同为 20px。
  • margin:40px 20px; 两个参数时 上下同为 40px, 左右同为 20px。
  • margin:40px; 一个参数时呢?请自行尝试理解。

CSS 先讲这么多,虽然没有把我们的页面变多好看,但最起码知道努力的方向了。

JavaScript

制作 JavaScript 的快速入门简直非常伤脑筋。比起前两种技术 HTML 和 CSS,这是货真价实的编程语言了。

也是我们后面要用到的 Vue.js 和 Node.js 中的根基,一下子又很难讲很多,所以还是希望同学们能重视起来系统学习一下,最起码读到后面的代码时不至于陷入“这是啥这又是啥”的窘境。

来段代码直观认知一下,还是先内部代码块引入。

在 hello.html 的 head 标签内增加一个代码块:

    <link rel="stylesheet" href="./hello.css">
    <script>
      let message="字符串提示";
      function showMSG(msg) {
        alert(msg);
      }
    </script>

修改 hello.html 的 h1 标签为:

<h1 onclick="showMSG(message)">页面标题</h1>

保存预览,点击“页面标题”,会弹出提示框。

JavaScript 代码加载之后就会执行,不存在编译阶段。行末的分号绝大多数时候可以省略。

我们先定义了一个变量 message,并赋值为“字符串提示”。定义变量关键字原是 var,ES6 新增关键字 let 有更清晰的作用域,可替代使用。

学习 JavaScript 经常会碰到 ES6、ES7 之类的名词,实际上是 ECMAScript 标准的版本号的意思。可以简单理解为新版标准为 JavaScript 添加特定新特性。

然后我们定义了一个函数 showMSG,并添加一个形参 msg。在函数体内部调用浏览器弹框方法,显示 msg 的值。function 是定义函数的关键字,暂时先把它当做一个功能封闭的盒子,当函数调用时,执行函数体内的代码。

调用部分是先给 h1 标签添加了 onclick 点击事件,被点击时触发 showMSG(message),也就是把 message 传给了 msg。

之后再试一下调用外部 js 文件,新建 demo.js 文件,写入下面内容并保存。

message="修改一下字符串";

然后修改 hello.html 文件,在 script 代码块后面增加一行:

<script src="./demo.js"></script>

这次保存预览,点击“页面标题”,可以看到弹窗的文字变了。这个演示了 script 代码块在页面可以同时存在多个,也是顺序调用,而且互相之间可以直接访问。文件命名也没有要求,希望不会逼死强迫症。

JavaScript 就是为什么网页可以做那么多交互的源头了。掌握起来任重道远。

以上内容节选自实验楼训练营课程《Vue.js 和 Node.js 构建内容发布系统》。


这三门前端技术先了解到这里,想要更深入学习如何使用前端技术构建内容发布系统,比如做个高逼格的博客,搭建一个交流社区,或者为企业制作官网等,可以访问实验楼官网搜索《Vue.js 和 Node.js 构建内容发布系统》这门课。

课程会提供完整的虚拟机环境,手把手教大家如何从头构建实现一个前后端分离的内容发布系统,包括了前端页面、后端服务、数据库等。

VvvebJs是一个开源的网页拖拽自动生成的JavaScript库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相关的组件进行网页的构建,非常的方便,而且可以实时修改代码,功能丰富,使用简单,界面友好,特别适合一些专注于展示的网页设计,需要的朋友不可错过!



Github地址

https://github.com/givanz/VvvebJs

相关特性

  • 1、组件和块/片段拖放。
  • 2、撤销/重做操作。
  • 3、一个或两个面板界面。
  • 4、文件管理器和组件层次结构导航添加新页面。
  • 5、实时代码编辑器。
  • 6、包含示例php脚本的图像上传。
  • 7、页面下载或导出html或保存页面在服务器上包含示例PHP脚本。
  • 8、组件/块列表搜索。
  • 9、Bootstrap 4组件等组件

默认情况下,编辑器附带Bootstrap 4和Widgets组件,可以使用任何类型的组件和输入进行扩展。

使用方式

如下代码:

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	
<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

要初始化编辑器,调用Vvveb.Builder.init。第一个参数是要加载以进行编辑的URL,它必须位于相同的子域中才能进行编辑。第二个参数是页面加载完成时调用的函数,默认情况下调用编辑器Gui.init();


  • 结构


Component Group是一个组件集合,例如Bootstrap 4组由Button和Grid等组件组成,该对象仅用于在编辑器左侧面板中对组件进行分组。例如,Widgets组件组只有两个组件视频和地图,并被定义为如下

Vvveb.ComponentsGroup['Widgets']=["widgets/googlemaps", "widgets/video"];

Component是一个对象,它提供可以在画布上放置的html以及在选择组件时可以编辑的属性,例如Video Component,具有Url和Target属性的html链接Component定义为:


Vvveb.Components.extend("_base", "html/link", {
 nodes: ["a"],
 name: "Link",
 properties: [{
 name: "Url",
 key: "href",
 htmlAttr: "href",
 inputtype: LinkInput
 }, {
 name: "Target",
 key: "target",
 htmlAttr: "target",
 inputtype: TextInput
 }]
});

在Component属性集合中使用Input对象来编辑属性,例如文本输入,选择,颜色,网格行等。例如,TextInput扩展Input对象并定义为:

var TextInput=$.extend({}, Input, {
 events: {
 "keyup": ['onChange', 'input'],
	 },
	setValue: function(value) {
		$('input', this.element).val(value);
	},
	
	init: function(data) {
		return this.render("textinput", data);
	},
 }
);

输入还需要一个在编辑器html(在editor.html中)定义为<script>标签的模板,其id为vvveb-input-inputname,例如对于文本输入为vvveb-input-textinput,定义:


<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>

以上是借助浏览器翻译工具,对官网的文档进行简单的翻译,可能会有些不够准确的地方,感兴趣的小伙伴可以直接查看相关文档!

设计界面预览






总结

VvvebJs是一个非常强大的网页可视化生成构建工具,让不懂网页设计的小伙伴们也能够通过拖拽来生成美观大方的网页出来,让设计网页就像设计图片一样,VvvebJs特别适合展示型网页,甚至可以不需要代码就能完成一项复杂的网页设计,总体来说,VvvebJs是一个值得尝试的工具!