【前端】一文快速回顾 Html+CSS+JS

一文快速回顾前端基础三件套：HTML+CSS+JavaScript

一起快速回顾前端基础三件套吧

前言 Preface

太久没写前端啦，最近开了一个新项目练手，产品前后端开发运维都是我一个人。需求分析、技术选型完成，后端基础项目及所需中间件搭建完毕后，就着手准备前端开发了。

本来前端就学得半桶水，而且太久没碰啦，因此打算从前端三件套：html、css、javascript开始，快速回顾一遍，打打基础，再进行Vue、React等常见框架学习。

考虑到若要进行详细的基础全面回顾，篇幅有限，因此定下以下学习目标以及重点：

学习目标

• 快速回顾 Html 的基本结构
• 快速回顾 CSS 常用使用方式
• 快速回顾 JavaScript 基本语法

重点

• CSS外部样式的使用方式
• JavaScript 箭头函数

下面我们开始！

1. HTML 快速回顾

HTML是一种超文本标记语言，主要负责静态网页。

超文本标记语言：一种标记语言。一种数据组织方式，组织包括图片、音频等数据在内的各种数据。可以被浏览器解释、读取。

1.1 基本结构

我们通过以下Hello World Demo来快速回顾Html的基本结构：

    <!DOCTYPE html>
    <!--文档声明:声明这是一个HTML文档-->
    <!--HTML的注释都是用这种形式，同学们记下来咯-->
    <html>
    	<!--html 标签，包裹着<head>、<body>标签-->
        <head> 
            <!--头部标的作用为：<head> 标签用于定义文档的头部。
              <base>, <link>, <meta>, <script>, <style>, 以及 <title>
              <title> 定义文档的标题，它是 head 部分中唯一必需的元素。-->
            <meta charset =" utf-8"/>
            <!--meta用于设置编码格式-->
            <!--title 标签 用于设置该网页的标题，是唯一必需的元素-->
            <title>Hello world</title>
        </head>
        <body>
        <!--body 里的内容主要是给用户呈现的内容，如表格、图片等-->
            Hello world!
        </body>
    </html>
    <!--注意，HTML标签都是成双成对的，部分可自闭的标签可表示为<[属性] 标签名/>-->

其中，涉及以下语法概念：

• 标签：HTML由一套标记标签组成，通常就叫标签。一个标签通常由开始标签和结束标签组成。例如，这个示例的<body>是开始标签，</body>是结束标签，区别在于结束标签在标签名描述之前加了/。有些标签可以自闭，称为自闭标签，意思是省略了结束标签的标签，例如，一个单独的<br>标签表示一个换行，省略了结束标签。

• 注释：HTML 的注释由<!-- [注释内容] -->表示，和XML的注释格式是一致的，通常我们使用IDE工具快捷键生成即可。

• 元素：元素是指一个标签开始和结束之间的所有代码。例如，上述例子中的<p>Hello World!</p>，"Hello World!"就是<p>标签的元素。

• 属性：标签内的看似赋值的操作，称为属性。如上述例子的：<meta name="viewport" content="width=device-width, initial-scale=1.0">，" name=“viewport” "就是一个属性。“name” 是属性名，“viewport” 是属性值，属性值应该用双引号括起来。

1.2 简单语法回顾

我们通过一个Form表单的Demo来快速回顾与练习Html的语法:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>列表、表格、表单综合</title> 
</head>
<body>
<!--我们用一个小案例来示例-->
<from>
    <h1>注册</h1>
	姓名: <input type="text" name="name" value="输入姓名"> <br>
	                           <!--这里br是换行标签-->
    密码: <input type="password" name="password"> <br>
    确认密码：<input type="password" name="password">
</from>

<ol>
    <p>请选择业务</p>
    <from>
    <li>
       业务1<input type="checkbox" name="service">
    </li>
    <li>
       业务2<input type="checkbox" name="service"/>
    </li>
    </from>
</ol>
 
<table border="5">
	<tr>
	   <td>
		  性别：男 <input type = "radio" name = "sex"><br>
		</td>
		<td>
		   女<input type = "radio" name = "sex"><br>
		</td>
	</tr>
	
	<tr>
	   <td>
		  同意协议一<input type = "checkbox" name = "agree"><br>
		</td>
		<td>
		  同意协议二<input type = "checkbox" name = "agree"><br>
		</td>
	</tr>
	<tr>
		<td>
	      <form name="input" action="输入页面，表单数据提交到该页面" method="get">
          输入密码点击提交 <input type="passowrd" name="password">
          <input type="submit" value="请提交">
         </form>
		</td>	
	</tr>
</table>
</body>
</html>

至于其它常用标签，我们需要用到的时候再查即可。我们基本需要掌握的是Html的基本结构，以及标签的用法。

2. CSS 快速回顾

CSS是层叠样式表。从功能上简单理解，HTML可看作是网页的骨架，CSS则对网页进行布局和美化。

CSS本质不会对逻辑产生影响，但部分样式可能会造成布局或图标的变动，与交互有一定的关系。

2.1 三种引入方式

CSS 主要有三种引入方式：

• 内联样式
  内联样式是在具体HTML标签内，通过style属性设置，如：

<div style="color: red">红色段落</div>

• 内部样式
  内部样式的位置在html的head标签里，在style标签内设置。

  <head>
    <meta charset="UTF-8">
    <title>三种引入方式</title>
    <style>
      #d1{
        color: green;
      }
    </style>
  </head>
  <body>
    <h1 id = "d1">内部样式，绿色标题</h1>
  </body>

• 外部样式
  外部样式即将各种样式写在一个CSS文件中，在head中引入。

  <link rel="stylesheet" href="myCSS.css">

三种使用方式会根据不同项目的不同规范来使用，一般来说，内部样式和外部样式在实际项目中出于易于维护的需要会使用得相对多一些。

2.2 选择器

CSS我们主要学习选择器。选择器的种类有很多，不同种类有不同的使用方式，有不同的作用。此处我们先快速回顾选择器的基本语法，实际用到的时候再根据需求场景查选择器即可。

语法
selector {property: value}
即 选择器{属性:值}

常见选择器

• 元素选择器
• id选择器
• 类选择器
• 伪类选择器

等等。

具体选择器的使用方式，篇幅有限，本文不赘述。相信读者参考一下项目代码及其它资料，很快就能回顾并掌握。

2.3 布局

CSS中的布局我们要关注的是盒子模型、浮动、定位等。

2.3.1 盒子模型

盒子模型的概念是指 HTML 元素被表示为一个矩形的盒子，它由四个部分组成：内容区域、内边距、边框和外边距。这些部分可以分别用 CSS 属性进行控制，从而实现灵活的布局和样式设置。

• 内边距（padding）：内边距是指内容区域与边框之间的距离，它可以通过 CSS 的 padding 属性进行设置。内边距可以用来调整元素内容与边框之间的间距，从而影响元素的大小和布局。
• 外边距（margin）：外边距是指元素与相邻元素之间的距离，它可以通过 CSS 的 margin 属性进行设置。外边距可以用来控制元素与其周围元素之间的间距，从而影响页面布局和元素的排列方式。

示例：

.box {
    padding: 20px; /* 设置内边距为 20 像素 */
    margin: 20px; /* 设置外边距为 20 像素 */
}

.inner {
    padding-top: 10px; /* 设置顶部内边距为 10 像素 */
    padding-right: 15px; /* 设置右侧内边距为 15 像素 */
    padding-bottom: 10px; /* 设置底部内边距为 10 像素 */
    padding-left: 15px; /* 设置左侧内边距为 15 像素 */
}

2.3.2 定位

定位是一种常用的布局技术，它允许我们精确地控制元素在页面中的位置。在 CSS 中，有三种常见的定位方式：相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。通过这些定位方式，我们可以实现元素的层叠效果、悬浮效果以及其他特殊布局需求。

示例：

.relative {
    position: relative; /* 设置相对定位 */
    left: 20px; /* 元素相对于原始位置向右偏移 20 像素 */
    top: 10px; /* 元素相对于原始位置向下偏移 10 像素 */
}

.absolute {
    position: absolute; /* 设置绝对定位 */
    right: 0; /* 元素相对于父元素的右侧对齐 */
    bottom: 0; /* 元素相对于父元素的底部对齐 */
}

.fixed {
    position: fixed; /* 设置固定定位 */
    top: 0; /* 元素固定在页面顶部 */
    left: 0; /* 元素固定在页面左侧 */
}

2.3.3 浮动

浮动是一种常见的布局技术，它允许元素在页面上左右移动，直到碰到父容器或其他浮动元素为止。浮动常用于创建多列布局或实现图片与文本的环绕效果。在 CSS 中，我们可以通过 float 属性来设置元素的浮动方式，通常取值为 left 或 right。

示例：

.float-left {
    float: left; /* 元素向左浮动 */
}

.float-right {
    float: right; /* 元素向右浮动 */
}

.clearfix::after {
    content: "";
    display: table;
    clear: both; /* 清除浮动，确保父元素包裹浮动元素 */
}

2.4 简单练习

我们用一个简单的综合Demo来作CSS的综合练习参考：

/* 选择器练习 */
p {
    color: blue;
}
h1 {
    color: green;
}
.class1 {
    background-color: lightgray;
}
#id1 {
    font-weight: bold;
}

/* 盒子模型 */
.box-model {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

/* 浮动练习 */
.float-left {
    float: left;
    width: 50%;
    background-color: lightblue;
    padding: 10px;
}
.float-right {
    float: right;
    width: 50%;
    background-color: lightcoral;
    padding: 10px;
}

/* 清除浮动 */
.clear {
    clear: both;
}

/* 定位练习 */
.position-relative {
    position: relative;
    top: 20px;
    left: 20px;
    background-color: lightgreen;
    padding: 10px;
}
.position-absolute {
    position: absolute;
    top: 60px;
    right: 20px;
    background-color: lightpink;
    padding: 10px;
}
.position-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: lightyellow;
    padding: 10px;
}

对应html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Practice</title>
    <link rel="stylesheet" href="SelectorAndPositionReview.css">
</head>
<body>

<h1 id="id1">Hello, World!</h1>
<p class="class1">This is a paragraph with a class.</p>

<div class="box-model">This is a box model.</div>

<div class="float-left">Float left content</div>
<div class="float-right">Float right content</div>
<div class="clear"></div>

<div class="position-relative">Relatively positioned content</div>
<div class="position-absolute">Absolutely positioned content</div>
<div class="position-fixed">Fixed positioned content</div>

</body>
</html>

3. JavaScript 快速回顾

概念

• 属于脚本语言，不需要编译，由浏览器解析执行
• 支持面向对象
• 弱类型语言，不太重视类型的匹配
• 安全性强，交互性强
• 跨平台，有强大的生态系统

3.1 JavaScript 引入方式

与 CSS 类似，Java Script 引入方式分为内联、内部、外部。

内联
内联实际用得较少，通过属性添加，我们了一下即可：

<!-- 内联样式，直接在属性中添加 -->
<input type="button" value="按钮" onclick="alert('Hello JavaScript！')">

内部
通过<script>标签引入

<script>
    // 浏览器控制台输出
    console.log("Hello JavaScript!")
</script>

外部
外部引入方式有利于代码结构化、文件级别代码复用。

但需注意：如果是外部引入的Java Script，<script>标签内就不能写其他内容了。

//外部.js文件的内容
console.log("Hello JavaScript");
    
<!--以下是引入方式-->
<script src="fileName.js"></script>

3.2 JavaScript 基本语法

既然是快速回顾基本语法，且我们事先已了解了JS是弱类型语言，因此数据类型、控制流程等此处不赘述，重点要掌握与Java显著不同的语法部分：变量声明、函数声明，以及非常常用的箭头函数。

3.2.1 变量

JS 变量的声明 通常有 隐式声明（不由任何关键字声明）、var 关键字声明、 let 关键字声明、 const 关键字声明 这几种方式。

全局变量
当我们声明变量时不添加任何关键字时，默认为全局变量：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java s cript leanring</title>
    <script>
        // 定义全局变量
        x = 1;
    </script>
</head>

var声明
var 声明的变量比较灵活。当 var 声明的变量在方法内时，该变量的作用域仅为该方法内；当该变量的声明在方法外时，该变量可视为全局变量。 由于 var 过于灵活，不利于作细致的区分，我们现在也用得较少。

<script>
        var z = 0;
        function myFunction(){
            var y = 2;
            console.log(x);
            console.log(x+y);
            console.log(z);
        }
    
        function logz(){
            console.log(z+1);
        }
    
        myFunction();
        logz();
</script>

<script>
        function writeZ(){
            document.write(z);
        }
        writeZ();
</script>

let声明
用 let 声明的变量作用域在块内，超出该代码块则不可访问。用 let 声明的变量是局部变量。 但值得注意的是，如果我们非要将let声明在代码块外，依然可以视为全局变量，但我们一般不这么用。

<script>
        let a = "hello";
        function fun(){
            let b = "world";
            console.log(b);
        }
        console.log(a);
        fun();
</script>

const声明
const 关键字声明的是常量，必须在声明时就赋值。常量不可修改。它的作用域特性与let一样，拥有块级作用域。

<script>
        function example(){
            const c = "name";
            console.log(c);
            // 报错，常量不可修改
            // c = "1";
        }

        example();
</script>

3.2.2 函数与箭头函数

函数的定义方式与调用方式与我们常用的Java高级语言略有不同，作为后端程序猿，刚开始这块还是挺难转变的，需要多练习以适应这种语法转变。

Function声明
使用大写开头的Function:
最不常用，这种方式了解一下即可：

  let f = new Function ("name","age","console.log(name+age)");
  f("Sharry","20");

直接变量接收声明
直接用一个变量接收方法（函数）：

  let f = function (hello,action){
    console.log(hello+action);
  }
  f("您好","请上车");

最常用的声明方式

  function f4(x,y){
    return x*y;
  }
  let result = f4(3,4);
  console.log(result)

箭头函数
JavaScript中的箭头函数是一种更简洁的函数书写方式，它在ES6（ECMAScript 2015）中被引入。是一种语法糖。

基本形式如下：

(param1, param2, ..., paramN) => {
  // 函数体
}

如果函数体只有一条语句，并且不需要return关键字，可以省略花括号：

(param1, param2, ..., paramN) => expression

如果只有一个参数，可以省略参数列表的圆括号：

param => expression

如果没有参数，必须包含一对空的圆括号：

() => expression

3.3 简单练习

// 全局变量
var globalVar = "I am a global variable";

// 函数定义
function sayHello(name) {
  console.log("Hello, " + name + "!");
}

// 使用var定义的变量
var localVar = "I am a local variable using var";

// 使用let定义的变量
let letVar = "I am a local variable using let";

// 使用const定义的常量
const constVar = "I am a constant variable";

// 箭头函数
const arrowFunction = (param) => {
  return "You passed: " + param;
};

// 练习代码
(function() {
  // 这个函数内部定义的变量是局部变量，不会污染全局命名空间
  var innerVar = "I am an inner variable using var";

  // 使用let和const定义的局部变量
  let innerLetVar = "I am an inner variable using let";
  const innerConstVar = "I am an inner constant variable";

  // 调用函数和箭头函数
  sayHello("Sharry");
  console.log(globalVar); // 输出全局变量
  console.log(localVar); // 输出局部变量
  console.log(letVar); // 输出let定义的局部变量
  console.log(constVar); // 输出const定义的常量
  console.log(arrowFunction("Sharry")); // 输出箭头函数的结果

  // 尝试修改const变量
  constVar = "I am trying to change a constant"; // 这将抛出一个错误

  // 尝试在函数外部访问函数内部的变量
  console.log(innerVar); // 这将抛出一个错误，因为innerVar在函数外部是不可见的
})();

// 尝试在函数外部访问函数内部的let和const变量
console.log(innerLetVar); // 这将抛出一个错误，因为innerLetVar在函数外部是不可见的
console.log(innerConstVar); // 这将抛出一个错误，因为innerConstVar在函数外部是不可见的

4. 总结

本文我们快速回顾了 html + css + javascript 前端基础三件套。由于篇幅有限，我们只挑了部分重点内容来介绍。

html是基础中的基础，当然也比较简单。现在有了框架的加持，我们已经很少直接写html了，但是html的基础结构我们要熟悉；
css是前端项目中页面布局、样式的必需，我们要学会它的使用方式，以及盒子模型、布局等概念。期待经验积累起来，可以灵活运用。
javascript其中与我们常用的高级语言语法不同的部分需要掌握，这也是日后我们用得最频繁的部分。

至于像是 javascript DOM 操作等其它内容，现在有Vue、React等框架，DOM操作一般都由框架隐式操作完成，让我们在一般情况下不必再频繁手动进行DOM操作。因此这些内容日后我们再慢慢了解即可。

参考资料

• 优快云-HTML参考博文
• 优快云-CSS参考博文
• 优快云-JavaScript参考博文