前端三件套入门介绍—— HTML、CSS、JavaScript |青训营

Neal27
848 阅读6分钟

前端三件套入门介绍—— HTML、CSS、JavaScript

学习前端开发，HTML、CSS、JavaScript三件套是我们必须要学习的内容，在学完这三件套后我们就可以自主写出一些实用美观的网页。

我们看到的每一个网页主要由三部分组成：结构、表现和行为。 其中，HTML用来表示结构，决定网页的结构和内容（“是什么”）；CSS用来表示表现（样式），设定网页的表现样式（“什么样子”）；JavaScript用来表示行为， 控制网页的行为（“做什么”）；所以我们说这三大件是我们制作网页所必备的知识。

HTML

HTML指超文本标记语言，主要用来写网页的框架结构，类似于人体构造中的骨骼，是网页制作的基础。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。前端开发利用HTML标签来标记网页中的文字。

CSS

主要用来给网页设计格式、美化网页，使得不同网页拥有不同的风格，就像给普通的人打扮一下。

JavaScript

主要使网页具有交互性，可以理解为让人能够动起来，与你进行基本的交流互动。

完整的一个网站，或者说页面，主要就是由这三者的协作达成的。协作方式主要有两种，一种是css和JavaScript都基于HTML运作；另一种是HTML和css基于JavaScript运作。 两种协作方式主要区别就是在于侧重点不同。 首先先行讲解有关html一些要点：在标签分类上，主要分为头部和身体两大类。

「HTML骨架格式」
<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>
「HTML元素标签分类」
  • 常规元素(双标签)
  • 空元素(单标签)
  常规元素(双标签)
  <标签名> 内容 </标签名>   比如<body>我是文字</body>
​
  空元素(单标签)
  <标签名 />  比如 <br />或<br>
「HTML标签关系」
  • 嵌套关系父子级包含关系
  • 并列关系兄弟级并列关系
    • 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

头部标签中，我们可以：

1.控制页面渲染后识别到的主要使用语言。

  1. 我们可以控制使用的编码类型，通常为utf-8。

  2. 我们可以通过link标签引入专属于当前文件的标签栏图标，外链或内联的样式表，以及JavaScript文件。但通常，为了保证文件渲染的正常运行，JavaScript文件一般放在</body〉标签之前，在页面渲染后再运行加载JavaScript内容。

    （身体标签：） 在HTML中，通过身体部分的标签对页面进行布局上的划分，常见划分为三大块，头部[导航栏]，内容栏，底部[一般放置一些引申内容，如备案号、公司信息、联系电话一类]。 而在用户视角，他们能够看到的页面即是我们在body标签里所写的内容。

    接下来简单说下css, css主要控制的就是样式，我们可以通过：类选择器，伪类选择器，id选择器，级联选择器，父子选择器等来改变我们所需要改变的内容的样式，需要注意的是，在有关css的设定中，我们遵从代码从下到上的覆盖顺序，即在我们写的最新的css的选择时，可以覆盖掉在此之前书写的对于同一类型的内容。如给body标签一个背景颜色，我们在后面重新书写一个新的背景颜色时，无特殊设定，就会产生后覆前的效果。同时，css的样式大部分不存在父传子，之所以会感觉子的效果与父值相同，因为有些内容是存在默认值的，例如背景颜色的默认值为transparent, 透明色。

    然后是JavaScript。 JavaScript借鉴了： C语言的基本语法； Java的数据类型和内存管理； Scheme 语言的将函数提升到first class地位，即"第一公民"地位； Self语言的使用基于原型(prototype)的继承机制。

    在Javascript中，我们有着六个基本语法类型： ①String字符串类型 ②Number数字类型 ③Boolean布尔值 ④Null空值 ⑤Undefined未定义值 ⑥Symbol象征类型。 同时我们还有着额外的一个类型：对象(Object) 它其中包含了数组(array)和函数(function)。 在JavaScript的六种基本语法类型中最容易混淆，以及最容易出问题的即是④和⑤。

    在刚刚有关HTML的介绍中，我提到了外链还有内联。其实这两种都是有关于其他的引用方法。除了这两种之外，我们还有一种方法是内嵌，也叫做嵌入。

    1. 外链一般出现在文件头部或“/body”标签前。出现在文章头部时，一般外链的是css文件。而为了防止页面渲染中断或出现卡顿情况。一般会将JavaScript文件放在文件末尾引入。 当使用JQuery 或其他文件库时，或者有多个需要引入的JS文件时，需要将应用最广或者内容最全的文件放置在前面的位置，然后在后面写自己的JavaScript内容或者引入自己的JavaScript文件。(注意：上述的应用最广，意为最为公共使用的，不是指单个文件应用最全的)

    2.需要内联Css内容时，在头部内(一般是在最后)插入style 双标签，标签内书写css样式。 当需要内联JavaScript内容时，在</body〉标签前使用<script〉</script〉标签，标签内写自己的Javascript内容。

    3.当我们要去写下内嵌内容时，写在行内。如给某div标签添加背景颜色为红色, 高度为50像素时，则写成〈div style ="background color: red; height：50px；"〉 </div〉(为了防止吞代码，部分＞使用中文字符代替) 在一般情况下，我们为了保证页面渲染完整性，不会在行内内嵌JavaScript内容。

    总结

    以上只是一些入门中的入门知识，各个部分的详细实现细节以及实现原理我会在接下来的笔记中补充。最后再回顾一下前端三件套之间的关系： 页面由三部分内容组成

    分别是内容、表现、 行为。

    内容 ， 是我们在页面中可以看到的数据。 我们称之为内容。 我们一般使用html 技术来展示内容。 表现， 指的是这些内容在页面上的展示形式。 比如说。 布局， 颜色， 大小等等。 一般使用CSS 技术实现 行为， 指的是页面中元素与输入设备交互的响应。 一般使用 javascript 技术实现。

avatar
文章
阅读
粉丝