【前端】一文快速回顾 Html+CSS+JS
文章目录
- 前言 Preface
- 1. HTML 快速回顾
-
- 1.1 基本结构
- 1.2 简单语法回顾
- 2. CSS 快速回顾
-
- 2.1 三种引入方式
- 2.2 选择器
- 2.3 布局
-
- 2.3.1 盒子模型
- 2.3.2 定位
- 2.3.3 浮动
- 2.4 简单练习
- 3. JavaScript 快速回顾
-
- 3.1 JavaScript 引入方式
- 3.2 JavaScript 基本语法
-
- 3.2.1 变量
- 3.2.2 函数与箭头函数
- 3.3 简单练习
- 4. 总结
- 参考资料
一文快速回顾前端基础三件套：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>
<head>
<meta charset =" utf-8"/>
<title>Hello worldtitle>
head>
<body>
Hello world!
body>
html>
其中，涉及以下语法概念：
-
标签：HTML由一套标记标签组成，通常就叫标签。一个标签通常由开始标签和结束标签组成。例如，这个示例的
是开始标签，是结束标签，区别在于结束标签在标签名描述之前加了/。有些标签可以自闭，称为自闭标签，意思是省略了结束标签的标签，例如，一个单独的 -
注释：HTML 的注释由
表示，和XML的注释格式是一致的，通常我们使用IDE工具快捷键生成即可。 -
元素：元素是指一个标签开始和结束之间的所有代码。例如，上述例子中的
Hello World!
标签的元素。 -
属性：标签内的看似赋值的操作，称为属性。如上述例子的：
，" 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>
密码: <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 Practicetitle>
<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 contentdiv>
<div class="float-right">Float right contentdiv>
<div class="clear">div>
<div class="position-relative">Relatively positioned contentdiv>
<div class="position-absolute">Absolutely positioned contentdiv>
<div class="position-fixed">Fixed positioned contentdiv>
body>
html>
3. JavaScript 快速回顾
概念
- 属于脚本语言，不需要编译，由浏览器解析执行
- 支持面向对象
- 弱类型语言，不太重视类型的匹配
- 安全性强，交互性强
- 跨平台，有强大的生态系统
3.1 JavaScript 引入方式
与 CSS 类似，Java Script 引入方式分为内联、内部、外部。
内联
内联实际用得较少，通过属性添加，我们了一下即可：
<input type="button" value="按钮" onclick="alert('Hello JavaScript！')">
内部
通过