HTML+CSS+JavaScript 前端三剑客基础知识体系
前端开发的核心技术栈:HTML、CSS 和 JavaScript。内容涵盖 HTML 文档结构、常用标签(如段落、图片、链接、表单);CSS 基础结构、选择器类型及常用属性(颜色、字体、边距);JavaScript 变量声明、函数定义、对象创建及 jQuery 库的引入与基础用法。旨在帮助读者建立前端基础知识框架,理解网页结构、样式与交互的实现原理。

前端开发的核心技术栈:HTML、CSS 和 JavaScript。内容涵盖 HTML 文档结构、常用标签(如段落、图片、链接、表单);CSS 基础结构、选择器类型及常用属性(颜色、字体、边距);JavaScript 变量声明、函数定义、对象创建及 jQuery 库的引入与基础用法。旨在帮助读者建立前端基础知识框架,理解网页结构、样式与交互的实现原理。

HTML (Hyper Text Markup Language),超文本标记语言。 超文本: 比文本要强大。通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本,还可能包含图片、音频,或者经审阅过的学者所加的评注、补充或脚注等。
标记语言:由标签构成的语言。
例如以下代码:
<h1>这是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
这里的 h1, h2 就是标签。
一般来说 HTML 的结构如下所示:
<html>
<head>
<title>第一个页面</title>
</head>
<body>hello world</body>
</html>
解释:
HTML 的基本结构示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>这是一个页面内容</body>
</html>
解释:
<!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件。<html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面"。<meta charset="UTF-8"> 描述页面的字符编码方式。没有这一行可能会导致中文乱码。在 HTML 中,段落、换行符、空格都会失效,如果需要分成段落,需要使用专门的标签。
<p>这是一个段落</p>
<p>这是一个段落</p>
注意:
<img src="rose.jpg">
注意这里的图片的来源就是这个程序的文件的目录下,这是直接路径。
_self。如果是 _blank 则用新的标签页打开。<a href="http://www.baidu.com">百度</a>
<input type="radio" name="sex">男 <input type="radio" name="sex" checked="checked">女
注意:
<div>
<span>咬人猫</span>
</div>
<div>
<span>兔总裁</span>
</div>
<div>
<span>阿叶君</span>
</div>
注意:
CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果。能够做到页面的样式和结构分离。
选择器 + {一条/N 条声明}
代码如下:
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>
注意:
CSS 选择器的主要功能就是选中页面指定的标签元素。选中了元素,才可以设置元素的属性。 CSS 选择器主要分以下几种:
a { color: red; }
.font32 { font-size: 32px; }
注意:这里是有一个点的; 一个类可以被多个标签使用,一个标签也能使用多个类 (多个类名要使用空格分割,这种做法可以让代码更好复用)。
#submit { color: red; }
注意:id 是唯一的,不能被多个标签使用 (是和 类选择器 最大的区别)。
* { color: red; }
注意:* 置页面所有元素,颜色为红色。
ul li a { color: blue; }
注意:这里的的标签是有先后顺序的,不能调换顺序。
.text1{ color: red; }
颜色有如下几种表达方式:
.text1{ font-size: 32px; }
设置的是这个字体的大小。
padding: 内边距,设置内容和边框之间的距离。内容默认是顶着边框来放置的。用 padding 来控制这个距离; margin:外边距,设置元素和元素之间的距离。
<style>
span{
border: red double 2px;
margin-left: 20px;
margin-right: 20px;
}
</style>
这里只列举了 margin 这个外边距的概念,意思就是左右边距是 20 像素。
JavaScript (简称 JS), 是一个脚本语言,解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。
这里的语言主要是用作交互的操作,他与 HTML 和 CSS 的关系如下所示:
具体的代码格式如下:
<body>
<script>
alert("Hello JavaScript!")
</script>
</body>
此时进行输出就是弹出一个提示框,可以看到此时的我们就可以进行点击交互了。
创建变量 (变量定义/变量声明/变量初始化), JS 声明变量有 3 种方式;
var name = 'zhangsan';let name = 'zhangsan';const name = 'zhangsan';注意:JavaScript 是一门动态弱类型语言,变量可以存放不同类型的值 (动态)。所以 var 等可以是任何的类型,包括数组也是一样的。
直接进行函数的学习,关于 JavaScript 的函数方法的写法具体是如下所示的:
function hello() {
console.log("hello");
}
// 如果不调用函数,则没有执行打印语句
hello();
这是第一种的写法,就是 function 加上方法的名字,然后具体的操作,调用就是直接方法名字即可。
var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add);
这就是第二种写法,将 add 变量作为 sum 的返回的值,然后再进行调用操作。
对象的创建和调用:
var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};
// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性,此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法,别忘记加上 ()
student.sayHello();
这就是主要的对象的创建的方式,还有一种就是通过 new 来创建对象,那么通过 new 对象来进行操作的方式如下:
var student = new Object();
// 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();
可以使用 CDN 引入 jQuery 库:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
补充:
最后,就可以粘贴到我们代码中了:
<body>
<script src="jquery.js"></script>
</body>
这样的好处就是:放在当前项目中。引入外部地址,会有外部地址不能访问的风险。
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
$(selector).action()
注意:
$() 是一个函数,它是 jQuery 提供的一个全局函数,用于选择和操作 HTML 元素。那么具体的实例操作就是如下:
<button type="button">点我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$(this).hide();
});
});
</script>
这就是一个点击交互,然后按键消失的操作; 解释:等文件加载完毕后点击了这个按钮就会触发一个方法,这个方法就会导致消失的操作;
这里的事件就是点击操作的事件,但是还有其他的事件如下:
当然还有这个如何获取这个元素的内容:
<body>
<script src="jquery.js" ></script>
<input type="button" value="点击消失按钮">
<div><span>你好</span></div>
<input type="text" value="hello">
<script>
$(document).ready(function () {
var html = $("#test").html();
console.log("html 内容为:"+html);
var text = $("#test").text();
console.log("文本内容为:"+text);
var inputVal = $("input").val();
console.log(inputVal);
});
</script>
</body>
此时可以看到,当我们进入浏览器的控制台的时候,可以发现 html 内容包含了标签,而文本内容就只有文本,不包含其他的标签;
当然这里还有其他的操作,例如添加,删除,以及 CSS 属性的操作。
本文主要讲解了关于前端三剑客的基础认知:HTML+CSS+JavaScript 的基础知识。旨在帮助读者建立前端基础知识框架,理解网页结构、样式与交互的实现原理。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML 转 Markdown 互为补充。 在线工具,Markdown 转 HTML在线工具,online
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML 转 Markdown在线工具,online
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online