This article is suitable for beginners who are learning front-end from scratch.
Even if beginners don’t understand the meaning of code, they should insist on imitating and typing the code line by line, and use physical insights to drive their minds to understand new knowledge.
1. Introduction
HTML, CSS, and JavaScript are all separate languages; they form the basis of front-end technology;
(1) HTML: Responsible for the structure of the web page;
(2) CSS: Responsible for the style and beautification of web pages;
(3) JavaScript (JS): responsible for the behavior of web pages;
We take out the above concepts. As a beginner, you may still not understand it, or you may still be confused. This is normal. Then we will use practice to help you understand. Next, let's write a simple case together.
2. Use small cases to help us understand the concepts of HTML, CSS, and JavaScript.
Note: Beginners who do not understand the meaning of code should insist on imitating and typing the code line by line, and use physical insights to drive their minds to understand new knowledge .
Our goal: imitate Baidu’s input boxes and buttons (Baidu)
1. HTML: Responsible for the architecture (structure) of the web page
I wrote input (text box) tags and button (button) tags, and the running style in the browser is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input />
<button>百度一下</button>
</body>
</html>The display effect when running in the Chrome browser: We can see that the current search line structure is the same as that of Baidu’s homepage.
2. CSS: Responsible for the style and beautification of web pages
We observe the problems with the effects we wrote:
First, the width and height of the text box need to be modified.
Second, click on this button in Baidu. The background color and text color need to be modified.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*将全部标签，自带的内外边距都设置为0，统一由自己单独去写*/
*{
padding: 0;
margin: 0;
}
.inputName{
width: 300px; /* 设置宽度为300px */
height: 30px; /* 设置高度为30px */
}
.buttonName{
background-color: #4E6EF2; /* 设置背景颜色 */
color: #fff; /* 设置文字颜色 */
height: 34px; /*为什么这里是34 而不是30*/
border: none; /* 设置按钮的边框不显示 */
padding-left: 5px; /* 设置按钮左边内边距为 5px */
padding-right: 5px; /* 设置按钮右边内边距为 5px */
}
</style>
</head>
<body>
<input class="inputName" />
<button class="buttonName">百度一下</button>
</body>
</html>Running renderings: I didn’t write too many styles, mainly the basic ones (I’m worried that beginners won’t be able to accept them all at once)
3. JavaScript (JS): responsible for the behavior of web pages
Web page behavior: Mainly refers to the user clicking the "Baidu Click" button. The Baidu website launches a search function.
Here I imitate clicking the Baidu button, a warning box pops up, and then jumps to the Baidu official website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.inputName{
width: 300px; /* 设置宽度为300px */
height: 30px; /* 设置高度为30px */
}
.buttonName{
background-color: #4E6EF2; /* 设置背景颜色 */
color: #fff; /* 设置文字颜色 */
height: 34px; /*为什么这里是34 而不是30*/
border: none; /* 设置按钮的边框不显示 */
padding-left: 5px; /* 设置按钮左边内边距为 5px */
padding-right: 5px; /* 设置按钮右边内边距为 5px */
}
</style>
</head>
<body>
<input class="inputName" />
<button class="buttonName">百度一下</button>
</body>
<script>
//1. 获取“百度一下”按钮的DOM节点
let buttonDOM = document.getElementsByClassName("buttonName");
//2. 给该按钮，添加一个点击事件的监听，当用户发起点击，就会进入function函数内部，执行下面语句
buttonDOM[0].addEventListener('click',function(){
alert("你点击按钮，马上跳转到百度页面");
window.open("https://www.baidu.com/");
});
</script>
</html>At present, JavaScript code is written in the <script> tag, and the knowledge points involved are DOM and BOM.
3. Conclusion
Through this, we roughly understand where the structure (HTML), style (CSS), and behavior (JavaScript) are written, and what they look like specifically. But you will also find that they still know a lot.
For example: when writing styles in CSS, what is class?
For example: in JavaScript code, what are document and window?
Programming is a long process. If you don't take small steps, you won't reach a thousand miles. Don't be too anxious to learn.
Next, we will learn the knowledge of HTML in detail
Learning front-end from scratch (3) focusing on HTML-CSDN blog
4. Digression: The Three Musketeers of the Web
The Three Musketeers of the Web are known to all senior programmers.
Dreamweaver (a development tool that has similar functions to VsCode, but its functions are quite outdated and should not be used by real programmers)
Flash (has been blocked by Chrome due to security issues)
Fireworks
=》These technologies have been eliminated. Beginners should not worry about them, just pretend they don’t exist .