当前位置：首页 > news >正文

Web前端基础

news 2025/7/5 8:40:33

一.说明

如果你要了解web前端领域，那么三种语言是你必须要了解的，即html5、CSS、Javascript是你必须要了解的，通过前面的专栏内容你一定对html标记语言非常熟悉，那么其他两种语言是什么，他们怎么和html联系在一起，之前学习的时候就一直有这个疑惑，这一节通过一个例子来了解他们，即使以后你不了解深层次的东西，但是别人的.`html文件中哪些是CSS，哪些是Javascript，怎么修改得知道。

说实话，博主的前端领域也很差，单纯只是毕业找工作编写个人简历以及平时配合markdown记录学习笔记使用，个人并不在这个领域范围内，所以这个专栏的内容也比较基础。

下面这是网上找的一张非常好的形容这三者之间的关系图：

二.CSS

1.什么是CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！

一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言, 解决了网页界面排版和美化的难题。

2.CSS在HTML5中体现

我们知道如果我们把一个网页源代码导出，它就是一个.html的文件，但是如果你学习过html的话，又会发现里面的很多内容单纯只是html的话就显得有些陌生。

下面是我们html语言常用的格式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body></body>
</html>

添加CSS后其基本结构为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css"></style>
</head>
<body></body>
</html>

对比你会发现其实就是相较于html基础结构多了一对<style type="text/css"></style>标签，其实多的这对标签中间即是你CSS代码存放的位置。

3.CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

● CSS的思想就是首先指定对什么“对象”进行设置,然后指定对该对象的哪个方面的“属性”进行设置,最后给出该设置的“值”。

● 因此,概括来说, CSS就是由3个基本部分一- “对象”、 "属性”和“值”组成的。

比如：p {color:red;text-align:center;}

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来.

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。SS注释以 /* 开始, 以 */ 结束.

三.Javascript

1.什么是Javascript

JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都可以使用 JavaScript。

2.Javascript在HTML5中体现

下面是我们html语言常用的格式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body></body>
</html>

添加Javascrip后的基础结构为：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css"></style><script></script>
</head>
<body></body>
</html>

对比你会发现其实就是相较于html基础结构多了一对<script></script>标签，其实多的这对标签中间即是你Javascrip代码存放的位置。

3.Javascrip用法

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

相较于CSS，Javascrip更多的是设置动态特效，里面丰富的函数供我们使用，来实现动态效果。

四.CSS基础

1.id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=“para1”:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSDN</title> 
<style>
#para1
{text-align:center;color:red;
} 
</style>
</head><body>
<p id="para1">Hello World!</p>
<p>CSDN@终究还是散了</p>
</body>
</html>

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

2.class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSDN</title> 
<style>
.center
{text-align:center;
}
</style>
</head><body>
<h1 class="center">CSDN</h1>
<p class="center">@终究还是散了</p> 
</body>
</html>

类选择器的优先级高于id选择器

3.交际选择器

没有特殊符号，多个选择器写在一起，可以找到同时满足所有条件的标签。

4.选择器分组

可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的, p段落div分区、span都是20像素字体。

h1,h2,h3,h4,h5,h6{color:green;
}
p,div,span{
front-size:20px;
}

五.CSS方法

1.CSS继承

所谓继承,就是父元素的规则也会适用于子元素。比如给

设置为color:Red;那么他内部的元素如果没有其他的规则设置,也都会变成红色。

<style>
p{color:red}
</style>
<p>this is a test to show <em> css Inheritance </em>.</p>

2.CSS伪类

CSS伪类它不是一个真实的类,正常的类是以点开始,后边跟一个名称，而它是以标签开始后边跟个冒号, 再跟个状态限定字符。伪类使得用户体验大大提高。

CSS主要伪类：

常用样式及属性：

字体和文本属性：

3.加载CSS样式

内部样式及之前方法，这里是外部样式

<head>
<link href="layout.css" rel="stylesheet"
type="text/css"/>
</head>

这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接。它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式。

六.总结

今天内容有点难以理解，可以自己结合代码理解！