2023重学前端:HTML CSS JavaScript基础复习

作者:J.sky · 发表于:
2023-04-13T09:59:13.000000Z
· 更新于:
2023-08-13T22:54:57.576618Z
· Tag: 前端框架 HTML

最近写了一些前端的项目使用了一些框架例，但是突然发现自己的前端基础是如此的渣，渣的自己好尴尬，遂决定重新学习并复习一下前端的HTML CSS JavaScript基础。

HTML css JavaScript是什么？

HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。 CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。 JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

HTML——超文本标记语言

简介

HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。

块级元素和内联元素

典型的例子就是：

<p>我是块级元素</p>
<span>我是内联元素<span/>

块级别的元素占用一行宽度，内联的则相互连接在一起，当然你可以使用css设置其为块级的元素。

属性

每个标签都有自己的属性，比如表单的标签会有很多的属性，例如class id href src等。

一个完整的HTML文档

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>我的测试站点</title>
</head>
<body>
    <p>这是我的页面</p>
</body>
</html>

<!DOCTYPE html>: 声明文档类型。

<html>元素，这个元素包裹了页面中所有的内容，有时被称为根元素。

<head>元素，这个元素是一个容器，它包含了所有你想包含在HTML页面中但不在HTML页面中显示的内容，<head>元素中包含了例如css、js、meta等。

<meta charset="utf-8" />这是一个HTML文档的属性，meta有很多文档属性。

<title>是文档的标题

<body>元素是页面内容文档，包含了你访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。

head meta HTML的元信息

<head>
<title>头部信息</title>
</head>

头部信息在HTML加载后并不会像body内容一样渲染在页面中，head的作用是保存一些页面中的元信息。 元数据在某些大网站中会有很多，一些比较常用的有：

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>“头”里有什么——HTML 元信息 - 学习 Web 开发 | MDN</title>
<meta name="author" content="Chris Mills" />
<meta name="description" content="description" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="my-css-file.css" />

还有一些例如连接css、js文件的，站点图标favicon的。 还可以在head中的<script></script>中直接写入JavaScript，<style></style>中直接写css样式。

body HTML文档的具体内容

body用来组织页面需要渲染的内容，所涉及的标签很多，比如文本、列表、表格、链接、图片和多媒体。 标签很多，但他们都是结构化的可以嵌套。随便打开一个互联网的页面都可以看到这些标签。

CSS:层叠样式表

CSS（层叠样式表）用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。这个模块为你掌握 CSS 的过程提供了一个温和的开端，包括它如何工作的基础知识，语法是什么样的，以及如何开始使用它来为 HTML 添加样式。

css应用的方式有三种：

  1. 外部样式表：通过标签引入。
  2. 内部样式表：将 CSS 放在 HTML 文件<head>标签里的<style>标签之中。
  3. 内联样式：内联样式表存在于 HTML 元素的 style 属性之中。

不推荐内联样式，因为不宜维护。

选择器

css的选择器就是标记当前的css样式属于HTML文档中的所对应的标签。 选择器的种类：类型、类、和ID选择器，也可以通过属性来选择元素，另外还有伪类伪元素和关系选择器。

css样式的优先级

  1. 最顶部：!important会覆盖页面内任何位置的元素样式.
  2. 内联样式
  3. ID选择器
  4. class 伪类 属性选择器
  5. 标签 伪元素选择器
  6. 通配符、自雷选择器、兄弟选择器
  7. 继承的样式。

css 长度

绝对长度：

单位 名称 等价换算

cm 厘米 1cm = 37.8px = 25.2/64in

mm 毫米 1mm = 1/10th of 1cm

Q 四分之一毫米 1Q = 1/40th of 1cm

in 英寸 1in = 2.54cm = 96px

pc 派卡 1pc = 1/6th of 1in

pt 点 1pt = 1/72th of 1in

px 像素 1px = 1/96th of 1in

相对长度：

单位 相对于

em 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。

ex 字符“x”的高度。

ch 数字“0”的宽度。

rem 根元素的字体大小。

lh 元素的行高。

rlh 根元素的行高。当用于根元素的 font-size 或 line-height 属性时，它指的是这些属性的初始值。

vw 视口宽度的 1%。

vh 视口高度的 1%。

vmin 视口较小尺寸的 1%。

vmax 视口大尺寸的 1%。

vb 在根元素的块向上，初始包含块的尺寸的 1%。

vi 在根元素的行向上，初始包含块的尺寸的 1%。

svw、svh 分别为视口较小尺寸的宽度和高度的 1%。

lvw、lvh 分别为视口大尺寸的宽度和高度的 1%。

dvw、dvh 分别为动态视口的宽度和高度的 1%。

其他一些细节

这里对css的一些细节不在讨论，因为其内容及其繁多，包含了文本、图片、多媒体、盒模型等等。 属性众多，可以在这里看到详细的教程：css教程

重点讨论css布局

display是css布局中的一个重要的属性，其属性决定了元素在页面中的布局表现方式。

CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。 display详解

弹性盒子：flex

flex

如下代码，其中#demo_a中display:flex;，如果删除这个属性，你会发现，三个盒子会成为流式布局，及每一个盒子都会铺满整个横向的空间，这个例子是比较典型的弹性盒子的例子。

<style>
    #demo_a {
        display:flex;
        width: 300px;
    }
    .demo_box {
        width:100px;
        height: 100px;
        background-color: aqua;
    }
    </style>

<div id="demo_a">
    <div class="demo_box">aaa</div>
    <div class="demo_box">bbb</div>
    <div class="demo_box">ccc</div>
</div>
aaa
bbb
ccc

CSS grid 网格

这里还是举一个例子：

<style>
.grid-demo {
display: grid;
grid-template-columns:1fr 1fr 1fr;
grid-gap: 2px;
background-color: #2196F3;
}
.grid-demo > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 30px;
height:80px;
}
</style>
<div class="grid-demo">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>  
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
1
2
3
4
5
6

浮动 float

float在页面的文字与图片的排版中使用率还是很高的，还有就是清除浮动。下边是一个很好的例子。

float

响应式布局

HTML的头部添加如下meta标签：

<meta name="viewport" content="width=device-width,initial-scale=1">

这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的 100%，在移动端以你所希望的为移动优化的大小展示文档。

媒体查询

@media media-type and (media-feature-rule) {
/* CSS rules go here */
}

它由以下部分组成： 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）； 一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试； 一组 CSS 规则，会在测试通过且媒体类型正确的时候应用。

这里有一个不错的例子：

媒体查询响应式布局

css的内容众多，以上只是一个概括的复习，可以通过提供的连接延伸阅读。

JavaScript

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层，其中 HTML 和 CSS 我们已经在学习中心的其他部分进行了详细的讲解。

一个简单的JavaScript小栗子：

<button id="bt-01">hello</button>
<script>
    const btn = document.getElementById("bt-01");

    function btn_click() {
        let name = prompt("请输入一个新的字符串：");
        btn.innerHTML = name
    }

    btn.addEventListener("click", btn_click);
</script>

通过这个小栗子我们就可以了解到，JavaScript可以动态的修改网页中的元素，但是JavaScript的功能远远不止这些。

页面中添加JavaScript的方式

  1. 内联方式
  2. 内部方式
  3. 外部方式

其中内部和外部方式使用的比较多，上边的例子就是使用的内部方式连接到JavaScript。

JavaScript变量

可以通过 var let来定义变量，let是现代JavaScript定义变量的方法。

变量类型

Number String Boolean Array Object

数字和字符串的操作

网上教程较多，这里略过了。

数组

一些基础的数组操作

条件和循环

略过

函数和返回值

略过

事件

EventTarget.addEventListener()

为dom对象添加事件，该方法允许为一个事件添加多个监听器。 在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。

在事件对象上调用preventDefault()函数，这样就可以停止了表单提交。

事件冒泡及捕获

标准事件对象具有可用的名为 stopPropagation()的函数，当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行 (不会向上冒泡)。

对象原型和原型链

其实这是一个比较复杂的内容，这里只是简单的概括一下。JavaScript 中所有的对象都有一个内置属性，称为它的 prototype（原型）。

实际上所有浏览器都使用 __proto__。访问对象原型的标准方法是 Object.getPrototypeOf()。

JavaScript 异步

由于内容较多，另起一篇笔记： 从回调函数到JavaScript异步编程

JavaScript的事件

未完待续。。。。。

相关文章：