当前位置：网站首页>Introduction to website development for zero foundation Xiaobai

Introduction to website development for zero foundation Xiaobai

2022-06-24 16:37:00 【Programmer fish skin】

This tutorial is for students with zero foundation , Explain the three basic technologies of website development ：HTML、CSS、JS, Get you started ！

All the knowledge points of this tutorial , Are the core , Must master ！

After reading this tutorial , You will learn to ：

understand HTML、CSS、JS Their respective functions
Study HTML、CSS、JS Basic grammar
Can write a simple web page

Practice for a quick start , have access to Online editor , After learning basic grammar , Then download the professional website development editor / development environment （ See this tutorial for more information resources part ）.

1. HTML

HTML Hypertext markup language , It is the most basic language for website development , Simple and easy to understand .

HTML Used to define the structure and content of the website , The file name suffix is .html.

When we view the source code of the website in the browser （ ctrl + u ） Or by F12 Open developer tools , The first thing I see is the website HTML Source code ：

The flowers below 5 minute , Study HTML grammar .

1.1 label

HTML Use tag syntax to define the content and structure of web pages , Neat and simple . Labels can also be called elements .

A basic HTML The contents of the document are as follows ：

<html>
  <head>
    
  </head>
  <body>
    
  </body>
</html>

Tags have the following characteristics ：

symmetry ： Each group of labels is open and closed , Such as <html> Corresponding </html> , The words in angle brackets of the same group of labels are the same .
Hierarchy ： Tags can nest tags , Reflects the hierarchical relationship of website structure , For example, text content can be nested in a box .

Simple and easy ： The tag name is English word or abbreviation , Convenient associative memory .

Let's introduce Commonly used labels ：

HTML in , Use  Notation , Not on the page .

Structure of the label , All standard web pages must have only one ：

 <head> <!--  Head tag , Including the basic information of the website 、 Resource Citation  -->

...

 </head>

 <body> <!--  Body tags , Website content  -->

...

 </body>

</html>

Good memory , Compare a web page to a person ,head It's our brains , Store important information ,body It's our bodies , Used to represent content .head stay body On .

Meta information tags , Used to define the basic information of the website , Put it in head In the label ：

<head>

 <title> Webpage title </title>

 <meta charset="utf-8"/> <!--  Meta information , Define the character set as utf-8（ chinese ） -->

</head>

We found that meta The inside of the label is marked with / ending , There is no corresponding label , We call this label Self closing label .

Content labels

<html>

 <head>

...

 </head>

 <body>

   <h1> First level title </h1> <!-- heading Abbreviation ,h1-h6 Corresponding to level 1 to level 6 titles , Bold display , The font size is reduced in turn  -->

   <h2> Secondary title </h2>

   <h6> Six level title </h6>

   <p> The paragraph <br/> A new line </p> <!-- paragraph Abbreviation , It means a passage  --> <!-- br Means line break  -->

   <div> Containers </div> <!--  The most important label , You can nest almost anything , Replace any other label  -->

   <a href="https://www.baidu.com"> Hyperlinks </a> <!--  Hyperlinks , Click and jump  -->

   <img src="https://t.cn/RCzsdCq"/> <!-- image Abbreviation , Display images  -->

   <button> Button </button>

 </body>

</html>

among ,br、img Labels are self closing labels .

The code works as follows ：

Other labels like table（ form ）、ul（ Unordered list ）、ol（ Ordered list ） Wait till you know , All available div Label override .

1.2 attribute

In the code above , You may find that , In some tags, except for the tag name , There's more , such as ：

<img src="https://t.cn/RCzsdCq"/>

In the image tag src yes img Labeled attribute . Property is used to change the style or behavior of a label , A tag can set multiple properties . The grammar is ：

< Tag name   Property name 1=" Property value 1"  Property name 2=" Property value 2"></ Tag name >

Because many properties are available CSS or JS replace , Here for Common properties that will do , Different tags have different properties .

2. CSS

CSS Cascading style sheets , Is the language of beautifying web pages , Simple and easy to understand .

CSS Used to define the style and animation of the website , The file name suffix is .css.

2.1 introduce

Want to be in html Application in css style , It needs to be introduced first css, There are three ways ：

The file import

adopt link label （head tag ） introduce css file ：

<head>

 <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.css" rel="stylesheet">

</head>

href： To introduce css File address （ Absolute path / Relative paths ）

rel： about css file , Fixed for stylesheet

Built in style

stay style In the label （head tag ） Writing css Style code , Valid only for the current page ：

<head>

 <style>

   div {

     color: red;

 </style>

</head>

inline style

In the label to be styled , add to style attribute , Only valid for the current tag ：

<div style="color: red;"> Containers </div>

2.2 Selectors

There are so many tags in the web page , How to apply styles to the specified labels ？ For example, there are two boxes , How to make them one white and one red , Or they all turn red ？

The selector is CSS The core concept , Defines a set of syntax for selecting labels , You can apply the specified style to the specified label .

Must understand common selectors ：

Suppose we have the following html Content ：

<div id="box1" class="box"> The box 1</div>
<div id="box2" class="box"> The box 2</div>
<div> The box 3</div>

The initial operation effect is as follows ：

Universal selector

Select all the tabs of the page （ Elements ）, The grammar is as follows ：

{ ... }

Use less . Usually used to initialize a page , Clear the browser's default style for all elements .

tag chooser

Select all labels with the specified name , The grammar is as follows ：

Tag name {

...

}

You can put the following css The code applies to the above html In content , Change everything div The font color of the label ：

div {

 color: red;

}

The operation effect is as follows ：

id Selectors

It says , In the same page ,id Value must be unique （ Like an ID card ）, It can be used id Selectors change the style of unique elements . The grammar is as follows ：

#id value {

...

}

You can put the following css The code applies to the above html In content , Give two boxes different background colors ：

#box1 {

 background: red;

}

#box2 {

 background: yellow;

}

The operation effect is as follows ：

class Selectors

When we want to change the style of multiple elements , You can add the same... To them class attribute , And then use class Selectors change their style . The grammar is as follows ：

.class value {

...

}

You can put the following css The code applies to the above html In content , To all box Add the same background color to the box ：

.box {

 background: red;

}

The operation effect is as follows ：

Other selectors such as child and parent node selectors 、 Sibling node selector 、 Pseudo selectors and so on can not be understood first , Use less , And can be replaced by the above selector .

2.3 style

CSS You can control the layout 、 block （ Elements ）、 Content （ Text within the block 、 picture ） Wait for the pattern , And add animation effects .

Let's introduce CSS Common styles ：

CSS in , With notes / The comment / Express .

2.3.1 Layout

* {
	float: left; /*  Element float ：left  Left floating  | right  Right float  */
  position: unset; /*  Positioning mode ：absolute  Relative to the parent element  | fixed  Relative page positioning  | relative | sticky  elastic  | unset  Not set up */
}

The operation effect is as follows ：

You can find , Originally, each box occupied a separate line , It was used float After layout , Change to one line , From left to right . This is related to block level and row level elements , The following tutorial will talk about .

2.3.2 block

div {
  display: block; /*  Element presentation form ：block | inline | inline-block | none  Don't show , Hidden block  */
  background: red; /*  Background color  */
  margin: 10px 15px 20px 5px; /*  Outer space （ On the lower left ）px Is the pixel value  */
  padding: 10px 15px 20px 5px; /*  padding （ On the lower left ）px Is the pixel value  */
  margin-top: 1px; /*  Upper and outer spacing  */
  padding-bottom: 1px; /*  Bottom inside margin  */
  height: 25px; /*  Block height  */
  width: 100px; /*  Block width  */
}

The operation effect is as follows ：

2.3.3 Content

div {
  text-align: center; /*  text alignment ：center  In the middle  | left  Align left  | right  Right alignment  */
  color: red; /*  Text color  */
  font-size: 16px; /*  Text size  */
  font-weight: bold; /*  The words are bold  */
  font-style: italic; /*  The text is slanted  */
  font-family: SimHei; /*  typeface  */
  text-decoration: underline; /*  Text decoration ：underline  Underline  | line-through  Delete line  */
}

The operation effect is as follows ：

CSS Multiple color representations are supported in （background、color Equal attribute ）：

Common English words of color ：red\green\yellow etc.
rgb value ： Such as rgb(0, 0, 0) or rgba(0, 0, 0, 0.8)
16 Base color value ： Such as #000000

Above is CSS Common styles , Be sure to practice more by yourself , See the effect changes of web pages caused by different styles .

3. JS

JS Full name JavaScript, Is a scripting language that can run in a browser , Very flexible and powerful .NodeJS When it appears , by JavaScript There are more possibilities , It can also be used as a back-end development language .

JS It is used to define the interactive behavior of the website , The file name suffix is .js.

There are many kinds of interactive behavior , For example, click the button to pop up 、 Fill in the submission form 、 Dynamically update page content, etc .JS It can greatly enhance the function and interest of the website .

JS and CSS equally , All need to be punished html Documents or other js It can only be used after introduction .

3.1 introduce

Want to be in html Application in js Script , It needs to be introduced first js, There are two ways ：

The file import

adopt script label （ Usually in body The bottom of the label or head label ） introduce js file ：

<body>

...

 <script type="text/javascript" src="script.js"></script>

</body>

src： To introduce js File address （ Absolute path / Relative paths ）

type： about js file , Fixed for text/javascript

Be careful ,script Different from the introduction of css Of link label ,script It's a symmetric label .

Built in scripts

Directly in script In the label （ Usually in body The bottom of the label or head label ） Write js Script , Valid only for the current page ：

<body>

...

 <script type="text/javascript">

 	let a = 1;

...

 </script>

</body>

3.2 Basic grammar

Learning any language , Start with basic grammar ,JS Is the same . If you have learned other programming languages before , Getting started will be faster .

Let's introduce JS Basic grammar ：

JS in , Use... For single line comments // The comment Express , Multi line comment / The comment / Express

3.2.1 Basic grammar

JS It's a weakly typed language , adopt let keyword , Can define a variable , Support to pass in various types （ Integers 、 decimal 、 character string 、 Array 、 Object etc. ）：

let a = 1; //  Defining variables 
const b = 2; //  Define constants （ Once assigned , Do not modify ）
let c = a + b; //  Sum assignment 
console.log(c); //  Output 
let d = [1, 2, 3]; //  Define an array , The array contains three elements 1、2、3
let e = {name: 'yupi', age: 10}; //  Define the object , Contains two properties name and age

console.log yes JS The most commonly used function in , Be similar to C Linguistic printf, You can output the value or information of a variable , Help us debug .

3.2.2 Defined function

Function can complete a function . Given input parameters , By calculation , Get the output .

function doClick() {
  let a = ' I'm so handsome ';
  alert(a); //  The value of the output variable 
}

Now the page has a button , How to click the button , Trigger the pop-up window ？

We can bind a mouse click event to a button （ Add properties to ）, When the user clicks the button , Trigger corresponding JS function ：

<button onclick="doClick()"> Button </button>

The operation effect is as follows ：

In addition to binding events by adding attributes to tags , You can also use JS The binding event , The following tutorial will talk about .

4. summary

Let's review the basic language of website development HTML、CSS、JS Their respective functions .

HTML： The structure layer , Define the structure and content of the web page
CSS： The presentation layer , Define the style and animation of the website
JS： Behavior layer , Define the interaction behavior of the website

When developing a website , The three layers are usually developed in sequence , There must be... First html, Define the structure and content of the website , Reuse CSS Beautify the website , Last use JS Add interactivity to your website .