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_adisplay: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的事件

未完待续。。。。。