最近写了一些前端的项目使用了一些框架例，但是突然发现自己的前端基础是如此的渣，渣的自己好尴尬，遂决定重新学习并复习一下前端的HTML CSS JavaScript基础。
HTML css JavaScript是什么？
HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。 CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。 JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）
HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。
典型的例子就是：
<p>我是块级元素</p>
<span>我是内联元素<span/>块级别的元素占用一行宽度，内联的则相互连接在一起，当然你可以使用css设置其为块级的元素。
每个标签都有自己的属性，比如表单的标签会有很多的属性，例如class id href src等。
<!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>
<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用来组织页面需要渲染的内容，所涉及的标签很多，比如文本、列表、表格、链接、图片和多媒体。 标签很多，但他们都是结构化的可以嵌套。随便打开一个互联网的页面都可以看到这些标签。
CSS（层叠样式表）用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。这个模块为你掌握 CSS 的过程提供了一个温和的开端，包括它如何工作的基础知识，语法是什么样的，以及如何开始使用它来为 HTML 添加样式。
css应用的方式有三种：
<head>标签里的<style>标签之中。不推荐内联样式，因为不宜维护。
css的选择器就是标记当前的css样式属于HTML文档中的所对应的标签。 选择器的种类：类型、类、和ID选择器，也可以通过属性来选择元素，另外还有伪类伪元素和关系选择器。
!important会覆盖页面内任何位置的元素样式.绝对长度：
单位 名称 等价换算
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教程
display是css布局中的一个重要的属性，其属性决定了元素在页面中的布局表现方式。
CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。 display详解
如下代码，其中#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>这里还是举一个例子：
<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>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 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，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。
可以通过 var let来定义变量，let是现代JavaScript定义变量的方法。
Number String Boolean Array Object
网上教程较多，这里略过了。
略过
略过
EventTarget.addEventListener()为dom对象添加事件，该方法允许为一个事件添加多个监听器。 在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。
在事件对象上调用preventDefault()函数，这样就可以停止了表单提交。
标准事件对象具有可用的名为 stopPropagation()的函数，当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行 (不会向上冒泡)。
其实这是一个比较复杂的内容，这里只是简单的概括一下。JavaScript 中所有的对象都有一个内置属性，称为它的 prototype（原型）。
实际上所有浏览器都使用 __proto__。访问对象原型的标准方法是 Object.getPrototypeOf()。
由于内容较多，另起一篇笔记： 从回调函数到JavaScript异步编程
未完待续。。。。。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。