前端语言串讲|青训营笔记

程序小猿2
473 阅读10分钟

前端语言的基本能力

基础的前端三剑客HTML、CSS、JavaScript

  1. HTML（超文本标记语言） ： HTML 是 Web 页面的基础结构。它用于描述网页的内容和结构。HTML 使用一系列标记（称为标签）来定义页面元素，如标题、段落、列表、图片和链接等。浏览器解析 HTML 代码，并根据标签的语义来显示页面内容。HTML 为网页提供了基本的骨架，使浏览器能够呈现文本、图像和其他媒体。
  2. CSS（级联样式表） ： CSS 用于描述 HTML 元素的外观和布局。CSS 允许我们定义如何显示 HTML 元素，例如字体、颜色、大小、间距等。通过使用 CSS，我们可以将样式与 HTML 结构分离，使得网站的设计和维护更加简便。CSS 还允许我们根据不同的设备和屏幕尺寸应用不同的样式(媒体查询)，以实现响应式设计。
  3. JavaScript： JavaScript 是一种脚本语言，用于在浏览器中增加交互性和动态效果。它允许我们编写脚本来处理用户操作，例如点击按钮、输入表单、拖动元素等。通过使用 JavaScript，我们也可以操作 HTML 和 CSS，动态更改页面内容和样式，从而提供丰富的用户体验。JavaScript 也可以与服务器进行通信，以便在不刷新整个页面的情况下获取或提交数据（例如，通过 AJAX）。
303c9868a7164a242e6064b3307fde5.png

HTML

HTML是用来描述网页的一种语言。HTML是一种在Web上使用的通用标记语言。HTML允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

  • HTML指的是超文本标记语言：HyperText Markup Language
  • HTML不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签（markup tag）
  • HTML使用标记标签来描述网页
  • HTML文档包含了HTML标签及文本内容
  • HTML文档也叫做web页面
00bb990417dc4683d66733b83727237.png

CSS

什么是CSS

CSS:Cascading Style Sheet 层叠样式表
是一组样式设置的规则，用于控制页面的外观样式

为什么使用CSS

实现内容与样式分离，便于团队开发
样式复用，便于网站的后期维护
页面的精确控制，让页面更精美

CSS作用

页面外观美化；布局和定位

55dad41e6fa1a3a724a931e8d68b2f1.png

规则集

7706b39d4aebe63017a8fedbb34346c.png
上图标记释义
选择器（Selector）HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了
声明（Declaration）一个单独的规则，如 color: red; 用来指定添加样式元素的属性
属性（Properties）改变 HTML 元素样式的途径。
属性的值（Property value）在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）

常见选择器

选择器名称选择的内容示例
元素选择器（也称作标签或类型选择器）所有指定 (该) 类型的 HTML 元素p 选择 <p>
ID 选择器具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）#my-id 选择 <p id="my-id"> 或 <a id="my-id">
类选择器具有特定类的元素（单一页面中，一个类可以有多个实例）.my-class 选择 <p class="my-class"> 和 <a class="my-class">
属性选择器拥有特定属性的元素img[src] 选择 <img src="myimage.png"> 而不是 <img>
伪（Pseudo）类选择器特定状态下的特定元素（比如鼠标指针悬停）a:hover 仅在鼠标指针悬停在链接上时选择 <a>

W3C和W3School的区别

  1. W3C（万维网联盟）： W3C 是一个国际组织，成立于 1994 年，负责制定和维护 Web 标准。它的目标是确保 Web 发展的长期可持续性和可访问性。W3C 制定了许多 Web 技术的规范，如 HTML、CSS、XML、SVG 等。W3C 的官方网站是 www.w3.org/。在 W3C 网站上，可以找到关于 Web 标准的详细信息和技术规范。
  2. W3Schools： W3Schools 并非 W3C 的官方网站，而是一个独立的在线教育平台。它成立于 1998 年，提供了大量关于 HTML、CSS、JavaScript 等 Web 技术的教程和实例。W3Schools 的目标是为 Web 开发者提供一个易于理解的学习资源。W3Cschools 的官方网站是 www.w3schools.com/。在 W3Cshools 网站上，可以找到关于 Web 技术的教程、示例和实践练习。

而他们最主要的区别(其实是完全不同的两家组织，一开始学习的我一直以为他们是同一家的)：

  • W3C 是一个国际组织，负责制定和维护 Web 标准。
  • W3Schools 是一个在线教育平台，提供关于 Web 技术的教程和实例。

JavaScript

JavaScript的起源

JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如：用户名的长度，密码的长度，邮箱的格式等。但是，有的同学可能会有疑问，这些验证，后端不也可以进行验证吗？确实，后端程序的确可以进行这些验证，但你要清楚，在1995年那个年代，网速是非常慢的，向后端发送一个请求，浏览器很久才能得到响应，那这无疑是一种非常不好的用户体验。

为了解决前端验证的问题，当时的浏览器巨头NetScape（网景）公司就开发出一种脚本语言，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript。但是你要清楚，Java和JavaScript是没有什么关系的，只不过当时Java非常流行，为了蹭热度，才将LiveScript更名为JavaScript，它们的关系就像雷锋和雷峰塔的关系一样，没啥关系。

但是，浏览器开发商不止网景一家，还有一个大家都知道的公司，微软公司，它们的主打产品是IE（Internet Explorer）浏览器，当网景公司的Netscape Navigator浏览器推出JavaScript语言时，微软就急了啊，好家伙，人网景都推出了专门用于前端验证的语言，不仅大大减少了后端程序的压力，还提高了用户的体验。我微软这么大的公司不也得整一个，在1996年，微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。

于是在市面上存在两个版本的JavaScript，一个网景公司的JavaScript和微软的JScript，虽然当时浏览器的巨头是网景，但是网景的浏览器是收费的，虽然微软的IE浏览器在全球的市场份额远远不及网景，但是微软的拳头产品是Windows操作系统，每一个操作系统都自带一个IE浏览器并且免费，那么，未来的发展大家可能也想到了，网景让微软给干倒闭了，1998年11月，网景被美国在线（AOL）收购。

老大哥就是老大哥，为了抢先获得规则制定权，网景最先将JavaScript作为草案提交给欧洲计算机制造商协会，也就是ECMA组织，希望能将JavaScript做成行业标准，最终在网景、SUN以及微软等公司的参与下，由一众程序员和相关组织人员组成的第39技术委员会也就是TC39发布了ECMA-262标准，这个标准定义了名为ECMAScript的全新脚本语言，为啥又来了个ECMAScript？

因为Java是SUN的商标，SUN授权了NetScape可以叫JavaScript，但是ECMA没有SUN的授权就不能叫JavaScript，哪怕NetScape成员特别希望ECMA把它叫做JavaScript，但是ECMA也有成员并不希望这个标准就叫JavaScript，总之经过几轮磋商和博弈，ECMAScript这个名字就定下来。

我们可以简单看一下历史事件发展表：

年份事件
1995年网景公司开发了JavaScript
1996年微软发布了和JavaScript兼容的JScript
1997年ECMAScript第一版（ECMA-262）
1998年ECMAScript第二版
1998年DOM Level1的制定
1998年新型语言DHTML登场
1999年ECMAScript第三版
2000年DOM Level2的制定
2002年ISO/IEC 16262:2002的确立
2004年DOM Level3的制定
2005年新型语言AJAX登场
2009年ECMAScript第五版
2009年新型语言HTML5登场

JavaScript的组成

ECMAScript是一个标准，而这个标准需要由各个厂商去实现，不同的浏览器厂商对该标准会有不同的实现。

浏览器JavaScript实现方式
FireFoxSpiderMonkey
Internet ExplorerJScript/Chakea
SafariJavaScriptCore
Chromev8
CarakanCarakan

我们已经知道ECMAScript是JavaScript标准，所以一般情况下这两个词我们认为是一个意思。但是实际上JavaScript的含义却要更大一些。一个完整的JavaScript实现应该由以下三个部分构成：

f6e54eb7d24fd30011a73aa6bc85ae4.png

JavaScript的特点

解释型语言

JavaScript是一门解释型语言，所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。

动态语言

JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术，所以JavaScript可能是运行速度最快的动态语言了。

类似于 C 和 Java 的语法结构

JavaScript的语法结构与C和Java很像，向for、if、while等语句和Java的基本上是一模一样的。所以有过C和Java基础的同学学习起来会轻松很多。不过JavaScript和与Java的关系也仅仅是看起来像而已。

基于原型的面向对象

JavaScript是一门面向对象的语言。啥是对象？下次聊。

Java也是一门面向对象的语言，但是与Java不同JavaScript是基于原型的面向对象。啥是原型？下次聊。

严格区分大小写

JavaScript是严格区分大小写的，也就是abc和Abc会被解析器认为是两个不同的东西。

前端语言的协作配合

CSS in HTML

f9258ffa7af60c436c7d60feb2686b8.png

JavaScript in HTML

43144799dc040f0ec9b252eb8ae9df7.png 
<button onclick="showContent()">show hidden content</button>

<template>
    <h2>Flower</h2>
    <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent(){
    var temp = document.getElementsByTagName("template")[0];
    var clon = temp.content.cloneNode(true);
    document.body.appendChild(clon);
}
</script>
823df7de2edaebddf3801b45d286336.png
avatar
文章
阅读
粉丝